Raj Ostawal/BuffPortal

Product design · CU Boulder

Making student resources findable

Student Affairs was writing genuinely useful articles. They were going out by email, where almost nobody read them.

Role
Product Design, Visual, Strategy
Timeline
Jul to Sep 2024
Team
Lead designer with the Buff Portal UX team

Context

Delivering content where students already are

CU Boulder's Student Affairs team publishes content on academics, wellness and campus life. Distributed through campus email, it had low visibility and lower engagement. The task was to integrate it into Buff Portal, the dashboard students already open for schedules, grades and financial aid.

This was a fast-paced project: collaboration, rapid prototyping and usability testing inside a short window.

Role
Product design, visual design, strategy
Timeline
July to September 2024
Research
16 student participants, remote usability testing
Buff Portal dashboard with its modular card based layout.
Buff Portal, CU Boulder's student dashboard, built on a modular card layout.

The problem

Low visibility, and no reason for a student to look

Students were not ignoring these resources because the resources were bad. They were ignoring them because they were buried in an inbox, underneath content that was not relevant to them, with nothing tying an article to what that particular student was actually dealing with.

Buried in emailArticles arrived in campus newsletters that most students never opened, competing with everything else in the send.
Not personalisedEveryone got the same content regardless of year, programme or situation, so most of it was irrelevant to most readers.

Desired solution: put the articles inside Buff Portal, where students already go, without disrupting what they came to do.

Project goals

Three things the integration had to achieve

Increase visibilityMake Student Affairs content easy to find
Enhance engagementEnsure articles are relevant to a student's academic and personal interests
Improve UXDeliver content without disrupting the Buff Portal flow

User research

Co-designing with 16 students rather than designing at them

With a limited timeframe, the fastest way to good ideas was to get them from the people who would use it. I moderated a collaborative session with 16 CU Boulder students, supported by the Buff Portal UX team.

01Context setting. Students were introduced to the visibility problem and shown how their input would shape the design.
02Design activity. Participants sketched their own solutions for integrating articles, focused on personalisation, accessibility and engagement.
03Feedback and discussion. Students presented their ideas, critiqued each other's, and voted on the most promising directions.
Collaborative design session board with student-made sketches and ideas.
Designs made by the students themselves during the session.
Session activity output.
Clustered ideas from the co-design session.

Wireframing

Two directions, built to be tested against each other

The initial wireframes outlined structure and flow, and went through several iterations. Rather than converge early, we deliberately carried two distinct versions forward so students could react to a real choice.

Wireframe for design direction one.
Design 1
Wireframe for design direction two.
Design 2

Final prototypes

Extending the existing system, not bolting onto it

Both high fidelity versions followed Buff Portal's existing design framework, while adding components to the shared library that other teams could reuse afterwards. Integrating into an institutional product means your work has to survive the next person's feature.

Final high fidelity prototype, version one.
Final high fidelity prototype, version two.
The integrated Student Affairs article experience inside Buff Portal.
Student Affairs content living inside the dashboard, alongside academic cards.

User testing

A second round of feedback on the real prototypes

We ran remote testing over video, walking students through the working high fidelity prototypes and noting what they did as well as what they said.

Every comment went into a structured table, then got analysed to identify which version students preferred and what still needed changing. Two rounds of student input, at the idea stage and at the prototype stage, is what made the recommendation defensible.

Structured analysis of user testing notes.
Testing notes documented and analysed to pick a direction.

Reflection

What this project taught me

The instinct on a visibility problem is to make the thing louder. The better answer was to move it somewhere it made sense, and to let students tell us where that was. Sixteen people sketching for an hour produced more usable directions than I would have reached alone in a week.

Working inside an established institutional design system was the other lesson. Adding to a shared component library, rather than designing a one-off, meant the work kept paying off after the project ended. It is the same reason I now build component libraries rather than screens.

Next project
Vocali, making long podcasts searchable