Case Study: LUMA

Overview

LUMA stands for Lightweight Unified Modular Accessible, which defines our core principles as we established this design system for Designlab.

Client:

Designlab

Role:

UX Engineer (Front End Developer and UX Specialist)

Timeline:

Preliminary Research: 1 month
Initial Implementation: 5 months

Tools:

Figma, Sketch, HTML5, CSS3, Sass, JavaScript, JQuery, AngularJS, ReactJS, Django, Python

Challenge

Make it the same, but much better

When I was hired, Designlab was a small, early-stage startup establishing itself as a leader in mentor-lead online design education. They were ready to launch into their next phase of rapid-growth with the goal to attract top-tier mentors and students. They needed their site to support lead-generation and reflect their expertise in Design and User Experience, but they did not have the design resources or need for a full redesign.

Their website was built piecewise as the company was establishing their brand direction, and while there were throughlines in the visual design, the lack of consistency was impacting the polish and usability. Each page contained a slightly different set of styles, colors, typography, and markup. Disorganized code was creating a maintenance nightmare as each page was made up of competing styles and fixing one issue could easily break something else.

High-Level Goals:

• Establish consistent branding and UI elements throughout the marketing site
• Support a broader audience by making the marketing website fully responsive and incorporating accessibility best practices
• Create a strong foundation that can expand to all digital products and support the company’s rapid growth

Scope:

• Conduct audit of existing UI elements and patterns
• Research CSS Methodologies, Web Accessibility, and Design System Best Practices
• Full refactor of the Marketing Website (17 static pages, 2 page templates)

Constraints:

• Need to maintain current design
• 1 month for allocated for research
• Limited design and engineering resources
• Need to support a phased release

Research

I began my research by looking into CSS methodologies and existing design systems. At the time I was the first and only front end developer, so I needed to keep in mind how I would communicate and scale our system.

I wanted to establish a naming convention that was specific and easy to read, so I chose to follow the BEM methodology. The name of each component was tied to its purpose and not its context so that it could be reused throughout the product. All the styles were global so the names of each class would need to be unique, which BEM made very easy. The naming system was verbose, but just by reading a class name you could decipher the structure, variation, and file location of any element.

For the organizational structure I applied a methodology called SMACSS (pronounced “smacks”). The styles were divided into 5 categories: Base, Layout, Modules, States, and Themes. I found this framework to be simple, flexible, easy to maintain, and applicable to projects large and small. Compared to other methodologies I found it had a smaller learning curve for both designers and engineers. It was less focused on dogma and metaphors, and it aligned well with both programmatic principles and component library functionality in design software.

At this stage I started compiling documentation and a living Style Guide. While I was prepared for the system to evolve and change, I found it really important to log decisions I’d made and compile the resources that led me there.

Audit

A key step in establishing the design system is conducting an audit of the existing styles. I used a tool called Project Wallace to get a baseline for the number of colors and font styles. This may seem small at first, but using consistent brand colors and streamlining typography is a quick way to elevate the design and cut down significantly on design and development effort. Next I looked into high-impact elements including buttons, forms, and navigation. I took note of bugs in responsiveness and created a plan for how to create a flexible grid system to support the content.

Implementation

I worked with the CTO to establish a code structure that would allow me to keep the existing site and styles intact while I started to implement the new design system. Slowly as I eliminated the use of old styles I could remove them until the entire site was moved over. I could perform this with very little design bandwidth. Not only was I moving things to a modular system, but I was also making the site fully responsive. In some instances I needed design buy-in when making a component scale gracefully to smaller screens, but generally we were establishing a pattern that could be reused throughout.

Aside from the modular styles, we were using AngularJS and Django templating framework to create reusable and dynamic markup. I worked with our back-end developer to align naming and establish best practices.

Results

Creating LUMA allowed our small team to create a cohesive web presence and improve overall user experience. My team was able to scale LUMA to our student/mentor dashboard, online curriculum, blog, third–party help center, and HTML emails. This initiative significantly increased the speed at which we could prototype and launch code. It also substantially decreased maintenance and UX debt because updates to LUMA would elevate the entire digital ecosystem.