Generating a 15% increase in profile views through search redesign

Generating a 15% increase in profile views through search redesign

Generating a 15% increase in profile views through search redesign

The final design of the search experience
The final design of the search experience
The final design of the search experience

info

Context

Context

Context

What does BridgeU do?

What does BridgeU do?

What does BridgeU do?

  • BridgeU is a university guidance platform that connects 16–18 year-old students in their final years of school to universities around the world

  • The web app asks students about countries + courses they're considering studying in for uni as well as things like their predicted grades

  • The algorithm then begins to suggest potential uni matches based on their answers

The problem

The problem

The problem

Of the OKRs set by the business in 2023, my squad was tasked with focusing on the following:

  1. Increase the average number of unique platform sessions per 2024 grad class student from 5 to 10

  2. Increase the % of 2024 grad class students with 3+ shortlisted unis/courses from 45% to 70%

This led us to identify opportunity areas within the product where we felt we could create the biggest impact and shift the needle. One of these areas was the search feature, because it contributed to around 30–35% of all shortlists, and we have heard feedback in the past that the experience wasn’t optimal.

Roles & responsibilities

Roles & responsibilities

Roles & responsibilities

My role: Product Design Lead

Duration: 3 months

Tools:  Amplitude, Figma/Figjam, Zoom, Condens

I worked in close collaboration with:

  1. the Product Manager to align our vision

  2. the dev team to garner feedback on the technical feasibility of different design ideas

  3. the data team to learn about data coverage

  4. the UX Researcher to establish learning objectives and to synthesise user feedback

User group

User group

User group

Students in the 2024 grad class who are in the process of researching unis and courses.

bar_chart

Research

Research

Research

Reviewing past research

Reviewing past research

Reviewing past research

Research data from past generative user interviews showed that students view search as a key part of the process in finding the right unis and courses.

What we also learnt from this past research is that students found BridgeU's search feature to be a frustration for 3 main reasons:​

sentiment_dissatisfied

Students were unable to search for courses or careers

sentiment_dissatisfied

Students were unable to search for non-country locations (e.g. Toronto, Europe)

sentiment_dissatisfied

Students were unable to narrow down search results (e.g. no filters/sorts)

Digging through the data

Digging through the data

Digging through the data

Following these insights, the Product Manager and I then wanted to understand the sort of search queries students were entering. So we jumped into Amplitude (a data analysis tool) and exported a list of the top 1000 most-common search queries entered over the last year. Then I began to highlight them according to their theme and levels of complexity (i.e. university? course? city? university/course combo? etc.)

This helped me to get a solid idea of what it was that students were searching for and which scenarios and edge cases I'd need to account for in my designs.

A screenshot showing some of the most searched-for terms by students
A screenshot showing some of the most searched-for terms by students
A screenshot showing some of the most searched-for terms by students

Heuristic evaluation

Heuristic evaluation

Heuristic evaluation

Before thinking about solutions, I had to understand at what point the search experience fails. Which search term themes lead to dead ends?

