Basis an Intel Company

CHeckout
flow

CHeckout
flow

Website

checkout_flow_hero

Intro.

Roles | Visual Designer | UX Designer | Prototyper

Basis was a pioneer in the fitness wearables market and while there I was tasked with redesigning the checkout flow for the company's online store. As a startup, Basis relied heavily on converting sales via their online store so my main area of focus was to reduce friction in the online buying process.

intro_left_mocks
intro_right_wires

What are we solving for?

Re-thinking our
mobile nav

What are we
solving for?

When I started the project the online store was using the default checkout flow provided by our credit card processing vendor. There were a couple of  issues with this:

  1. The checkout page was a long form that took up a lot of vertical space. It was pretty daunting and the form was difficult to use on mobile devices.
  2. There wasn't any "Basis" branding other than our nav and the footer. Because of this, people didn't trust the checkout process and didn't think it was safe to enter their credit card info.

Old Design

old_checkout

Proposed Solution

Solution

In order to solve the first issue, the long daunting form, I came up with the idea of dividing the form into 3 distinct sections (Shipping, billing, and confirmation). The three sections would open and collapse as a user progressed through the form. I then created a simple prototype to better visualize and share my solution. From there it was a matter of branding the flow and creating a style guide for devs.

Research.

site_audit_1
site_audit_2
site_audit_3
site_audit_4

I thought I only needed to work on a handful of pages or why you should always conduct a site audit.

Finding color steps that work to
display values on heatmaps.

One of the first things I did after identifying the issues I needed to solve was to conduct a site audit. I wanted to get an exact idea of what the scope of this project was going to be. I naively thought that it would only be a few pages but after conducting the audit I realized that I had managed to neglect several scenarios such as errors, coupon codes and promos, and what to do in instances of suspected fraud. Conducting a site audit saved me several rounds of back and forth redesigning and solving issues that I thought I had solved.

c_a_1@2x
c_a_5@2x
c_a_4@2x
c_a_3@2x
c_a_2@2x

Checkout flows existed before I started on this project and will continue long after. That's why I looked at what others had done before me and conducted a competitive analysis. I took screenshots and documented the checkout flows of several competitors and consumer brands to gain a better understanding of what a good customer/user experience looks and feels like.

What else is out there?

Finding color steps that work to
display values on heatmaps.

What else is out there?

Wireframes.

After reading and researching checkout flows enough, I was in a good place to start mapping out the flow and to begin wireframing. The mobile version of the flow seemed the most challenging so I started with that and then moved onto the desktop version. Doing it in this order saved me lots of time because I had to think more about how information should be organized.

wireframe_mobile_1
wireframe_mobile_2
wireframe_mobile_3
wireframe_mobile_4
wireframe_mobile_5

Mobile Wireframes

Mobile Wireframes

Starting on the mobile version first forced me to think more about the order in which information should be filled out on forms. For example, I placed the zip code box first instead of last so that we could use it to determine and auto-fill the city and state on the form saving users time and reducing friction.

Starting on the mobile version first forced me to think more about the order in which information should be filled out on forms. For example, I placed the zip code box first instead of last so that we could use it to determine and auto-fill the city and state on the form saving users time and reducing friction.

wireframe_a
wireframe_b
wireframe_c
wireframe_d
wireframe_e

Desktop Wireframes

Desktop Wireframes

Another way I found to reduce friction in the checkout flow was to have a modified version of the main nav at the top once a user had progressed past the shopping cart. Removing links from the top removes distraction and users are less likely to navigate away from the site. Speaking of distractions, I also made the coupon link less prominent. Prominent coupon links increase cart abandonment on eCommerce sites since they can cause users to navigate to coupon sites or to competitor's sites.

Another way I found to reduce friction in the checkout flow was to have a modified version of the main nav at the top once a user had progressed past the shopping cart. Removing links from the top removes distraction and users are less likely to navigate away from the site. Speaking of distractions, I also made the coupon link less prominent. Prominent coupon links increase cart abandonment on eCommerce sites since they can cause users to navigate to coupon sites or to competitor's sites.

Mocks.

mock_mobile_1
mock_mobile_2
mock_mobile_3
mock_mobile_4
mock_mobile_5
mock_a
mock_b
mock_c
mock_d
mock_e

Style Guide.

style_guide_2

More projects

MOTION & ANIMATIONMotion Design

HOUSECANARYVisual Design | UX Design

ramon_logo_light_blue

More about me

LinkedIn      |      Dribbble      |      Resumé

LinkedIn   |   Dribbble   |   Resumé