JUNJIE LI Portfolio

Admissions Web Redesign

Enhancing UX, Driving Conversions, Strengthening Brand Alignment

Branding Website | UX Design

Clients

UC Berkeley Sutardja Center for Entrepreneurship & Technology

Team

1 Marketing Manager
1 Product Manager

3 Designers

1 Developers

Responsibilities

UX designer
Content strategist
Visual designer

Duration

3 Months

May - Jul, 2024

Tools

Figma

Critique: Course Card

Problems & Challenges

As part of the redesign, I conducted a detailed critique of the existing Professional Programs website to identify usability and visual design issues, particularly focusing on the course cards — the key component driving user engagement and program sales.

Context

Background

The Sutardja Center for Entrepreneurship & Technology (SCET) is an innovation hub within UC Berkeley’s College of Engineering, offering professional programs, research, and industry collaboration. In the marketing team, I focused on UX and visual design to improve SCET’s digital presence and engagement.

Goal

✅ Align with Berkeley’s new brand identity
✅ Improve usability and information clarity
✅ Strengthen SCET’s professional brand presence
✅ Increase program inquiries and sales

Component Focus: Course Card

Define a better card layout

Based on my critique findings, I reorganized the course card elements into a clear hierarchy that emphasizes the most critical information for decision-making. This new layout improves scanability, distinguishes key details like format and duration, and introduces clear interactive affordances through distinct CTAs.

Final Design

Align with Berkeley’s new brand identity

Cooperate with strategist and assistant the redesigned the Professional Programs webpage to align with Berkeley’s new brand identity.

Launch

User Testing

Conducted usability analysis using Google Analytics to identify pain points and inform design decisions.

Misaligned Course Dates

Course titles of varying lengths caused dates to misalign, creating visual clutter.

Unclear Course Duration

Users had to calculate course length themselves, adding cognitive load.

Ambiguous Online vs. Onsite Labels

Online vs. onsite courses lacked clear, consistent labels, confusing users.

Poor readability

Subtitles had low contrast against images, hurting accessibility.

Weak Interactivity

Cards appeared static, with no hover effects to suggest they were clickable.

Visual Elements

I started with a comprehensive list of potential visual elements, then prioritized only those critical to user decision-making and scanning efficiency, ensuring a clean and effective card layout.

✅

Course Image

Course Name

Short Description

✅

Instructor Name(s)

Duration

Start & End Dates

⭕️

✅

Price

Location (Online or Onsite)

Seats Available (Enrollment Status)

⭕️

✅

Tags or Category (Innovation, Leadership)

“More Details” CTA

“Download Brochure” CTA

⭕️

Proposal 1: 3-column

[ Picture ]

[ Course Name ]

[ Short Description ]

[ Duration ] [ Price ] [ Format ]

[ More Details ] [ Download Brochure ]

Proposal 2: 3-column

[ Picture ]

[ Duration ] [ Price ]

[ Course Name ]

[ Short Description ] [ Format ]

[ More Details ] [ Download Brochure]

Pros
Aligns with user visual priority scanning
Compact, fits more cards per row

Cons
High text wrapping on long course names
Crowded appearance on smaller screens

Pros
Better readability for long text

Balanced typography and visual flow

Cons
Takes up more horizontal space
Fewer cards visible per screen

Visual Hierarchy

We chose the 2-column layout for its clean look, improved readability, and balanced user experience, even though it occupies more space.

User Research

After conducting a card sorting workshop with the Professional Programs Manager and stakeholders, we identified which course details users considered most important to see upfront and which were better left for the detail page.