A case study on the Just Eat food order and delivery mobile app: UI Design for a Mystery Order feature
The brief
As a MSc Digital Design student at Southampton Solent University, I was challenged to define a design problem to be solved through research, user feedback, and a 6-screen clickable prototype. This portfolio will document the entire design and production process from inception through to the final design.
Background
Knowing I wanted to focus on mobile applications I kept the thought in the back of my mind as I went about my daily business. It was a Friday night and myself and my fiancée decided to treat ourselves to a takeaway, this is about as exciting as life gets in a covid-19 lockdown. We went on the Just Eat mobile app and because we live in the centre of town we were spoilt for choice in terms of restaurants. We spent over an hour trying to decide what we wanted to order and then opted to not get a takeaway at all. This phenomenon is called the Paradox of Choice or in the UI industry, it is more commonly known as Hick’s Law (as described in Interdisciplinary Interaction Design). The theory suggests that the more choices one has, the more time it will take to process a decision, even stopping the decision from being made. The new Mystery Order feature will solve this by making the choice for the user; delivering a highly rated takeaway that takes into account the dietary specifications, order history, and budget of the user.
Aim
Create a robustly tested clickable prototype of a new Mystery Order feature for the Just Eat app.
Approach
Design Thinking Process
After conducting research I decided to utilise the Design Thinking Process for the development of the clickable prototype for the Mystery Order feature on the Just Eat app. This solution-based approach focuses on understanding the human needs involved in the design problem.
Empathise- This is the first stage of the Design Thinking process. Using empathy to gain an understanding of the problem needed to solve.
Define- Next is the Define stage. Analysing the information created and gathered during the Empathise stage. To define the core problems as a problem statement in a human-centered manner.
Ideate- The third stage of the Design is to start generating ideas. Using the solid background developed in earlier stages identify new solutions to the problem statement.
Prototype- Next produce a number of inexpensive, scaled-down versions of the product or features. Tested locally to identify the best possible solution for the problem.
Test- Test the complete product using the best solutions identified during the prototyping phase. The results generated are used to redefine problems. Develop an understanding of the users (how they think, behave, and feel) and the conditions of use.
This is a non-linear process therefore the stages do not need to be completed in any specific order, can occur in parallel, and be repeated. This gives me the freedom to follow where the solutions take me looking at the stages as different facets that contribute to the overall goal rather than successive steps.
During the testing stage, I opted to use Guerrilla Usability Testing by approaching an individual, gaining their consent, explaining the task, and asking them to express their thoughts and feeling aloud during the duration of the test. Alongside this, I asked open-ended neutral questions to allow me to empathise with them and help define any problems that could influence the Ideate and Prototyping stages of the process. This was all done within the recommended Covid-19 safety guidelines.
UI design approach
In order to match and expand upon Just Eat’s current design, I chose a Flat 2.0 design approach. This allowed me to match the simplicity of Just Eat’s app and also provided room to experiment within the new Mystery Order Feature. Flat 2.0 design provided a number of benefits for my new feature including:
- readability and legibility
- shapes, colours, and fonts created a clear visual hierarchy
- intuitive navigation
- Minimalistic modern look
Research and analysis
Food delivery
I researched competitor food delivery apps by searching the Google Play Store for “food delivery” and downloading the first 3 apps (Not including just eat or advertisements). The first three apps used were:
I identified 5 elements that inspired me and that I wanted to incorporate into the design for the Mystery Order Feature:
- Order progression/ tracking page
- Shadows to show interactive elements of the app
- UI Interface Illustrations
- Clear simple icons throughout the app
- “New” label on the feature on the homepage
Mystery Order
Alongside the food delivery apps, I also reviewed three mystery box websites to seek inspiration for my design.
I identified 3 elements that inspired me and that I wanted to incorporate into the design for the Mystery Order Feature:
- Tiered mystery boxes (Varying in size/ price)
- Use of the term “ Surprise”
- How it works page/ section
Prototyping tool
The tool I have chosen to tackle this challenge is Figma, which is currently very popular amongst Digital Designers. Y Media Labs posted a Medium Article “10 designers share 10 reasons why Figma is an essential tool for design collaboration” in which there is a clear consensus that Figma is the most effective tool for remote design and teamwork. In my opinion, the three best features of Figma are:
- Cloud-based- This is a huge plus for me as it means I can work from any computer that has an internet connection. Also, the version history is a life saver when experimenting with ideas.
- Mobile App- the preview that is available through the mobile app is not only a great way to check your work but a fantastic user testing tool.
- Free- Finally my favourite feature is that Figma is free. This has allowed me the opportunity to use a professional level tool without breaking the bank.
Requirements
Screens
- Home screen with button:
This is based on Just Eat’s original home screen but with the addition of a promotional banner for the new Mystery Order feature. This will include a “Find out more” button for users who are intrigued but not sure what the feature is and a “Let’s do it button” for users who want to try the feature straight away.
Landing page of the new feature:
The landing page of the Mystery Order feature provides a choice of the dietary specifications that Just Eat currently offer on their app. These are “Vegetarian”, “Vegan” and “Gluten-Free”.
Learn more page:
This page includes a simple step-by-step explanation of the Mystery Order process with a button the feature at the bottom of the page.
Order info page:
This is where the user chooses their delivery address and pays for the order.
Order progress page:
This page includes a progress bar that correlates to the stage of their order. Also once the order is complete the user is encouraged to give feedback.
Feedback page
This page asks the user for feedback including a star rating system and comment input section. Also, this page reveals the details of the Mystery order letting the user know what restaurant supplied the order and what was included.
Specifications
The analysis of the existing app and other food delivery apps identified the specific design needs, features and functions that needed attention within the Mystery Order feature.
Buttons
Ensure that the affordances of the buttons on the app are clear to the user. This is done by using shape and shadow as mentioned in Flat 2.0 design to help the user identify that the asset can be clicked. This is closely linked to button interaction states that give the user feedback allowing the user to know that the button has been pressed, this is especially important if the button does not take the user to a new page.
Thumbs zones within Fitt’s Law should be kept in mind when choosing how to space and position buttons.
Composition
Maslow’s Hierarchy of Needs will play a key role in deciding the order and positioning of the attributes on each page. Therefore the primary action will be identified and then positioned in the logical place.
Utilise minimum usable design by focusing on visual hierarchy and designing only the necessary content that leads towards the goal of the feature. This will avoid ‘information overload’ from the cognitive load theory.
Design, planning, and implementation
Low-fidelity wireframes for the Ideate, Prototype, and Test stages
Low-fidelity wireframes (displayed below) were used to explore the initial idea for the new feature planning the basic components of the Mystery Order. This included navigational elements, content areas, and image placement. Annotations were also used to explain any details or functions. The wireframes are very simple and bold, drawn with felt tip markers, a ruler, and gridded paper as a guideline. In my opinion, the simpleness of these wireframes allows for freedom of exploration without the worry of making everything look neat and tidy. The process of sketching an idea onto paper really helped to visualise the user journey when using the new feature. Once the low-fidelity wireframes were completed I used them as a rough paper prototype to allow me to test the fundamental use of the feature and get feedback.
Feedback on the low-fidelity prototype
“I like the concept, find it exciting — glad I’m able to choose a mystery order size by price.”
“Clear steps and not too much information on any one screen, helps me to move through the process with ease.”
“Clear buttons (primary action) make it obvious what I need to do next.”
“I’d like to be able to select dietary requirements.”
“Do I click the Pay Now button before adding my address? I’d probably expect the pay now button at the end.”
“Might be good to know what stage of the process I’m in/how many steps there are from the start.”
From the feedback identified from the testing, I redesigned two of the wireframes to remedy problems that were identified in the paper prototype.
Medium-fidelity wireframes
The low-fidelity wireframes provided a brilliant foundation for creating the medium-fidelity wireframes. Using Figma I created a clickable medium-fidelity prototype that included the navigational elements, content areas, and image placement of the feature. No colour palette was used yet as this will be based on the style guide at a later stage. Using Figma helped in revisiting the Ideate stage of the design process. Drawing on paper I had not thought about the scrollable aspect of apps meaning I only designed up until the fold, Figma provided the inspiration and ability to design pass the fold easily. The medium-fidelity wireframes were tested on three people using Guerrilla Usability Testing.
User One
“ The banner caught my attention, I think the ‘new’ label helped”
“I didn’t notice the dietary options when looking at the mystery orders”
“I can’t find a way to submit the feedback”
User Two
“ I am more interested in price than the name of the mystery order”
“Nothing is telling me my payment has been successful or order completed?”
“Didn’t see ‘pay now’ button at first as had to scroll”
User Three
“I didn’t see large Mystery Order, didn’t scroll as doesn’t look like needed to”
“It isn’t clear that I am on the payment screen…did my payment go through?”
“I think the price of the mystery order should be clearer”
The feedback provided valuable insight into how the information on the feature was viewed. There is a clear need to make a lot of the elements clearer as many of them are either not being found easily or not being understood by the users. Also, the information on the feature should be revisited to ensure what the users deem as more important information such as price is clear.
High-fidelity wireframes
Next, I created a high-fidelity prototype based on the previous prototype but taking in the feedback for the test. This time Just Eat brand colours were used, this was found on their website here. Using the brand colour adds to the authenticity of the prototype and really aids the user to imagine what the final app will be like.
User One
“The buttons on the app are pretty small and hard to use”
“The text is also small, I don’t think I would be able to read it without the glasses”
“It is not overly obvious which diet is selected”
User Two
“Can’t read the New text very easily”
“ The Let’s do it button is very small, doesn’t draw my attention, also have to scroll to see it so could get missed”
“Price stands out, is it a button?”
User Three
“The buttons are hard to use because of their size”
“Fading the selection seems like I broke something or makes it look like it’s not available anymore”
“Can I make the text bigger on my phone?”
The feedback from the high-fidelity wireframes show a clear correlation in opinion and highlight very important changes that need to be made in the next stage. All three users mentioned that both the text and buttons are too small, this detracts from the experience of the feature.
Style Guide
I wanted to ensure the feature was consistent through therefore I created a Style Guide which was used throughout the high-fidelity design process:
Final Prototype
Many changes were made to the final design based on feedback and my own developing ideas of what the final product should look like:
Breakdown of key changes made
Buttons
All the buttons within the prototype were made bigger due to the feedback given. Upon further research I found the Touch Target theory that suggests buttons should be no smaller than 44pt by 44pt, this ensures that the design is accessible to all hand and finger sizes.
Secondary Buttons
The secondary buttons were changed to ensure the primary buttons receive the user's attention to increase the chances of the user taking the actions you want them to take. An example of this can be seen on the home page within the promotional banner “learn more” is the secondary button and “Let’s do it” is the primary button which is the call to action.
Selected Buttons
The selected state of a button when pressed was made more clear to improve the user experience through button feedback. This allows the user to know that their action has been successful.
Disabled Buttons
Disabled buttons were utilised until the user has completed the desired action. For example, on the Mystery Order page, the “Confirm Order” button is disabled until the user selects a Mystery Order. This predicts that the user may try a bad action and provides a solution before they do, this is known as error prevention.
Sticky Buttons
To increase the chances or in some cases ensure that the primary action was taken by the user sticky buttons were used. For example, the “Confirm order” button on the Mystery order page is sticky, to be a constant visual reminder to the user.
Text
Similarly to the button the text within the design was increased due to the feedback as can be seen in the design and style guide above.
In some areas for example the Find Out More page the text was identified as being too long and potentially providing too much information. This could contribute to information overload, therefore confusing the user.
Different size text was utilised to aid the reader in accessing the importance of the information provided thus creating a visual hierarchy.
Conclusion
Discussion of testing/user feedback
My favourite part of this project was allowing the users to test the final design, it is awesome to see the progress from the initial low-fidelity wireframes to the finished product.
“Wow, this really seems like a real app. I actually wish the Mystery Order feature was real. The feature is very easy to use and understand” — User One
“ It has been amazing to see the progression of this app, I would defintely use it in real life. The branding across the app really ties it all together, well done” — User Two
“This is a really professional looking app, the illustrations throughout really add to the look.” — User Two
Recommendations
I would highly recommend that Just Eat create a Mystery Order app, the excitement for the idea has been evident with everyone I have spoken to about the idea. Everyone has experienced a time where the paradox of choice has become too much so they just give up, this feature solves that problem for Just Eat.
Photos and their photographers used in this project:
Pizza photo https://unsplash.com/photos/MQUqbmszGGM
Breakfast https://unsplash.com/photos/uAm1CZMdPCw
One person eating https://unsplash.com/photos/idP6ct9jkmk
Couple eating https://unsplash.com/photos/cyAhOnM19cg
Family Eating https://unsplash.com/photos/wYOPqmtDD0w
Map https://www.freepik.com/vectors/travel
Fruit and veg https://unsplash.com/photos/4_jhDO54BYg
Even though the website states that no credit is needed, I want to mention that all the brilliant illustration feature throughout this project were sourced from https://www.manypixels.co/
