I developed the wireframes that I initially sketched on paper with Adobe XD so that I could start to get a feel for the dimensions i'm working with as well as starting to develop a hierarchy using greyscale figuring out what components need to stand out. Using the same font throughout and varying the point size lets me see if the differences are suitable. I am using this draft to figure out the order and navigation of the app and will consider the size of objects/font etc once I have started to develop with a direct comparison blog.
These three art boards show the log in process from when you first click on the app. The first page you land on will show the app logo and give you two options: log in or register for first time users; the reason a log in is essential is so that profiles can be logged into on other devices and 'my garden' and 'social' areas be saved. Adding a 'login/register with Facebook' integration allows the social section to be linked with your Facebook, as well as the login process being quicker if you don't want to manually enter your name, username, email and password. Having said this I will have to add another page that allows you to choose your username after verifying with Facebook.
There are 4 main sections in the app - scan, my plants, search and social. The scan and search pages you can see above are the features you use to identify and add plants to your own space. Social will take you to the profile that has been created when you choose a username. Scan and search will both take you to the possible matches page below.
From the possible matches page you would click on result to take you to the plant profile page which features the information, an option to add to garden and related plants. When you add to garden it would update instantly and take you to that space. If you click on a related plant the same style plant profile would appear with the same option to add to garden.
Above you can see what the standard list would look like for the plants you've added to your personal plant section - similar to the search result page if you click on one you will be taken to the plant profile. The page next to it is your schedule for care I am going to add symbols to represent watering, spraying and cutting down etc. Below are the pages that feature in the social section of the app - your own profile, a newsfeed and an explore page that can be used to search for other users, plants as well as bringing up random posts you may be interested in.
One big thing I need to establish is how the app will actually be navigated around as I haven't given any buttons to go from page to page or a side bar for navigation or to hop from area to area. I also need to add another page for what the search results would look like from the explore page (social) and alter the plant profile to show photographs that people have posted and tagged that plant in. Aside from this I have all of the pages that I need to include for the app to work, the next step is to add visual design and work on prototyping it. I am also going to collect information and photographs that I can use to show example of how the app would work such as for the plant profile. I have decided to scrap the 'add to my garden' and replace it with add to my plants as it is slightly misleading and confusing using two different phrases.
Above I changed the add to my garden to plants so that it is more coherent with the rest of the app. I also added pages for the explore tags of plants as well as the results page for explore social. Below is a first draft of a bar that could feature at the bottom of all the pages to allow navigation throughout the app. From left to right: back button, home button (takes you to 4 sections) search (takes you to scan/search page) leaf button (takes you to your plants) and the circle takes you to social profile.
No comments:
Post a Comment