Test the Prototype!

20200204015909-9880330.jpg

The Client

CBx is a small start up company. They only have an online presence. They provide a wide array of CBD flower, oil and edibles. CBx is still getting its footing but want a way to reach its clientele online.

20200118034313-9799262.jpg

The Challenge

Design a responsive e-commerce platform that will allow CBx to attract new customers, sell excess inventory and provide a clean sleek experience. Give the company a face by designing a logo that captures the essence of the brand.

The Outcome

A usable and aesthetically appealing online platform with strong brand identity.

Length of Project: 6 weeks

Role: Lead UX Designer, Lead Branding Artist, Research

Beginning the research phase, I wanted to understand the current state of the e-commerce retail landscape of CBD. My main goal for the research phase was to discover the needs and frustrations of the users to better understand how to appeal to them.

20200108043131-9742650.jpg

Research Goals:

Define people's common needs when seeking CBD.

  1. Define people's common behaviors when shopping online.

  2. Determine what people like and dislike about the shopping experience.

Secondary Research

First, I conducted secondary research to understand user demographics, developments, opportunities, and challenges in the e-commerce CBD industry. Then I collected information from articles and case studies to identify industry standards and user expectations. 

My competitive analysis produced the following insights:

  • Product Assistance: More users want the ability to know what they are buying and what is best for them. They have symptoms they want sedated and an explanation of the available products is what they seek. They expect website features that will help them make the right purchase.

  • Psychoactive THC is not the main goal of the user here, CBD in the form of wellness and recovery is what is wanted. Clean design with clear simple navigation, a mature feeling with minimal colors in the branding.

  • Painless Checkout: Providing 1-step checkout options has been a major asset in the e-commerce industry. Online retailers are starting to incorporate payment plan options such as Afterpay.

Primary Research - Interviews

In order to design a website with a great user experience, I had to first identify the needs of the target audience. To better understand the perspective of users, I had speak with them directly. I sat down with an older women and man(ages 65 and 67), a middle aged straight (woman and man) couple in their mid 30'd and one woman in her late 20's. I asked them if the have a use for CBD and their shopping experiences with CBD and typical uses for the product.

Research Assumptions:

  • Users prefer online shopping to in-store shopping, its convenient and they feel more comfortable.

  • User prefer a large selection and forms of CBD including flower and oils.

  • Price and quality (whether or not it actually works) are the most important considerations for users.

Primary Research - Competitive Analysis

I analyzed some of CBx's competitors in the e-commerce space.  I uncovered the strengths and weaknesses of the direct competitors Kanibi and Joy Organics. Also, I performed a competitive analysis on Direct CBD Online which is an indirect competitors of CBx.

20200109224203-9753854.jpg

After analyzing this data I came up with the four most pressing topics.

Customer Service: Users need friendly helpful staff in stores. Online, customer service options should be accessible to the user throughout the browsing and checkout process.

  • Pure Products: Users want to know that what they are buying is worth the money and that it will work.

  • Seamless Purchasing and Shipping : Ease of payment and quick checkout .

  • Time-Efficiency: Users all expressed a desire for their shopping environment to be organized, explaining exactly what everything is and stress-free. They want to easily find the item they want.

Persona and Storyboard Creation

Next, I used all of the qualitative data I gathered during the research process to create Emily, my user persona. Emily is an an ambitious later 20-something year old professional in need of pain relief from delayed onset muscle soreness at an affordable price. She is still in the Army and needs to be sure to get CBD without THC.

I then created a storyboard depicting Emily's struggle dealing with muscle pains and the solution that CBx's online site provides.

Define and Ideate

Now that I had empathized with target users and identified their needs, I needed to define the solution. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I had identified common goals, I could decide what product features were necessary for the prototype.

Branding Design

At this point in the process, I began thinking about how the website would look and feel to visitors. I came up with a series of descriptive words that captured the essence of the CBx brand: Clean, modern, quality, trustworthy.

With these adjectives in mind, I began sketching out ideas for a logo. I wanted the logo to tell a story just by looking at it. I designed it to be clean and clear. I used a hexagon from the molecular structure of CBD and then added in a gold leaf of a marijuana plant to mean the quality of the flower. As I explored different variations, I hoped to come up with a logo that was memorable and unique but simple enough to be recognizable from afar.

The logo was worked and worked till I got a simple version that could easily be a smaller size with a the brand name for packaging.

Style Guide and UI Kit

The logos were added to the Style Guide and UI Kit, a comprehensive collection of all site components and UI patterns. Both documents are constantly changing as the website and brand grow.

20200115034036-9783746.jpg
20200118002925-9798690.jpg

Site Map

Before I started drawing the site up I created a site map which laid out the structure and organization of the content on the site so I had an idea of how it will flow.

Journey Mapping Interaction Design:

I completed a task flow and user flow to imagine the ways a user might navigate through the site to achieve their goals. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user.

Low-Fidelity Wireframes

20200118033117-9799146.jpg

Mid-Fidelity Wireframes

20200118035217-9799266(1).jpg

High-Fidelity Wireframes

20200118021326-9799006.jpg

Test the Prototype!