My Role

I was part of the pitch team and participated in the experience, strategy, research and UI design of the iOS app. I led the UI Design work, producing all major screens and I worked alongside a UX Research Lead. Although the experience & design are done, the app is under development.

My Role

I was part of the pitch team and participated in the experience, strategy, research and UI design of the iOS app. I lead the UI Design work, producing all major screens and I worked alongside a UX Research Lead. Although the experience & design is done, the app is under development.

Basics

UX Research Lead: Heloise Jutteau
Senior Product Designer: Fabricio Goes

Basics

UX Research Lead: Heloise Jutteau
Senior Product Designer: Fabricio Goes

The challenge

Our client approached us with a primary objective — to enhance their app's usability beyond their competitors (Olio, Makan Rescue and Karma App) as well as promote awareness of wasting food in the Singapore community.

We were tasked to deliver an iPhone high‐fidelity prototype to our technical production partner within 2 months. A fixed deadline and usability testing meant we needed to get the experience right in the first weeks.

The challenge

Our client approached us with a primary objective — to enhance their app's usability beyond their competitors (Olio, Makan Rescue and Karma App) as well as promote awareness of wasting food in the Singapore community.

We were tasked to deliver an iPhone high‐fidelity prototype to our technical production partner within 2 months. A fixed deadline and usability testing meant we needed to get the experience right in the first weeks.

The previous app

As seen below, the previous app lacked usability, consistency across screens and a strategic experience. Considering other apps from the same context and field, we thought of defining our approach invariably based on the user experience and the differentiation of the business as a whole.

The previous app

As seen below, the previous app lacked usability, consistency across screens and a strategic experience. Considering other apps from the same context and field, we thought of defining our approach invariably based on the user experience and the differentiation of the business as a whole.

Our approach

Our briefing was to develop and differentiate ourselves in an already mature and competitive market.

We needed to define a desirable app and how it would meet the needs of the users. We were thrilled by the opportunity to create something more meaningful.

We used Stephen Anderson's UX Hierarchy of Needs which influenced our product strategy.

Our approach

Our brief was to develop and differentiate ourselves in an already mature and competitive market.

We needed to define a desirable app and how it would meet the needs of the users. We were thrilled by the opportunity to create something more meaningful.

We used Stephen Anderson's UX Hierarchy of Needs which influenced our product strategy.

Our approach in phases

Our approach in phases

A culture with lean UX

We used the lean approach which emphasised rapid sketching, prototyping, user feedback and design mockups.

A culture with lean UX

We used the lean approach which emphasised rapid sketching, prototyping, user feedback and design mockups.

Transparency as a trust model

Ample opportunities for input at all stages of the project built trust and a great environment to share ideas.

Transparency as a trust model

Ample opportunities for input at all stages of the project built trust and a great environment to share ideas.

Starting on the same page

Through several meetings with the
stakeholders, we identified risks,expectations
and built a first vision for the app. 

Starting on the same page

Through several meetings with the stakeholders, we identified risks,expectations and built
a first vision for the app. 

Vision

While our competitors focus on offering different types, sizes of restaurants and food, our vision was to help users get more pleasure out of getting surplus food, and include Singapore's big hotel restaurants in order to help them sell surplus food at a lower price. We knew that big hotel restaurants suffer from wasted food, so we wanted to become an enabler for a better and sustainable Singapore in this field.

Vision

While our competitors focus on offering different types, sizes of restaurants and food, our vision was to help users get more pleasure out of getting surplus food, and include Singapore's big hotel restaurants in order to help them sell surplus food at a lower price. We knew that big hotel restaurants suffer from wasted food, so we wanted to become an enabler for a better and sustainable Singapore in this field.

Improve usability

Our key priority for the early stage was to focus on the first task - simplify the app and stay in usability and convenience.

Improve usability

Our key priority for the early stage was to focus on the first task - simplify the app and stay in usability and convenience.

Amplify the app

In addition to the obvious features of the app, we got opportunities to build an emotional connection with our users, creating a more human and transparent app.

Amplify the app

In addition to the obvious features of the app, we got opportunities to build an emotional connection with our users, creating a more human and transparent app.

Spread the word

We had the vision to empower the culture of food reuse in Singapore, where the most frequent users of the app could contribute by spreading the word.

Spread the word

We had the vision to empower
the culture of food reuse
in Singapore, where the most
frequent users of the app could
contribute by spreading the word.

Brand and experience requirements

