Benny's Bakery App Design
First Full App Design
Summary
This was the first project that I did for Google’s UX certification. It was a huge learning experience. I went through a whole design process, from researching and coming up with sketches and ideas to creating a high-fidelity prototype and testing it with potential users. I followed along with the course so I did all the steps that they suggested that I do. Throughout this project, I started to develop my own design process and found parts that worked better for me.
The Details
Here are all the details of this project.
The Beginning Steps and Research
A Survey
I created a survey with 9 questions. The questions included some demographic information as well as questions about menu and ordering apps. I received 18 responses. I decided to go the survey route because I wanted to get a range of responses from a range of people. I used the survey results and demographics to come up with two user personas.
A Competitive Audit
I completed a competitive audit on 3 competitors, two direct and one indirect. The competitors I checked out were Doordash, Dunkin’ Donuts and Instacart. I looked through their websites, apps and what they offered.
I took note on:
- First impressions – desktop and mobile
- Features
- Accessibility
- User flow
- Navigation
- Brand identity and visual design
- Content tone and descriptiveness
User Personas
As part of the course requirement, I created two user personas. I based these personas off of the people who responded to my survey.
Starting The Design
With Sketches
I started designing this app by sketching a few different versions of each page of the app. I then picked parts of each sketch that I liked the best and combined them into one sketch. This left me with 1 combined sketch for each page. After I had a final version for each page, I adjusted the design to fit on a mobile device.
Then Wireframes
After sketching my final paper wireframes, I turned them into digital wireframes. I created these digital wireframes in Figma.
First Prototype
Creating My First Low-Fidelity Prototype For User Testing
On To Usability Testing
Using The Prototype
I used the low fidelity prototype to test my wireframes on 5 users.
– 2 males, 3 females, ages 20-70, working adults
– 30 minutes per participant- United States
– Users were asked to look through an app prototype and answer a series of questions
– What doesn’t work?- What could be improved?
– Is the landing page necessary?
– Does the menu page include enough?
Implementing Feedback
Once I got feedback from users on my designs, I went back to my wireframes and made updates. I adjusted icons and added a page.
Next Steps
Creating Mockups From The Improved Wireframes
After creating paper wireframes, digital wireframes, a low fidelity prototype and user testing, I turned the wireframes into mockups. I added copy, images, colors, fonts and shading.
High-Fidelity Prototype
2nd Prototype, 1st High-Fidelity Prototype
What I Learned
- This was my first project using Figma, so I learned a lot about the tool.
- I learned how to test my designs on real users, take their feedback and make my designs better.
- I learned how to research my idea before starting the actual design.
- I learned a lot about the design process, including all the steps and the general order.