Contact Me

Have a question? Please reach out.
I'll try to get back to you as soon as I can!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

01
Phone
Please ask
02
nickwudesign@gmail.com
03
Address
San Francisco
~

c360

Bulk order CBD at whole sale prices for anyone.

01
Project Name

c360 Website design

02
Tools Used

sketch, photoshop,
and invision

03
Length of Project

3 Weeks

BRIEF

C360 is an e­commerce platform that facilitates the group buying of wholesale CBD products. Wholesalers prefer to move large shipments, but buyers (mom/pop stores) prefer to buy in small quantities. Creating group orders allows the small buyers to combine their orders to get the wholesale price, and the wholesalers get to make large shipments.

Context

CBD prices have skyrocketed after the legalization of Cannabis on January 1st 2018. CBD is most commonly used medicinally on a daily basis. Many CBD users cannot afford the price increases after legalization

Backstory

Jesse Rosenbloom, the CTO of C360, came to us with a major problem. "People understand what the bulk process is when I explain in person, but when they try to use the site, they can't figure it out. This is the break point!"

The task

Improve the usability and UX design of the entire Bulk Order purchasing process. 

Problem Statement

Users would like to get wholesale price on CBD products, but they do not understand how to join the batch and follow through with the bulk order process. 

How do we demystify the bulk order process in the existing C360 website so that users can easily purchase wholesale priced CBD? 

Solution

Create a clean product listing page using card designs and an intuitive 1-2-3 checkout flow. 

Deliverables 

  1. Slide deck with research results
  • Competitive research
  • Comparative research
  • 3 Personas
  1.  Design iterations
  • Initial concept sketches/wireframes
  • Mid-fidelity mockups & interactive prototype
  1. Design documentation
  • Mockups annotated with design behavior (for handoff to developers)
  • Results from usability testing with interactive prototype w/ recommendations for improvements

out of scope

  • Brand and visual design, will use client-provided style guide for general framework
  • User stories or use cases
  • Marketing campaigns/offers

RESEARCH 

Looking At The Landscape

Comparative Research

C360’s bulk ordering process is quite complicated. The key information we wanted to convey to the user very quickly is the product itself (product details, supplier info, and reviews) along with the progress of the order (how much of the order has filled and how much time is left). 

We looked to Bulq and Kickstarter for inspiration. 

The main takeaways from looking at Kickstarter:
        1. Conveying the progress of the project and how much money is needed for the project to reach its goal
            (In the form of a progress bar)
        2. Organizing the key pieces of information that users might have about the project
        3. Highlighting their call to action "Back this project"

Gaining Insight

User interviews

What we wanted to learn:

  1. What makes a website trustworthy?
  2. What info about CBD do people want when purchasing online?
  3. How familiar are user with the idea of pledging to a cause or product?

*Most of the individuals were provided by our client but a few were from our personal networks.

Results

Common threads:

  • Historically, cannabis has been a shady industry
  • Branding portrays trustworthiness
  • Wanting reputable and predictable payment methods
  • Knowing product source fosters security

quotes

Other Takaways

  • Users prefer the 1:1 interaction when buying cannabis products at a dispensary
  • Users are familiar with online cannabis (Ease, weedmaps, etc), however they still prefer in person purchases/interactions
  • Users typically use CBD for medical purposes

Personas

Primary Persona

DESIGN

Original Site

The original site was made by the CTO to get an MVP with all of the essential information. Our job as the UX Designers was taking that information and create an intuitive and easy to use experience for C360's users.

Brainstorming

To start tackling how our team might come to design a solution for C360's product page, we decided to do a quick design studio.

The focus of the design studio was to create a card design for C360's Marketplace page including the existing information on their page.

design Studio

We know that trust as the most important aspect to consider when designing this product card. We wanted all of the information to be in a central location and easy to locate to communicate transparency. Transparency = trust.

From that design studio we created this product card template.

Redesign

Wheel Vs Mason Jar

Card Design

Marketplace layout

Checkout Flow

C360 did not have a working checkout flow so we build one from scratch.

We created a simple 1-2-3 step checkout flow.

Static product info on the left and FAQ/ Bulk order explanation on the right.

The middle part of the checkout flow would cycle through so the user knows that they are still in the same flow.

The only thing that would change would be the info they need to input at each step.

TESTING

Methodology

Usability Testing spanned a total of 3 days.

Invision Prototype

Key Results

Card Design

Product Page

Checkout Flow

Personal Reflections

Card Design

During our discovery phase when we were interviewing users, we asked them what three pieces of information was most important to them when shopping online. The mentioned price, source, and reviews. As a result we designed the cards with those answers in mind. However I came to realize that while those are the things that people consider most when shopping online, they aren't necessarily viewed in that order. Moving forwards, I would move the review stars below the product and source name. I believe that would help with hierarchy so that the users know where to look first. [Product image/how much is left visually --> Product name --> Price --> Product source and reviews]

Checkout flow

One thing I started to notice was how quickly people would go through the checkout flow. It seemed a little faster than expected or typical for an online shopper. I am afraid that because the call to action button is placed in the same location and the user does not have to scroll to get through more information, that they are simply clicking the button because it’s convenient. More testing needs to be done to see if they actually understand all the information being presented. 

Users also mentioned that they thought the FAQ’s and bulk ordering process was a little bit annoying after going through the first couple of steps. They read it at step one but feel like the block of text was unnecessary for the steps going forward. 

Design Constraints

One thing to note is that our redesign started at the product page and ended at the end of the checkout flow. Testing was slightly difficult because we had to balance giving the user enough info to know what C360 does but at the same time not design an onboarding flow. We went in with the assumption that users already went through an onboarding flow before getting to the product page and checkout flow. With that being said, I do think the bulk ordering process info was necessary for our usability testing, but maybe not in the final design. 

Final Thoughts

This project was extremely interesting but most importantly, challenging. Cannabis can be a touchy subject to talk about and we ran into some issues with getting information from the individuals we interviewed. CBD is not something that everyone knows about, there is still a lot of public educating that needs to be done about the industry.

Nonetheless, C360 has such an interesting business model that trying to succinctly explain that process to user was one of the biggest issues. Our team kept running into the issue of copy and wording which is extremely important, but unfortunately it was out of scope for the amount of time we had for the project.

I am very proud of the solution we came up with, especially the card design that has progressive disclosure, designed with the intention of not bombarding the user with information. If they so please, they can hover over the various sections on the card and more info would appear in a popup window. Our client revealed during our last meeting that we had exceeded his expectations within the 3 week sprint, especially since he came to us with a bunch of pieces/ideas for the business that were not completely assembled.

Personal Design

REDESIGN COMING SOON! (With higher fidelity)