CONTEXT

Client: OLIO

10 days design sprint

I worked with 3 other UX designers to help OLIO redesign their onboarding experience.

My role: I interviewed current users via phone, carried some onboarding testings, led the Design Studio with stakeholders, brainstormed in team to define our MVP, designed the prototype below and created the wireflows.

Date: June 2017

 
 
OLIO_KV.gif

CHALLENGE

OLIO is a free mobile app with the mission to reduce waste by creating a community where people share surplus food and other unwanted items. 

Olio wanted to attract new users but wasn't sure how to do so. They tasked us to redesign their onboarding experience. 

 

PROBLEM

How to Encourage Users to Take their First “Leap of Faith”: Start Giving?

 

SOLUTION

We designed a fast and intuitive onboarding experience for new users. We also revisited the Item Listing design to  make it more engaging.

TEST THE PROTOTYPE

 

How did we get there?

 

DISCOVER

Competitive Analysis · Surveys · Stakeholder interview · Interviews of current users · Onboarding Usability Testings

We used 4 UX tools to identify user pain points and needs.

We tested Olio competitors app and sum up our findings in a Competitive Analysis.

To better visualise OLIO USP we created a Brand Positioning - we mapped direct and indirect competitors.

 Our Survey revealed people habits and expectations towards unwanted items. 

Our Survey revealed people habits and expectations towards unwanted items. 

 The stakeholder interview helped us understand the business goals and needs, past design iterations failure and the scope of our project.

The stakeholder interview helped us understand the business goals and needs, past design iterations failure and the scope of our project.

The onboarding testings quickly revealed couple of usability issues:

 Too many food pictures...

Too many food pictures...

 ...and a lack of clarity in the brand mission

...and a lack of clarity in the brand mission

 Some onboarding screens were confusing.

Some onboarding screens were confusing.

 We all tested the app and created a task analysis to identify the screens with issues.

We all tested the app and created a task analysis to identify the screens with issues.

We quickly realised our main issue wasn't the onboarding but the homepage...and here is why:

OLIO-Homepage.png

Key findings:

  • Brand mission is confusing for new user. "Wait, I thought it was a food sharing app?"
  • Usability issues on some wording and UI elements.
  • Add item listing screen is not very engaging.
  • Users usually have 2 addresses (home and work) for pick up items (instead of 1).
  • Pictures quality is important. There is also a need for multiple pictures per item.
  • Most of new users were not interested in creating a community via the app, they just need a fast and easy solution to give away things.
 

DEFINE

Task Analysis · Affinity Map · Features Prioritisation Matrix · MVP ·Personas · User Journey

Goals: How to avoid new user drop out? How to encourage users to post items?

 We used an Affinity Map to help us visualise and regroup our datas.

We used an Affinity Map to help us visualise and regroup our datas.

 We then created a features prioritisation matrix to help us define our MVP.

We then created a features prioritisation matrix to help us define our MVP.

 To better visualise our users, we created 3 personas and decided to focus on Paul, our new user.

To better visualise our users, we created 3 personas and decided to focus on Paul, our new user.

  Paul's user journey (created by Ryan) to better empathise with his pain points

 Paul's user journey (created by Ryan) to better empathise with his pain points

Scenario:

Paul is eco-conscious but lives a busy life. He just moved to London and has no longer space for his office furniture and would like to give away some chairs.

 

IDEATE

Design Studio · Crazy 8

How to make it easy, fast and fun to post an item for Paul, a new user?

I led the Design Studio with the brand team and us (7 people).

 After 2 rounds of timed brainstorming (total 40 min) we managed to gather lots of ideas and align on a design direction.

After 2 rounds of timed brainstorming (total 40 min) we managed to gather lots of ideas and align on a design direction.

 In the first round, I sketched a calendar feature.

In the first round, I sketched a calendar feature.

 I initially skeched this for pictures layout. After some team brainstorming we build upon this but changed it into a product summary.

I initially skeched this for pictures layout. After some team brainstorming we build upon this but changed it into a product summary.

 We ended the design studio with the idea of a dashboard like page overview and the idea of pop up overlay to select pick-up time, location and pictures. 

We ended the design studio with the idea of a dashboard like page overview and the idea of pop up overlay to select pick-up time, location and pictures. 

 

DEVELOP - TEST, ITERATE, REPEAT

Wireframing · User Testings · Prototyping (Paper, Low-Fi, Hi-Fi)

Now time to test our ideas! We shared the work to carry as many testings as possible in our limited time. 

 Early sketching/ wireframing

Early sketching/ wireframing

 Paper proto testing

Paper proto testing

Some examples of iterations:

 To avoid confusion and overwhelming user with choices when posting an item, we changed the information architecture. We added a category page to guide users. However we still had difficulty to find the right wording so I suggested to use icons, Ryan found the icons and Rebecca created the hi-fi mockups.

To avoid confusion and overwhelming user with choices when posting an item, we changed the information architecture. We added a category page to guide users. However we still had difficulty to find the right wording so I suggested to use icons, Ryan found the icons and Rebecca created the hi-fi mockups.

 To solve usability issues on the homepage, I suggested to add tooltip using the "little carrot" character. 

To solve usability issues on the homepage, I suggested to add tooltip using the "little carrot" character. 

 I created the new wireflows of OLIO onboarding experience...

I created the new wireflows of OLIO onboarding experience...

 ...and OLIO add item wireflows.

...and OLIO add item wireflows.

 

RESULTS

 
“Sleek! I like it, feels like it’s going to be easy to use. The little carrot is cute!”— Sinead, Olio Volunteer
“Wonderful thank you so much! Great working with you all.”— Tessa Cook, OLIO co-founder
 

Olio reached 250,000 users in OCTOBER 2017.