Building a Design System to solve component-level UX issues
How I leveraged UX issues with existing legacy UI components to create a brand new scalable design system that saved 50% development time and resources.
My role and impact
My Role
UX&UI, Product Designer
Money
Cutting development costs by using reusable components
Time
Scalable components = 50% less time spent in modifications
Measuring success
Charts
Implementation timelines before and after the design system
Mixpanel
Analysing user actions to validate the UX adjusments made to components
As a Product Designer at Sedna, I worked with my team to solve a design system problem. The challenge arose when the company was transitioning from scale-up to enterprise tier and needed to find a brand voice.
Collaborating with the graphic design and marketing colleagues, I approached a branding problem as an opportunity to solve UX issues existing components had.
One of the problems was the plethora of unorganised variants, styles and tens of untokenised HEX values making the product difficult to scale.
The main work consisted in building a design system collaboraing with the Front End team to document every design and interaction step in Storybook.
Let me walk you through two examples on how I contributed to design system planning while solving UX issues with Toasts and Private Tags.
Toasts
Leveraging a placement issue on the screen to build a more usable and scalable component to introduce in the design system.
Impact of change
UX value
Undo actions on Mobile
Time
Less time to implement future variations (i.e. themes)
Money
Saved development resources to tackle this issue
Measuring success
Appcues
Collecting user serntiment through open feedback modules
Zoom
Checking with users directly by speaking to them about the change
Problem: Toasts block mobile navigation
Poor usability - Blocked navigation Every time you get feedback in the mobile app, you lose control of navigation due to disruption.
Users archiving emails as part of their daily workflow complained about invasive toasts.
Solution: placement, navigation and better UX
Designing an interaction behavior with less intereference The solution achieved: - Fixed placement above navigation - Unified feedback in one toast - More padding to create tabble buttons - Undo button to address user error
Documenting in Figma - Thinking ahead for dark mode
Future thinking: creating an elevation map
Mapping elevation predicting future product use As elevation is needed to make the toast stand out from the background without an abrupt interaction, I mapped elevation in a scalable way for other components in the product.
Desktop Approach: iOS pattern experimentation
Notification pattern inspired by MacOS. Trying to interfere less with navigation. Avoiding space disruption with calls to action i.e. attachments.
This idea was eventually killed, as there were complications with predicting the width and risking misuse of space.
Storybook Developer Documentation and Code Limitations
Pairing up with developers: addressing limitations. The design accounted for keeping a single summarising toast for repeated actions. Codebase Limitations won't allow this. My call was for the most recent toast to replace the previous one. Because of code limitations, engineers were unable to set different breakpoint width values. I decided to keep the width at 90% of screen space to avoid any engineering risk.
Tags: Categorising User Inboxes
Leveraging existing patterns to help users customise their private inbox to further customise their email.
Impact of change
Customising
Better inbox customisation
Time
Reducing time spent searching and filtering inbox
Money
Increased user acquisition thanks to this feature
Measuring success
Appcues
Collect user serntiment through open feedback modules
Zoom
Check with feedback speaking directly with users
Problem: Users cannot see tags
Addressing usability issues: poor contrast
I picked up the project right after a colour change that fainted the tag looks.
While this reduced visual noise, users complained about not being able to tell tags apart from the interface.
Colour middleground experimenting
Iterating on colour while staying with limitations. Colour iteration meant usability testing and WCAG AA accessibility testing.
A handful of Design Crit meetings later...
Mapping variations that can scale. Ended up with a middle ground between the bold and noise UI colours pre-release and the fainted looks.
As a product decision, I advocated for adding this as a setting to minimise risks.
Further improving the UX: a new Tag
Adding a new Tag type. New colour. While working on this project, I designed a new tag type that, differently form the rest of tags, was going to be private and not shared, as the existing ones.
A new UX problem: managing Private Tags
Because private tags will be released to all users, it needed to have a quicker way to create, apply and delete tags. Because other shared tags are created only by higher user roles, most of the actions for creation and deletion happened in Settings. A scalable modal was the solution to avoid leaving the message and still being able to create and apply tags with two clicks.
Progressive Web App Experience
Creating a mirrored experience in mobile.
In addition to adapting the tag colours, the interaction design mirrored in mobile will allow users to quickly add and remove tags from their mobile with ease.
