Stephanie Lesperance
UX Researcher

UC Berkeley Extension

UC Berkeley Extension students took part of a Design Challenge to present design solutions increasing enrollment rates to UCB's programs.

Summary

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.

This project was an interesting opportunity to deal with short timelines and a tight budget.

Project type: Website  // Industry: Education

My Role:

  • UX Researcher
  • UX Designer

What I Did:

  • Business Analysis
  • UX Audit
  • User Interviews
  • Usability testing
  • Persona Development
  • Wireframes
  • Prototyping


Full case study
(10 min reading)

Video - a user reaching the UX Professional Program page from Homepage: a long process.

UX Challenge: how to increase the KPI on lengthy pages?

In this project, I focused on the enrollment path from the homepage to the UX Design Professional Program page. The key priorities of this project were to:

  • Realize a fast return on investment by developing UX Research doable and compatible with a short timeline
  • Rethink the Information Architecture of lengthy pages
  • Define issues and design solutions to optimize the user flow and the website findability
  • Working on design solutions implementable with the current CMS (Destiny Solutions.)

This project was an opportunity to deal with short timelines and a tight budget.

Economics

UC Berkeley Extension, San Francisco Campus

UC Berkeley Extension, San Francisco Campus

Context: a $159 million budget deficit

This Design Challenge took place during sensitive economic times for UC Berkeley: the University had then had a structural deficit of $159 million. In exchange for funding assistance, they negotiated annual reduction and created new programs that generated revenues

These programs were expected to yield $53 million. About $5.9 million were expected to come from University Extension.

University Extension divisional budget dashboard showed then that it has been targeted for its immediate growth opportunities* — growing international, corporate education, boot camp programs and optimization of public programs, such as the UX Professional Program


*UC Berkeley Extension targeted for increased revenues - The Daily Californian, August 2017

UX Audit

UX Audit

To start, I conducted an analysis of several University Extensions and Adult Education classes. I searched for the best and worst enrollment flows, and was able to create a Happy Path.

I analyzed then, the actual User Flow of UC Berkeley Extention website, like if I were a future UX student interested to enroll in the UX Professional Program. 

The User Flow pointed out an interesting lead: the UX page can be reached through several entry points.

Happy Path:  Ideally the user can reach the UX design Program Page directly from the homepage. The registration process should also be a fast process.

Happy Path:  Ideally the user can reach the UX design Program Page directly from the homepage. 

The registration process should also be a fast process.

Actual User Flow of the enrollment to the UX Professional Program.  One interesting lead: the UX Professional Program page can be reached through several entry points, but not directly from the homepage

Actual User Flow of the enrollment to the UX Professional Program. 

 One interesting lead: the UX Professional Program page can be reached through several entry points, but not directly from the homepage

Design Challenge: Enrollment page redesign

Teardown

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

  • No sub-menu to access directly to specific content
  • Cumbersome User Flow
  • No proper Call to Action: on the UX page, the enrollment (Call to Action) is a simple link lost in the content
  • Labelling issues: Users might not understand or might not be attracted to the labels of the sections - such as indexing “UX Design” into the Art section!
  • No clear link: users might not notice the link to the UX Design program on the homepage (No Perceived Affordance)
  • Lengthy pages don't have clear headings and structure information

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 then that the website pretty was unwieldy!

Prioritization

From my analyze of the teardown and the user path, I focused the project on redesigning of the homepage and on a landing page:

  • Optimize the user path 
  • Rethink & Redesign a Professional Program page to improve its engagement rates


Research

(Profile photos are stock photos, as per participants request)

(Profile photos are stock photos, as per participants request)

Mix method: interviews and usability tests

To identify where and what are the main issues, my strategy was to conduct a qualitative search: 1:1 semi-structured remote interviews & usability tests (3 participants)

Opportunities

  • Observing how participants accessed to the UX Design Professional Program page
  • Observing how they would apply to the UX Program
  • Collect their feedback and analyze them to recommend new design solutions

[while browsing to find the UX page]
“I can’t find the UX Program into Technology and Information Management.”

Courtenay

Design Challenge: Enrollment page redesign

