Covetrus | Arc Design System
Create a comprehensive and standardized set of design principles and components that will ensure scalability, consistency and efficiency across the Covetrus product portfolio.
CHALLENGE
Users were experiencing fragmentation across Covetrus’ product portfolio. Inconsistent interactions were causing cognitive strain and inaccessible components were creating difficulty in product flow for disabled users.
Secondary challenges
-
Increase velocity by 20% across product teams.
-
Reduce confusion of the brand voice by creating a shared design language.
MY CONTRIBUTION
-
Spearheaded effort to build a global corporate design system, product adoption strategy, and design system team. This team was responsible for creating a single source of truth for designers and engineers, and a cohesive user experience and shared brand voice across the Covetrus product portfolio.
PROCESS
Research | Discovery | Design | Build | Test
Research
Initial research was carried out to identify challenges and generate insights:
-
A comprehensive audit of design patterns across products identified inconsistent patterns, color palettes, and redundant code.
-
Interviews and surveys were conducted to generate qualitative feedback and insights around design and engineering challenges.
-
Analytics were gathered from UX and engineering JIRA boards to create quantitative baseline metrics.
Notable Findings
-
39 unique colors used throughout Covetrus cloud/SaaS applications.
-
49 button styles and variations identified.
-
No consistent delivery of high-fidelity designs. Engineering teams were struggling with using a number of tools (i.e., Zeplin, InVision, red-lined images, or a combination of these).
-
No clear Design Principles for designers to follow.
Discovery
Through analyzing our competitors approaches and researching statistics and UI patterns, I generated some pros and cons to make a case for our email capture approach. I gathered ideas and material to use for the Sketch phase.
Competitive analysis
Pros & Cons
Design
Component Design
Lorum impsum
Exmples of patterns
Hero prototype
Email Component
I explored simplifying the approach by combining the email and countdown timer features to reduce the overall footprint of the components. The countdown timer was being used to create a sense of anticipation around the event, and having this closer in proximity to the email capture could have potentially driven email alert subscriptions.
I created low-fidelity wireframes to show the essential elements of the two scenarios, static email capture vs. lightbox approach. With no time to A/B test the options, I reviewed them with stakeholders, who opted to move forward with the lightbox approach.
Static email capture
Lightbox email capture
My initial concern was that this approach may be too intrusive for our user base, but felt comfortable with the research that we obtained showing the following: The majority of users on att.com in the week prior to an Apple event are current Apple users looking to upgrade, or those looking to buy/switch to a new Apple device.
Given this research, I felt comfortable in the decision to move forward and created high-fidelity wireframes and prototypes.
Countdown Timer
Late in the process, it was determined that we couldn’t move forward with the combined email capture and countdown timer approach as there would be a need for the components to be seen individually in certain scenarios. The countdown timer would remain in production for two days after the "announce phase" but would then be removed prior to the "pre-order phase", creating the need for a countdown timer to remain on the homepage until "pre-order phase" announcement.
We were able to leverage the countdown timer component that I created as part of an incubator project. Working together with the content writer, we were able to simplify the lengthy proposed copy with clear and concise messaging.
Design
Combinations of Sketch and Photoshop were used to deliver comps and final assets for review by the stakeholder. Zeplin and Principle were my tools of choice to deliver design specifications, redlines, and prototypes to the development and content implementation teams.
Responsive viewports
Implementation
Working closely with the Development teams and working in an Agile environment, we used a series of design sprints throughout the sketch and design phases to build out the two new components. This ensured final delivery and testing for the earliest rumored Apple announcement date.
Test
After testing each component in a staging environment, the implementation team pushed the homepage to a hidden URL in our production environment.
Over a two day period, our team vigorously tested the performance and interaction with the three components loading simultaneously. Throughout the testing process, I gathered feedback and worked closely with the development team to adjust speed and timing for both the email and hero components. The initial speed and performance tests failed due to the choppiness of the hero animation with mobile load times coming in at over 3 seconds.
According to Google, 53% of mobile site visits are abandoned if pages take longer than three seconds to load. – Google Marketing Platform
We fixed these issues by adjusting the code, reworking some of the design assets until the animation loaded smoothly and mobile load times met our goal of 3 seconds or under.
RESULTS
-
By providing a seamless experience on the home page for new and current customers, we were able to maintain AT&T’s brand strategy and drive traffic through the order and upgrade flows, generating $33.5M in revenue in the first 4 days.
-
AT&T captured 60k email addresses in a 4-day period (a 1,400% increase over the previous 4k in the prior year).
-
Initial reveal for the Apple launch led to a conversion of 9.52% and 28,211 orders in the first 4 days.
-
Delivered first-to-market out of all Apple’s retail partners
1st
to market of all Apple's retail partners
1400%
increase in email
address captures
9.52%
conversion rate for initial launch reveal
Working closely with the Development teams in an Agile environment, we used a series of design sprints throughout the sketch and design phases to build out the two new components. This ensured final delivery and testing for the earliest rumored Apple announcement date.
Having to complete this project in a few short weeks brought its fair share of challenges. We worked in accelerated Agile design sprints to build out two new components and test with limited resources. With more time, I would have preferred to run A/B tests for the two email capture options. Although we took a risk using the Lightbox model, I feel that the knowledge we have of our users paid off.
Metrics showed that a high percentage of users wanted to know when Apple devices were available for Pre-order and Order phases. Getting buy-in from stakeholders on the hero component (which came to be known as the "Slider" throughout our org) was a big win for the company. I feel that the overall outcome of this challenge was highly successful.
REFLECTION
COMPS AND PROTOTYPES
