Synopsys
Media Experiences

Video Player, Audio Player, and Progress Tracker redesigned on company's website of 15M annual views.

Role

UX Design Intern
(Part-time)

Discipline

UX Design
Product Design
Design System

Timeline

Jan 2024 -
May 2024

Team

Creative Team,
Global Marketing
& Communications

Tools

Figma
HTML / CSS
MS Suite

The Background

New CMO,
New Narrative

Synopsys, a B2B company specializing in chip design software since 1986, had its first ever Chief Marketing Officer (CMO) in Q3 of 2023.
The Product

Redesign the New Website Experience

Consequently, there was a strong push to refresh and improve their website, a highly valuable business asset. Alongside two other Sr. UX designers, we the creatives were trying to build a new experience
15.4M
Page views
1.75
Pages per visit
8.8M
Page views
6.1M
Unique visits
The Problem

Inefficient Processes Are Costing A Lot

The website redesign initiative holds numerous benefits that systematically bring down costs and bring up returns.
Easier Maintenance
❌ Consistency in design is expensive to maintain due to outdated components and varying design styles.
Effective Collaboration
❌ Some UI designs obscured image and video thumbnails crafted by the marketing team, effecting quality content delivery.
Corporate Narrative
❌ Outdated and inconsistent design styles and applications lead to user errors and a disjointed user experience.
Higher Engagement
❌ Outdated and inefficient design applications lead to user errors and lower conversion rates.
My Contribution

Component Redesigns For Media Experiences

This project was undertaken during my third internship. I redesigned the website's Media Experience (Video, Audio, and Micro-interactions) in 3 months, which enabled the greater change in company narrative.  
To empathize with the right needs,

Developing User Personas

First, I retrieved past case studies wrote by designers as well as key presentation decks from my manager to picture  the audience that the website aims to serve.
Executive C-Level

CEOs, CIOs, CFOs, and Presidents. 55 years old;
8.5 years in role; 78% male.

Corporate Mgmt.

Vice Presidents, SVPs, Directors, GMs. 48 years old;
6.5 years in role; 68% male.

Systems Architects

Systems Engineers and Architect Managers. 37 years old;
7 years in role; 67% male.

Engr. Technicals

Professionals in design, dev., and mgmt. 42 years old;
6 years in role; 76% male.

To quantify data for my decisions,

Setting Product Metrics

Next, I complied three design metrics that are both core to visitor’s experience and business benefits. The hope is that I can quantify and support design decisions.
1️⃣ Efficient

Respect for engineering professional's time and focus.

2️⃣ Intuitive

Higher retention from interactions leads to greater conversion.

3️⃣ Consistent

Technically coherent and on-brant design incurs trust.

Here comes our north star...

How Might We make Synopsys's Media Experiences efficient, intuitive, and consistent for engineering professionals?

Component Audit

Pinpointing Performance Issues

I searched for all the different variations of how the video component exists on the website right now. I jotted down key pain points and resistances that I felt as a visitor with strict standards on digital content display.
🗂 Documented Uses

I jotted down key pain points and resistances that I felt as a visitor with strict standards on digital content display.

🤨 Undocumented Uses

I evaluated whether these use cases still matter, and if yes, how can i consolidate into a new updated version of the video component.

Competitive Analysis

Identifying Industry Standard


Next, I chose software companies that is the in the same industry vertical with Synopsys, such as Cadence and Intel. I also studied media products (eg. YouTube) that set the standard for intuitive and fluid video display.
UX Journey

Optimizing In-Line Video for User Efficiency

After presenting an analysis of the current user journey of 3 modes and their pain points, we decided to focus on making in-line videos more efficient for visitors. The decision was made based on cost, return, and urgency.
In-Line ✅

State 1

✅ Cost: Enabled through existing grids
✅ Return: Help visitors focus on video content
✅ Urgency: Increase thumbnail readability

Modal

State 2

Cost: Coding via Youtube & widgets
Return: Help visitors preview video content
Urgency: Introduce some could-have organization

Full-Width

State 3

Cost: Coding via Youtube & widgets
Return: no significant return
Urgency: no strong urgency

UI Solution

Prioritizing Cost-Effective UI Components

I ideated some design decision points and prioritized specific UI components based on cost and return.
Thumbnail ✅

Solution 1

✅ Cost: One-time styling change
✅ Return: Increase readability

Layout ✅

Solution 2

✅ Cost: Enabled by built-ins
✅ Return: Concentration on video

Titles & Tags

Solution 3

Cost: Mass styling changes in CMS; incompatibiltiy
Return: May add distraction

Tracker

Solution 4

Cost: Complicated feature 0 to 1
Return: Discourage views over 5min

Thumbnail

