bigcommerce ux design - joshua chen
Post on 13-Apr-2017
34 Views
Preview:
TRANSCRIPT
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
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
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.
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
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
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
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
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
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
top related