Designing an ordering app for Australia’s fastest growing food franchise. This is the story of how I designed a seamless ordering experience for 72 Roll'd stores.

Scroll down arrow
Roll'd storefront

Project Details

It all started when Roll’d CEO, Bao Hoang's family escaped Vietnam by boat with nothing besides his family’s traditional recipes. Fast forward a few years and 72 stores later, the Roll'd Vietnamese inspired street food phenomenon is now the fastest growing Australian restaurant chain.

My role

While working at jtribe, I was the design lead tasked with designing Roll’d’s MVP ordering app for iOS. I collaborated closely with product owners, BA’s, researchers and external development partners. I was responsible for user research, conceptualizing and prototyping MVP features, interactions and visual design.

The challenge

Roll’d were experiencing rapid growth and wanted to prove market fit for an app that aimed to solve the following problems:

Busy store and rolld map

Reduce foot traffic in popular stores

Roll’d were experiencing POS bottlenecks during busy lunch hours which created long queues. This frustrated people in the queue, deterred prospective customers and negatively impacted the company revenue.

Define an MVP to be used in 72 stores

With an avalanche of product ideas and visions from various stakeholder teams and franchisees, we had to coach and focus a myriad of non-technical teams to follow a human-centered product design approach.

What does winning look like?

The product owners' launch strategy involved testing the product within 3 stores before rolling out internationally. Our team worked closely with the product owner and client to understand our success metrics:

The approach

Roll’d had previously engaged a marketing agency to design this app, resulting in a poor outcome that was ultimately thrown out. As a result, we had a huge task of building trust and designing a solution within a three week runway. Because of the tight time-frame, I opted for a lean and efficient approach, dividing research and design into three parts:

Project process

Observe. Eat. Repeat.

As soon as lunchtime arrived, I ventured out to the busiest Roll’d franchise in the city to “endure” the ordering experience for myself. My goals were to understand the challenges customers faced during the order process.

Project process


Poorly visible menu

Ordering on the spot

The menu was hard to see unless you were close to the front of the line. By the time I was served, I hadn’t figured out my entire order and I stalled for time which caused a longer wait for people behind me.

Poorly visible pick up point

Unclear pick-up point

The pick-up point was hidden along the side of the shop and wasn’t initially clear. I eventually spotted it when I saw a group of people waiting nearby with similar looking blue buzzing devices.

Menu with confusing language

Cultural gaps

Nước Mắm Pha? Nước chấm? Hoisin? Sriracha? While these condiments may be familiar to those in the know, understanding these flavours could prove challenging to unfamiliar audiences. This also begs the question - what pairs better with what?

Visualizing the moving parts

I worked with subject matter experts, product owners and point-of-sale engineers to create our Service Blueprint - this helped fill in gaps from my own experience, build ordering context and uncover opportunities for improvement.

Customer journey

What do customers think?

I worked with the marketing team to conduct surveys, gauging the customer’s desire for an app, value set and buying habits.

Survey data

Using this data, we created personas and selected frequent customers as our primary audience as they were most likely to download an app. We also used these insights to influence the app’s design direction.

Key insights

Prototyping the MVP in 3 days

Our boardroom was booked - stakeholders, engineers and product owners alike were eagerly sipping coffee as we began to browse existing research and conceive our core flows.

Whiteboard sketches

Initial solutions

Pooling the team’s expertise, I conceptualized solutions that leveraged our research, were technically feasible and worked within business constraints.

Onboarding wireframe Menu wireframe Ordering wireframe Ideation wireframe Speed optimization

Testing the prototype during peak-hour

Prototype in-hand, we set out to Roll’d’s busiest store during lunch to simulate the prototyping experience. The user testing task was simple: while waiting in the queue, users were handed the prototype and asked to order a specific menu item which we had prepared at the pick-up zone. Unguided, we observed how they navigated the entire experience. We used to record the sessions.

User testing

Key learnings:

Worthy updates.

After securing buy-in from the CEO, we moved ahead and updated the prototype.

Wireframe mockup Wireframe updates

Polishing the experience

Designing the remaining flows

After fine-tuning the MVP’s happy path, I started working on additional flows, page states and experiences to make sure our MVP was robust enough for in-store testing.

App flows

Interaction guidelines

I designed a lightweight design system to ensure consistency, design pattern reusability and interaction guidance for external development teams.


Accessibility considerations

I made sure the design was robust for the visually impaired and easy to navigate for people using the iOS's VoiceOver feature.


Creating the visual layer

Visual designs Outcome

Phew, that was long. Thanks for reading!

Feel free to reach out or check out some other work samples.