Chevron left
Back to projects

Ember Room

RESEARCH / USER TESTING / UX / UI DESIGN
Ember Room Cover

Overview

Ember Room was my first project, for the Google UX Design professional certification program. For this project I had to design a mobile app. Ember Room is a ,fictional, and warm inviting space with a modern, minimalist design and focus on delicious, fire-grilled dishes. The product focuses on giving customers the opportunity to save time and money.

Problem

Busy students and working adults do not have the time to prepare their meals, or they need a faster way to order them.

Goal

Ember Room’s app design allows the users to save time and money by supporting multiple modern registering and payment methods, and a rewarding in-app system.

Role

UX/UI designer, UX researcher

Platform

Mobile app

Industry

Food

Year

2023

User rerseach

Summary

After conducting several interviews two groups were identified, young and working adults. Both had in common that they want to save time and money.

Pain points

  1. Time
    Often young and working adults do not have the time to get/prepare their meals.
  2. Money
    Lots of the existing apps have a high cost of ordering / delivering and fidelity is not rewarded.
  3. Complexity
    Complex registration processes make users not even try the apps out.
  4. Accessibility
    If the user manages to bypass the complex registration, is then faced with inconsistent and hard to use designs.

Starting the design

Digital wireframes

As the process continued I transferred the user research findings from paper wireframes to digital wireframes. For the registration process I added the Single Sign On (SSO) possibility.
Low fidelity sign in
Low fidelity homepage
Low fidelity select meal
Low fidelity checkout
Low fidelity payment
Low fidelity checkout
Low fidelity order status
Low fidelity sign in
Low fidelity homepage
Low fidelity select meal
Low fidelity checkout
Low fidelity payment
Low fidelity checkout
Low fidelity order status
Low fidelity sign inLow fidelity homepageLow fidelity select mealLow fidelity checkoutLow fidelity paymentLow fidelity order placedLow fidelity order status

Low-fidelity prototype

The low-fidelity prototype connected the primary user flow of placing an order so the prototype could be used further on the usability studies. View the "Ember House" prototype for placing an order in action:
Low-fidelity

Refining the design

Component library

I created a components library that allowed me to craft the interfaces faster.
Ember room typographyEmber room colors and iconsEmber room navigation and buttonsEmber room controls and toggleEmber room chips and loader

Mockups

Usability studies led to replacing the hamburger menu with a bottom navigation, so that the navigation would be visible all the time and to avoid different camera placements on mobiles. Also quick filters and separate section buttons where fused as space preservation is essential on mobile screens. Also we don’t want to interrupt the ordering user flow.

Digital wireframe

Low fidelity homepage

High fidelity mockup

High fidelity homepage
Also iterating further on usability studies, I found out that the order summary is essential to be displayed until the order is delivered.

Digital wireframe

Low fidelity order status

High fidelity mockup

High fidelity order loading

High-fidelity mockups

High fidelity sign in
High fidelity homepage
High fidelity select meal
High fidelity order
High fidelity checkout
High fidelity order complete
High fidelity order delivered
High fidelity sign in
High fidelity homepage
High fidelity select meal
High fidelity order
High fidelity checkout
High fidelity order complete
High fidelity order delivered
High fidelity sign inHigh fidelity homepageHigh fidelity select mealHigh fidelity orderHigh fidelity checkout High fidelity order completeHigh fidelity order delivered

High-fidelity prototype

Finally the high-fidelity prototype presented a cleaner user flow for ordering, order summary and detailed order status, and order rating possibility. View the "Ember House" prototype for placing an order in action:
High-fidelity

Accessibility considerations

  1. Screen and image reader technologies access is added.
  2. High standard color contrast according to the WCAG  standards.
  3. Icons for easier navigation.

Takeaways

  1. Impact
    Positive feedback from user feedback: “The flexibility of registering and paying as well as the the seamless flow make we want to use this app everyday”.
  2. What I learned
    While designing the “Ember Room” app I realised that the whole design process is essential and no part should be skipped. Each step influenced and helped the application take its final form.
PREVIOUS

Arcanna.ai

NEXT

Wild Clear Initiative

© • Konstantinos Dasoulas • All rights reserved