Problem Statement
Hoan My Corporation digital appearance is inconsistencies due to the lack of a unified style guide.
Goal
Create a easy to be adapted style guide to improved workflow efficiency between designers and developers, , fostering better teamwork and communication.
Situation | From the beginning
Upon joining, I quickly noticed significant inconsistencies between the master design files and the live website. Due to the lack of a unified style guide. This led to several challenges:
Design Confusion: Designer faced uncertainty when creating new landing pages, resulting in inconsistent designs.
Development Misalignment: Developers received varied directives, leading to different interpretations and causing confusion and misalignment across departments.
Inconsistent User Experience: The overall user experience suffered due to inconsistent designs across different landing pages.
These are landing pages for the package page (and no, they’re not customized for each product or customer). Honestly, without the colors, I wouldn't even know if they belong to the same hospital
So, my Task
Create A Style Guide
Recognizing the need for creating a unified system, I proposed a UI style guide
Action
Goal-Archiving Methods
Component “Inspect”:
Using the web browser’s Inspect function, I began to ‘investigate,’ filtering and taking notes as I analyzed each component, from font classes to element styles, on every page against its UI design file to identify differences.
This was very time-consuming when checking every component from text sizes to spacing to even colors. It took some time here to go through quite a few pages on every page and stop mixing up all the numbers...
Pixels Standardization
After sorting, I standardized design elements such as typography, color schemes, buttons, forms, and other UI components. To overall create a cohesive design language.
Checking what works for both the design UI and the live website. Sorting out what to keep and what to remove.
Style Guide Time
After gathering all the necessary “ingredients”, I moved to developing the extensive style guide that offers precise guidelines for future designs.
Check out the Style guide below! <3
Result
Successfully created a style guide
My efforts improved workflow efficiency between designers and developers, fostering better teamwork and communication.
