Scroll
work sample
Exponent
Company Background
Exponent, a successful e-learning platform, helps prepare users for tech interviews in product management, engineering, and more. Their product includes hands-on coaching, lessons, mock interviews with expert insights and tips. Exponent’s goal is to help users advance their career.
Challenge
Despite prioritizing content as its core product, Exponent’s brand lacked clarity, hindered by design inconsistencies stemming from disjointed efforts by multiple independent designers.
Goal
Recognizing the need for coherence, I spearheaded the development of a comprehensive design system. The objective was to capture Exponent's brand and provide clear, consistent guidelines rooted in UX principles. Emphasis was placed on maintaining visual resonance with existing designs, ensuring a smooth transition for designers adapting vetted designs to the updated system.
Original Design Guidelines
Design guidance only applied to the product's branding. It did not address content design.
Initial Design System had minimal components and limited instruction
- The guidance provided lacked design specifics, instead focusing primarily on how to use Figma.
- Components were tailored to two specific programs, lacking a setup for universal curriculum-wide usage.
- No documentation accompanied the 130 brand colors, leaving their specific purposes unclear.
- Unedited free icons led to multiple duplicates, including nine versions of the "check" icon, complicating Exponent's visual identity.
The absence of clear design guidelines led to prolonged back-and-forth communications, which in turn delayed production.
Result: a disjointed visual identity
Existing content revealed a lack of cohesion, with each design appearing unique and disconnected.
Process
Role
Over a two-month period, I established a comprehensive design system to ensure visual and brand coherence. This involved researching the company's needs, refining their branding, and developing the design system. Tasks included bug fixes, component and template creation, and the drafting of thorough documentation for system usage. I further validated these design choices through user testing. In sum, my contributions encompassed guiding visual direction, making design decisions for brand, UX, and system usability, and strategizing documentation efforts.
Research
Leadership Buy-in
Design Principles Workshop
I facilitated a Design Principles workshop with Exponent's Founders, COO, and Marketing Lead to align with their brand vision, collaboratively brainstorm visualization tactics, secure leadership buy-in, and emphasize the significance of intentional content design in brand establishment.
User Research
Exploring the User's Design Process
I studied the design decision-making process by examining the approaches of previous designers, who I considered as the user. I reviewed Figma files and conducted shadowing sessions, observing designers in action and prompting them to verbalize their thoughts. The sessions were capped with brief user interviews.
TAKEAWAYS
Reduce Decision Fatigue
Friction: Designers felt bogged down by the volume of design decisions they needed to make.
Goal: Create guidance that’s clear enough to reduce decision fatigue among designers. Decisions should be obvious where possible, while leaving room for creativity.
Goal: Create guidance that’s clear enough to reduce decision fatigue among designers. Decisions should be obvious where possible, while leaving room for creativity.
Consistent Documentation
Friction: Designers didn’t reference the usage guide very much, as it was cumbersome to navigate to Notion from Figma and so instead relied on their own experience and instincts to make decisions about component usage and UI patterns.
Goal: Move the usage guide to Figma to make using the design system paired with it’s documentation simple, which will enhance use and, therefore, consistency.
Goal: Move the usage guide to Figma to make using the design system paired with it’s documentation simple, which will enhance use and, therefore, consistency.
Refine
After gathering executive feedback and buy-in, exploring user’s behaviors, pain points and needs, I honed in on a specific approach and style.
Functionality Focused
For improved user experience, I revamped the information architecture and library structure. Responding to user feedback on platform integration, I migrated the Usage Guide to Figma, aligning it with the design system for real-time updates and improved usability.
Visual Design Principles
Informed by the Design Principles workshop, I refined the design direction for the brand's look and feel in the Design System allowing me to make design decisions for each element in the system. The envisioned branding style aimed for a light and airy aesthetic with ample white space, featuring practical, trustworthy, approachable, direct, and valuable elements.
Develop
Having refined a specific style and usability layout, I developed numerous fully functional templates and components, accompanied by detailed instructions and usage guidelines. The layout of this information is as follows:
Layout
Design components and usage guides, inspired by Atomic Design principles, are divided into Atoms (fundamental building blocks) and Elements (combinations of multiple atoms).
Atoms:
Each page (color, icons, typography, etc) includes a clear definition, specified usage, application do’s and don’ts, and best practices for future editing.
Elements:
Each page (color, icons, typography, etc) includes a clear definition, specified usage, application do’s and don’ts, and best practices for future editing.
Design System Pages
Examples of the templates, components, instructions, and usage guidelines.
Validate
User Testing
I conducted user testing with Exponent's content designers on the new system and its components to identify bugs and assess usability. Asana and Notion tracked the testing process, and users recorded their experiences with Loom for later review. The evaluation focused on the system's intuitiveness, determining if it reduced decision-making for designers, and identifying any bugs within the components.
Impact
Reduced Decision Fatigue
A key hypothesis in this project was that reducing user decisions would allow prioritization of higher-value choices, enhancing company scalability. To alleviate decision fatigue, I created comprehensive variations of each component, pre-setting them for intuitive navigation through various properties.
Streamlined Onboarding
The seamless Figma integration, combined with clear guidance and relevant links in the design system, streamlines onboarding for new hires and helps current designers adapt quickly to the updated system.
A Thoughtful Internal Product
In this project, I aimed to treat the internal product with the same level of care as I would an external product, enhancing aesthetics in line with the brand's vision and improving usability for designers. This involved introducing new component properties, restructuring the system's architecture, and providing well-documented usage guidance.
Positive Feedback
"Just want to say that I really appreciate the Design System! It's very well organized and intuitive. Helps me make changes quickly." - Sarah Seungju; Curriculum Manager
"Susannah not only created successful designs for our programs, she also conceptualized and implemented the entire design system, and championed its successful adoption throughout the organization. She was the sole designer responsible for creating the rules for each design element, offering examples of usage, and developing functional reusable components. As a result, we were able to improve our curriculum production efficiency and output. Susannah’s excellence extends beyond design, as she has demonstrated a keen organizational mind, setting up systems that enhance collaboration and productivity. Her versatility and thought leadership are evident in her ability to create organized systems that support other designers and teach in-depth knowledge to users across various tech backgrounds." - Anne Yu; COO
Final Thoughts
Key Takeaways
Fostering Trust Through Collaborative Feedback
Regularly collecting and analyzing feedback from users, specifically other designers, helped to identify pain points and areas for improvement. This collaborative approach fostered trust, demonstrating that the design system was being developed to support their efforts rather than constrain their creativity.
Scalability and Flexibility are Key
A robust design system should be scalable and flexible to accommodate the evolving needs of educational content. Creating components and patterns that can be reused and adapted reduces redundancy and streamlines the design process.
Regularly collecting and analyzing feedback from users, specifically other designers, helped to identify pain points and areas for improvement. This collaborative approach fostered trust, demonstrating that the design system was being developed to support their efforts rather than constrain their creativity.
Scalability and Flexibility are Key
A robust design system should be scalable and flexible to accommodate the evolving needs of educational content. Creating components and patterns that can be reused and adapted reduces redundancy and streamlines the design process.
Leadership Buy-in Creates Consistent Design
Leadership endorsement ensures that the design system is recognized as a critical part of the organization's strategy. It sets a precedent for the entire team, emphasizing the importance to adhering to the design guidelines which helps prevent inconsistencies.
Next Steps & Considerations
Establish Design System Ownership
As a contractor, I won't be responsible for maintaining this documentation. The next step is to appoint a designated designer as the "owner" of this system to ensure it remains a helpful living document, receiving regular updates and maintenance as design needs evolve.
Structured Training and Onboarding
Continuous training and onboarding for all incoming team members are essential to help them quickly get up to speed and stay informed. Currently, there is no specific training format for new hires. The next documentation priority should be creating a structured onboarding process that integrates familiarization with the design system.
Implementing a Better Feedback Loop
Moving forward there should be a more robust feedback loop to gather insights not just from designer users, but also educators and students. This could be formalized through surveys, usability testing, and regular meetings. Integrating this feedback will help the design system continuously improve and adapt to better serve its users.
As a contractor, I won't be responsible for maintaining this documentation. The next step is to appoint a designated designer as the "owner" of this system to ensure it remains a helpful living document, receiving regular updates and maintenance as design needs evolve.
Structured Training and Onboarding
Continuous training and onboarding for all incoming team members are essential to help them quickly get up to speed and stay informed. Currently, there is no specific training format for new hires. The next documentation priority should be creating a structured onboarding process that integrates familiarization with the design system.
Implementing a Better Feedback Loop
Moving forward there should be a more robust feedback loop to gather insights not just from designer users, but also educators and students. This could be formalized through surveys, usability testing, and regular meetings. Integrating this feedback will help the design system continuously improve and adapt to better serve its users.
