Yangin Shieh (aka Gin)

Work Open for Hire

A Flexible Design System for Fluid Event Branding

Workhuman Live

Workhuman Live (WHL) is an annual HR conference, nationally recognized as one of the best B2B event experiences. It’s organized by Workhuman (WH), a global leader in social recognition and performance solutions.

The WHL website used to be redesigned from scratch each year in parallel with the event marketing refresh. This reactive approach led to a frantic, high-pressure web development lifecycle. As sole designer tasked with the yearly website redesign, I used this opportunity to take ownership of the design process and augment the WH business website’s design system for multi-brand scalability.

My efforts culminated in the creation of a “Brandless” component level, tied to WH but built specifically for WHL. I also formalized a mid-fidelity wireframe review process. These facilitated a more agile development process and an expedited time-to-market, which was essential to quickly react to sudden changes from event planning.

Role:
Design Lead, Design System, Research, User Experience, User Interface

With:
Jason Donohue, Creative Director, 2024–2025
Alex Yap-Dubois, Senior Digital Event Experience Manager, 2024–2025
Nathan Spinetti, Frontend Web Developer, 2025
Wilson Ma, UI Designer, 2024–2025
Jesse Aridoux, Digital UX Art Director, 2024–2025
Amanda Donovan, Web UX Strategy Manager, 2024–2025
Lisa Doughty, Creative Director, 2024–2025
Alana Kelley, Art Director, 2024–2025
Matt Keohan, Senior Copywriting Manager, 2025
Maeve Ginsberg, Copywriter, 2024

WHL San Diego 2023

The Web team hired me to support building the WH website’s design system and fulfilling design requests for WH.com and WHL.com. I saw then how WHL burned out my predecessor.

  • Components were designed with creative to be top of mind, making them harder to design around, develop for, and test accurately.
  • The project workflow was constraining, using old tools like Adobe XD and Workfront, with constant changes to scope, as is the nature of event planning.
  • The timeline was difficult to navigate, and included a delayed event branding launch that forced a late website redesign.
Before burn out
After burn out

WHL Forum London 2023

I designed the website for WHL Forum, a smaller one-day version of the main conference. WH.com design system and page layouts were being built on Figma so I wanted the same for WHL.com. The Creative team wasn’t onboard quite yet so as compromise I only used Figma for lo-fi’s. These served as tools for early content and design discussions. I experimented with wireframe features to gauge usefulness for stakeholders. Though helpful, I knew a design system would mitigate the need for much of this effort.

Notable takeaway: the scroll heatmap greatly facilitated content and layout discussions. I decided to keep some version of this feature for future wireframes.

Content outline: box-model style
Lo-fi: scrollmap colors allude to intended visual cadence
Frankenstein: layout of visual references

WHL Austin 2024

I took the design lead for WHL.com when WH.com’s design system v1.0 wrapped up. Unsure how the former should utilize the latter, I conceded myself to last year’s design process for information gathering. That said, the project timeline was more forgiving this year and I got help from the Digital Event Experience Manager and the Web UX Strategy Manager to improve the project workflow.

  • We held workshops to collect feedback for and from lo-fi’s.
  • We incorporate mid-fi’s to the review process.
  • Dev and Creative teams were included early to facilitate buy-in.

Success(ish): we doubled last year’s average conversion rate according to post-event analysis. It’s too bad we can’t attribute that to any specifics due to how different the two UI’s are. At least, some number of features backed by user feedback may have helped.

  • Softer CTAs to guide users to more info instead of the purchase flow
  • Redesigned Agenda components that were more robust and accessible
  • A redesigned ‘Resources’ component that saw a lot of downloads
Early Mid-fi
WHL 24 Hi-fi

WHL Gaylord Rockies 2025

I started a WHL.com component library once all teams were ready to transition to Figma. Due to the timing of a paternity leave, my team member covered me for the first few weeks of wireframes and accidentally built lo-fi’s in my component library file. This turned out to be a lesson in disguise, as I concluded that each event should house its own wireframes and event-specific components. Meanwhile, we continued adding improvements to the design and review process:

  • Asana to better track our progress and feedback
  • Hi-fi’s in Figma
  • Audits to scrutinize the utility of components
  • Guides for stakeholders through each wireframe and component update

Result: a Lean UX process for responding to needs quickly and pivoting when needed. Some successful optimizations that came from this include:

  • Redesigned pricing cards to be clearer and modular
  • New comparison chart that differentiates WHL from other events
  • Redesigned agenda summary as a easy-to-read chart

WHL Orlando 2026

After research and testing, I confirmed that WHL.com would need two levels of components.

  • The first is “Brandless”. It is an addendum to the WH.com component library. It provides WHL.com context for added components and strict parameters for event creative. It’s where the team meets to optimize and test existing WHL components. You can consider them mid-fi.
  • The second is “Branded”. These libraries apply event-specific styles to “Brandless” and WH.com components, and live with their corresponding events. They also explore new event-specific components and the team can interrogate each one’s potential to be “Brandless”. You can consider these hi-fi.
Mid-fi’s use “Brandless”
Hi-fi’s use “Branded”

Since my start I had wondered how “Brandless” might feed into WH.com, and after a while I was doubtful that it would. But a conversation with my WHL.com developer revealed a shortsightedness with our WH.com patterns/organisms. We had built them too loose, leading to discrepancies between design and build for both websites. So I expanded on “Brandless” patterns, defined them further and tested them with real wireframes, and shared the insight with the Web team to apply to WH.com’s design system.

WH.com library
“Brandless” library
2026 “Branded” assets