KiwiCO_A

KiwiCo Referral Page Redesign

My Role:  UX Designer  •  Individual

Design Stack: Figma and Photoshop

Timeline: 1 Week  •  Spring 2020

AN INTRODUCTION

OVERVIEW

About the Project

Background

KiwiCo is a monthly subscription company that provides kids with crates containing educational activities. I received a design challenge to map out my version of a more user-friendly experience on KiwiCo's Refer A Program mobile page.

My key tasks:  user research,  user testing, wireframing, prototyping

The Problem 

Based on the insights gathered from user interviews, KiwiCo customers are confused and overwhelmed by the current experience of sharing referral invites to their friends. 

The Project Goal 

The goal of this redesign is to create an experience for KiwiCo customers to quickly and easily send referral invites by decreasing the cognitive load. 

✧⋄

My Design Process

Keep scrolling to see my design process or click the button below.

After making the necessary changes from the user testings, I moved forward to creating the first iteration.

UNDERSTANDING THE USERS

UNDERSTANDING THE USERS
 

Who am I designing for?

Who am I designing for? 

I conducted research to identify who the users are, understand their needs, and why the referral program benefits them. Due to the one week time constraint, I mainly focused on busy parents, who are the main target users based on my research findings.

In order to understand the targeted users and stakeholders of this project, I visited KiwiCo's website and read various online articles on why businesses benefit from a referral program.

Meet Steve

Meet Steve

He is a parent who works full time and wished he had more time to create or find educational activities for his daughter who enjoys activities that can further spark her creativity.

39ffe69fc0df0602d0c1bee9b3035333.kiwi-crate-for-girls-12-of-17-640×960

How does the referral experience impact Steve's life?

How does the referral experience impact Steve's life?

Through this scenario, we can see how gaining referral credits allow Steve to purchase more crates for his daughter.

Through this scenario, we can see how gaining referral credits allow Steve to purchase more crates for his daughter.
 

Storyboard

PROBLEM FINDING

PROBLEM FINDING 

How might we create a more quick referral experience for busy customers like Steve?

How might we create a more quick referral experience for busy customers like Steve?

I visited the referral page to identify possible user pain points. The current user flow requires customers to go through a two-step process. Customers first input their contact information, which then leads them to the second step where they select an app to share their invites to. 

I visited the referral page to identify possible user pain points. The current user flow requires customers to go through a two-step process. Customers first input their contact information, which then leads them to the second step where they select an app to share their invites to. 
 

wireflow

Key Observations 

The amount of text on the first page may create a high cognitive load for users, making it longer for them to process the information and understand the referral value. Other areas such as the drop-down intention of step 1 and 2, email input, and address book may also be unclear.

The amount of text on the first page may create a high cognitive load for users, making it longer for them to process the information and understand the referral value. Other areas such as the drop-down intention of step 1 and 2, email input, and address book may also be unclear.

DEFINING CORE PROBLEMS

DEFINING CORE PROBLEMS

User Interview Insights

User Interview Insights

To identify the user pain points and validate the findings from my observations, I asked two participants to walk me through their experience using the referral page.

To identify the user pain points and validate the findings from my observations, I asked two participants to walk me through their experience using the referral page.

IDEATING + TESTING

IDEATE + TEST

Iterating on Possible Solutions

Iterating on Possible Solutions

I created digital sketches and narrowed them down based on the feedback from six participants to determine the best ideas to move forward with. 

I created digital sketches and narrowed them down based on the feedback from six participants to determine the best ideas to move forward with. 

Referral Entry Page

Referral Entry Page

Most of the participants mentioned that they did not easily see the sign in option on Version B. So I moved forward with Version A because the sign in and sign up options are more direct and visible. 

Most of the participants mentioned that they did not easily see the sign in option on Version B. So I moved forward with Version A because the sign in and sign up options are more direct and visible. 

Referral_entry_page

Referral Main Page

Referral Main Page

I moved forward with Version A since native sharing is implemented in various mobile apps and it is more personalized to users. Users are able to access their immediate contacts and apps when sending referral invites. 

I moved forward with Version A since native sharing is implemented in various mobile apps and it is more personalized to users. Users are able to access their immediate contacts and apps when sending referral invites. 

However, one potential trade-off is that it will require more time to implement on the developer's end since it's not on the current experience.

However, one potential trade-off is that it will require more time to implement on the developer's end since it's not on the current experience.

Referral_main_page

Further Refining through User Testing

Further Refining through User Testing

I've taken the feedback from the digital sketches to create low fidelity wireframes. I then conducted a moderate user testing on three participants to further refine the solutions.

I've taken the feedback from the digital sketches to create low fidelity wireframes. I then conducted a moderate user testing on three participants to further refine the solutions.

kiwi_wireframe(1)

✧⋄

Proposed Solutions

Proposed solutions

After making the changes from the user testings, I moved forward to creating the first iteration.

After making the changes from the user testings, I moved forward to creating the first iteration.

Current

Entry

Redesigned

PART 1

Easily Understand Referral Benefits

Referral Entry Page

Previously, KiwiCo customers were confused on the benefits of the referral program. Now, they can easily understand the value of sending referral invites by reading a more concise and simplified text.

PART 2

Learn More

Connecting User's Account

KiwiCo customers can click "How it works" to read the most important information, instead of feeling overwhelmed when reading the content on the Terms and Conditions page.

Current

How it works

Redesigned

Current

Sign In

Redesigned

PART 3

Connect Account

Sharing Referral Invites

KiwiCo customers can either sign in or sign up to link their account to share their invites with their friends and see their accumulated referral credit. This will decrease their confusion as to why they need to input their information.

PART 4

Start Sending Referral Invites

Connecting User's Account

KiwiCo customers can easily copy their invite link and send it to their friends by pasting the link to any platform. They can also click "Invite Friends" and share it to their immediate contacts or through their apps. Customer's no longer need to connect their contact list or accidentally click on an app they don't have.

Current

Apps

Redesigned

VISUAL DESIGN

VISUAL DESIGN

Implementing current visual guidelines

Implementing current visual guidelines

When creating the final screens, I made sure to closely reflect KiwiCo's current visual design. Below are some examples of the screens that are currently on KiwiCo's mobile website. However, not all pages on the mobile site are updated with the current visual design.

Style Guide

Next Steps

Next Steps

Due to time constraints, I was only able to test out my ideas to my immediate contacts, so my next step is to conduct user testing on the targeted users. Another next step is to look into how users keep track of accrued referral credits and referral invites.

Reflection

Reflection

This project made me further realize the importance of understanding the trade-offs when moving forward with design decisions. I also learned to also consider how my decisions affect the stakeholders involved and the importance of copywriting in creating an effective value proposition.