TREATSURE

A new app for a leading food startup

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 talented UX Research Lead.

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

Goals

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 a 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.

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.

Achievements

• Increased user engagement: Redesigned the Treatsure app interface, leading to improved navigation and user satisfaction, boosting daily active users by 25%.

• Food waste reduction impact: Contributed to the platform's mission by enabling the redistribution of over 50 tonnes of food waste since 2017 through a user-friendly design.

Basics

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

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

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.

Discovery - What does 'food surplus' mean to you?

The discovery phase was intense and allowed us to define project milestones, review the existing work and the competitor landscape, get to know our client's vision, begin research into user needs, behaviours and pain‐points.

Our research showed that the concept of 'food surplus' was quite different to users. 5 users were interviewed weekly, to strengthen Treatsure audience and iterate the design of the App. Users' motivations for 'food surplus’ and participating in the research differed, hinting at distinct requirements. After worked on persona types and aligning this with our strategy, we were able to prioritise the early stages.
The phase 1 app focused on supporting the goals of Ana and Peter, our personas.

The personas guided our design decisions and created more empathy amongst the client and our team.

Our persona hypothesis consisted in two different archetypes that were used to facilitate discussions about the needs, desires, and variety usage contexts of our users. Through careful analysis of our research, we have identified enough behavioral patterns to segment our user audience.

These variables were categorized into activities such as frequency of use, thoughts such as food awareness and motivations such as reasons for the consumption of surplus food.

The personas were discussed with our client to get a clear picture of who would be targeting the app design in phase 1 and in future releases.

Discovery - What does 'food surplus' mean to you?

The discovery phase was intense and allowed us to define project milestones, review the existing work and the competitor landscape, get to know our client's vision, begin research into user needs, behaviours and pain‐points.

Our research showed that the concept of 'food surplus' was quite different to users. 5 users were interviewed weekly, to strengthen Treatsure audience and iterate the design of the App. Users' motivations for 'food surplus’ and participating in the research differed, hinting at distinct requirements. After worked on persona types and aligning this with our strategy, we were able to prioritise the early stages.
The phase 1 app focused on supporting the goals of Ana and Peter, our personas.

The personas guided our design decisions and created more empathy amongst the client and our team.

Our persona hypothesis consisted in two different archetypes that were used to facilitate discussions about the needs, desires, and variety usage contexts of our users. Through careful analysis of our research, we have identified enough behavioral patterns to segment our user audience.

These variables were categorized into activities such as frequency of use, thoughts such as food awareness and motivations such as reasons for the consumption of surplus food.

The personas were discussed with our client to get a clear picture of who would be targeting the app design in phase 1 and in future releases.

Discovery - What does 'food surplus' mean to you?

The discovery phase was intense and allowed us to define project milestones, review the existing work and the competitor landscape, get to know our client's vision, and begin research into user needs, behaviours and pain‐points.

Our research showed that the concept of 'food surplus' was quite different to users. Users' motivations for 'food surplus’ and participating in the research differed, hinting at distinct requirements. After worked on persona types and aligning this with our strategy, we were able to prioritise the early stages. The phase 1 app focused on supporting the goals of Ana and Mike, our personas.

The personas guided our design decisions and created more empathy amongst the client and our team.

Our persona hypothesis consisted in two different archetypes that were used to facilitate discussions about the needs, desires, and variety usage contexts of our users. Through careful analysis of our research, we have identified enough behavioral patterns to segment our user audience.

These variables were categorized into activities such as frequency of use, thoughts such as food awareness and motivations such as reasons for the consumption of surplus food.

The personas were discussed with our client to get a clear picture of who would be targeting the app design in phase 1 and in future releases.

The personas guided our design decisions and created more empathy amongst the client and the team.

"The personas guided our design decisions and created more empathy amongst the client and the team."

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.

Tasty experience in all levels

Good food is worth eating,
the app should be too.

Tasty experience in all levels

Eating good food is worth,
the app should be too.

Tasty experience in all levels

Eating good food is worth, the app should be too.

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.

For all user flow, our aim was to amplify the positive aspects of engaging with surplus food and help users focus on the good memories associated with it. That's why we applied principles of emotional design, therefore we focused on 2 levels of of cognitive responses:

Visceral: Users’ gut reactions to or their first impressions of Treatsure app, e.g an uncluttered user interface that suggests ease of use.

Reflective: After users encounter the designs, they should consciously judge its performance and benefits, including value for money. If they’re happy, they’ll keep using it, form emotional bonds with it and tell their friends.

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

We also applied techniques of Emotional Design within the onboarding screens to inspire users about surplus food. We used a variety of techniques to evoke emotions in users, like great use of color, typography, writing and imagery.

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!"

Preston Wong, CEO & Lead Innovator