UX Project: Pizza App
For the past few weeks I have been learning UX and UI. This is something I’ve always had a strong interest in and you can see what I have learnt so far over on my other UX blog.
As part of my self learning I’ve completed a practice mini project. This project is totally fictional but I’ve approached it as if it were a real project. I thought it would be great practice and get me familiar with some of the processes involved in UX.
Client:
Pizza Pies Unlimited
Brief:
Design an application for customers to order pizza at Pizza Pies Unlimited.
The client wants the app to:
- Allow customers to order pizza
- Allow customers to choose a pizza from the menu
- App to send an email to the restaurant
- To keep things simple. Customer pays delivery driver.
- App works on all devices (computer, phone and tablet)
Step 1: Interview the client
My first step in finding out more information was to interview the client and get more insight into their aims and why they want an app. This will give me a better understanding of what the app should do and how it should be developed.
Questions:
What are the goals for creating this pizza app?
“The goal is to definitely make more money”
Why are you creating a pizza app and not sticking to traditional telephone ordering?
“I want to create something that’s engaging and easy to use”
How will we know when this app has been successful?
“I want an increase of sales by 5%”
Who are the users of your site?
“Younger people that are always on their smartphone. Younger people prefer to order online rather than call in a telephone order”
Why would customers use this pizza app? What problems are you experiencing that will be solved by having this app?
“We have lots of new and exciting menu items that takes time and costs money to print on leaflets. The app will make updating the menu an easier task and we want to make ordering pizza from us convenient and easy.”
Step 2: Research & Strategy Document
Here I sum up the business goals and the user goals. To do this I use observational research by observing people as they order a pizza on an app. I chose to research younger people, comfortable with using a smartphone and using apps. They will need to enjoy ordering food online. (Please note — due to current social distancing measures, I wasn’t able to carry out observational research so instead I observed a family member I am living with ordering pizza on an app. Usually I would set about observing up to five people)
Empathy Map:
I used an empathy map to help with my observations.
Business Goals:
- Increase sales through an engaging, fun experience
- Expose more menu items and new items to customers
- Appeal to younger audience
- Increase number of sales by 5%
User Goals:
- Good reviews. Need to know the quality of food and restaurant before ordering.
- Good selection of items. Good to choose your own toppings.
- Minimal effort with payment. Easy to pay.
Archetypes:
Why do they use the product?
Make life easier. Makes it easy to order pizza.
Behaviours and environment?
Lazy night in at home. Television or music on.
Goals, needs and motivations?
Get food as quickly and conveniently as possible with minimal effort.
After researching I found:
The user is a hungry young person who wants to order pizza quickly and with little effort.
After initial research it was time to continue with documentation. Now I had the research information I needed, I was able to continue with figuring out how users may use the app and the vision.
Storyboard
This is the storyboard I came up with for the pizza app. It’s important that the storyboard reflects the users actions and environment and not the app interface itself. The user is always the star in storyboarding!
User Journey
Next, I used a user journey to map out the different stages of the app and what the user does at each stage along with any emotions.
Scenario
Next step is scenario mapping. This maps out potential problems (scenarios) that the user may face with the app and the desired result in how to overcome that problem.
Wireframes
Once I have the storyboard and user journey completed, I can move onto wireframing and really piecing together how the app functions.
- Using the Atomic Method, first I wireframed the components. Looking at the individual Atoms and Molecules.
2. Next I moved onto wireframing the site and looking at how the components piece together in terms of functionality.
3. Finally, I wireframed the landing page for small and medium screens. Thinking about how elements will look on smaller devices.
Prototypes
Next up is prototyping. This is a step up from wireframing as you can now really start playing with where the buttons and other elements are best placed. For this prototype I used a Low Fidelity prototype on paper.
- First I started with how the app will look when the user first enters the site. This differs from the wireframes as I’m now able to play around and switch out different elements in prototyping stage. Here I decided to switch out the ‘about’ section with a ‘deals and offers’ section as this could be a good way to boost sales.
2. The next prototype is how the user will log in to their account. By clicking the ‘Login’ button the following pop up displays. Here the user can log in using their Facebook, Twitter or Email. There is also a button for signing up too.
3. Next I looked at how the site will look once the user has logged in. The only subtle difference here is the the ‘Login’ button is replaced with a ‘My Account’ button. I’ve also added some personalisation by displaying the users name at the top of the site.
4. I now delve deeper into how different elements will perform once clicked. In this prototype this is how the menu button will react to being clicked. A drop down menu will appear listing some of the most popular pizzas under categories.
5. Next I look at how the actual menu page will look. Here the pizzas have been separated into their categories.
6. Next I looked at what happens when you click on a pizza category. In this case you click and photos of the pizza appear with the name of the pizza. These are clickable links.
7. And finally this is a landing page prototype for small and medium screens to show the responsiveness of the app. Again, the layout differs from the wireframes as I was able to play around with different elements switching out the ‘about’ section with a ‘deals and offers’ section.
These are just a few prototype examples. There are of course a lot more to explore for this app!
Below is a basic design I’ve come up with for large and small screen. I have kept to the prototype designs from earlier and I’ve made sure that the layout is clean, consistent and easy to interpret. Keeping the user constantly in mind, I’ve designed the app so that there is minimal distraction. The user is on a journey to order pizza and this needs to be as easy a process as possible.
I really enjoyed using some UX processes for this pizza app and it makes me appreciate just how much thought goes into applications big and small and remembering that all designs should be user centric using as much research as possible. The next stage for me would be to start coding a prototype in HTML and CSS that I can show the client. If you have any further suggestions please let me know!
🙋♂ ️Want to talk?
I’m currently looking for employment. I understand times are very tough with the Coronavirus situation and it’s hard for everyone but maybe we can start talking? I’m always keen to learn new things and discuss ideas and I’m happy to talk remotely with the wonders of modern technology and send a CV and more info.
Please send me an email joshmarston@hotmail.co.uk or drop me a message on Twitter if you’d like to talk and I’ll get back to you.
