The Project
A style guide and widget library to help developers to build up the frontend components more efficiently.
Team
UX & UI Designer (Myself)
Time frame
1 week
The challenge
- How to manage a consistent UI that works with the existing brand
- Some widgets have already been implemented by the dev team, the widget library needs to improve the usability but not too complicated for developers to rewrite the entire function
The process
Uncovering the need/problem
Many project teams have inconsistent UI and guidelines that are becoming hard to manage and update. I needed to create a styleguide that is flexible and will be used to bring consistency across the project.
A collaborative effort with developers
In order to create a UI styleguide that will benefit developers, I dived into the existing functions, and talked to the technical lead and frontend developer about the upcoming features. During this collaborative process, I created a UI styleguide using Sketch, and exported the specs to Zeplin.
Testing, gathering feedback and making improvements
Once I finished the first version of the styleguide, I presented it to the dev team for feedbacks. It’s an iterative process, and I made the continuous improvement for the team.
Outcome
Using the same framework allowed devs to easily maintain a consistent style across the project
Developers can work better together while saving development time
