Faith
Reeves
I re-designed Meridian's Data Visualization Color Guide page, a crucial component of 84.51's design system documentation website. This project encompassed phases of exploration, design, collaboration, coding, and optimization, resulting in an improved and more user-friendly design system documentation page.
Users struggle when creating data visualizations because the guide page's unclear visual hierarchy, inconsistent color usage, and inadequate accessibility features.
How might we improve users' experiences on the Data Visualization Color Guide webpage?
A redesigned web interface with accessibility features that empowers users with an intuitive and efficient experience.
Keep scrolling to explore how I redesigned this webpage.
I talked with the design system team (the users) to define the webpage's audience and it's purpose. I also examined the need that prompted its creation in the first place.
Users find it hard to copy hex codes because there's no button, making it tough to utilize the color guidelines.
Users get confused with the order of things because the layout highlight what's most important.
Users don't know which colors to use because the guidelines aren't consistent.
I explored design systems from industry leaders such as Adobe, Uber, and Mailchimp to gather valuable insights and inspiration, informing the project with industry best practices while evaluating their strengths and weaknesses.
I designed prototypes and got feedback from my users, refining concepts before coding, to make sure the design met project goals and stakeholder expectations.
Users did not understand the correlation between the color cards and the color usage examples below them, leading to confusion when trying to figure out how to properly use certain colors.
.svg)
Users can now easily understand the relationship between a color card and its usage example because they are grouped within a common region, enhancing the page's visual hierarchy.
.png){kind=small}
Users faced difficulty in locating and reviewing the Meridian color palette due to its obscured placement or insufficient prominence within the design system documentation.
.svg)
By converting the text mentioning the color palette into a clickable link, users can now easily access to the Meridian color palette page.
.svg)
The feedback from users at this point indicated that there were still unmet expectations and usability issues, so I knew I should keep iterating on my design.
.svg)
Using feedback from my users, I iterated on my design, focusing on improving the page's accessibility and usability in order to meet user more comprehensively.
Users only use the HEX codes on the color cards and found the rest of the information unnecessary, causing them to feel overwhelmed by the amount of options.
.svg)
Color cards were redesigned to feature a compact layout displaying only hex values, addressing user feedback by reducing unnecessary clutter and enhancing user experience.
.svg)
Users find it frustrating to manually copy and paste hex codes, which takes extra time and isn't accessible for those who rely on assistive technologies.
Color cards were redesigned to feature a compact layout displaying only hex values, addressing user feedback by reducing unnecessary clutter and enhancing user experience.
Overwhelmingly positive user feedback and lack of major pain points signaled to me that my design was ready to be complete.
After finishing my design, I started building the page using the tools listed below.
JavaScript
HTML
CSS
Flexbox
Bootstrap
React
