Thursday, 4 April 2019

SB3: Wireframe 01

Although I haven't yet finished my research and decided on branding and a name for the app, I thought it best to do a wireframe early on, so that I can iron out any issues whilst developing the design aspect. It also does no harm in starting to actually produce rather than getting lost in research as I often do with briefs. Below is wireframe v.1:


the landing page will be simplistic, a user must have an account to access anything on the app as it is a paid subscription service. the two options will be log in or sign up. 


the log in will simply ask for the users email address and password before the continue into the app. 


if the user doesn't yet have an account, they will be taken to this page - it will include what a brief description of what the app will provide, how much it will cost etc. the user will be able to view the t&cs from here however theoretically this will taken them to a webpage. if they are happy to continue they'll be taken to the personal details below. 


the personal details required are minimal as i learnt from research, if users are faced with long forms they will lose interest and are less likely to continue - to aide this issue i also split the data gathering across 3 different pages. 


the user can input their billing address here and details on the page below. 


i added a 'we accept' to let the user know what card types the app will accept. 


once they have input all their details and the payment has gone through, they will get a welcome message and the option to customise their experience by adding their diet preference. upon reflection i should add a button to skip these steps for those who don't want this experience. 


the progress bar at the bottom will fill as they go from step to step, this is to ensure the user there aren't many more steps left - so that they don't get bored n lose focus/ quit the app. 



upon reflection i would change the words used in this one to beginner, intermediate and advanced - more appropriate for the subject matter



this would be the explore page, full of suggestions and recommendations based on the preferences the user input. if the user skipped these steps it will just show what is popular at the moment across the app. 


the design of this page really needs to be ironed out, but this is a rough idea of what the search page will include, a search bar, the title and then an option to filter your search. 


the results will be in a grid, the results will be a picture of the food, with a title and small description. 


when you click on one of the recipes, it will take you to the recipe page - which includes a larger image, ingredients, method and the option to save this recipe to your personal collection. 


this is the my recipe book page, it is where all the recipes the user has saved will live and will be organised alphabetically, to visit/ edit their account they can click the button at the top and will be taken to a webpage. upon reflection i should add a search option to this page, as it will get tricky to find recipes if the user has a lot. 

I think this wireframe is successful in that is the first draft, i have included the basis of everything that must be included, it will only get more detailed and precise as the design process goes on.  

No comments:

Post a Comment