Team
Project Manager, Lead Front-End Developers
My Role
Lead UX/UI Designer
Date
March 2022 - June 2022
Client
Heretto
About this Project
The team at Heretto reached out to me to work on redesigning their website's help documentation site. Heretto clients needed an accessible and functional Help Page that has embedded videos, and other helpful tools for their business needs.
The Challenge
The Design Solution
Before Jumping
Straight Into Designing
The product manager and I worked together to establish the help site's new visual identity. I created a Style Style and presented a series of proposed visual designs to the CEO, CTO and lead developers.
My Process: Wireframes
I designed the wireframes based on the help site's sitemap flow. I created all the wireframes from the homepage, search page, other relevant pages and also mobile pages for responsive design.
My Process: Design System
I designed the wireframes based on the help site's sitemap flow. I created all the wireframes from the homepage, search page, other relevant pages and also mobile pages for responsive design.
Finalized Component
Design Library
I designed the entire component design library consisting of:
Component name:
A specific and unique UI component name, to avoid miscommunication between designers and developers. This needed to be clear so that the components would work as they were supposed to without error.
State changes:
Recommended defaults and the subsequent changes in appearance.
Annotations:
Page annotations and descriptions to understand what component you were looking at.
Breakpoints:
Any size indication and breakpoints for the developers.
What's Next?
Testing
It would be nice to name this design system. But most importantly, further testing would be required to address any potential user pain points. Observing designers using the system and noting pain points to resolve in future releases would be a critical next step.
Future Updates & Considerations
As a constantly evolving system, Version 1.0 is square one. Version 2.0 would include the following:
For all components:
Usage guidelines & examples
Detailed specs
Code documentation
Updated Image guidelines
As Heretto's business continues to grow and mature, identifying commonalities to contribute back into the system for others to use should become inherent in our design process–the virtuous cycle!
What I've Learned
I learned to present and voice my design ideas and rational to various stakeholders throughout the company. I understand what the pain is like when developers aren't sure what size button and what font size is necessary for the project. I learned that documentation is KEY - it saves me and the company a lot of time and money on this project.
Lastly, this was a remote project, I was fortunate enough to have a Product Manager that trust in my abilities and collaborated and communicated with me throughout the ups and downs of the project.
