Annotated Wireframes
What is a wireframe?
Wireframes provides visual representations of an application screen and the placement of major elements and components on a page. Wireframes are typically grayscale to show the application is still undergoing the design process. It will include shapes and placeholders for the main features and components. This is created before the visual design phase
Why we created wireframes?
Wireframes were included in our design process to answer the following questions.
-
Does the screen capture the right sections of system functionality?
-
Are certain components on the page necessary and have purpose for being on a single page?
-
Does the layout make sense?
-
Does the screen provide the right navigational elements?
How we achieved our wireframes?
Our wireframes were expansions of our functional paper prototype which included feedback from a heuristic evaluation process. We also took into consideration of the concepts and benefits of using a grid system. Following the completion of our wireframes, we moved on to our high fidelity prototypes.
This wireframe samples the design of the account creation questionnaire style. The purpose of this step is to gauge the experience level of the user. For example, a user who is medium interested in plant care, but is a beginner at plant care will need extra reminders to water and check up on their plants; an advanced user will not need as many reminders but may use other features our application has to offer. The wireframe shows that this question is step 2 out of 7 in the questionnaire. This page was fairly simple, therefore not many changes were made to go from sketch to wireframe. The only noticeable feature was the addition of the next button to advance to the next page.
This is the "Find Plants" wireframe. There is a search bar at the top that allows the user to search a plant my name or description. To the left of that shows a filter button that allows the user to search by filters that include finding plants that require little to no sun, requires lots of watering, plants that are indoor or outdoor, etc. The tab bar that is under allows the user to switch views to plants that are in stock nearby, recent searches, and recommended plants for the the user. The elements that take the the most space on the page are the plant profile pictures. Then at the bottom is a navigation bar that shortcuts to the other main functionality and pages of the application. The evolution from paper prototype to sketches includes refinement of what was necessary to place on the navigation bar at the bottom. Our team decided rather than having Home, Plants, Search, Q&A, and Settings, it was best to have Home, Search, Camera, Forum, and Profile. Adding the camera to the navigation bar, we were able to rid of the camera icon that was next to the filter. We also had this search page be multifunctional as a page to search for both plants and plant business. Up at the top we have a toggle to switch views from Find Plants to Find Nurseries.
This wireframe shows the visual representation of the forum page in which the most important elements are identifiable. The different tabs are labeled appropriately in which featured topics, my plants, and saved are all distinct. The user icons are also created as well as the caret and heart to indicate that the posts are expandable and saveable. There is also a forum heading at the top to indicate what this page will contain. This page was created to better model how the forum page would appear in which the UI was more clearly displayed when compared to the paper prototypes and sketches. However, because it is still only a wireframe, greyscale coloring, placeholders for images, videos, and text, and a generic font were all used to maintain the lofidelity appearance. This is the middle stage of the design process in which we are synthesizing the best ideas from the sketching phase in order to work our way to creating a final hifidelity prototype. The only significant change was the removal of the upvoting system because we wanted to keep the forum page simple and we thought that the addition of upvoting might not align close enough with our branding as a plant application. It may be out of scope but tracking how many visits a topic receives may be easier and we didn't see a real need to display that to the user. We also removed the user profile because we moved that section to the bottom panel.