OLIO app Onboarding Experience & Item Listing Redesign.

UX case study, Lean UX, Wireflows, Prototyping, User Testings.

Sasha and Tessa, OLIO co-founders

CONTEXT

We were tasked to work in team to help OLIO redesign their onboarding process in 10 days. I had the pleasure to work with Ryan, Rebecca and Haseeb on this brief.

UX Techniques: Surveys, Interviews, Design Studio, MVP, Prototyping, Usability Testings, Wireflows.

Date: June 2017

Client: OLIO

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.

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 experience by changing some UI elements to avoid confusion and introduced the “Little carrot” character.

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

How did we get there?


RESEARCH — Give and Connect

Who are our users? Why are they using OLIO? What should be our main purpose? Is there anyone else doing the same thing? Who are they?

We started to test the app onboarding and carry an extensive benchmark to better understand the market and gather some industry best practises.

We quickly realised that an important key success factor of OLIO was its strong community, so we decided to include some social media app as indirect competitors

Practising the 5“why’s?”

To find out more about our user, we used 4 UX tools:

Key research findings & insights

We used an Affinity Map to consolidate all the datas we collected. We then group them into logical groups until we see some patterns emerging. Here is what we found out after lots of post-it notes and coffees…

Research Findings

DEFINE

Affinity map

We started to create an affinity map with all the data we gathered from the research. We translated everything on post-it and started to see some patterns emerge.

Problem statement

After some discussion, we decided to focus on 2 issues:

How to avoid confusion for new user to avoid drop out?
How to encourage users to post items?
Affinity Map…
… how we wish to create recyclable post-it

Features prioritisation matrix

We then translate our findings into potential app features and prioritised them on a matrix (low/high priority, low/high difficulty). We came up to the conclusion that our Minimum Viable Product (MVP) should have below features:

  • Allow multiple pictures per item.
  • Avoid confusion between Food/ Non-Food.
  • Save user preferences.
  • Photo filter (we deleted this feature in our final design, after we found out people didn’t like it during user testings).
  • Calendar to pick up date and time.
Features prioritisation matrix to define MVP

Reframing the problem

How make it easy, fast and fun to post an item?

Personas

To better visualise and empathise with our user, we created 3 personas representative of our user base. Because of time constraint and business strategy, we agree with the brand to narrow the scope of work to focus on London.

NB: We call OLIO hero, volunteers who go pick up goods and redistribute to their local community

User journey & Scenario

We created a user journey to empathise with our new user in order to design an emotional experience. We created the scenario below:

Paul is eco-conscious but lives a busy life. He newly moved to London and would like to give away his spare furniture.
a simple user journey that identifies main pain points

IDEATE — How to encourage Paul to post his first item?

Brainstorming & Design Studio

Based on the key findings and scenario, we carried an ideation workshop with the stakeholders. We chose to focus on one goal: How to make Paul post its first item?

Design Studio with Tessa, Ben and Neb at Olio temporary home office.

We decided to focus on the Add Item experience which had multiple confusing elements. I led the Design Studio and started with a Crazy 8 warm up exercise to activate our imagination. After 2 rounds of timed brainstorming (total 40min), we were all really happy about the results as we managed to align on design direction.

Design Studio output

DEVELOP & ITERATE

Paper and Digital Prototypes Testings

After the ideation, we immediately started to sketch a paper prototype so we could gather user feedbacks as early as possible.

We later moved to Digital Prototypes (InVision) and iterated several times until people were all able to complete the task defined in our scenario.

Fail until success:)

ITERATIONS

Category

To clarify some terms such as “offered/ wanted”. We deleted the text explanation and added some icons instead.

Food/ Non-food

During the testings, new users keep making mistake by forgetting to choosing between Food or Non food item. So we introduced 2 Toggle Buttons instead of tab.

Camera overlay

Users really liked the ability to post multiple pictures. We also decided to not include the filter feature after many negative feedbacks.

Set pick up adress(es)

Lots of users told us they use at least 2 adresses for pick up: Home and Work, so we added this feature and had great testing feedback.

Calendar: set pick up date(s)

We identified 2 habits :

  • Users that like to plan in advance: we gave them the possibility to tap to select/ deselect date. This generally apply for food supplies.
  • People who don’t know their schedule: we let them select the autofill message.

Homepage tutorial

We realised people got confused when landing on the homepage. So we decided to leverage the existing little “carrot” character.

If we had more time, we would have animated this little carrot

Wireflows

OLIO Onboarding Wireflow
OLIO post an Item wireflow

RESULTS

This was definitely the best part: see our design being implemented an having a positive impact on users and business.

“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

Thank you for reading this. Feel free to leave a comment.

Originally published at www.estellejin.com.