Enhancing Visual Hierarchy

Moving to making pixel-perfect designs, I found the inner blur that effectively functions as a border and meets my previously defined metrics.
Current Design

No border

❌  Efficient: Fail to create focus on thumbnail
❌ Intuitive: Identifiable border
❌ Consistent: Disorganization on webpage

Version 1

50% black, 50 blur

Efficient: High focus on thumbnail content
Intuitive: Identifiable border
Consistent: Unclean feel from extended shadow

Version 2

25% black, 50 blur

Efficient: Blurred focus on thumbnail content
Intuitive: Identifiable border
Consistent: More UI definition is needed compared to brant

Final Design ✅

25% black, 20 blur

✅ Efficient: High focus on thumbnail content
✅ Intuitive: Identifiable border
✅ Consistent: Clean, sleek feel in-line with rebrand

Player Icon

Affirming User Action and Branding

Then, I designed a video player icon that introduce efficiency and consistency.
Current Design

85% yellow, button

❌ Efficient:85% yellow overshadows thumbnail
✅ Intuitive: Clear play icon for user action
❌ Consistent: Outdated feel from 85% opacity

Version 1

85% black, label

Efficient: Discourage views over 5min
Intuitive: No player icon for user action
Consistent: Similar to existing tag UI

Version 2

100% yellow, button

Efficient: Fully obscures thumbnail content
Intuitive: Clear player icon for user action
Consistent: Use of yellow button exists

Final Design ✅

75% black, button

✅ Efficient: Clear reading of thumbnail content
✅ Intuitive: Clear play icon for user action
✅ Consistent: Clean, sleek feel in-line with rebrand

Layout

Easy Scanning and Focus

Last, I solidified four additional layouts for side-by-side video and description content that prioritized video display and thumbnail information. These options are enabled by the built-in grids in the company CMS, so there is no extra development effort needed to enable the format.
Current Layout

50 | 50 grid

New Layouts ✅

25 | 75, 33 | 66, 66 | 33, 75 | 25 grids

Audio Player Overview

Noticing an In-Use Audio Widget

During my component audit I noticed an undocumented widget that was incorporated by another group under Synopsys. That widget supports best-practice display of audio content. I suggested to mass-adopt this component, and refined the component in accordance to Synopsys's design system.
Audio Player Final Design

Enhancing Audio Display with a Refined Component

Current Design

From 2010s

❌ Efficient: No display of titles and authors; no timestamp or volume functionalities
❌ Intuitive: Does not signify audio content
❌ Consistent: Outdated feel from 85% opacity

New Design ✅

Refined from an existing widget

✅ Efficient: Clear display of titles and authors; full control over audito's time and volume
✅ Intuitive: Matches industry best practices (mental modal)
✅ Consistent: Clean, sleek feel in-line with rebrand

Progress Tracker Overview

Resolving UI Usability Problems

❌ Current: Same hover and pressed states
❌ Current: Progress bar flows over tab
✅ Solution 1: Distinct hover and pressed states
✅ Solution 2: Only keep tabs for navigation
Progress Tracker Final Design

Refreshing UI for New Brand Identity

Version 1

Purple surface, yellow highlight

Efficient: Easy navigation
Intuitive: Clear user action
Consistent: Overpowering use of colors

Version 2 ✅

White surface, black highlight

✅ Efficient: Easy navigation
✅ Intuitive: Clear user action, high contrast
✅ Consistent: Table of Content (published) uses black side border

Version 3

White surface, purple highlight

Efficient: Easy navigation
Intuitive: Clear user action, medium contrast
Consistent: Table of Content (published) uses black side border

Reflection & Learnings

Metrics, Metrics, Metrics 📈

When designing for a user-researched audience, I find it crucial to establish metrics and realize them closely. When I was a beginner in UX & Product Design I would constantly get lost in pixel-level details. This time, I worked around the metrics (efficiency, intuitiveness, and consistency) and my delivery efficiency increased so much.

Providing Options! People Like Them 😍

I always present with 3-4 actionable options that my immediate teams can choose from. For them, having visual, concrete options allow them to give specific feedback from their perspectives; for me, creating options gives me a sense of ownership and help me communicate with grace.

Gaining Confidence Over Time 😼

Compared to my internships in the previous summer and fall, I can clearly see my growth in design intuition and precision. Getting better at any career is a long haul, and thanks to this fulfilling internship, I'm more than ever driven to get better and better at what I should do everyday :)

Continue Reading

Home Energy Watch

An AI-powered dashboard that helps homeowners understand energy consumption and optimize carbon footprint

Continue Reading

Ursa Technology

Established design system fundamentals to enhance consistency and accelerate delivery for the Marketing Org.