Case Study
Created design system to unify ARUP’s brand using accessibility standards and design thinking. Positive outcomes of the design system release:
✓
Decreased development time by over 20%
✓
Better standardization and integration between web properties
✓
Improved usability and product quality
Project Overview
Challenges
ARUP Laboratories had numerous web development teams working on different and concurrent projects. This has caused repeat development on similar design patterns and product components, resulting in slowdowns and inconsistencies in delivered products.
Roles
→
User research and testing
→
Design workshops and reviews
→
Low and high fidelity prototypes
→
CSS, HTML, and JavaScript coding
→
Drupal theming and development
Solutions
I collaborated with product managers, IT web developers, and other designers to create a design system of reusable code, common design patterns, and shared design language. The team could work more efficiently while adhering to a consistent design vision.
Design Process
Discover
Define
Design
Test
Deliver
My design process is closely aligned with the Nelson Norman Group’s UX training that I have completed. At every step of my design process, I keep users at the forefront of my thoughts, empathizing with their experiences and perspectives. I advocate for the user’s point of view, especially in terms of accessibility standards and inclusive design practices. I also get a thorough understanding of the scope of the project and business goals. During discovery, I met with project stakeholders to understand the requirements to successfully complete the project. I then defined objectives, performed user research, and used insights from data and metrics to drive my design decisions.
Research
As a part of the ARUP Design System team, I performed user interviews and surveys to better understand how the product will be used by internal developers and designers. The design and engineering teams gave insights on how a unified and branded design system would help them work more quickly and efficiently. The designers care deeply about creating work that reflects well on the team and the company’s brand, and the developers love that the design system can help them deploy faster with less time spent on programming specific components.
Methods Used
→
User interviews and surveys: in-person meetings
→
Web analytics: Google Analytics
→
A/B testing: Google Optimize
→
Heatmaps and screen recordings: CrazyEgg and Microsoft Clarity
Old Styles & Competitor Research
Previously, users were struggling with confusing visual styles, different branding colors, and inconsistent interaction patterns. Compared to the company’s competitors in the healthcare industry, ARUP was falling behind.
Accessibility Considerations
My designs followed Web Content Accessibility Guidelines. I put colors through accessibility checks to ensure compliance. This is an example of the corporate brand color red on a white background.
Designs
As a part of the ARUP Design System team, I performed user interviews and surveys to better understand how the product will be used by internal developers and designers. The design and engineering teams gave insights on how a unified and branded design system would help them work more quickly and efficiently. The designers care deeply about creating work that reflects well on the team and the company’s brand, and the developers love that the design system can help them deploy faster with less time spent on programming specific components.
Takeaways
The project is complete, with the design system released and in production. Positive outcomes of the design system release:
✓
Decreased development time by over 20%
✓
Better standardization and integration between web properties
✓
Improved usability and product quality