UC Berkeley Extension students took part of a Design Challenge to present design solutions increasing enrollment rates to UCB's programs.
UC Berkeley User Flow, there are 4 different ways to reach to the UX Program page, when the simplierst and user-friendly IA solution was adding a sub-menu to reach any program directly
Myself working on of a low-fidelity prototype - photo by Antoine D.

About the project

Founded in 1891, UC Berkeley Extension is the continuing education branch of the University of California, Berkeley. Extension provides professional and personal enrichment in the classroom and online for adults in the San Francisco Bay Area.

The challenge was to provide design solutions to help UC Berkeley Extension increase the discoverability and enrollment in their Certificate programs.

Even if this project was a self-motivated project, I approached it as a real-case situation.

UX Challenges

The key priorities of this project were to realize a fast return on investment by developing UX Research and identify design solutions allowing to reuse the current CMS (Destiny Solutions.)

Design Thinking Process: define the problems

To start, I conducted a competitive analysis of several University Extensions and Adult Education classes to have a I searched for the best and worst enrollment paths.

Then, I analyzed the User Flow of a future UX student looking for to enroll to the Professional Program. The User Flow pointed out an interesting lead: the UX page can be reached through several entry points.

UC Berkeley User Flow, there are 4 different ways to reach to the UX Program page, when the simpliest IA solution was adding a sub-menu to reach any program directly
Actual User Flow of the enrollment to the UX Professional Program

A basic teardown while considering usability heuristics helped to identify several issues that would likely effect conversion.

I was surprised to find any multi-levels menu and any clear call-to-action to enroll to a Program. I remembered then, that few months back, when I signed up to the UX Professional Program, I found the website pretty unwieldy!

Teardown helping to identify several issues that would likely effect conversion
Teardown - excerpt from my presentation

Usability tests: empathize with users to identify the main problems

To identify the problem, my strategy was to conduct a mix-method of researches: usability tests and interviews.

The purpose of this research was to highlight the paint points regarding the discoverability and the enrollment path, and get some feedback about the website.

Teardown helping to identify several issues that would likely effect conversion
Usability test analysis - excerpt from my presentation

Findings

The feedback and the usability tests pointed out that 75% of the participants encountered difficulty reaching the UX Professional Program

Other interesting issues the participants encountered:

  • They commented that these lengthy pages demand a lot of attention and were "messy" (Emmanuel), "not clear" (Courtenay)* — I could notice then some frustration and annoyance.
  • They also expected to find a clear Call-to-Action button to reach the enrolling page
    (meaning the architecture of the pages didn't provide a clear mental model**.)

*Scrolling and Attention by Therese Fessenden, Nielsen Norman Group, April 2018
**Mental Models by Jakob Nielsen, Nielsen Norman Group, October 2010

Recommendations and prototyping

I focused on reorganizing the Information Architecture to improve the KPIs and increase the discoverability of the Program landing pages

First step: low-quality prototypes to explore and test some ideas quickly. Having a Graphic Design background (I have a BA in Webdesign), it’s the creative step I’ve always appreciated the most.

Second step: middle-fi prototypes for the homepage and UX Professional Program page.

The redesign of the homepage was also the opportunity to add or redesign some marketing blocks to highlight some services.

Iteration of middle-fi prototypes, adding some tabs for a better readability
First versions of wireframes - excerpt from my presentation

Test the design solutions

The interactive wireframes are now ready to be tested. I conducted a new round of usability tests to collect feedback and get ready to iterate.

First version of interactive wireframes ready for user test - using Sketch and Invision

The creation of a multi-level menu was received positivelyIt’s easier that way compare to the real website”.

On the UX Professional Program, all participants noticed the addition of Call-to-Action buttons, but there was still “too much text to read and so many information, it takes a lot of time - Manu”.

Final solutions

The challenge of the next iteration was to reorganize the content architecture of this lengthy page to make it more desirable to read.

The solution I chose was to add tabs, allowing users to easily access to the content following good UX practices***.

***Tabs, Used Right by Jakob Nielsen, Nielsen Norman Group, July 2016

Iteration of middle-fi prototypes, adding some tabs for a better readability
Iteration on the UX Program page, adding some tabs for a better readability - excerpt from my presentation
Interactive wireframe, focusing on the tabs freshly added

What I learnt

As UI Designer, this project was one of the first one I worked as Primary Researcher, a role I define now as key in the UX journey.

I discovered, during this project, that I love observing and interviewing users! It's interesting to observe how participants will use the solutions we designed, specially people who are not tech-savvy!

Using qualitative data and heuristic evaluations helped me to design centered-user solutions and to become a better user advocate.

If I had to work on a similar project, I would interview and organize user testings with students, or previous students, of UCBX to collect their experience and insights.