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 though mobile experience which accounts for 80% of our users

3. Engineers were not equipped to ensure code matched design exact

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, better 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 created 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 out use cases and dimensions.

Styleguide Styleguide

Doorbell 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 felt relatable to our customers. And an illustrator helped create icons and illustration to break up the page.

The redesigned page guided users to purchase a doorbell with ease and enjoyment. The page began with an overview of Ring doorbells into a clear comparison of the different doorbell options. Users easily were able to convert 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

Alarm Page Redesign

Styleguide
Redesigned Desktop - Alarm
Styleguide
Redesigned Mobile - Alarm

What I Learned

1. The importance of user testing and research.

2. Collaboration is key

3. Alway think about future improvements



VIEW ALL WORK