Frequency Product Language

With the success of launching a new brand language and product visioning project, it is time to reflect all changes to our products. The problem we are facing is that the co-existing of new and legacy design confuses teams. I was assigned to build a robust design system supporting a smooth transition. With the system and tool I built, we have improved the UI consistency and communication, alongside with the launching of new features.

Featured on Adobe Xd blog:
https://theblog.adobe.com/tunein-ux-online-radio-life-in-quarantine/

YEAR
2019
ROLE
Lead Design, Documentation, Prototyping
CREDITS
Yuri Ono, Nicole Erthein, Caitlin Watt

Deliverables

While the design system project is an ongoing effort, I have established three key deliverables that are the most imperative for current workflow and product development:

Key deliverables:

• Product Interface Guideline
• Shared design components libraries that support Sketch and XD
• Gallery Generator for previewing the interchangeable building blocks that reflect the API response from platform.

The Interface Guideline

Gallery Generator

Screenshot of the Adobe Xd Components Library

Screenshot of the Sketch Components Library

Projects powered by the system, designed by the Product Design team.

The Process

In the early stage of the project, I spent most of my time auditing and documenting the existing Interface inventory, and key user flows as well as meeting with team members to learn about their needs.

Screenshots of early auditing work

Documenting the product ecosystem

Meeting with client teams for the naming conventions

Thanks for watching

BACK TO HOME

© 2019 Hongwei Huang. All Rights Reserved.