Canard Labs

UX/UI Design / Research / Branding / Wireframing / Prototyping
2020

My Role
For this project, I conducted every facet of the UX/UI Design, Web Design, and Rebranding.

Deliverables included:

a revamped, mobile first website
rebranded packaging, labels, and photography
visually communicate the look and feel of my brick & mortar shop.

The Challenge

My website has been in existence since 2012, having undergone multiple upgrades from its humble beginnings on Weebly to its current state on Shopify. Throughout its evolution, I've personally customized layouts and pieces of code
In March of 2020, everything changed abruptly when my physical shops were forced to close indefinitely (due to the Pandemic), with no reopening date in sight.
Faced with this unexpected challenge, I realized the urgent need to transform my previously neglected website into a source of joy and fulfillment for online visitors.
It became evident that this website would become the sole means for my customers to shop, as our physical shops were ultimately closed in June 2020.

Revamp my website to capture the delightful vibes, serenity, and camaraderie found in my cherished shop.
Craft a user experience that effortlessly allows visitors to place orders and embrace the joy of shopping.
Ignite the spark of imagination to make my products and captivating fragrance blends burst to life on the screen, even without scratch-n-sniff technology.

Goals

Research

Below are the areas I’d like to explore during the user research.
I want to understand:

How can we infuse the online version of the soap shop with a sense of warmth, togetherness, and a welcoming atmosphere that mirrors the charm of the brick and mortar shop?

In what ways can we streamline the website's user experience to ensure effortless and intuitive ordering, enabling customers to easily navigate, explore products, and complete their purchases with joy and satisfaction?

What creative strategies can we employ to visually showcase the products and captivating fragrance blends, leveraging design elements that captivate users' attention and immerse them in an engaging online shopping experience?

How can we capitalize on the challenges faced during the lockdown period to reimagine and reposition the website, establishing a distinct online identity that resonates with customers and sets it apart from competitors?

Methodolgies

Being in the midst of a lockdown, I impleted the following research methodologies:

Online Surveys: Designed and distributed online surveys to gather qualitative data from the participants. I used Google forms and asked a simplified version of the questions listed under "Research".
Diary Studies: Requested the participants to keep a digital diary documenting their experiences, thoughts, and emotions related to the online shopping experience over a period of 1 hour.
Analyzing Google Analytics over a period of 30 days prior to the redesign. Followed by an additional 30 days after the redesign to secure my quantitative data.

Participants

Participants consisted of a cross section of my regular, local customers.

Four women and 1 man between the ages of 21-55.

Research Synopsis

Based on the extensive and detailed feedback I received, I identified 6 core areas to focus on:

Community

Social Proof

Blogging

Strong Visuals

A curated and chesive Shopping experience

A clean, easy to use navigation.

White Doodle Handwritten Mind Map Brainstorm.png

Define

User Persona

After I compiled the results from my in-depth interviews, I was able to create a persona that represents the main user group.

About Carolyn

Carolyn Meyers, a 42-year-old social worker and Managing Director at Kairos.
Deeply cares for her community and the environment.
Actively supports local businesses, farmers markets, and group gatherings.
Seeks products and experiences that elevate her well-being and contribute to her mental and emotional health.
Values family time and aims to create a loving and supportive environment for her spouse and two children.
Strives to make a positive impact on her community through her work and participation in community events.
Balances her ambitious and passionate nature with the need for work-life balance.
Prioritizes self-care and personal growth.
Understanding Carolyn's goals and motivations allows for designing solutions that align with her values.
The focus is on creating a delightful user experience tailored to Carolyn's needs.

Empathy Map

Insights

Carolyn's desire to make a positive impact on her community aligns with Canard Labs' mission as a small business.
The website can emphasize the community aspect and highlight the local, handcrafted nature of Canard Labs' soap, skincare, bath bombs, lotions, and scrubs.
I can showcase how my products contribute to mental well-being and self-care, addressing Carolyn's need for such experiences and products.
The website can include information about the natural ingredients used in their products, emphasizing safety and well-being for Carolyn's family.
The website can provide resources, such as blog articles or tips, on activities and practices that promote well-being and mental health.
The redesign can incorporate testimonials or stories from customers who have found Canard Labs' products beneficial.
The website can offer easy navigation and a user-friendly shopping experience, aligning with Carolyn's preferences for supporting local businesses and engaging in online purchases.

