top of page
02 User sign in page — All Hands — Left hand_edited.jpg

alto sandwiches

Project Overview

The Product

ALTO Sandwiches is a local sandwich eatery based in Malaysia. ALTO Sandwiches strives to deliver healthy and comprehensive dishes that leaves customers’ stomach full. They offer a wide spectrum of competitive menu and pricing. ALTO Sandwiches targets customers from all walks of life, by providing delivery and pick-up options. They are eager to cater to all demographics, which also differently-abled bodies.

Project Duration

August 2022 to December 2022

My Role

UX designer & UX researcher designing an app for ALTO Sandwiches from conception to delivery.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

The Problem

Busy individuals lack the time to prepare a meal, ordering with language barriers & visual disabilities makes day to day life more difficult.

The Goal

Design an app for ALTO Sandwiches that allows users to easily order and pick up fresh, healthy dishes that has various language options and including text-to-speech option.

To find ways to mitigate the  problem, I have undertaken the steps below to first understand my user base.

User Research

I conducted interviews and created empathy map to understand the users I’m designing for and their needs.  A primary user group identified through research were adults and students who were too busy to spend time on meal prep which led me to the pain point of timeThis user group confirmed initial assumptions about ALTO Sandwiches customers, but research also revealed that time was not the only factor limiting users from cooking at home.  Research revealed that other user problems included challenges such as absence of  language options in apps that made it difficult to get take-outs; thus giving evidence there is a pain point in language barriers. Besides that, majority of food ordering platforms were not equipped with assistive technologies which presented me with the third pain point in accessibility.  Last but not least, there weren't any customer support for users with language difficulties and visually impaired users; which directed me to the pain point of support.

 

These pain points gave an opportunity for ALTO Sandwiches to create an app that was accessible for the community.

Google UX Design Certificate - Empathy Map [Website for alto sandwiches].png

Personas & Problem Statement

Persona 1 - JOSEPH AKINYI

Next, using the empathy maps created in previous session; I developed a set of personas to help me understand further the user group I would like focus on. Personas card gave identity and problem statement which provided me a clear description of the users' needs that should be addressed.

Problem Statement

 

Joseph Akinyi was a new college immigrant who needed an app that has translation options to communicate more effectively and efficiently because he had difficulty navigating apps in a language not native to his mother tongue.

Google UX Design Certificate - Persona - joseph.png

Joseph's journey map in his routine daily life is presented below which helped me reduce impact of designer bias when ideating for the new product .

journey map joseph.PNG

Persona 2 - LEAH CHONG

Problem Statement

 

Leah Chong was a doctor who needed optimisation for screen reader usage across apps and websites because she has a visual disability.

Google UX Design Certificate - Persona- leah.png

Leah's journey map in her routine daily life is presented below which helped me identify improvement opportunities when ideating for the new product .

Google UX Design Certificate - User Journey Map [alto sandwiches]-leah.png

Competitive Audit

Then, I researched and identified several direct and indirect competitors present on the market. Competitive audit exercise helped me to solve usability problems and reveal gaps and opportunities present which were applied when ideating the ALTO Sandwiches  app.

ALTO SANDWICHES 2.PNG
ALTO SANDWICHES 3.PNG
ALTO SANDWICHES 1.PNG

Ideation

Later, I did a quick ideation exercise using crazy eight method  to come up with ideas on how to address gaps identified in the competitive audit.

crazy8 alto Sandwiches.jpg

To start the design process, I made the decision to use a matrix structure for the app design which allowed users to follow their own path since the content were linked in several ways.

_edited.jpg

1

Paper Wireframes

Graphic Designer

2

Digital Wireframes

Prototype Designer

3

Low-Fidelity Prototype

Study Group

4

Usability Studies

Paper Wireframes

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

stars wireframes alto Sandwiches.jpg

Each elements considered to be adopted onto the digital wireframe were taken from users pain points found in user journey maps.

 

To ensure they were well suited to address the main pain points, I have made the home screen to reflect the pain point which transcends till the end of the user flow such as language accessibility.

homepage alto Sandwiches.jpg

Refined paper wireframes

Digital Wireframes

This action button directed user to select preferred language

The large images and text allowed user to see clearly without the need to zoom in further; where it was an occurrence within other competitors. Besides, options for delivery and pick-up were added to address user conveniences. 

Description of order summary in clear and large fonts

05 Order Type.png

Moving from paper to digital wireframes in Figma made it easy to understand how the redesign could help address user pain points and improve the user experience of ALTO Sandwiches app.

Prioritizing useful button locations and visual element placement on the main page were a key part of my strategy.

This button allowed user to tap to hear

text translations

User can use either delivery or pick up options

For initial design phase, I have ensured the homescreen started with language accessibility that addressed the user pain points. A text-to-speech button had also been included to be inclusive to all patrons of ALTO Sandwiches.

01 Home.png

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering a sandwich in a preferred language, where the prototype was then used in the usability study.

Usability Studies

Round 2 Findings

Once I was satisfied with the prototype, I conducted unmoderated usability studies to assess how easy it was for participants to navigate through the app. To ensure a seamless output from the study, I have prepared research questions that reduced confirmation bias and implicit bias.

I conducted two rounds of usability studies. Findings from the first study helped guide the design from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needs refining.

Study Type

Unmoderated usability study

Location

Malaysia, remote

Participants

5 participants

Length

