Client
Salesforce
Role
Sr. UX/UI Designer
Tools
Figma/Codex
Duration
2025-2026
Reimagining an Enterprise
Careers Platform 👩🏻💼👨🏻💼
Creating a scalable careers experience through information
architecture, modular design systems and production-ready UI.
Salesforce Careers serves a broad audience—from students exploring their first internship to experienced professionals searching for their next opportunity. Rather than redesigning individual pages, this project focused on creating a flexible foundation that could simplify navigation, improve content discoverability, and scale across teams over time.
Working closely with creative, content, and digital stakeholders, I explored new information architectures, developed reusable UI systems, validated navigation concepts through lightweight user testing, and translated design ideas into production-ready prototypes built directly within Salesforce's enterprise Page Builder.
My Role
Information Architecture, UX Strategy, Design Systems, Component/Token Libraries, UI Design, Rapid Prototyping, User-Testing, Front-end Implementation
Tools
Created for
Website
Timeframe
2025-2026
🤔 How might we establish a unified design system to ensure consistency, structure, and scalability across all teams?
Challenges
Outcomes
🚢 Overhaul of the entire email campaign design
I extensively re-examined and re-created new components that are more feasible to build in HTML/CSS and created new color palettes that works when designing for dark mode, meet best practices but still aesthetically beautiful and adhere to the brand guideline.
Design system as a tool for designers 🎨
I established the design system and component library for designers not as familiar with Figma and web design tools to be able to customize templates using the intuitive interfaces to select pre-designed components as needed. The system helps turn heavy-lifting work to an easy-peasy instant clicks and done. It greatly reduces their time spent on customizing the same type of assets when having the right tools to work with.
Improving design consitency with design tokens 🧿
I created design tokens using variables in Figma as part of the design system and implemented these tokens across master templates. This helps designers and developers refer to the only source of truth when it comes to different design parameters (colors, text styles, spacing etc.). It significantly improves productivity, collaboration and QA process.
🚀 Designing the future-proof and scalable system for developers
During the entire process, I've also been updating the component library and/or releasing new components with detailed version history notes each time. The component library helps make feature customizations much faster and very precise in the future projects. I also created documentations with essential key parts for developers, to make my designs future proof and so they can work independently without designers's help.
👩🏻💻 Leading design mentorship monthly sessions
After the design system was launched to teams, I initiated numerous training sessions and acting as a thought leader in helping them defining the "how" on design system and template strategy.
Conclusion:
🎯 The Design System Helps Empowering Future-Proof Design, Customizations and Collaborations
The design system was built and rolled-out in phases and it is constantly evolving and will be updated over time to reflect the brand and business changes. It has proven to set the right foundation for teams to be able to design and develop the work much more efficiently than before. On the next phase (Part 2), I used the design system component library and design tokens from variables I created, to lead the overhaul re-designing project of all the Paramount+ master templates in different categories.
The design system case study with full process is available (recommend 10-15 Minutes reading time) or please scroll down further for the brief overview. I intentionally designed the case study to be lightweight, translating the serious bits during the process into the more fun and entertaining to read, it's Paramount spirit after all! The most relevant part isn’t the visual polish, it’s the underlying process of auditing, systematizing, discovering/designing new patterns and scaling design for clarity and trust across teams. Those are the same principles I normally bring when working on feature/product design and design system is not a project, it's a product serving products.
Overview: Paramount+ Email Design System, Component and Design Tokens 🧿
🔺 Sample image components for show posters and banners. The system was built to accommodate the design for both desktop/mobile, especially mobile devices are the primary targets for email deployments.
🔻 The headline components with many styles, colors, alignments to choose from, giving designers flexibility to customize their designs, because not every headline should be the same…
🔺 One of the most useful features in the system that incredibly helps make it easy for teams to customize templates, increases productivity and mistake-free are the image components. With the ability to change different image formats (horizontal, vertical), how many columns in the layouts (1, 2 or 3 columns), toggle headline label, or to choose whether to have the call-out blue flags above the show images and how many lines.
🔻 The design system consists of well-organized button collections. Button components help make it easier for designers to choose the right button for the job. The button colors range from blue, black, white, with or without + My List add-on. There are also selections for button colored borders in semantic names to choose from (black-on-white, black-on-grey, black-on-blue...etc.), such as "black-on-white" - Black is the button color, used on white surface, so it has a thin white border around it that is invisible when users view the email on default light mode. These border properties are very useful to ensure a button shape remains visible when HTML background color around the button inverts on dark mode per users' settings (especially for a black button on white HTML background, the background inverts to black on dark mode, without the white border, the button shape disappears).
🔻 Image component tool, there are variety of options to choose image size/format, how many images in a row (1, 2 or 3), with or without the call-out blue flags above the show images and how many flag lines.
🔻 Various header and headline components for both desktop/mobile.
🔺 Color token samples, each token has semantic name that's easy for team to recognize.
🔺 Color invert on email clients/browsers per users's settings is a crucial part to consider when designing for emails. With variables I set up in the design system, designers can preview dark mode layouts during work in progress, help elevate the design quality and color contrast.