THE PROBLEM

As thousands of students navigate to the website everyday, an outdated landing page means thousands of missed opportunities to communicate new products and updates. Thus, how might we leverage the landing page space to be an efficient modem of Berkeleytime’s features and team mission while maintaining a cohesive brand identity? 

The landing page lacks clarity in communicating its expanded feature catalog and fails to effectively convey the team's mission and values.

Goal: A visually interesting yet compelling communicator of Berkeleytime in one page ✨

Having worked on designer-only teams in the past, working cross-functionally with developers was new but fruitful. Although the sky is the limit for design exploration, when it comes to fleshing out solutions, feasibility is a tighter bound. Meeting in the middle was a new challenge, but one that taught me how to approach design with a realistic and team-oriented eye!

Bridging cross-functional teams!

Given the projected timeline, we simply didn’t have enough time to flesh out the details of the branding and building out a full branding guide. It would’ve been helpful for other page redesigns and future marketing work. This has been added to the lineup for future semester’s work though- stay tuned!

More in-depth branding

03 Design Critique

We rounded it out by conducting a deep-dive critique on the original landing page, dissecting its strengths and, more crucially, its shortcomings.


The original landing page had a static and passive interface, mostly informational that didn’t fully encapsulate Berkeleytime’s brand or mission.

Our goal was to redesign a platform that reimagined the landing page as dynamic, interactive and friendlyone that authentically resonated with our ethos: made by students, for students.

After several iterations and crit, we found that having strong use of color (Berkeleytime’s blue) with a larger graphic and title contributed to a strong brand presence on the landing page. We also wanted to include a curved line, as it added fluidity and motion into an otherwise static page and worked well as a smooth segue into the rest of the page, drawing the viewer’s eye downwards.

Once we had a solid idea of layout, I started on illustration of the Campanile, an iconic bell tower that represents Berkeley and payed homage to the original graphic.




Based on Iteration 2, we had an idea of playing around with the Campanile’s shadow, leading to some clever ideas of shifting the shadow based on time.

CONTEXT

Since its launch in 2018, Berkeleytime’s landing page hasn't changed, but its reach and user base has grown to 28k students! The landing page is the main entry point for users- yet it doesn’t effectually serve as a key communicator of Berkeleytime’s purpose and values.

REFLECTION

Note: This project’s implementation is currently in development with backend!

Berkeleytime Design Team dinner

with Michelle, Carissa, & Joanne!

02 Competitor Analysis

We also conducted competitor analysis by looking at other club and organization pages with similar student-oriented goals to gain a better understanding of how they visually expressed themselves and showcased their mission. Elements we looked for included page layout, illustration or graphics, and general sense of branding communication.

Simple yet powerful mission statement title

Gradient and animated blobs add movement

Bold illustration that speaks about the team

Simple yet dynamic graphics related to use

Representative illustration that draws attention

THE PROCESS

We took a threefold approach to identify the goals for our redesign: branding analysis, competitor analysis, and a current landing page critique.

01 Branding Analysis

We firstly revisited our current branding to understand what Berkeleytime portrayed itself as to students. Berkeleytime toes the line between professional (as an official on-campus organization) and casual, that values transparency, accessibility, and empowers students to make informed decisions. Thus, the tone we wanted to convey was welcoming and friendly, but helpful and simple to use.

where we are!

General Ideas

fine line between professional & casual

lean more casual to be more welcoming

clean, playful, versatile

appealing to most audiences


Berkeleytime Values

accessibility

transparency

empowering students to make informed decisions

dependability & reliability

catered to everyone, not just one group


Team Values

Growth

Curiosity

Passion

Lacks clear brand identity

Features aren’t updated

and don’t showcase

full functionality

Outdated team photo

Copy is vague and unclear

about what the team does

Unnecessary CTA to

“About Us” page

Redundant CTA to the

one above

Static graphic that blends

easily into negative space

Icons are inconsistent with

the rest of the site

IDEATION

Based on our analysis, we summarized our redesign goals to be shaping a dynamic user experience, encouraging feature exploration, and maintaining a strong brand identity.
We split the page into 3 main sections: landing (name and illustration), showcase (features), and about (informational). The purpose of this was to efficiently segment work on a small team, and to gain a better understanding of each section’s role and the interactions between them. I spearheaded the top landing section; my design decisions revolved around crafting a compelling experience, inviting the user to explore other parts of the site or page.

