Designing for Insight: Leading Initiatives to Prep for Effective Design System Testing
In this case study, I highlight my leadership role in developing a task-based user flow that effectively captured feedback on new design system offerings.
Role
Lead Researcher
Team
Convergence Design System
Duration
3 Months
Testing our Design System with Product Users
I was the lead designer in planning and facilitating design system testing at our company user event. I led collaboration between 3 designers and 1 developer over the course of this 3 moth project.
This project consists of the work I did to guide delivery and ensure we would get meaningful user insights for our design system.
Our Definition of Success
I kicked off this process by working with my team to set expectations and define goals that would measure the success of this effort. These goals helped us to understand expectations and determine what we wanted to learn and resolve by doing this testing.
Validate Usability
Get feedback on whether our new components and patterns are intuitive to our users within the context of a product.
Are users able to complete tasks as expected with our design system features?
Identify Gaps
Improve design system features that aren't meeting user expectation/needs.
This testing should give us an understanding of what's working, what's not, and what we can do to make improvements moving forward.
UI Preference
Understand how we can update our design system to enhance visual interest and usability.
Get feedback on conceptual visual design themes to help us define and improve our design identity direction.
Defining Scope and Delegating Tasks
This project required effort form both design (blue) and development (green). It was critical for us to define the deliverables we needed to meet upfront to ensure success by the testing date. I worked to define all tasks we needed to accomplish within our timeline to meet our goal.
Collaborative Brainstorm
I led a series of workshops with the team to make sure each of the designers had the chance to voice outstanding questions they had on recently designed components and patterns.
From this workshop series we were able to align on the items we were looking to incorporate in this test.
Test Structure
After workshopping and aligning with the team, we determined the test will consistent of 2 parts.
1) Component & pattern testing:
We decided on incorporating 8 newly developed components/patterns into a UI flow. We planned to create task based scenarios to have users interact with those 8 features to understand usability and identify design gaps.
2) Visual design preference testing:
We planned on preference testing still screens of visual design options. Here we were looking to collect feedback and impressions on visual design options the team had been working on.
Piecing the Components Together
I created a user flow of a mock product that incorporated the design system components and patterns we were looking to test.
The flow included 8 task based actions for the user to preform that allowed us to observe user interaction and gain insight into outstanding questions.
Visual Preference Testing
Previous feedback indicated that our UI design could be improved to add more visual interest and emphasize hierarchy. My team set out to collect feedback on the following visual design themes to help us define and improve our visual design direction.
We asked participants to review the following 4 themes and determine which was their personal preference.
Comfortable Elevation
Similar to our existing UI design with reconsidered spacing, radii treatment, and color blocking.
Dark Theme
A dark mode version of our comfortable elevation theme. In this theme we also explored the addition of gradients.
Brand Theme
This theme leveraged illustrative elements and color blocking inspired by our company's brand and marketing.
Bubble Theme
With this theme, we are looking to explore exaggerated UI elements with rounded corners and segmented spacing.
Word Association
Participants were asked to assign descriptive words to the themes from a set of adjectives we provided.
This exercise was used as a way to gauge how participants perceived each theme and determine whether the visual identity we were looking to communicate was coming through in the designs.
Note Taking to Streamline Synthesis
In preparation of the user testing event, I thought about how in the past, our hand written notes weren't adding value in streamlining data synthesis. I reimagined our note taking process to simplify capturing insights and increase effectiveness when synthesizing data.
Updated Note Taking Format
I made a template in FigJam that followed the structure of our user test making it clear to the note taker what data was helpful to capture and color coded the feedback based on the user.
Data Synthesis
When synthesizing data, we were able to sort the sticky notes and understand which insight belonged to which user at a glance. This process streamlined collecting feedback for our final report.