So, using example search queries from Amplitude above, I mapped out search flows, right from the home screen (before I'd entered a search query) to the end result (i.e. search results or an empty state). Then in FigJam, I evaluated our current offering using Jakob Nielsen's heuristic principles.

Key findings

search

Consistency & Standards

Clicking into search does not display history. This is a satndard web pattern

check_circle

Flexibility & Efficiency of Use

No suggested search terms pop up as you’re typing in

sunny

Aesthetic & Minimalist Design

There's a lot of clutter in the search results page. E.g. oversized search bar, full-width buttons, confusing tabs in top-left + massive subtitle above results

accessibility

Help Users Recognise, Diagngose and Recover from Errors

When an empty state appears, we don't do enough to provide solutions

warning

Error Prevention

Our current search offering does not highlight or recognise typos

A screenshot of my heuristic evaluation
A screenshot of my heuristic evaluation
A screenshot of my heuristic evaluation

lightbulb

Ideation

Ideation

Ideation

Sketches & wireframes

Sketches & wireframes

Sketches & wireframes

With user goals in mind and insights from the heuristic evaluation, it was time to grab some pen and paper.

Sketching ideas on A4 before progressing to wireframing, I explored a number of ideas before sharing them over Zoom with the PM and dev team.

Technical feasibility discussions with devs helped refine my approach, eliminating wireframe concept 4 for desktop due to backend complexity against our timeframe for this work.

A screenshot of my sketchings
A screenshot of my sketchings
A screenshot of my sketchings
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my wireframes
A screenshot of my mobile wireframes
A screenshot of my mobile wireframes
A screenshot of my mobile wireframes

Moving to mid-fidelity

Moving to mid-fidelity

Moving to mid-fidelity

I advanced concepts 1–3 to mid-fidelity, enriching screens with some real data and button copy. Mobile was deprioritised for now, aligning with user preferences.

The PM and I decided that it would be appropriate to revisit mobile post desktop user testing

Concept 1 – filters/sorts

A screenshot of desktop concept 1 in mid-fidelity
A screenshot of desktop concept 1 in mid-fidelity

Concept 2 – snapshots

A screenshot of desktop concept 2 in mid-fidelity
A screenshot of desktop concept 2 in mid-fidelity

Concept 3 – course grouping

A screenshot of desktop concept 3 in mid-fidelity
A screenshot of desktop concept 3 in mid-fidelity

Before user testing, I sought input from the Customer Success team for fresh perspectives.

Concept 3, favouring course grouping, stood out for its potential to streamline choices and enhance decision-making.

Confident in their feedback, I then began to pad out concept 3, building it into a fully-functioning flow.

swap_horiz

User testing

User testing

User testing

Getting prepared

Getting prepared

Getting prepared

In collaboration with the UX Researcher, we opted for moderated user testing to delve into the viability of concept 3.

Putting together the script, we formed the script around the following question:

Is having a course grouping screen helpful or unhelpful to students in narrowing course options? 🤔

Is having a course grouping screen helpful or unhelpful to students in narrowing course options? 🤔

BridgeU's (then) product filter pattern was a horizontal container sitting above search cards. Taking up a lot of space but also not being very scaleable, I introduced an overlay-style concept into this prototype (think Airbnb).

Meanwhile, colleagues ran through the prototype, checking for any dead ends.

Simultaneously, we recruited 5 users via email outreach.

Feedback

Feedback

Feedback

Uploading the recordings to Condens.io (a research repository tool), I coded the recording transcripts, using an inductive approach so that I could:

  1. work at speed

  2. ensure that no piece of feedback went ignored

A screenshot of user transcripts I uploaded to Condens
A screenshot of user transcripts I uploaded to Condens
A screenshot of user transcripts I uploaded to Condens

After coding the transcripts,  I synthesised the data into a report which I shared with my PM and devs. Here are the key findings from the testing.

Positive

Most students believed that these chips are trying to provide more context of different course options ✅

With “London School of Economics” as the search query, most students expected to see both LSE AND universities in London that offer Economics ✅

Most students believed that this course groupings screen shows an overview of all course options ✅

Negative

After clicking “search”, most students did not expect to see this course groupings concept screen 🛑

Although students were on the same page about concept 3's filters, most didn't anticipate it. After careful consideration, we recognised its potential but also identified uncertainties.

Prioritising speed, we omitted it from the MVP, opting for the simpler concept 1.

What changed?

New functionality

check_box

Search via course & location 🥳

check_box

Search via combo of themes. E.g. Economics Europe 🥳

check_box

Uni ranking + international fees data points now available in search cards 🥳

check_box

Filters + sorts allow students to narrow search results 🥳

check_box

Addition of breadcrumbs to aid user navigation and provide visual feedback

check_box

"Related courses" chip helps students understand which unis offer their course of interest

Clean-up / design debt

check_box

Tightened the space afforded above results to show more results cards above-the-fold

check_box

Tweaked the use of colour, padding etc. to reduce clutter and improve visual hierarchy

check_box

Used this work to carry out an typography audit, using revised components in this work

check_box

Fixed design debt re full-width buttons in search cards on desktop

rocket

The final design

The final design

The final design

Walkthrough

Walkthrough

Walkthrough

Concerns about scalability and mobile usability of BridgeU's current filter pattern lled to discussions with devs, highlighting the need for efficient solutions. Despite considering a new filter design, we prioritised timely delivery to meet user goals so had to continue with the same pattern.

Smaller tweaks included enhancing search result cards with much-requested uni data from students – a quick but important win as awe already had this data on our books.

I was also saw this project as the perfect use case to agree upon and log a new set of typography guidelines. Getting buy-in from the design team and devs, I logged within Zeroheight for future use – an unexpected bonus!

With clear priorities set by the PM, I collaborated with devs to break this work down in Trello, ensuring smooth development with checklist acceptance criteria.

Before

A screenshot showing what the search experience looked like before iteration
A screenshot showing what the search experience looked like before iteration

After

A screenshot showing the final design of the search experience for desktop
A screenshot showing the final design of the search experience for desktop

Mobile

Mobile

A screenshot showing the final design of the search experience for mobile
A screenshot showing the final design of the search experience for mobile

What changed?

New functionality

check_box

Search via course & location 🥳

check_box

Search via combo of themes. E.g. Economics Europe 🥳

check_box

Uni ranking + international fees data points now available in search cards 🥳

check_box

Filters + sorts allow students to narrow search results 🥳

check_box

Addition of breadcrumbs to aid user navigation and provide visual feedback

check_box

"Related courses" chip helps students understand which unis offer their course of interest

Clean-up / design debt

check_box

Tightened the space afforded above results to show more results cards above-the-fold

check_box

Tweaked the use of colour, padding etc. to reduce clutter and improve visual hierarchy

check_box

Used this work to carry out an typography audit, using revised components in this work

check_box

Fixed design debt re full-width buttons in search cards on desktop

trending_up

Business impact

Business impact

Business impact

# of searches

north

524%

Increase in searches performed by year 13s (final year students)

Increase in searches performed by year 13s (final year students)

Profile views

north

15%

Increase in students viewing a profile within 5 mins of searching

Empty states

south

11%

Reduction in search terms entered that returned 0 results

Still here?

Don't be shy. Got a project you want to discuss or just want to say hi?

Get in touch

call_made

Made with Earl Grey ©️ 2024 Michael Donlea

Still here?

Don't be shy. Got a project you want to discuss or just want to say hi?

Get in touch

call_made

Made with Earl Grey ©️ 2024 Michael Donlea

psychology

Reflections

Reflections

Reflections

Biggest challenge

This project posed more UX challenges than UI hurdles. Navigating through Amplitude data and expanding designs to accommodate various combinations demanded extensive thought and collaboration with stakeholders.

Most proud of

I'm delighted with the improvements to search cards and filters. We now display sought-after data (international fees and uni rankings) in search cards, as well as course cards, addressing students' needs. Additionally, we utilised existing data to create filters, facilitating students in narrowing down their choices.

A failure

Taking more time to elaborate on concept 3 would have hastened the realisation of its non-viability. This would have saved time and enabled testing of a more feasible concept—an important lesson learned.

I was surprised by

Unifrog, BridgeU's main competitor, lacks a user-friendly search compared to our vision. Despite extensive filters, it lacks a free text search, displays key info in search cards, and can't sort results by universities/courses.

This insight enhances BridgeU's competitive edge for business growth.

Next steps

  1. To collect feedback on the new search, I would like to implement a pop-up survey triggered by user interaction. The survey will inquire about users' success in finding information and offer the option to share their email for a follow-up conversation

  2. Regarding design, I acknowledge limitations in the scalability of the current filter pattern. I'd have been very keen to discuss with the dev team the possibility of updating all filters across BridgeU to a more scalable option, such as an overlay (Airbnb) or a side filter pattern (Amazon)

  3. To enhance value for BridgeU's partner universities, I propose exploring a 1-column approach for search cards with a sidebar to showcase partner unis. This would have aligned well with BridgeU's goal of maximising company revenue through added value for partners

More work

The final design of UK course profiles, showing a row at the top with icons and key info and tow containers below with textual info
The final design of UK course profiles, showing a row at the top with icons and key info and tow containers below with textual info
The final design of UK course profiles, showing a row at the top with icons and key info and tow containers below with textual info

BridgeU

Adding new data points

See how I added data to profiles, generating a 17% increase in user shortlisting 🔥

View case study

arrow_forward

Still here?

Don't be shy. Got a project you want to discuss or just want to say hi?

Get in touch

call_made

Made with Earl Grey ©️ 2024 Michael Donlea

Still here?

Don't be shy. Got a project you want to discuss or just want to say hi?

Get in touch

call_made

Made with Earl Grey ©️ 2024 Michael Donlea