By considering Carolyn's needs and motivations, the redesign of Canard Labs Website can create a user experience that resonates with her values and offers products that cater to her well-being and self-care goals.

Ideation

After having defined the features of the website using the collected research, I created flows for the main tasks.

User Flow: Place an order for a bar of soap.

User Flow: Search for vanilla bath bombs and add your favorite to the cart

Website Navigation

BRANDING

Color Scheme

#545454 #f8b5ca #b4dccf

#f4e29c #f2dfd4 #d0eeb1

Typography

38px Raleway, Main Headers, Bold

24px Raleway, SubHeaders

18px Raleway, blocks of text

16px Raleway, blocks of text

14px Glacial Indifference, paragraphs

Logos

Iconography

Wireframing

Redesigning the Desktop Site with Low Fidelity Wireframing

The biggest change to the Desktop version of the website was the reimagining of the home page.

Based on my persona and user research, I made the layout clear and simple:

The search option is highlighted in the main navigation.
A large hero image that will either, reference current promotions or highlight new collections.
My research indicated that my customers loved seeing what was new in the shop. Therefor, the featured collection, "NEW" is the first collection people will see when visiting.
Concentration is on vivid imagery and simple layout.

Redesigning the Mobile Site with High Fidelity Wireframes

To ensure a clean and easy-to-navigate mobile site, a meticulous redesign process was undertaken using high fidelity wireframes. The wireframes served as a visual representation of the proposed layout, emphasizing the integration of beautiful imagery and user-friendly elements.

The redesign focused on the following key aspects:

Visual Appeal: By leveraging high-quality imagery and captivating visuals, the mobile site aimed to create a visually stunning experience for users. Careful attention was paid to selecting impactful images that aligned with the website's overall theme and purpose.

Intuitive Navigation: The wireframes prioritized a streamlined and intuitive navigation system. Essential elements, such as the menu, search bar, and call-to-action buttons, were strategically placed to be easily accessible, allowing users to navigate through the site effortlessly.

Simplified Content Organization: The wireframes incorporated a clear and logical content hierarchy, ensuring that information was presented in a structured manner. This approach enabled users to find the desired information quickly and reduced the chances of content overload or confusion.

Responsive Design: The wireframes accounted for responsive design principles, ensuring a seamless and consistent user experience across different mobile devices and screen sizes. Elements were optimized for touch interaction, ensuring that users could effortlessly interact with the site using gestures.

Throughout the wireframing process, user feedback and iterative testing played a crucial role in refining the design. By continuously iterating and incorporating user insights, the final high fidelity wireframes provided a solid foundation for the development of a mobile site that focused on stunning visuals, intuitive navigation, and optimal user experience.

Prototyping

I sent over prototypes of the new website to my original testing participants.
We scheduled a 15 minute time block for each participant to:

What are some items you can find and add to the cart, particularly focusing on locating Sparkle Soap?

How would you get in touch with us?

Try out the prototype here.

Mockup & Testing

Mockup of Canard Labs Homepage

Usability Testing

I tested the first version of the prototype with 6 users to determine the necessary revisions to make the overall experience more intuitive and pleasant. Here are some outtakes:

Task 1: Find your favorite bar of soap and check out.

Average Success Rate: 98.9%

Task 2: How would you get in touch with us?

Average Success Rate: 100%

Conclusions

Implementation of suggested improvements based on user testing and feedback.

Conclusions indicate an enhanced user experience.
Increased task success rates and improved user satisfaction.
Potential for higher engagement and conversion on the website.
Users find it easier to navigate, locate products, and complete tasks successfully.
Improvements have positively impacted user satisfaction.
Improved perception of the brand and website.
Iteration and optimization of the website should continue to meet user expectations.
Ongoing efforts are necessary to drive further improvements.