Starved App 📱
A usable and easy restaurant booking app created for tourists
Embedded Files
Project Overview
Project Overview
Brief
Brief
This was part of the Human computer interaction module, with my first time creating a UI/UX application, using heuristics and UX laws
Role
Role
Team size - 3
Lead designer
Responsibilities - creating UX and usability goals, requirements, personas.
Creating low fidelity wireframes, detailing user journey and iterating to hi fidelity
Creating the interactive prototype, focusing on login, home, settings, search and booking process
Results
Results
Within 3 months, I worked alongside my team to create a usable and accessible prototype app that met the brief requirements and UX goals. I grew my awareness of UX design with guerilla usability testing and iteration
I received 92/100, commended for justifying my design decisions, adhering to UX laws and breaking down complex processes like booking for ease of use.
The Process
The Process
Brief requirements
Brief requirements
These helped define constraints that our app must be able to provide functionality for
Personas
Personas
Personas helped define what users would use the app for and how we can go about planning their app journey. I created usability and UX goals for each using the 5 E's to ensure user needs were met and usable design was there from the start of process
Initial designs
Initial designs
Using Draw.IO we created our initial designs around these user requirements. We prototyped what was essential to meet the general use cases as well as getting screens that meet some of our user goals and constraints. These basic prototypes helped visualize the layout of UI elements and grasp the style of navigation we were aiming for.
Points for Iteration
Points for Iteration
Our goals for the next iteration were to streamline our prototypes. Some of the main takeaways were:
Streamline the booking process and break it down
Declutter the screen and provide information that is essential.
Have a pleasant, yet accessible colour scheme and ensure there is consistency with the typography.
Final Iteration
Final Iteration
Our colour scheme was changed from neon to softer colours to increase accessibility and simplify the design to include greater whitespace and less distraction for the user
Login screen
Login screen
Login page was given lots more white space and iconography to help group input processes together.
Continue as a guest function was a quick way to use the app with opportunities to create an account later.
Home screen
Home screen
Home page has common style of navigation through Jakob's law using a similar task bar to other apps to improve learnability and accessibility.
Content has been reduced to induce a sense of safety, therefore you will only find important information like upcoming bookings or a few suggestions to ease users into the experience.
Search screen
Search screen
Text in search bar sign posts this is where the user must type and what. Clearly defined buttons and consistent UI keeps processes easy to identify and learn.
Filters
Filters
Sections grouped under useful headings to create a better visual hierarchy. Using Hick’s law, we reduced options but give enough to effectively meet user’s goals by using popular cuisines than a full list.
We also establish a model of a checklist with our options to make it easier to select.
Restaurant screen
Restaurant screen
Grouped and padded sections chunking information together to ease cognitive burden and focus users attention. Hot spot links can be used to quickly get to Details or Review section making information readily available.
An additional scroll up button appears when scrolling down, so users don't have to sift through large amounts of info to get back up again.
Booking Process
Booking Process
I focused specifically on these screens utilizing my game design background and user psychology to break down tasks
We created a step by step process that effectively reaches the same end goal by reducing cognitive load and presenting processes in a manageable way. The progress bar gamifies the experience creating a goal gradient effect where showing users their progress motivates them to follow through in completing their goals faster and effectively.
It automatically fills in the inputs up top too, allowing users to understand their inputs at a glance with an additional back button to backtrack their steps if they wish to alter something.
Details section required further breaking down with chunking and creating a structured way to completing input fields. This makes an otherwise long winded form, clear and logical by supporting their visual focus and communicating the relevant info in a concisely effective manner.
Booking confirmation designed as an error recovery method, allowing users to overview all their relevant inputs from the previous process and giving opportunities to amend their details. This highlights the user friendly design in helping people reach their goal effectively without error and backtrack easily.
The map page offers information on how to get to your booking including directions up top as well as a shortcut to preview your booking details should the user change their mind.
We used red to distinguish the map itself from the users location and direction pathway. A zoom function is also there to aid readability.
While more of a showcase of potential accessibility options, we demonstrated potential ways to do this. Multiple languages would be useful since the audience is largely tourists.
We chose not to include flags as some nationalities can take offence to different flags representing a single language, so it was better to stay safe.
Learning points
Learning points
This allowed me an insight into the world of UX and HCI. I'm more aware that a lot more design and thought goes into products, therefore a user centric approach meeting their needs and goals is fundamental to usable design
With more time, I would focus on:
Creating an identity around the app so that its playful whilst retaining the ease of use.
Cleaning up the user interface to have better defined typography and styling choices
Designing more user flows, so that the app meets a vaiety of target audience needs
Page updated
Google Sites
Report abuse