To communicate the personality of our app to the main stakeholders (client) and team, we developed some experience principles. These were used to double-check design decisions and describe key attributes for the app experience, for both the users and the brand. We used these principles to drive the aesthetic, feel and overall direction of the app.

Brand and experience requirements

To communicate the personality of our app to the main stakeholders (client) and team, we developed some experience principles. These were used to double-check design decisions and describe key attributes for the app experience, for both the users and the brand. We used these principles to drive the aesthetic, feel and overall direction of the app.

Awareness

Believe in the app for positive change.

Awareness

Believe in the app for positive change.

Sense of togetherness

Enable users empower and transform the food surplus scene, connecting people.

Sense of togetherness

Enable users empower and transform the food surplus scene, connecting people.

Be simple, but bold.

Find a restaurant should be easy with a bold and unique experience.

Be simple, but bold.

Find a restaurant should be easy with a bold and unique experience.

Be encouraging

Deliver unique values, giving users a reason to belong.

Be encouraging

Deliver unique values, giving users a reason to belong.

Design direction

Sketching and storyboarding, we iterated stacks of ideas including the arrangement of UI, data elements, and interactive behaviours. Our vision began evolving into something tangible. A high‐level design experience and the app's anatomy came to live.

Design direction

Sketching and storyboarding, I iterated stacks of ideas including the arrangement of UI, data elements, and interactive behaviours. Our vision began evolving into something tangible. A high‐level design experience and the app's anatomy came to live.

Wireframes

Based on the user flow above, I started to wireframe different options for the home screen and worked on the checkout flow.

Wireframes

Based on the user flow above, I started to wireframe different options
for the home screen and worked on the checkout flow.

Detailed designs

Make important things fast
The main screen has been designed to allow users quick access to primary sections of the application. The size of the photos make tapping easier, the order of the photos are based on ease of reach and the layout was chosen to provide a way for the design to scale for future releases.

The UI strives to be confident. It does not contain unnecessary elements. We choose for clear and readable typography — colours with high contrast to increase legibility in low‑light conditions.

Detailed designs

Make important things fast
The main screen has been designed to allow users quick access to primary sections of the application. The size of the photos make tapping easier, the order of the photos are based on ease of reach and the layout was chosen to provide a way for the design to scale for future releases.

The UI strives to be confident. It does not contain unnecessary elements. We choose for clear and readable typography — colours with high contrast to increase legibility in low‑light conditions.

Detailed designs - Onboarding

The app leverages principles of Emotional Design to help and inspire users to be aware of surplus food. In doing this, we hoped to amplify the positive aspects of getting surplus food and help users focus on good memories. As seen below, we also crafted a good copy with the right tone to inspire emotions as we wanted to create a sense of awareness and let users know they were acting in a sustainable way.

Detailed designs - Onboarding

The app leverages principles of Emotional Design to help and inspire users to be aware of surplus food. In doing this, we hoped to amplify the positive aspects of getting surplus food and help users focus on good memories. As seen below, we also crafted a good copy with the right tone to inspire emotions as we wanted to create a sense of awareness and let users know they were acting in a sustainable way.

Styleguide

In order to bring consistency through the product's user interface and experience we designed a complete Styleguide as showed below.

Styleguide

In order to bring consistency through the product's user interface and experience
we designed a complete Styleguide as showed below.

Testing with users

Through testing with users, we observed that the preliminary app's Home option could be improved. Some users reported not knowing what the first (larger) banners were and that they were very long in width. For that we added a title and respective subtitles for the food dishes.

To act consistently, we've added a title and updated the layout of the 'Near you' section with rounded corners and a more minimalist layout. Some users have reported that when they tapped on 'Buffet' they were expecting to go to another screen. But the primary action would be to stay on the same screen and just switch the 'Buffet' section to 'Groceries'.

We addressed this issue by using a high contrast Tab to increase user cognition and promote a pleasing layout.

Testing with users

Through testing with users, we observed that the preliminary app's Home option could be improved. Some users reported not knowing what the first (larger) banners were and that they were very long in width. For that we added a title and respective subtitles for the food dishes.

To act consistently, we've added a title and updated the layout of the 'Near you' section with rounded corners and a more minimalist layout. Some users have reported that when they tapped on 'Buffet' they were expecting to go to another screen. But the primary action would be to stay on the same screen and just switch the 'Buffet' section to 'Groceries'.

We addressed this issue by using a high contrast Tab to increase user cognition and promote a pleasing layout.

"A thorough research with users helped us to create a fascinating app and branding!"

"A thorough research with users helped us to create a fascinating app and branding!"