LoCo E-commerce App Case Study

UI/UX Design
Client
LOCO, short for “Local Coffee” is local coffee shop located in Iloilo, Philippines. They advocate for agricultural sustainability. Their flagship product is cold brew but they also offer a variety of menu options from tea to food.
Problem
People prefer buying food and drinks through delivery apps due to the pandemic. For some, coffee is an essential drink to kickstart the day
Goals
Design an app for LOCO that allows customers to easily order, customize coffee and have it delivered at their place.
Timeline
May 2021 (4 weeks)
My Role
UX Designer
Responsibilities
User research, wireframing, prototyping, usability study
Users prefer to browse and buy online within the comfort of their home. In the midst of the pandemic, users shift to convenient and safe ways to order food and beverages. It is also important for users to have a wide variety of products to choose from and be able to give feedback or reviews of their orders.
User Research: Summary
Convenience

The app must give a convenient experience to the users through delivery, pick up and advance order. Ordering through the app must be easy, thus requiring only few essential steps.
Variety of Options

The app must show a variety of products for users to choose from. Options for the menu must be easily accessible and visible. High quality photos, proper description and customization options should also be included.
Feedbacking

The app must allow users to give feedback or reviews after ordering. This can be regarding the quality of food, service or the app system and design.
Key Action Plans from User Research
Personas
Problem statement:

Kristine is a goal-driven and health conscious woman who maintains a work-life balance in her lifestyle. She wants to be able to have options that suit her lifestyle when ordering food and beverages.
Problem Statement:

Niel is a hardworking businessman who needs easy access to ordering coffee, because he is busy most of the time. Convenience is a priority for him, since he wants to be able to buy what he needs and stay safe at the same time.
Paper Wireframes

In this process, I utilized the Crazy 8's method of Google's design sprint. I was able to sketch eight distinct ideas at a short period of time and iterated the drafts that will be useful for the digital wireframes.
UX Design Storyboard

This method allowed me to visually predict and explore the possible user experience when using the app. It is composed of minimal sketches wherein both big picture and small picture scenarios were explored.
Idea Generation & Initial Designs
Digital Wireframes

During the initial design phase, I aligned the design based on the action plan from the user research and conducted a competitive analysis of designs from apps such as Starbucks, FoodPanda and Grab. The goal of the analysis is to study and incorporate what designs and systems are familiar to users when browsing and ordering online.
Low-Fidelity Prototype

The low-fidelity prototype connected the userflow from the splash screen, ordering a drink and confirming the order so the prototype can be used in a usability study with the users.
Digital Wireframes & Low-fidelity Prototype
Usability Study
Hotspot areas should be increased.

Based on the prototype testing results, the heatmap shows that users had a difficult time navigating the app due to small hotspot areas. The findings suggested that hotspots should not only be limited to buttons in the given design, since users expect that the whole product card would be clickable.

‍
Improve homescreen utility

The homescreen's space can be improved by including and highlighting only the features that align with the project's goals. Based on comments and feedback received, the Updates and Our Mission features are not a priority, so these can be relocated in the Menu icon instead.
Button states

Some button states for empty fields were active. This made the user flow unclear and confusing. The heatmap shows that users expected to proceed by clicking the active Sign Up button instead of filling out the empty fields.
Second Study Findings (High-fidelity Prototype)
Initial Findings (Wireframes & Low-fidelity Prototype)
Summary

I conducted two rounds of usability studies using the Userberry platform. It consists of pre-survey questions, prototype testing, and a System Usability Scale (SUS) for the second study. The findings from the first study helped me improve the user flow and guide the designs from wireframes to high-fidelity mockups. The second study used a high-fidelity prototype and the results revealed what aspects need to be improved on. The key performance indicators used are time on task, conversion rate and System Usability Scale (SUS) data.
Mode of payment

Most users find it difficult to locate and realize that the mode of payment is required before proceeding to the next step. It does not stand out from the rest of the elements, so emphasis is needed to communicate its importance.
Inactive screens

There are inactive screens that made it difficult for users to have a way back to the expected user flow. These screens should either be made fully interactive instead or not included at all in the prototype to avoid confusion.
Separate prototype tasks

During the prototype testing, observations on screen recordings show that users would check the instructions frequently to figure out the next steps. This disrupts the user flow , so instead of including the whole user flow in one task, these could be divided into separate tasks instead.
System Usability Scale

Four users were able to complete the System Usability Scale and the result is 81.25 which is above the standard average score of 68. This result will be the basis for future tests and is to be used for comparison.
High-fidelity Mockups
The findings from the usability study allowed me to iterate on improving the designs. During the design phase of creating high-fidelity mockups, a style guide was also constructed based on elements found in the existing website and LoCo's branding. View LoCo's high-fidelity prototype.
Key mockups
Instead of users having to click the mode of payment to add their payment option, users will be directed immediately to choose their preferred mode of payment once they click the "Proceed to checkout" button. This is done to emphasize and put the user's focus into the selection, since it is an important step before proceeding to confirm the order.
After the usability study, the home screen design only included features that are most useful to users which consists of a search bar, menu, new deals and local coffee. The menu is emphasized and is easily accessible.
The key action plans were implemented to meet the users' needs. The app allows deliveries, pickups, and advance orders, and it takes an average of 1 min 29 secs to sign up and successfully place an order. A variety of options are presented to the users, the information is straightforward and also allows customization. Lastly, reviews and feedback pops-up after the order is delivered to allow users to share and rate their experience.
Insights
What I learned

Involving the users from the beginning and repeatedly conducting usability studies contribute a lot in improving both the design and UX aspects of the app. When receiving numerous feedback, take everything into consideration but recognize as well whether it is a priority or simply a "nice-to-have". This project also expanded my knowledge on style guides, design systems and conducting usability studies.
Next steps

The next step is to conduct another round of usability studies to validate whether the pain points were effectively addressed and to find out if there are new areas of need.
REESE BRASILEÑO ✺ PORTFOLIO