Buff Portal - Integrating Student Affair Articles
Improving the Visibility of Student Affairs Articles for Enhanced Student Engagement.
Context
CU Boulder’s Student Affairs team creates valuable content for students covering topics such as academic skills, wellness, and campus involvement. However, these articles were primarily published in CU Boulder Today (CUBT) emails and suffered from low visibility and engagement. Our task was to address this problem by integrating these articles into Buff Portal (Student Portal for University of Colorado Boulder), making them more accessible and relevant for students.
This project required a fast-paced, collaborative approach involving multiple stakeholders, rapid prototyping, and usability testing to create a seamless, student-friendly experience.
Role
UX Designer
Timeline
July - Sept 2024
Tools
Figma & Figjam
Jira
Adobe Illustrator
UserTesting
Research Phase
We started with an in-depth research phase to understand the current state of Buff Portal and the challenges students faced with accessing Student Affairs articles.
Understanding the Buff Portal Platform
Buff Portal is the official student dashboard for CU Boulder, where students access essential academic information like course schedules, grades, and financial aid. Designed with a modular card-based layout, it allows students to interact with key information quickly, prioritizing essential updates such as grades and schedules at the top. While the portal effectively manages academic data, it lacked a streamlined system for integrating additional content like Student Affairs articles, which led to low visibility for important resources related to student life.
Analyzing Current Solutions
Currently, Student Affairs articles are sent directly to students' inboxes from the Student Affairs email. However, this approach has led to low engagement, as many students either ignore the emails or rarely open them to read the articles that might be relevant to them. The click-through rate remains low, and valuable information in these articles often goes unnoticed. Recognizing this issue, the Student Affairs team approached the Buff Portal team with the idea of integrating these articles directly into the Buff Portal. The goal was to increase visibility, encourage more interaction, and ensure that students could benefit from the helpful resources without the need for them to actively seek out or open separate emails.
THE PROBLEM
Low Visibility and Engagement of Student Affairs Articles
The challenge was to overcome the low visibility and engagement of Student Affairs articles in Student emails. Students were unaware of important resources because they were difficult to find, buried beneath irrelevant content, and not personalized for their needs.
Desired Solution
Integrating the Articles seamlessly in Student Buff Portal
The goal was to integrate Student Affairs articles directly into Buff Portal, making them more visible and accessible. This approach aimed to boost engagement by presenting the content where students already interact, ensuring valuable resources were easy to find and explore.
Project GOAL
Making helpful articles more visible!
Our goal was to seamlessly integrate Student Affairs articles into Buff Portal in a way that was intuitive, personalized, and engaging for students.
Increase Visibility
Make Student Affairs content easy to find.
Enhance Engagement
Ensure articles are relevant to students’ academic and personal interests.
Improve UX
Deliver content without disrupting the user flow of Buff Portal.
USER RESEARCH & insights
User Interview sessions, affinity mapping and finding insights.
We began by conducting collaborative design sessions in FigJam with a diverse group of students to gather insights into how they navigate Buff Portal and what types of content formats they find most engaging.
Based on the interviews, we identified several recurring themes and needs:
Personalized Guidance: Users want mentors who match their specific academic and career interests.
Flexible Communication: Users prefer various communication options like video calls, messaging, and in-person meetings.
Safety and Trust: Users need safe and reliable mentorship connections to avoid scams.
Skill Development: Users seek mentorship that offers practical advice and project collaboration to bridge academic and real-world skills.
Community and Networking: Users desire a community to connect with peers and mentors who share their goals.
Construting "How might we…" sentences based on insights
To guide our design process, we used insights from the affinity mapping to create How Might We (HMW) questions. These questions help frame the design challenges and explore potential solutions by turning user needs into opportunities for innovation:
HMW
create a personalized mentorship matching system that aligns mentors and mentees based on their academic and personal interests, career goals, and preferred communication methods?
HMW
provide resources and guidance for users to overcome common obstacles, such as navigating internships, career planning, and adapting to new environments, while also offering tailored advice for specific challenges like research proposal writing or understanding digital marketing trends?
HMW
incorporate tools and features that support skill development, such as project collaboration, feedback mechanisms, and access to exclusive workshops or talks by industry leaders?
HMW
build a community within the platform that encourages open dialogue, collaborative learning, and shared experiences, particularly for users with specific interests like sustainability or technology?
Crafting an Intuitive User Experience
While designing the main user flow, I focused on making the experience straightforward and accessible, especially for first-time users. By adhering to specific product constraints, I was able to maintain a clear and user-friendly approach
The app is
For connecting users with mentors who share their goals.
Ensuring secure and trustworthy interactions.
Offering flexible communication with minimal time commitment.
The app is not
A general networking or job search tool.
Dictating specific career or academic choices.
Requiring extensive planning or preparation.
Wire framing
Start with creating a visual representations of the solution.
The initial wireframes were created to outline the basic structure and user flow of the app. These early-stage designs underwent numerous iterations to refine the layout and enhance usability.
Visual DESIGN IDEATION
Crafting the Ideal experience
Content feels crowded
Icons + Content Layout
Layout of the Onboarding Questions
Initially, the design only included text options with one-line captions. However, it became clear that adding icons to indicate mentor and mentee roles would make the layout much more intuitive and easily understandable.
Interaction DESIGN IDEATION
Helping make smoother conversations
To facilitate easier interactions, the chatbox screen features an AI-powered conversation starter. This design helps users overcome the challenge of initiating conversations by providing personalized prompts based on their profiles and interests.
Final Protypes
Take a look at the full prototype.
You can check out the whole Hi-Fi prototype of the app in Figma by clicking the button below.
👋🏼
Thank you for reading this case study.
Your interest and feedback are appreciated!
Raj Ostawal
Product Designer
If you like what you see,
let's work together
Contact Me