Website redesign for an existing business to enhance customization and user experience.
Project Details
Website redesign to enhance brand identity, reflect business goals, and improve user experience.
My Role: UX/ UI Design & Research
Client: Annie Seal, Business Owner
Toolkit: Figma, Adobe Creative Suite, Shopify Basic
Background
LUCK CBD is a small, certified women-owned business based in St. Louis, Missouri that provides high-quality beauty products for hair and skin. All products are infused with Cannibidiol (CBD) isolate, quality-tested and proven to be free of THC. LUCK CBD prides itself in using carefully sourced ingredients that are known to be effective and gentle.
“It’s a happy lucky feeling when your hair comes to life.” Owner Annie Seal
The Problem
The existing website is overstimulating, does not convey the brand identity, and cannot be easily edited. Business Owner Annie Seal, wanted a complete website overhaul with original brand guidelines and the capability to easily edit content.
The Design Challenge
How might I re-design the website within Shopify constraints to emphasizes brand identity, present information logically, and provides an intuitive shopping experience to attract new shoppers?
Proposed Solution
Redesign the website using a Shopify template to restructure website navigation hierarchy, emphasize branding, and eliminate visual clutter.
Secondary Research & Competitive Analysis
I began by learning about the CBD health and wellness industry and existing competitors. Although many CBD-infused products have recently gained popularity, a handful of companies have been in the business for decades. During my research, I specifically looked for intuitive navigation, successful treatment of text, and display of product ingredients.
Qualitative Research
I spoke with two current shoppers and two prospective shoppers to learn about their experiences and thoughts of the current website.
“I like the listed ingredients. When I’m buying body skincare, I want to know what's in it ”
“I think organizing the pages differently would improve overall first impressions.”
“What’s the difference between catalog and products? That seems almost the same”
Research Synthesis:
After learning from the business owner and current shoppers, I discovered key goals that can shape the success of the website.
Provide intuitive website design
Educate users on the safety of CBD products
Align with product branding
Key User Needs
Clear Navigation.
Concise presentation of information
Easy point of sale process
Key Business Needs
Efficient point of sale process.
Customizable website.
Emphasize brand identity.
Learning about the User
Based on user feedback from interviews and surveys, I created a persona who embodies the key user needs and goals. This persona will help me envision the target user when making decisions down the road.
Suggestions
Based on my initial research and discussions with the business owner, I proposed the following changes to the website to improve user experience and enhance brand identity.
Restructure sitemap to enhance intuitive navigation hierarchy.
Educate users about the safety and benefits of CBD.
Emphasize brand recognition with new Shopify template.
Information Architecture
Site Map
Rethinking content organization was the first step. The previous homepage presented an overwhelming amount of information, repeated page by page.
Site Map - Before
Site Map - First Iteration
The first iteration of the revised site map eliminated “Catalog” and reduced the main navigation items to three pages (“Products,” “Ingredients,” and “About Us”) to enhance minimalism and direct user action.
Site Map - Final
In response to the first sitemap revision, the business owner suggested additional main navigation items such as “CBD & Hair” and “FAQs” to emphasize the benefits of CBD and eliminate misconceptions about the ingredient.
Key Changes:
Eliminate the “Catalog” page from main navigation.
Add “CBD & Hair” and “FAQs” main navigation pages.
Reduce home page content.
The User’s Journey
Using the proposed site map, I created a Task Flow and a User Flow to explore how the user may achieve a certain task. The Task Flow considers how Christie may purchase shampoo beginning on the Home Page.
Low Fidelity Wireframes
Brand Identity
Annie wanted to keep the original logo mark and emphasize the illustrations that were previously developed. The icons, which feature lucky symbols, speak to the brand identity of luck, happiness, and a unique breath of fresh air. I focused on the symbols to determine the primary color palette and the UI elements.
“ We believe in Lucky Charms and experiencing the power of Good Mojo. We delight in good fortune, acts of kindness and happiness. ” - Annie, Owner
High Fidelity Wireframes
High Fidelity Wireframes were created to reflect the owner’s goals, user-input, and brand identity. I minimized clutter by beginning with white space and adding pops of brand color. Four pages were created, in addition to the point of sale process.
User Testing
Using a prototype of the high-fidelity wireframes, I asked three participants to complete a series of tasks. By grouping like feedback together, I discovered patterns in user challenges and confusion.
Key Edits
Increase text size for readability.
Include more realistic imagery.
Add a search feature.
