Design Facelift
Crafting modernized, responsive, and developer-friendly Figma files
During my internship at PLUS, I revamped its outdated UI by applying a newly updated design system, incorporating components and local variables, ensuring responsiveness, and delivering detailed handoff documentation.
ROLE
UX Designer
TEAM
2 UX Designers, 1 UI Designer, 1 Front-End Engineer, 1 Product Manager
DURATION
May 13th - May 27th, 2024 (2 Weeks)
WHAT I DID
Design Systems
Responsive Design
Handoff Documentation
CONTEXT
Updated Design System Ready for Rollout
PLUS design system team revamped the entire design system and each designer was tasked with updating specific frames using the new system, ensuring responsiveness of each frame, and hand off to developers for implementation.
Design Systems Snippet: Component Documentation
Design Systems Snippet: Tokens & Variables
PROCESS
Out with the Old UI
First, I selected the appropriate components from the design system and tailored their variables based on the documentation and the specific content of the page.
Example Updated UI: Title, Form, Button
Variables Of Component Set In Figma
Mark the distance
Then, I ensured the spacing between UI components was aligned with the local variables and established spacing conventions set in the design systems.
PROCESS
I delivered the design within 1.5 weeks, leading everything from interface design to parameter adjustments and running prompt engineering experiments.
Due to NDA, please reach out for more behind-the-scene process.
IMPACT
This feature played a key role in helping Huhu.AI secure its first business deal following its pivot in August 2024.
REFLECTION
Experimentation is Key to Human-Centered AI
Joining this project just weeks after starting was an exciting journey. By diving deep into our AI model, I gained a solid understanding of its capabilities and limitations, which became the foundation for designing intuitive interfaces.
Navigating ambiguity while running prompt engineering experiments was both challenging and rewarding. By iteratively testing and refining keywords, I uncovered patterns in the model's behavior, which informed both the design and functionality of the feature. These experiments finally bridged the gap between abstract AI capabilities and user-centric solutions.
Efficiency Comes With Good Communication
A 1.5-week timeline required intense focus and adaptability. I ensured continuous alignment with the team to keep us moving efficiently.
Usability Over MVP Constraints
Even in the rush to launch, usability remained a priority from my perspective. By prototyping multiple interface options and hosting a design review, I ensured the solution worked seamlessly for users while finding practical compromises with developers. This blend of ambition and pragmatism delivered a polished launch within the tight timeline.
