Library User Testing
Project Overview
Project Title
Improving User-Centered Designs for Indeed’s Design Library
Role
Lead UX Researcher
Duration
June - Aug 2022
Objective
To ensure new designs provided by designers are user-friendly and centered on user needs.
Study context
In Q1 of 2021, the Indeed Design Systems team did user testing which uncovered pain points such as designers not being aware of Figma capabilities (e.g. customization of components) or being able to find a component in the Assets panel. To solve these pain points, the DS team designers provided a list of designs and scenarios to make the IDL a better resource for all the designers and users in terms of findability, simplicity and consistency.
Goal of the study
The goal of this study is to understand if these designs and scenarios meet our users' needs in order to solve their previous pain points.
For this study we wanted to understand:
Findability of Documentation and UI components
Measure the Usefulness of IDL additional pages: UI kit, Start page.
Validate the UI kit and the Start Page
Methodology
I conducted this study using in-person moderated interviews via Zoom and an unmoderated follow-up questionnaire
Total of 8 participants
UX designers who work at Indeed
Mix of career levels: Associate, mid-level and senior level
All sessions were recorded
Process
Planning: Developed test plans and scenarios focused on findability of documentation and UI components from the UI kit and Start page within the Figma design library.
Execution: Conducted 10-minute sessions where users interacted with the new designs while performing specific tasks and an unmoderated follow up questionnaire.
Data Collection: Collected both quantitative data (task completion rates, time on task) and qualitative feedback (user comments and ratings).
Analysis: Analyzed data using thematic analysis for qualitative data and statistical analysis for quantitative data.
UI Kit Testing Summary
When asked to think out loud, 100% of the participants mentioned that they really appreciated the visuals with the names of the components. Several participants mentioned that it was easier to straight-forward and much easier to understand than only a label.
All the participants liked the visual view of components
of the participants expect to see the same UI kit for the Pattern library once they click on the FPL button on top of the page.
75%
“Visuals are nice and clean and easy to navigate.”
“Visuals make everything easier to understand for the designers”
When asked what they expected to see if they clicked on each card 100% of the participants mentioned that they expect to see some information about the component such as documentation, component variants, localization, …
All of the participants were aware of what they may see by clicking on each component card
“I expect to see another UI Kit same as this one for the Patterns”
“I think that I can go to a similar page by clicking on FPL Button for Patterns”
When asked what they expect to see if they click on “View Pattern Library” button 75% of the participants mentioned that they expect to see the same UI Kit for the FPL
“I think it would be good to have a link for engineers to figure out how to use the component. Something like a button component linking to the storybook or DocHub were all the components live.”
“I assume that the cards take me to the component documentation”
50%
of the participants did not find the left nav bar useful.
of the participants requested a link for developers such as to DocHub or Storybook in the UI
50%
When asked is there any missing information in this UI, 50% of the participants requested to add a link to DocHub or Storybook for the engineers.
of the participants expected to click on the card rather than clicking on the view link
(Note: Figma does not allowed this)
75%
When asked about the left navbar usefulness, 50% of the participants mentioned that it is not useful for them but one of them just used the left nav for easy scanning when he knew the name of the component.
“The left hand nav is not necessary for me since it is the same as Figma left hand nav and even the list gets longer. Do we have a search option?”
“I believe that the left nav bar may not that useful or maybe we can use toggle to hide the left nav bar.”
Start Page Testing Summary
50% of the users prefer not to update their Figma library
When asked if any participants ever updated their Figma library, 50% of them mentioned that they are afraid to update their Figma library because their files will break.
“Whenever there is any updates it messing up my old designs so I have to go over them all and fix them one by one.”
50% of the users did not understand the word “Customizing Components”
“I believe that naming “Customizing components “does not make sense and maybe configuring components is more better”
As seen in the Q1 2021 Study, designers are not aware of Figma’s capabilities.
The Design Systems team’s definition of customization of a component is that a designer can work with the property panel in Figma. However, 50% of the participants did not understand the term “customization of components.”
1 participant described their process of customization without mentioning the Figma Property panel at all and they rated their customization confidence level as very high. Another participant did not understand the term “customization”.
75% of the participants were confused by inconsistent labels
Participants were confused by different names for various titles for UI such as Patterns vs Figma Pattern Library vs Pattern Library. Participants were confused by these inconsistencies in the Start Pages.
“The title on the left should match it’s abbreviations”
50% of the participants did not understand the difference between “Style guide” and “Guidelines”
Note: Could not see a clear definition between guidelines vs style guide.
Also did no see any style guide examples in the IDL)
Participants were confused by different names for different titles for UI such as Guidelines vs Style guide 50% of the participants believed that they are the same.
“Once I was working on a mockup and there was a sizable IDL update and then they all became deprecated. Replacing them is a pain point. I understand why, but it’s still a struggle to do this and I don’t know if I will change it all to update these next time because of the —lengthy time needed to do this.”
“I’m not sure I understand the difference between “style guide” and “guidelines” because those seem essentially the same”
50% of the participants find the FPL explanation and the link useful
50% of the participants think that the description of the FPL and the button link that give them access to the PFL is Useful for them.
“The explaining what the FPL and there is a button that i assume will help me navigate to access PFL is the most useful thing in this page.”
50% of the participants believe that "You are here" is the least important part of the UI
When asked what is the least important thing in the UI, 50% of the participants think that the “You are here” is the least important thing in the UI.
75% of the Participants requested to have a link to the IDL
“The “you are here” flag is the least important piece of information here. There’s not that much information here, so it’s distracting and doesn’t have any purpose”
Participants pointed out that a link button for IDL was missing and needed in the “What is Indeed Design Library (IDL)” screen. However, participants are located in IDL making a link button redundant (it would just take you back to this same screen).
Though participants felt confident they knew where they were (see previous slide) and did not need any markers such as a “you are here” flag, they were unaware that they were currently in IDL and wanted a way to get to this location.
“My first thought is why there isn’t a button to IDL on this page, since that seems like it might actually be helpful depending on where this information lives”
Usefulness rating for the Start Page was 3/5
The experience was rated a 3/5 which is neutral/slightly useful.
37.5% of participants rated the experience as a 2/5 which is “not useful” to them, however half of the participants rated the Start Page as a 3 or above which is promising.
Findings, Recommendations and Insights
UI Kit findings
50% of the participants requested a link for developers such as to DocHub or Storybook in the UI
100% of the participants were aware of what they may see by clicking on each component card
75% of the participants clicked on the card itself instead of the view link
100% of the participants like the illustration view of the components rather than the list of names
50% of the participants found the left hand navigation not useful
75% of the participants expected to see the same UI kit for the patterns when they click on the FPL button
UI Kit Recommendations and Insights
Add a link to Storybook or DocHub for developers
Remove the left nav bar or make it togglable
Add the same UI kit for the FPL Library
Make the whole Card clickable(Figma limitation and need to brainstorm ideas with the team)
Start Page Findings
50% of the participants prefer not to update their Figma library because they afraid that their files will break
Customizing components: naming does not make sense for the 50% of the participants
50% of the participants asked "Why are there so many deprecated components”
[Note: being currently investigated]50% of the participants think that Style Guide and Guidelines are the same
75% confused by inconsistent labels
75% of the participants requested to have the IDL Figma link in the design
50% of the participants believe that "You are here" is the least important part of the UI
50% of the participants believe that the explanation about the FPL and the link to the library is useful
Start Page Recommendations and Insights
We need to consider alternative methods to encourage designers to update the Figma libraries
Consider the label “customizing components”. An alternative label might increase comprehension [pending additional UXR findings]
Make the difference between the guidelines and style guide should be clear
Need to make all the same titles consistent in the UI
We need to consider a way that the users know they are in the IDL rather than a “You Are here” flag.
Results
Metrics and KPIs: Task completion rates improved by 25%, and user satisfaction scores increased by 15%.
Qualitative Outcomes: Users reported a more intuitive and enjoyable experience with the updated design library.
Challenges and Solutions
Challenge: Coordinating remote testing across different time zones.
Solution: Used flexible scheduling and asynchronous testing tools to accommodate users’ availability.
Conclusion
The project successfully enhanced the usability of Indeed’s design library in Figma, resulting in higher user satisfaction and more efficient design processes. The findings underscore the importance of continuous user feedback and iterative design improvements.
Visuals and Artifacts