5-10 minutes

Parameters Set

Round 1 Findings

03 Select Location.png

Accessibility

Users wanted an easy way to access outlet locations

07 Checkout.png

Payment Options

Users wanted cash option

04 Select Menu.png

Visible Iconography

Users wanted  a clear icon for “build your own” option 

select order - beverages.png

Intuitive Label

Users wanted accessible labels when elaborating the features in the menu

With the basic prototype in place, I started refining the design process. Using the insights gathered from usability study, I created mockups that reflected the brand identity by incorporating various aspects of the design system.

Mobile Mockup

1

Mockups

Mobile Phone

2

High-fidelity Prototype

Wheelchair Icon

3

Accessibility

Mockups

Typography(5).png

Location Picker

Reasoning

Users needed a more intuitive way to access outlet locations

Action

  1. A google map showing nearby outlet tags was implemented.

  2. A pop-up for location selected to allow users to confirm their preference, and a change button if they changed their mind.

no nearby location, what if i am on-call at a different location that i am not familiar, i would not know which outlet to pick"

-Dr.Priya, a medical professional who orders at inconsistent hours

Cash Option

Reasoning

Users wanted additional payment options to be able to place order seamlessly when selecting a pick up option.

Action

  1. Additional option had been added in the checkout process.

  2. Users who selected pick-up option can pay cash at the physical outlet using the order number generated at the end of the checkout process.

"how am I going to make payment if i select pick-up option? There should be a cash option"

-Mr.Sayiss, a student who does not have debit/credit card

Custom Icon

Reasoning

Users needed a clear icon representative to access the “build your own” option on the menu page.

Action

  1. Most users tried clicking on the eye button that represented a preview of the “custom build”. This idea had been reiterated with a new icon, and the preview was placed in the “build your own” page instead of the menu homepage.

"what is this eye button? oh! cool. so you hover over and you can see steps to build a sandwich"

-Ms.Tan, an auditor likes the build your own option as she is lactose intolerant

Before usability studies

After usability studies

Intuitive Label

Reasoning

Users wanted accessible labels when elaborating the features in the menu.

Action

  1. Amends were made to allow users to experience a sense of familiarity when using the app. Hence, icons or labels were carefully identified and replaced to keep users feel at ease.

"why isn't the image clickable"

-Mr.Sayiss, a student who is frustrated some images are not

clickable

App Mockups

02 User sign in page.png
05 Order Type(1).png

Heading towards the final stages of the design process, I had to ideate on the visual branding of my design. To start, I looked at various typography options available, and finally set my eyes on Roboto  that allowed a simple yet sturdy first impression of the page. 

 

Next, I wanted a color grading that was reflective of the company's logo. Hex Code F09CDD7 was chosen whereas Hex Code FFFFFF accompanied it to allow visual balance. A 60-30-10 rule were applied in the overall  colour palette, where Hex Code 000000  was the neutral color and Hex Code FFFFFF  as the second complimentary color whilst Hex Code 6FF7FF  and Hex Code FFFFFF  were implemented with radial designs which allowed emphasis and contrast.

Last but not least, I decided to incorporate symbols and images associated with the main theme of ALTO Sandwiches. Action buttons that were presented in imagery forms were a recurring iconography  that can be seen throughout the mockups.

All the typography, iconography and color schemes are compiled together and presented in the design systems.

Colors(5).png
Icons(4).png

After usability studies

After usability studies

08 Confirmation.png
09 Track order.png
07 Checkout.png
07 Checkout(1).png

Before usability studies

Before usability studies

03 Select Location.png
03 Select Location(1).png
04 Select Menu.png
04 Select Menu(1).png

After usability studies

Before usability studies

select order - beverages.png
select order - beverages(1).png

High-Fidelity Prototype

Subsequently, the final stage of the design process involved including navigation and  interaction features. Based on the usability study, a clear iconography as well as multiple options were the best course of action for ALTO Sandwiches app. I  chose a Z-shape layout that would be best for users with visual disability; enabling users to skim information from left to right, then move diagonally to the left; before being able to scan to the right again.

Regular gestures and motions were used to create a simplistic aesthetic throughout the app.

Accessibility

Lastly, the final touches involved emphasis on making eatery available for various demographic groups.

 

During the ideation phase this product, I wanted to incorporate language options where many eatery lack providing in their apps and websites. This opportunity gap was immediately identified and  focus on users with language barriers and users with assistive technology were intact during designation processes of each screen of the app.

Select Language.png
03 Select Location(1).png
05 Order Type(1).png

01

Language options were necessary to allow non-English speakers to order from the app. The options were catered to 3 other majority languages spoken in Malaysia.

02

A text-to-speech button were added to be inclusive to the disabled community in Malaysia. With this function, users with visibility issues will be able to connect to their device to have a more seamless ordering experience.

03

Take out option and pick up option had been included to provide a more inclusive experience for users from different backgrounds and location.

The entire designing process had allowed me to focus my attention to details that were both visible to the naked eye as well as minor details that were normally been overlooked upon.

Paper bag

1

Takeaways

Pink Stairway

2

Next Steps

Takeaways

Impact

The app made users feel like ALTO Sandwiches thought about how to meet their needs.

What I Learnt

While designing the ALTO Sandwiches app, I learned that the first ideas for the app were only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct more user research to determine any new areas of need.

Conduct more user research to determine new demographic of users.

bottom of page