Usability tests

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

  • 75% of the participants tried first to reach the UX Program Page trough the menu
  • All commented that these lengthy pages demand a lot of attention* and were "messy" (Emmanuel), "should be cleaner" (Courtenay) — I noticed then some frustration and annoyance.
  • They also expected to find a clear Call-to-Action button on the Professional Page to reach the enrolling page.

The top issues I heard were:

  • "I can't find the UX program in the menu."
  • "There's too many content to read before to reach the UX Professional Program page."
  • "The pages are so long."
  • "I can't find the button to enroll."

*Scrolling and Attention by Therese Fessenden, Nielsen Norman Group, April 2018


Design Challenge: Enrollment page redesign

Persona Development

My research concluded with the development of a principal persona: Frances, a young professional in her 30's, based in the Bay Area, looking for a career change.

Another persona could have been a good addition: a foreign student attending to the full UX Professional Program (student visa through the immersive programs)

Wireframes

 

 

Prototypes

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

  • Optimize the user flow by adding sub-navigation
  • Reorganize the Information Architecture of both pages
  • Add clear Call-to-Action buttons


Methodology

  • First step: low-quality prototypes to explore and test some ideas quickly. 
  • 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 

(see points 3 and 7 / Homepage prototype below)

Design Challenge: Enrollment page redesign

Usability Tests

Version of the prototypes as tested by usability test participants (Invision)

Prototypes

The interactive wireframes are now ready to be tested. I conducted three one-to-one remote usability tests to collect feedback and get ready to iterate.

One participant was closed to Frances, my main Persona. This person was particularly interesting to listen to and observe.

Design Challenge: Enrollment page redesign

Feedback

  • Sub-navigation: 100% of the participants reached the UX Professional Page using the submenu 
  • Call to Action buttons: on the UX Professional Program, all participants used it; they didn't read the content to find the link

Paint Points

The main paint point concerned the Information Architecture of the UX Professional Program: the lengthy page contained still a lot of information to read (and process), some information is not clear.

A participant did an interesting feedback: adding a gallery of student projects would be a nice addition to the page.

The top issues I heard were:

  • "I don't understand which class is elective and which one is requited."
  • "I want to know how much the Program costs."

Final Design Solution

The content about the organization of the classes was chunked into 3 tabs.

Micro animation made with Adobe XD

Iterations

The challenge of the next iteration was to reorganize the information architecture of this Professional Program lengthy page.

The solution I chose was to: 

  • Chunk the content about the classes into 3 tabs to distinguish the electives and required classes, following good UX practices*.
  • Add 3 blocks to highlight the most important information about this Professional Program: prerequisites, advisor services & cost
  • gallery of student projects was also added 

On the homepage a new contact block was added.

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

Design Challenge: Enrollment page redesign

From the existing pages to final design solutions

The original homepage contains a lot of different information. The main issue is its navigation: the top menu has no sub-navigation. After a first round of usability tests, I would recommend to add a sticky top menu, a sub-navigation and reorganize the Information Architecture of this lengthy page.

The original homepage contains a lot of different information. The main issue is its navigation: the top menu has no sub-navigation. 

After a first round of usability tests, I would recommend to add a sticky top menu, a sub-navigation and reorganize the Information Architecture of this lengthy page.

The original landing page Professional Program page is a lengthy page. The UX audit and usability tests showed that its Information Architecture would need to be reorganized.The main paint point showed that clear Call-to-Actions are missing. The first design solution went into that direction. After a round of usability tests, I decided to chunk more contents and clarify the different classes using tabs.

The original landing page Professional Program page is a lengthy page. The UX audit and usability tests showed that its Information Architecture would need to be reorganized.

The main paint point showed that clear Call-to-Actions are missing. The first design solution went into that direction. 

After a round of usability tests, I decided to chunk more contents and clarify the different classes using tabs.

Conclusion

What I learnt

Pivoting from Art Direction/Product Design, this project was one of the first one I worked as a Primary Researcher, a role I define now as key in the UX journey.

I discovered that I enjoy meeting and interviewing users and get their direct feedback! It's interesting to observe participants using the solutions we designed, specially the ones  who are not tech-savvy (the famous Silicon Valley bias!)

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

What would I do differently today?

If I had to work on a similar project, I would interview more people with very different profiles and roles to collect their experience, insights and feedback: 

  • Present and former UCBX students 
  • UCBX Administrative assistants
  • UCBX teachers