RASTAR
REDESIGN
UI+UX
Mobile web reconstruction
Through RE-BUILD mobile web structure to improve operational efficiency, UI material management, and coding optimization, though it was a massive challenge for the whole team.
Eventually, We solved long-term design and coding problems with Figma collaboration tools.
DATE
2021
ROLE
Visual
UX/UI Designer
COMPANY
JohnsonTech
DELIVERABLES
Design Guideline
User Interface
Iconography
APPROACH
Optimizing the Design System
We restructure the Design system, such as font type, size, color, icons, constrain, layout for different devices...etc. While designing the guideline, designers needed to collaborate with RD closely and adjust or compromise UI design sometimes due to coding issues.
It was a challenging project, but we all learned a lot from this valuable experience. Also, we build great work together.
{ Fonts }
As we equip teams to design and code usable, consistent, beautiful interfaces using systems, it’s essential that words depend on a strong foundation of typography.
{ Color Usage and Palettes }
Designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.
{ Iconography }
Ensured that each icon has the same branding identity and equal weight. Drawing users’ eyes equally.
{ Localization & Devices }
It was a time-consuming process of adapting the layout for China and Vietnam to both the culture and language of the user. It involved not only translation but also design and UX changes to make it look and feel natural to our target user.
{ Spacing }
Enabling design & development teams to use spacing deliberately for improving readability and consistency in product
Implementation
Organized content across different screens and views.
{ Constraints }
Based on the complete Design System setup and added some constraints setting, it was easy to generate the layout on different devices in time.
