UX Research, Product Design
Jollibee Mobile App
A mobile ordering app for Jollibee customers to efficiently and quickly order from anywhere, anytime for a contactless and speedy service. Rather than have customers order from multiple different 3rd party apps this is a dedicated app straight from the source with the Jollibee experience they expect.
This project was created as part of Google's UX Design Certificate program. For this project, I decided to create a mobile ordering app for my favorite filipino fast food restaurant Jollibee starting with a simple user flow of ordering through a dedicated Jollibee app.
Project Role: UX Designer
Responsibilities: Conducting User Research, Designing and Prototyping Wireframes
We believe that by creating a straightforward, intuitive mobile ordering app for Jollibee, we will achieve a quicker ordering process and the ability to order from any location. We will know this to be true when we see an increase in mobile orders.
For my initial research phase I wanted to learn about user's experience ordering at Jollibee, so I conducted user interviews with 5 participants. Here are some key quotes:
"Generally now because of COVID they can’t have more than 3 or 4 people in the space. It’s confusing who’s ordering or waiting."
"I think the only problem I had was knowing what to get."
"It’s hard to order sometimes because whenever it’s really crowded you have to constantly repeat your order because sometimes you can’t hear what they’re saying or what you’re saying."
Enrico is a busy father who needs a quick, contactless way to order food from Jollibee because he wants to avoid crows and get back home to his children quickly.
Kaitlyn is a student who is new in town and needs a way to get recommendations on food to eat at Jollibee because she wants to try new foods and doesn't know where to start.
Now that I have empathized, defined, and ideated, I began the design process by sketching out some ideas on the app layout based on my persona goals and knowledge of Jollibee using Procreate.
From my lo-fidelity sketches, I used Figma to convert them into Digital Lo-Fidelity Wireframes, then added interactivity to the components to create a a digital lo-fidelity prototype.
Once my first lo-fidelity prototype was created, I began the first phase of testing. I created a research plan with details of my research, goals, and my script. After, I took detailed notes and sythesized the data into an affinity diagram with various themes using Figma's collaborative whiteboard Figjam.
Some key insights from user testing:
Based on the feedback I revised my lo-fidelity wireframes. See before and after below.
After the lo-fidelity wireframes were finalized, I moved onto hi-fidelity wireframes and prototypes. This hi-fidelity prototype was designed with Jollibee's brand in mind and with user's in mind.
I also wanted to ensure that the prototype met accessibility standards by ensuring text was large enough to read, there was sufficient contrast between colors and elements, and adding a change language feature for users who doesn't have English as their first language.
Click through the hi-fidelity prototype below or select the button below to view it in a new window.
My next steps would be to go beyond this first user flow and design and prototype additional screens for the app. The next flow I am thinking of is the rewards aspect of the app and how to encourage the user to come back and keep using the app. I also want to try and implement additional features for accessibility such as reading text aloud.
© Ashley Santiago 2020 designer