Note: Our designers tend to iterate in mid-fi and above. This is because we have an existing design system and strong sense of the product. Additionally, since we have tight turnaround times and work with developers, we iterate on versions that we can present quickly and wholly.

Welcome to Berkeleytime!

Berkeleytime is a platform built, maintained, and run by students, just like you

❌ LACK OF CTA

No buttons to redirect users, relying on the nav bar to do so instead

❌ SEPARATED NAV BAR

The color distinction makes the nav bar

feel cut off from the rest of the page

❌ FEELS LIKE A HOME PAGE, NOT A LANDING PAGE

Doesn’t capitalize on space to encourage user exploration

Berkeleytime

Catalog

Scheduler

Grades

Enrollment

About

Log in

Welcome to

Berkeleytime!

Built, maintained, and run by students, just like you.

01 CATALOG

04 enrollment

02 grades

FAQ

03 SCHEDULER

❌ AWKWARD MISSION STATEMENT POSITIONING

Doesn’t follow natural text hierarcy, and is easy to miss

❌ COLOR CUT OFF FEELS DISJOINTED

Dividing the sections too harshly takes away

from a seamless and continuous landing page

❌ INCONSISTENT LINK STYLE

These don’t resemble our tyical link style, which might lead to user confusion and drift from our brand

Campanile

illustration placeholder!

Berkeleytime

Catalog

Scheduler

Grades

Enrollment

About

FAQ

Log in

Welcome to

Berkeleytime!

Berkeleytime is a platform built, maintained, and run by students, just like you.

❌ LACK OF CTAS

Missed opportunity to redirect users to products

💚 BOLDER TITLE AND GRAPHIC

Sizing up elements creates a compelling

and engaging visual experience

💚 NON-LINEAR LINE ADDS DYNAMISM

Having a curved line adds movement and visual interest, while smoothly transitioning the viewer’s eye down towards features

We quickly figured out feasibility might be an issue, as it might cover the feature showcase right below it and accounting for all times of day was technically difficult. Still, we liked the idea of implementing an easter egg, and decided to play into the time changing aspect with gradients and color instead. We pulled our colors from other pages to maintain consistency across the site.

Berkeleytime

Berkeleytime is a platform built, maintained, and run by students, just like you.

Enrollment

Grade Distribution

Scheduler

Course Catalog

Welcome to

Berkeleytime!

Berkeleytime is a platform built, maintained, and run by students, just like you.

Welcome to

Berkeleytime!

Berkeleytime is a platform built, maintained, and run by students, just like you.

sunset

twilight/dawn

twilight/dawn

early morning

mid morning

afternoon

E4A70A

FF7500

DFCA6B

26C9A5

4FB4FF

76A6FF

FF9EB0

FFAE74

ADA6FD

D45C72

161646

10101A

OUR SOLUTION

Introducing the new Berkeleytime landing page experience!

seamless nav bar

high-visiblity CTA

to promote products

pictures that float in, adding movement and reducing text on page

additional curve to maintain sense of flow

black footer to reduce eyestrain and contrast the bright header

eye-catching tag that showcases newly released products

easy links to directly access features

action-oriented copy to encourage feature use

accordion to show information if expressly looked for

large illustration

that matches branding

bold use of core color while using a gradient to soften

EARLY MORNING

SUNSET

MID MORNING

TWILIGHT/DAWN

AFTERNOON

NIGHT

TIMELINE

Oct — Nov 2023

5 weeks

TOOLS

User Interviews

Braze

FigJam

SKILLS

UX Research

User Interviews

Observation Study

Journey Mapping

Insight Synthesis

LINKEDIN

EMAIL

RESUME

CV

DON'T BE SHY — LET'S TALK

Berkeleytime — Landing Page

Berkeleytime reimagines the student course planning experience to be seamless, integrated, and centralized across all disciplines. Made by students, for students.

TIMELINE

Spring 2023

4 weeks

TEAM

1 Product Manager

4 Designers

4 Developers

SKILLS

UX/UI Design

Branding

Illustration