Komis Cakes and Bakes strives to provide bakery favorites in-store and online, targeting on-the-go users. View the prototype here↗
The problem: Busy users lack time for food prep and long lines in restaurants.
The goal: Design an app for Komis Cakes and Bakes that allows users to easily order their bakery favorites online.
My role: UX designer designing the brand identity for Komis, and its app experience from conceptualization to handoff-ready designs
My responsibilities: Brand identity design, user research, design ideation, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies
Completed: August 2022 (3 weeks)
Awarded: The Best Bright Color App Designs by DesignRush↗
Research is conducted to empathize with users pre-design ideation.Targeted users include individuals who have a mobile ordering experience in the past year. Five respondents were asked in-person to identify user needs and pain points.
No food size context. Users want accurate size visualizations for better expectations for the products delivered.
Some riders ask to cancel. Unexpected problems on the driver side can stop or delay deliveries which the apps don’t consider for.
Rainy days. Unexpected inclement weather can stop or delay deliveries which the apps don’t consider for.
App text size. Users sometimes have a hard time reading the app content.
Six versions of paper wireframes were first drawn for each screen of the main user flow. The last version on the lower right part of the page represents the refined idea of the layout.
Completed wireframes were connected to make up the ordering user flow. It is used for the first usability study before moving to high fidelity.
View the low fidelity prototype here.
Two rounds of usability studies were conducted for informed design iterations. Round 1 included the low-fidelity version, and Round 2 featured the updated high-fidelity mocks.
Round 1 findings include: main user flow is easy to complete; home screen has one too many sections; and app checkout is slightly abrupt.
Round 2 findings include: high fidelity prototype of the app is easy to use due to System Usability Scale improvement; make cart icon more obvious; and add text size options for accessibility.
Animations were included for better usability. View the high-fidelity mockup here.
Country and language options were included in the Settings to accommodate to non-English speakers. In the visual design, high contrast colors were used for the app and brand to provide visual clarity. And lastly, alt text for images will be implemented for the app to be screen reader friendly.
The impact of research on design iteration. The System Usability Scale (SUS) result went up from the first usability study to the second with 77.5 to 79.5 respectively. This shows that the app is “good” for usability, bordering on “excellent” on a value of 80.
User research with the target users in mind really helps with design ideation. Jumping straight in to high-fidelity will prove to waste more time in the long run.
As per Round 2 feedback, the implementation of pickup mode dropdown functionality in Figma for better usability in prototypes is recommended. Also, expand the payment method and address functionality, as well as the onboarding process flow. Providing translated screens after using the Country and Language feature would be beneficial for accessibility.
