Adding new data points to university course profiles
Old design (Q1 2022) ⛔️
New design (Q1 2023) 🥳
📌 But first, some context…
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
Of the OKRs set by the business in 2023, my squad was tasked with focusing on the following:
Increase the average number of unique platform sessions per 2024 grad class student from 5 to 10
Increase the % of 2023 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. We had long heard from students that our lack of data in UK course profiles (e.g. Biology at University of Cambridge) drove them off of BridgeU and to Google/competitors.
Given that the UK was one of our biggest markets in terms of destinations, the decision was made to plug this gap by increasing our data coverage for UK course profiles.
Roles & responsibilies
My role: Product Design Lead
Duration: 3 months
Tools: Mobbin, Figma/Figjam, Zoom, Maze
Students in the 2023 grad class who are in the process of researching unis and courses.
I worked in close collaboration with:
the Product Manager to align our vision
the dev team to garner feedback on the technical feasibility of different design ideas
the data team to learn about data coverage
📊 Understanding the problem space
Scoping the business requirements
As part of the kickoff for this work, the Product Manager compiled a spreadsheet that contained the data points BridgeU wanted us to add to UK course profile pages. Investigation from the data team had confirmed that that we were able to obtain these from existing sources.
When discussing these data points with the PM, I noted that some were already sorted according to the jobs-to-be-done framework. I learnt that this was off-the-back of of previous user research the company had done. This was a helpful little springboard that gave me some early context into the purpose of each category and how these data points might be grouped.
One thing I did make an early note of though was the data coverage column. Sorting via high–low helped to identify the coverage level of these 24 data points and thus the likelihood of an empty state appearing. Thinking in this manner helped me to consider the likelhood of edge cases nice and early.
The previous work done on categorising the new data points according to the JTBD framework was helpful, but I believed we needed to take this a step further.
is the tentative JTBD grouping relevant for the 2023 grad class? (the previous research was from several years ago and not all data points were covered in this research)
which data points are most valuable to students?
I believed the most diligent approach would be to conduct a card sorting exercise. This would help me understand the information architecture I’d need to adopt to deliver a successful user experience and how I should prioritise these data points.
Using Maze, I created a closed and unmoderated card sort, asking users to:
group the data points according to theme
prioritise themes in order or importance
Below is a snippet of the results from the card sort. Gaining responses from 46 students, we learnt that:
100% (all 46) of students believed that "international fees" and "domestic fees" belonged in the same group
Of the 46 students, 89% (41 students) prioritised sorted this group as "very important"
87% (40 students) sorted "application deadline", "course duration", "study mode" and "qualification" into one group
Of the 40 students, 38 students) prioritised sorted this group as "very important"
66% (27 students) did not assign "Module information" to a group
Of the 27 students, 20 students prioritised sorted this group as "least important"
From this, we learnt that placing all fees information and "applicationl deadline", "course info" etc. above the fold was of paramount importance, whilst "module info" could sit below-the-fold without compromising the user experience.
Whilst the results from the card sort were trickling in, I wanted to take a look at the competition. With many many of BridgeU’s competitors behind a paywall, I scoured through BridgeU's Slack looking for any useful nuggets of info about competitor profiles.
Finding little, I broadened my horizons and looked outside the EdTech Space. Inspiration gathering on Mobbin gave me some of ideas on how to display data in a visually-compelling way. I also made the decison to explore profile pages from companies in the travel and car industries (as their profile pages tend to contain lots of data) such as Airbnb, Plumguide, Sonder and Cazoo.
Looking at these sources of inspiration was a significant stage in my understanding of the task ahead of me. I learnt that these companies were not reinventing the wheel. Rather, they incorporated a couple of different design patterns which they’d scatter purposefully and repeat as you scrolled. There was very little in the way of fancy artwork or animations. Rather, a harmonious blend of icongraphy, typography, colour and white space to draw your eye to the key details.
Sharing my inspiration-gathering with the team and the PM, I felt like we should strive to find a balance between emulating this approach whilst retaining BridgeU’s current visual feel (so as not to deviate our visual language too much from the rest of BridgeU).
Breaking down into PoDs
My exploration of the problem space was proceeding well and I'd been working closely with the rest of the team. However, we still had 24 data points we needed to add to UK course profiles. What approach should we take to get this data into the product?
We made the decision to:
break the list of 24 data points down into bitesized deliverables (based on the results of the card sort)
within this, focus on the highest-value data at the top of the pile (again, based on the results of the card sort)
create cards in Trello which we'd provide updates on in stand-ups, ensuring any blockers were flagged and that we'd be on track to release this work by end of Q1
launch our work incrementally (i.e. as each chunk is ready and not waiting until everything is ready)
give estimates in weekly sprint meetings as to how much time the devs, data team and I needed to be in to sign off on each card
This approach meant I was able to prioritise my workload effectively, always ensuring I was a few steps ahead of the devs and that whilst they were working on the front and back-end, I was finalising and the designs for the next deliverable.
With my learning from above, it was time to explore some different layout options.
Using FigJam for some quick low-fi explorations of different ideas, I scoured through BridgeU to explore the layouts we used. I noted that layouts like side-by-side cards appear in other overlays, as did long-form headings and paragraphs. I incorporated these into concept 1.
Beyond this though, I felt our layouts and patterns were a bit limiting. So I took this opportunity to experiment with new ideas such as the row of icons/labels at the top of concept 2 to denote key info above-the-fold and the hovering interactive card in concept 4 to outline key info and display the CTA.
After mocking up these concepts, I shared my progress with the devs and PM over Zoom, stressing which of these layouts already existed in BridgeU and which are new ideas.
Feedback from the devs was highly useful, with some of their insights being that:
the side-by-side card approach in concept 1 is a reusable component that would be simple to implement on the front-end ✅
an icon-style design pattern (see concept 2) would be fair straight-forward to build ✅
the hovering interactive card approach in concept 4 would be quite difficult to build, given the skillset of the devs and time constraints ⛔️
this might also offer a confusing user experience as the CTA already lives in the top-right and would we really want two CTAs doing the same thing above-the-fold?
With these learnings and reflections from conversations within the design team, I decided not to proceed with just a singular concept, as each concept had its strengths and weakness. Instead, I took some of the strongest layout patterns from each concept and earmarked them for high-fidelity exploreation once my card sorting was complete.
Exploring design patterns
By this point, I'd received and compiled the results from the card sort. Plus, conversations with the devs and design team had helped me to think about which concepts I should take forward and which I should discount. Now, I needed to focus on the latter and working in higher fidelity.
So in Figma, I organised the canvas by cordoning off big sections for different themes (financial info, course info etc.). Exploring different design patterns for each theme in high-fidelity, I noted which of the patterns already existed within BridgeU. I also kept in mind the way travel websites had solved this problem by adopting and recycling just a couple of design patterns.
Bearing in mind that my work in this project would bleed into the rest of the product, I comandeered a one-hour slot in our weekly design review to walk the rest of the design team through my explorations. We discussed the merits and drawbacks of different patterns as well as their scaleability and potential use elsewhere.
Following this highly useful check-in, I also sought feedback from the devs to take a deeper dive into the estimations of the build time and their take on the efficiency of each pattern.
Below is a snapshot of the way I organised these design patterns.
🚀 The final design
My task now was to choose what I felt were the best design patterns for each PoD.
Students had already sorted application deadline, course duration, study mode and qualification into one group. They had also made clear that this information was among the most important to them.
Given that I was reusing an existing design pattern for "Course At A Glance' and "Annual Fees" in an effort to reduce dev workload, I believed that taking concept 2 from the design pattern work but placing these 4 data points inside a card would provide a pleasing sense of symmetry. As for the tweaking of the icons, I decided to change them from red to blue and place a light grey fill from BridgdeU's design system to add extra emphasis to this top section. This icon style was just a minor deviation from the current pattern in BridgeU but I felt there were other, clear use cases for it in the product so I logged this new component in Zeroheight for future use.
Whilst cards can be a useful way to help info to stand out, over-reliance on this pattern will reduce its effectiveness. Given that "Course information" is usually very text-heavy, I simply placed this under the two cards and worked with the devs to implement a character count rule, truncating the rest of the text inside a "show more" so as not to push the content below it down to the very bottom of the overlay.
I applied a similar methodology to "English Language Requirements", given how text-heavy this section can be. Seeing that each row had several different values inside, I believed that displaying this data in tablular format would made good sense. So I again looked through BridgeU for a tabular design pattern we could re-use and tweaked the design slightly to conform to our use case.
I also had to consider how these patterns would work on mobile. Having kept this in mind since inspiration gathering, this was simply a case of stacking the elements on top of one another and using a more mobile-friendly navigation pattern for entrance requirements, so I opted to switch out the tabs for a filter.
📈 Business impact
% of user dropoffs (exiting a UK course profile within 30 seconds of arrival)
% of students shortlisting a UK course profile from the overlay
Due to time constraints, I had to make the decision to exclude user testing from this project. However, I reasoned that, given the many questions re the information architecture, user testing was very much a secondary priority. Consequently, the above impact gave me confidence that I made the correct decision in prioritising a card sort over testing.
Thinking more critically about which design patterns from the inspiration gathering to take into higher fidelity (e.g. financial info concept 2 not really being applicable for our use case) would have led me to the end of the project a little faster.
Most proud of
I’m very happy that I took a deep dive into the audit spreadsheet at the beginning of the project. Whilst it was tempting to start diving into the JTBD research and inspiration gathering, reviewing the notes re data coverage helped me to think about edge cases nice and early, ensuring all scenarios were covered in my handoff.
An unexpected learning
Before the inspiration gathering, I anticipated discovering intricate design patterns with vibrant visuals. However, I found that simple design, though not as elaborate, proved highly effective in conveying substantial data. This reinforced the notion that mastering simple design is challenging but an invaluable tool in UI design.
This initial project successfully addressed an overlooked aspect of the product. Yet, user interviews revealed additional data points valued by students, such as the percentage of graduates employed and financial aid information. I would have loved to collaborate with the PM to explore how we could capture this data, assessing its viability for the business.
The final designs achieved a balance between relevant design patterns and adherence to BridgeU's visual language. However, some unrelated profile pages now appeared dated. I’d have been interested in exploring how the new design patterns could enhance visual consistency and elevate the user experience across these additional sections.
Liked what you saw? 👀
Check out more of my work below.
Redesigning search to better meet user needs