Web Design System

  • ROLE: UI Design, Website audit, UX research and testing      CLIENT: Ring      DATE: 2019

OVERVIEW

The design team at Ring has been growing exponentially. To maintain visual and brand harmony, a web design system became necessary.

The design system serves as a helpful tool for both developers and designers. The system allows for consistency across Ring's e-commerce site as well as its varying platforms. Included are layout and typography, design components, template wireframes, and a collection of assets.

CHALLENGE

Ring.com had no design system for over five years resulting in a lack of visual cohesiveness and brand vagueness.

1. Inconsistent webpages

2. Users struggled navigating the mobile experience which accounts for 80% of our users

3. Engineers were not equipped to ensure the code matched design exactly

GOALS

1. Create a solidified web brand. Ring is a global company with offices across the world. As teams grew, we wanted to make sure designs remained consistent. Ring also spans across a multitude of products and platforms with an e-commerce site, product app, neighbors app, packaging, print, and tv commercials. To ensure visual familiarity for our customers, the web design system had to work synonymous across each of Ring’s platforms.

2. Website redesign. Once establishing a web design system, a website redesign became achievable. Our main goals with the website redesign was for: users to understand the products better, improved accessibility in navigating the site, and an increase in conversion.

3. User Research and Testing. To provide our customers an optimal e-commerce experience, we needed to determine their goals and motivation in exploring our products. A/B tests were conducted to help us quantify our user’s needs.

Styleguide
Overview of deliverables (Web Design System → High Fidelity Wireframes → Flushed Out Redesigned Pages)

WEBSITE AUDIT

The first step was to audit the old website and note all inconsistencies and user pain points. User testing was key here in helping identify those design challenges.

1. Lack of unity across web pages causing a disjointed experience

2. Typography and CTA variations

3. Inability to recognize clickable links and CTAs

4. Layouts are inconsistent

5. Extensive scrolling

6. Mobile experience is not accessible

Styleguide
Examples of past Ring.com pages

Laying the Foundation

This system is largely based on the principles of atomic design. Small, independent - atomic - parts, can be combined into larger molecular structures.

This foundation loosely defined our grid, color palette, typography, buttons/links, components, icons, and illustrations.

We course-corrected when necessary, and started defining our standardized components. A separate doc was created to further detail use cases and dimensions.

Styleguide Styleguide

Doorbells Page Redesign

The Doorbells Marketing page was one of the first to undergo the new web design system. Using the UI style guide and high-fidelity wireframes, we were able to create flushed out redesigns with ease and efficiency.

Collaboration played a huge part in the redesigns. A content strategist and copywriter helped rework the messaging structure, enabling users to understand the products better. The brand team helped deliver assets that our customers found relatable. An illustrator created icons and illustrations to visually break up the page.

The redesigned page guided users to simply and joyfully purchase a doorbell. The page began with an overview of Ring doorbells into a clear comparison of the different doorbell options. Users were able to convert comfortably on the page, and in turn increase revenue for Ring.

Styleguide
Old Doorbells Page
Styleguide
Redesigned Desktop - Doorbells
Styleguide
Redesigned Mobile - Doorbells

Results

135% Improvement in Conversion Rate

16% Improvement in Bounce Rate

39% Improvement in Session Depth

*Results were measured using Cro Metrics, a site optimization team. Numbers were determined after a 90 day period post launch compared to the old website.

Alarm Page Redesign

After completing the Doorbell page, the alarm page became an easy achievement with the help of our design system. We wanted to maintain visual consistency across the pages to ensure a comfortable user experience.

User Testing played a key role in determining our design updates. We used heatmaps to see where users scrolled through content or ignored important information. Understanding our past flaws helped us restructure content and create more visually appealing designs to educate on our products and encourage conversion.

Visual hierarchy was crucial with these redesigns. There was extensive information to be shared with our customers. I focused on creating concise components and interactive experiences broken up with photography and illustrations. This helped draw users in and guided them through a funnel experience - a broader understanding of the product into the specific features and add ons one could buy.

Styleguide
Redesigned Desktop - Alarm
Styleguide
Redesigned Mobile - Alarm

Results

11% Improvement in Engagement Rate

10% Improvement in Add-to-cart

50% Improvement in Alarm Kit Conversion

*Results were measured using Cro Metrics, a site optimization team. Numbers were determined after a 90 day period post launch compared to the old website.

What I Learned

1. The importance of user testing and research. The customers are at the forefront of our designs. We are designing for our users so it is crucial to understand what intrigues them and what helps them have a more enjoyable and accessible experience.

2. Collaboration is key. A great redesign involves more than just a visual polish. Getting guidance from product managers, copy and content strategists helped create a structure and a vision for the experience to build off of. Using the brand team and illustrators helped bring the pages to life with great photography and illustrations.

3. Alway think about future improvements. Design is ever changing. It’s always important to stay on top of design trends and constantly get feedback from our users. Timely iterations and updates can offer an optimal experience for our customers.



VIEW ALL WORK