Design system | 2017

moda

The Story

I built a design system for Moda to unify its fragmented digital properties, ensuring consistency, responsiveness, and accessibility across all brands. By conducting stakeholder interviews, auditing existing design patterns, and applying atomic design principles, I created a scalable system that met Section 508 accessibility standards and improved alignment between IT, marketing, and design teams.

The Challenge

Moda, inc. is an exceptionally large company with many different subsidiaries and brands under the same corporate umbrella. This has led to a very fractured and inconsistent experience across their various digital properties. To help remedy this, I built a design system for Moda that brought consistency, responsiveness, and accessibility to all of their digital properties.

Stakeholder Interviews

Given the size of the company, and the number of internal stakeholders that exists within moda, it was critical to interview all of them to esnure the new system adequately addressed their needs. I met with several groups of internal stakeholder to identify their questions, concerns, and functional requirements regarding the implementation of a design system.

Information architecture

Once all of stakeholder interviews had been completed, I had a sense of scale for the role the system would play in bringing all of the different properties into alignment. I then proceeded to conduct an exhaustive audit of their current design patterns across the various properties in order to unify them under a single implementation. I utilized atomic design principles for the underlying architecture of the system and provided guidance around use cases and implementation for each pattern we built.

UX/UI Design

Moda did not traditionally have a dedicated digital design team as their marketing designers were focused mainly on print collateral and the development team had been fairly siloed from the rest of the organization. As a designer with a background in both user experience and responsive web design, I worked closely with our IT team to ensure our designs were aligned with responsive and accessible patterns. Additionally, my role on the project was to lead the visual design elements as they related to our digital properties, while ensuring our marketing team was able to control the branding and message.

Interaction Design

As part of ensuring a consistent experience, I was responsible for all of the interaction design involving the various components of our design system. I built prototypes throughout the process that clearly articulated the intended interactions and used these to validate with our users and stakeholders throughout the design and development process.

Accessibility Compliance

Most of our properties had not been updated in almost 10 years. As a result, virtually all of them were not accessbile for users with disabilities. As part of the design system development, one of our main goals was to ensure that all of the properties we built had a baseline level of accessiblity. I was responsible for ensuring that all of our designs met the section 508 guidelines for web accessibility. In this instance, I simulated the view for users with low vision to stress the importance of adequate contrast in our designs.

Final design

The completed design system ensured we could easily scale and theme our patterns across the various digital properties under the Moda brand, while ensuring concistency, responsiveness, and accessbility for all of our sites moving forward.

More work