Web Design System
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.
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
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.
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
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.
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.
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
What I Learned
1. The importance of user testing and research.
2. Collaboration is key
3. Alway think about future improvements