When I joined the Creator project, the product already had a basic interface structure in place. My role was to refresh its visual identity — introducing Dark Mode as a new direction to give the platform a more refined, stable, and tech-oriented personality. In parallel, I reviewed and standardized all the scattered design elements from earlier stages, organizing them into a cohesive Design System to ensure consistency and scalability.
Since the product had previously been handled by several different designers, the interface and component styles were filled with inconsistencies. When I joined the project, I faced the challenge of restructuring the overall visual system. Building upon the existing information architecture (IA), I selected pages that contained the most diverse UI components to create redesign proposals. These were discussed with the PM and engineering team to evaluate the feasibility of visual and component updates.
The original product interface had weak visual hierarchy — for example, the header area and content editing sections were visually blended together. Many components also looked too similar; for instance, tabs and buttons were often hard to distinguish.
After identifying the key areas for improvement, I selected one to three representative screens for redesign. These screens were chosen to include commonly used web components or to represent the product’s core features, allowing the team to better visualize different use cases during internal discussions. This approach also helped establish preliminary component styling guidelines, enabling front-end engineers to evaluate the time and development effort required for each proposed change.
This A/B test compared the hierarchy of the header section. In version B, the editing area was more clearly separated from the header, while the overall visual hierarchy was simplified for better clarity.
Defining component details during the proposal stage helps front-end engineers more accurately estimate development time and effort.
After wrapping up the redesign proposals, I finalized the approved interface and component definitions, creating a comprehensive Design System Guideline for the product. The guideline covered areas such as typography adjustments, color specifications, and logo rebranding, ensuring a cohesive and consistent visual identity across the platform.
After finalizing the interface design, I used the original page as a reference example to help the PM and engineers clearly understand the scope of visual and structural changes.
Next project
