An image of the home screen for Raw By Robyn

Raw By Robyn

A website redesign and e-commerce overhaul for a beloved local Calgary business, focusing on enhancing user experience, refining of visual brand identity, and introducing a new polished site that highlights product features and the unique qualities that make the company stand out.

Team

Myself

My Role

Web designer
Webflow developer

Duration

October - December 2024

Tools

Figma
Webflow

View live site
Project

A juicy revamp

Raw By Robyn is a local business specializing in cold-pressed juices, smoothies, and fresh foods. Collaborating with them to redesign their website, I encountered various usability and branding issues that hindered user engagement and disconnected it from the brand's desired image. For instance, cluttered layouts, inconsistent product information, and buried deals made navigation challenging leading to missed opportunities for sales and customer engagement.

My goal was to enhance the user experience, drive engagement and sales, all while aligning with their brand identity. Throughout the redesign process, I worked closely with Robyn to address these issues and find thoughtful solutions, marking my first full Webflow site development journey.

Problem

How might we transform the website to effectively address usability and branding issues, such as unclear product information and poor promotion visibility, thus enhancing user engagement and aligning with the desired brand image?

Outcome

The redesign resulted in a 1.5% increase in online sales and a significant rise in the click-through rate for memberships, ultimately doubling membership purchases. Additionally, the updated website design effectively decreased the bounce rate. The new look not only resonated with Raw By Robyn's brand identity, fostering cohesion across the brand, but also streamlined user flows and navigation pathways. As a result, the website now provides a smoother and more intuitive browsing experience, leading to enhanced user satisfaction and increased engagement.

The process

Finding the core

To me this was more than updating the UI, it was a chance to showcase who the brand is, what makes them stand out and why customers will love Raw By Robyn. I made sure to understand the Raw By Robyn DNA, taking it into account every step of the way.

1. Research

My process began by conducting research the brand's identity, values and target audience, laying the foundation to create a clear and consistent brand identity. I then collaborated closely with Robyn to define clear and measurable objectives for the website redesign. Next I conducted a thorough analysis of competitor websites to identify industry trends, best practices, and areas for differentiation. I identified strengths and weaknesses of competitor websites to inform the redesign strategy and ensure the new website offers a competitive advantage.

2. Analysis & Content Planning

Before starting designs, I conducted an audit of the existing site to identify usability issues, technical issues and design inconsistencies. Through this process I was able to
identify and compile a list of prioritized user pain points based on severity on user experience to inform design decisions. Along with the audit I did a content review to assess the quality, relevance, and effectiveness of existing content, and identify gaps or opportunities for improvement. I was then able to develop a content strategy, ensuring consistency and alignment with the brand's messaging and objectives.

3. Design Developement

I began the design iteration process by translating research insights into design concepts, incorporating accessibility and inclusivity considerations into the design process. Working closely with Robyn, we ensured that the design addressed user pain points and aligned with the content strategy. From there, I built high fidelity mockups to visualize and refine design concepts. This collaborative approach ensured that the final design met both user needs and business objectives.

4. Implementation & Launch

As I move into the implementation phase, I develop the website based on the finalized design prototypes, ensuring every element aligns with the brand's vision and objectives. Seamlessly integrating content and design elements, I aim to create a cohesive and engaging user experience. Prior to launch, I conduct thorough testing and quality assurance checks to guarantee optimal performance and functionality. This approach ensures that the website is not only visually appealing but also user-friendly and technically sound upon its launch.

The process

Brand research & goals

My process began by conducting research the brand's identity, values and target audience, laying the foundation to create a clear and consistent brand identity. I then collaborated closely with Robyn to define clear and measurable objectives for the website redesign. Next I conducted a thorough analysis of competitor websites to identify industry trends, best practices, and areas for differentiation. I identified strengths and weaknesses of competitor websites to inform the redesign strategy and ensure the new website offers a competitive advantage.

A sample mood baord for Raw By Robyn

Speaking with Robyn her main goal was to have her website match the aesthetic she had curated on her Instagram. She wanted to keep it minimalistic, clean and simple with pops of color while focusing on her products and promoting a healthy lifestyle.

A collection of websites used for competitive analysis

During the competitive analysis, I assessed a wide range of competitors, from local to global stores. I found that most effectively promoted deals and memberships on their digital platforms, with clear visuals and persuasive messaging. They also excelled in highlighting the benefits of their juice products utilizing icons to guide customers. By identifying weaknesses in the local industry and leveraging insights from larger stores, I differentiated Raw By Robyn from its competitors, aiming to drive competitive advantage

The process

Analysis & Content Planning

Before starting designs, I conducted an audit of the existing site to identify usability issues, technical issues and design inconsistencies. Through this process I was able to identify and compile a list of prioritized user pain points based on severity on user experience to inform design decisions. Along with the audit I did a content review to assess the quality, relevance, and effectiveness of existing content, and identify gaps or opportunities for improvement. I was then able to develop a content strategy, ensuring consistency and alignment with the brand's messaging and objectives.

Examples of usability issues across the old website
Usability

During the initial audit, I identified several areas for improvement. Firstly, important information such as locations and membership details were hidden under a "More" button in the navigation, leading to missed opportunities. Additionally, the setup of the smoothie package page was confusing; users had to select the quantity before viewing available packs, causing unnecessary navigation steps if the user wanted to change the quantity. Moreover, design inconsistencies were prevalent across the website; for instance, the juices page had excessive spacing and information overload before displaying products, impacting user experience negatively.

A collection on screenshots showing inconsistencies in content for the old website
Content

The content review brought to light a lot of inconsistencies across the website, particularly concerning product information. There was significant variation in the presentation of product details; while some products had detailed ingredient lists with explanations of their benefits, some had only the ingredients and others lacked this information entirely. Furthermore, brand messaging was found scattered throughout the pages, lacking a cohesive impact aligned with the brand's message. Additionally, the placement of these messages occasionally impeded user experience by occupying valuable real estate.

The process

Design development

I began the design iteration process by translating research insights into design concepts, incorporating accessibility and inclusivity considerations into the design process. Working  with Robyn, I ensured that the design addressed user pain points and aligned with the content strategy. From there, I built high fidelity mockups to visualize and refine design concepts. This collaborative approach ensured that the final design met both user needs and business objectives.

An image depicting some changes made to the old site to create better UX

The process

Implementation & Launch

As I moved into the implementation phase, I developed the website based on the finalized design prototypes, ensuring every element aligned with the brand's vision and objectives. Seamlessly integrating content and design elements, I aimed to create a cohesive and engaging user experience. Prior to launch, I conducted thorough testing and quality assurance checks to guarantee optimal performance and functionality. This approach ensures that the website is not only visually appealing but also user-friendly and technically sound upon its launch.

View live site

Nutrien Sales

Product & User Experience Design

Nutrien Experience

Product & Customer Experience Design