What is Bevande?
Bevande is a responsive web app that provides beverage recipes to users.
Bevande is a responsive web app that provides beverage recipes to users.
Purpose and Role
The purpose of this project was to create a beverage recipe app from scratch. My role in the project was to put together all UI and UX deliverables.
The purpose of this project was to create a beverage recipe app from scratch. My role in the project was to put together all UI and UX deliverables.
Objectives and Deliverables
- Conduct user research
- Create MVP document
- Create user flow map
- Put together a branding guide
- Create high-fidelity, responsive wireframes
- Conduct user research
- Create MVP document
- Create user flow map
- Put together a branding guide
- Create high-fidelity, responsive wireframes
Tools
- Adobe XD and Illustrator
- InVision
- Adobe XD and Illustrator
- InVision
User Research
The user research part of this project started with creating a script and then conducting interviews with 3 users within the target market. This covered questions that went into detail about individual demographics and psychographics, as well as what they value most in a recipe app.
Once I had conducted the interviews, I synthesized the results and made note of any recurring themes and what was most important to the interviewees. That information allowed me to put together the following user personas. These are Bevande’s “ideal users.”
MVP Document
The object for this MVP document was to understand which features are considered essential for the user to find and save recipes with ease. Users would need to be able to use this app to find recipes for alcoholic and non-alcoholic drinks, save them to a favorites list, and rate and review individual recipes.
User Flow Map
Once the user stories were identified in the MVP, I was able to put together 5 individual user flows that allow the user to complete essential tasks on the app. Below is the master user flow diagram that shows all of these tasks in one and how they relate to one another.
Exploratory Sketching
With the user flow diagram complete, I started sketching out ideas for individual screens using the Crazy 8s method; a technique that involves taking 8 minutes to sketch out as much as possible (my favorite exercise!) This allowed me to use my intuition to figure out where elements should be placed.
I then used these sketches to make the first set of mid-fidelity wireframes.
Style Guide
The first step in creating Bevande's style guide was to create a mood board. Since I knew from the get-go which photography style to use in the app, I used photos as my first source of inspiration. The imagery is bright and fresh, bringing a thirst-quenching quality to the app. From there, I extracted a color palette and then chose a cohesive font.
Typography
Final Mockups
With the style guide complete, I applied the styles to one screen to put together the responsive designs for web and mobile. The “selected recipe” screen has been created in three different sizes: S, M, and L to accommodate viewing on a mobile device, tablet, and desktop.
Once this stage was complete, I applied the style to all of the mid-fidelity screens and created mockups to show how the app would look when finalized.
