CoffeeHouse
The CoffeeHouse is a fictional regional restaurant offering different flavours of Coffee and other drinks as well as snacks. It is located in the suburbs of a metropolitan city. The CoffeeHouse targets customers specially young commuters and those working in night shift who can utilise their facilities for advancing their careers. They offer competitive pricing as well as healthy snacks and beverages.
Project overview
understanding the user
User research
Personas
Problem statements
User journey maps
User research summary:
I conducted interviews and created empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research was working adults studying online courses to advance their careers and do not want to sit in their room and study.
The users confirmed various challenges and obligations which might hamper their study in their rooms such as internet connection, food etc.
User research: pain points:
Book a table
If the working adults can book a table, they can study from there instead from their room
Order Food
If they can order food from within the restaurant, they need not loose their table and is very convenient
WiFi Connectivity
For studying online courses, a reliable WiFi is necessary and may not have the same connectivity from the room
Secure Online Payment
If the adults can pay from their phone securely, they need not wait at the counter for manual payments
Personas
Persona: Lakshmi
Problem statement:
Laksmi is a retailer, wants to enhance her career prospects, who needs an app to order food in restaurant because she can spend taking on her online course outside of her home in the restaurant
Persona: Ramesh
Problem statement:
Ramesh is a busy marketing professional who needs an an app to order coffee online for his colleagues because he need not wait in the queue and pay at the counter.
User journey maps:
Mapping Ramesh and Lakshmi’s user journey revealed how useful it might be to have a dedicated app to the users to utilize CoffeeHouse app.
the design
Paper wireframes
Digital wireframes
Low-fidelity wireframes
Usability studies
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain-points
Digital wireframes
As the initial design phase continued, I made sure to base screen design on the feedback and findings from the user research
From the usability study, users pointed out that they are not able to select range of dates from the Calendar icon.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of booking a table and ordering snacks and beverages from the CoffeeHouse, so that the prototype can be used in a usability study.
Usability Studies
Two rounds of usability studies have yielded rich insights. Findings from first study helped guide the designs from wireframes to mock-ups. The second study used a high-fidelity prototype and revealed what aspects of the mock-ups needed refining.
Users want better menu to select items
Users want to open Calendar and select date range
Users want better navigation
Food menu - before for better navigation
Food menu - after
Originally, users were given to key in the dates and not enough flexibility to select a range on dates, depending upon their need.
refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups
Early designs allowed for some customisation, but the users wanted a better navigation menu, so I have added the Navigation in the high fidelity mockups
Users wanted to have next and previous icon/buttons on the top of the screen also, so that they don’t have to scroll all the way down to the app.
Key mockups
High-fidelity prototype
The high-fidelity prototype presented cleaner user flow for booking a table and orders food. It also met clean and simple checkout process for the users. Also the users can opt for various options for the food and beverages.
Accessibility considerations
Menu items as big icons, provided alt text for images
Provided navigational elements with icons so that it becomes easier for navigation for differently abled users
Detailed imagery has been used for easy understanding about the menus
going forward
Takeaways
Next Steps
Takeaways
Impact:
Users feel that CoffeeHouse app is good way to book a table and order food so that they don’t have to go to another restaurant and loosing the table.
One user feedback
I have piece of mind, my table is reserved for the entire month :D
What I learned:
While conceptualising the initial ideas are just a beginning in the entire process. The usability study and reviews will provide what is important to users and it greatly influences the iterations of the app design.
Nextsteps
Take more feedback on the existing designs and see if there are any gaps so that we can have another round of iterations
Continue conducting user research for new areas/options to be included in the app