9
IGCOMMRC IMPROVING ONOARDING CONVRION RAT PROJCT COP MY ROL WORK AOUT CONTACT

BigCommerce UX Design - Joshua Chen

Embed Size (px)

Citation preview

Page 1: BigCommerce UX Design - Joshua Chen

IGCOMMRCIMPROVING ONOARDING CONVRION RAT

 

PROJCT COP

For three weeks, worked together with a three person team to research and design a solution for igcommerce, an eCommerce

shopping cart platform for usinesses

 

MY ROLResearch, Ideation, Wireframing, Interaction Design, Prototping, 

WORK AOUT CONTACT

Page 2: BigCommerce UX Design - Joshua Chen

 

CHALLNG

INCRA CONVRION OF TRIAL TO PAID UR

 To determine wh igcommerce users are dropping out of the existing on oarding process and to provide design

recommendations ased on those findings

 

OLUTION

A GUIDD, UPPORTIV T-UP WIZARD

Our new onoarding process increases user engagement  focusing on the most satisfing and personal components of the set-

up so that the are emotionall invested in their online store from the start.  Fostering this connection earl makes it less likel

for drop out later on.  

 

 

PROC UR INTRVIW

Page 3: BigCommerce UX Design - Joshua Chen

Discovering the motivations and goals of usiness owners

In order to design a etter store set-up process, it was important to grasp the considerations and ehavior of a new store owner.

 We focused on user interviews of support staff, usiness owners, and current users.  Here's what we learned:

 

How to start?

"I reall wish I had a mentor or tutorial to guide me through the process.  I asked m colleagues to help me get started, ut artists

are reall competitive.  I eventuall just gave up."

Potential usiness owners are hesitant to open a store ecause the are uncertain of how to position themselves in the

marketplace (e.g. how to differentiate themselves, how to price their products, how to determine current demand).

With all these unanswered  questions, users are looking to find answers ut cannot easil locate the support portal or

communit forum.

 

Feature Navigation

After setting up the store, navigation through all the different features of e-commerce platforms is tedious and time

consuming.  Too much time is spent wading through nested menus looking for a single item which graduall uilds into a

mountain of frustration.

 

Launch xpectations

Once the store set-up is completed and their new store is launched, people often had unrealistic expectations of thriving

sales, immediate customers, and ongoing traffic to their site.

Disgruntled and disheartened, if users could not determine  the reason for the slow start or what steps to take next, the

ended aandoning their online store.

 

WALKTHROUGH

To etter to understand the product and discover pain points, we had users walkthrough the current onoarding process while

sharing their thoughts.  

 

Page 4: BigCommerce UX Design - Joshua Chen

xisting tore et-up

 

tore et-up Checklist - This is the existing wizard that new users refer to when setting up their store.  However, the first two steps

are alread completed without the user taking an action or explanation.  Users were unclear of how to proceed, especiall since

changing the hidden settings required ou to mouse-over check lists.

Loading creen Dropout - After inputting our store

information, transitioning to the store administration page can

take upwards of 30-40 seconds.  A high proportion of users

would ecome impatient and exit during this step.

upport Discover - During the site set-up steps, there would

e questions from novice users aout various details ut the

could not locate the support tools (live chat, customer forums,

and e-commerce learning portal) to help them through the

process.

Launch ite tatus - Once completing the store set-up, there is

no clear indication or feedack whether our site is live or still

in it's testing phases.

 

 

PRONA

Once we were satisfied with our research and presented them to our clients, we focused on creating personas to provide further

insights as to how different users would interact with the site.  Ke characteristics that determined how the were interacted with

our site was a user’s comfort level with technolog and their understanding of usiness development.  igcommerce attracts store

owners from all different ackgrounds so we decided to characterize them with three different personas created from our research

findings.  Putting a name and face to our users rought their goals and concerns to life during our design process.

Design reviews of the existing site

Page 5: BigCommerce UX Design - Joshua Chen

 

 

IDATIONNow that we have a solid grasp on user ehavior, pain points, and personalities m team and I rainstormed ideas to address the

prolem  creating a journe map with our personas.  ased on our map, we decided to change the order of the steps to highlight

the most emotionall staing parts of the store set-up, moving the design step to e first, and moving the steps with the longest

wait time towards the end.  

Jane's Journe Map

Page 6: BigCommerce UX Design - Joshua Chen

Jane was our primar user persona as she represents the new users that were experiencing the highest drop off rate.  Her main

concern: getting her store off the ground as soon as possile and to see immediate return during her trial.  he is a long time rick

and mortar store owner that is tring to get her store ack on track after lagging sales.  Jane is hesitant to expand online ecause

of the steep learning curve ecause she’s uncertain how effective it will e.  ut she is still willing to tr ecause the pressure of

keeping her store afloat.  Our strateg is to hone in on the essential parts of the store set-up to uild investment and satisfaction

while keeping the steps streamlined and without distraction.

 

WIRFRAM AND TTING

After creating a prototpe using Invision, we performed usailit tests to oserve user ehavior with our new store set-up.  Here's

what we learned:

Distractions: We originall had the gloal navigation included throughout the set-up, ut users were curious and egan clicking

through features to discover their functions.  This drew their attention awa from the set-up, causing the set-up to remain

incomplete.

Without Gloal Navigation With Navigation

 

Adding products: We learned that the ailit to add multiple products would e important during the set-up process instead of

eing ale to add just one.  This added to the initial investment during the trial.  Our team had previousl discussed the ailit to

add multiple products ut we wanted to limit the amount of time spent in the set-up process.  ut since this can e one of the more

satisfing steps during store set-up, we decided not to force this limitation on our users.

Hidden Instructions: Users were skimming past the instructions during our set-up pages ecause their profile was not prominent

enough.  We had to rethink the visual hierarch to make sure that the instructions stood out.

PROTOTYP

 

DIGN

Page 7: BigCommerce UX Design - Joshua Chen

DIGN 

TOR T-UP

Our strateg focused on the personalization options in the eginning of the process ecause research showed that that the

rought the most satisfaction.   electing the template, uploading logos, and adding our ver first product were all highlights that

drove the momentum of store set-up.

 

 

 

UPPORT

Page 8: BigCommerce UX Design - Joshua Chen

UPPORT

One of the iggest complaints from users was the inailit to easil address their questions during store set-up and for ongoing

maintenance.  We added support links throughout each step of frequentl asked questions.  Additionall, we added a tiered search

ar that allows users to convenientl locate support articles to address their concerns as well as the ailit to highlight an product

features the're looking for.

upport for feature finding and questions a search awa

 

 

 

LOADING TIM

Instead of having users e idle during the loading screen, we added a progress ar to indicate their wait time and information

aout advanced features to learn more aout how the can grow their usiness and leverage igcommerce's tools.

 

FOR AFTR

Page 9: BigCommerce UX Design - Joshua Chen

prev / nextack to Work

FOR AFTR

 

WHAT' NXT

Monitor drop out rate for users that make it through the store set-up process.

After implementation, compare conversion rates with the old onoarding process to the new.

xamine whether users utilize advanced tools after eing introduced during loading screens and determine how to improve

cop and presentation during waiting times.

 

 

 

 

IGCOMMRC NXTDOOR

RACK-IT