City food app
CLIENT
City food app,
UK
Services
UI/UX
Research
Date
2019
Challenge
My goal for this project was to create a mobile app to engage the people with limited time for having a meal.
I aimed to create a smooth and fast flow for the users to have a unique and painless experience that would encourage them to use City Food daily.
I aimed to create a smooth and fast flow for the users to have a unique and painless experience that would encourage them to use City Food daily.
Research findings
• User interviews
- Key findings
- Competitive analisys
User interviews
As a first step, I have conducted interviews with busy people who like to go out to the restaurant to understand their motivations when going out, how do they find inspiration, what types of food they prefer and what they experience as the last enjoyable part of the process.
Additionally, I lead users through card sorting exercises to inform the development of categories for the information architecture of the site.
Furthermore, I spent time in the restaurants to observe users behaviour at the restaurant, and consulted with waiters to gain further insight into the steps for ordering.
Additionally, I lead users through card sorting exercises to inform the development of categories for the information architecture of the site.
Furthermore, I spent time in the restaurants to observe users behaviour at the restaurant, and consulted with waiters to gain further insight into the steps for ordering.
Key insights and user personas
Using affinity mapping, I synthesised qualitative data from the user interviews into themes, pointed out key findings and developed two user personas. These personas primed the evolution of the user flows for the website.
Key findings:
Users are looking for
+ The easiest and convenient way to oder and eat.
+ Fast service
+ Source of inspiration
+ Ability to order and pay prior to arrival
User goals:
+ Find a restaurant
+ Gather inspiration
+ Order in advance and pay in the app
+ Connect with friends
+ Share experience
Key findings:
Users are looking for
+ The easiest and convenient way to oder and eat.
+ Fast service
+ Source of inspiration
+ Ability to order and pay prior to arrival
User goals:
+ Find a restaurant
+ Gather inspiration
+ Order in advance and pay in the app
+ Connect with friends
+ Share experience
Competitive analisys
Competitive analysis helped me assess of the strengths and weaknesses of current and potential competitors. With this evaluation, I could establish what makes this product unique and therefore what attributes I can play up in order to attract the target market.
I have chosen 3 main competitors, and I have noticed that Open Table has much more comprehensive offer than Book a table and Reserve, but none of these doesn't have all the features that the user needs.
I have chosen 3 main competitors, and I have noticed that Open Table has much more comprehensive offer than Book a table and Reserve, but none of these doesn't have all the features that the user needs.
Feature analisys
Analysing the features of 3 main competitors, and I have noticed that Open Table has much more comprehensive offer than Book a table and Reserve, but none of these doesn't have all the features that the user needs.
Sitemap and user flow
To represent the structure of the information architecture, I created a sitemap. This helped to show how the pages were related to each other. To demonstrate how users related to the pages, I created user flows based off of my two personas.
Wireframing
Using sharpies and paper to brainstorm what the pages might actually look like, I also conducted research of existing booking app and common UI patterns to figure out what would be intuitive to users as well as modern.
When these sketches were complete, I programmed clickable hotspots in Marvel app and sought out 6 users for testing
When these sketches were complete, I programmed clickable hotspots in Marvel app and sought out 6 users for testing
Mid-Fi wireframes
After testing and iterating wireframes – testing and iterating again, and testing and iterating some more – I contemplated the final design.
Paper prototype: https://marvelapp.com/1ee0922g
Paper prototype: https://marvelapp.com/1ee0922g
High Fidelity Wireframes
In the final implementation, I have kept a similar interface with the main competitors, in order to not change the user behaviour but to add all the features that the targeted user need. By implementing variable rewards through the app, the Hook Model connects the solution to the user's problem with enough frequency to form a habit.
Because colours have a significant impact on our perceptions and emotions, I have used red colour to evoke a specific reaction in your users. Red it's a highly visible colour that is able to focus attention quickly and get people to make quick decisions.
Because colours have a significant impact on our perceptions and emotions, I have used red colour to evoke a specific reaction in your users. Red it's a highly visible colour that is able to focus attention quickly and get people to make quick decisions.
