What to do when a component is no longer aligned and causes downstream usability issues
February 4, 2020
As a designer, have you ever come across an outdated component in your design system that was no longer serving the needs of your team? Dusty from the years since its conception, it fails to provide its original value as it has accumulated its fair share of pain points and usability issues?
If this sounds familiar, redesigning the component may be the best thing you can do for yourself and for your design team moving forward. This is a step-by-step guide on how to do just that based on a recent side project I worked on at MongoDB.
In order to best understand the potential value a newly designed component can provide for future projects, identify where it has been in former projects. Explore your current application or platform to best understand what specific contexts it lives in.
Write down all of the different pain points you’ve experienced using this component and all of its areas of improvements. Then, transition into internal interviews with members on your design team who have used this component in their former projects. From this internal research, you’ll be able to learn more about the reasoning behind its usage and confirm existing or discover new pain points across a multitude of different teams within your organization.
For my specific stepper component, below are examples of pain points I collected from speaking with my team.
Analyze the data you’ve collected and write down a list of principles that you’d like the new component to embody. Creating a vision for what improvements can be made will help focus on fixing the weaknesses the current component has.
You can find examples of the ideal principles I wrote for my stepper component below:
Below is a list of existing design systems that I explored during this phase of the project along with their respective links. This can serve as a solid foundation if you’re not familiar with most design systems already.
This is my favorite part — exploring a myriad of options derived from the inspiration of your competitive audit in addition to ideas from your own early sketches. Lay them all out on a collaborative prototype screen so that you’re able to share them with other members of the team to gather comments. From the feedback, nail down 4–5 options that seem to be the strongest directions. You’ll be evaluating the alternatives in external user testing. It may also help to develop early concepts for other states of the component in order to help visualize the designs further.
After selecting the specific designs, focus on your goals for the user research studies by defining the UX principles you’d like to test (i.e. discoverability, comprehension, etc.). To save on time, I performed task analysis on remote, unmoderated users on UserTesting.com. I understand that not all design teams have the budget and resources to use a third-party service; you can also perform internal testing within your company or recruit outside participants to gather this data.
Here are some example questions from my user testing script below to act as a baseline for your own use.
- What are some elements that catch your eye on this page?
- What do you think the user is attempting to accomplish on this screen? How do you know this?
- What do you think you will be doing next? How do you know this?
- What do you think about this element now that you’ve seen it in this page context? What do you think it means?
- Give me a rating on how clear it was on a scale from 1–7 (1 being least clear, 7 being most clear). Why?
- What are some hover interactions you’d expect from this component?
- If you had a magic wand that could change anything about this component, what would you alter (if anything)?
To better organize your test results for analysis, create a table that captures your data in a structured manner. I watched countless UserTesting.com videos and jotted down whether or not a participant passed the task I asked of them (indicated with a checkmark). For questions that were more open-ended, I copied the answers into the matrix.
You’ve done some user testing now, but you should confirm the design decisions you’ve made up to this point with your peers. Your team will be the ones that will be using the component in their projects extensively, and, in turn, users will ultimately be the ones impacted heavily since they’ll be interacting with the component the most. By speaking with colleagues, this gives you additional feedback on the visual and interaction design and also gives others on the design team an opportunity to voice their thoughts on the progress of the project.
*Keep in mind, you do not have to follow all suggestions as long as you can defend your decisions and reasoning.
Make sure your designers are aware of the colors, padding and margin measurements, and interaction behaviors for all the different states of your component. Placing your component in a sample page context also helps envision how it could be used.
To amplify the design of your component, animation may be a great addition to enhance micro-interaction elements and add polish to the component.
For my specific use case, I’ve linked the prototype I created to show hover animations for my component.
Work with someone from your design systems team to establish the different states that you need to create as a handoff file. Then, hand it off to the team responsible for developing the component that you redesigned. Once the component is fully built, share it with your team and include the guidelines to remind your peers of the appropriate usage behavior. Moving forward, it may help to include the component file in a shared space or add it to your design system library where others can find it quickly.
If your company does not have a dedicated design systems team, this might be a great time for you to brush up on your coding skills to develop the component yourself.
It’s always fun to see a side-by-side comparison of old and new designs. Be sure to thank those that’ve helped you with your redesign project and be on the constant lookout for how your design system can be improved!