OnCampus

I collaborated with a team of five to redesign OnCampus, an online portal for over 30,000 students and staff at University of Colorado - Boulder.

Team
Ian Hoenes, Marisa Bueno, Gabirel Ezcurra Taiganides, Jayne Moon, Damien Rittman
Duration
Summer 2018-Summer 2019
Tools
Sketch, Axure RP, Adobe Creative Suite, Abstract, Siteimprove
Key Skills
Prototyping, Usability Testing, Visual Design, Stakeholder Interview
A Fragmented User Experience
At University of Colorado - Boulder, students and staff have access to an array of digital services provided by the university. Students can track their laundry, sign up for tutoring groups, and even match up with roommates with like interests. Our staff had many tools to help support their residents, such as a roommate agreement tracker and an event page. Our users had lots of resources at their disposal, but as more and more services were added, their experience became more fragmented. Students were having trouble navigating to the correct website. Additionally, many of our services were built and designed by third-party vendors, leading to an inconsistent user experience.

We were tasked with OnCampus, the university's housing and dining hub. OnCampus due for a renovation, in both the user experience and visual design. It needed to expand to accommodate new user groups such as commuters and non-student residents. Additionally, there were several services that were not found on OnCampus but would be useful if integrated. With this information, we identified some key goals:
We looked at the OnCampus website and noted any issues or barriers that could prevent our users from having a good experience.

Key insights on the home page of OnCampus.
User Research
We identified key groups in our research. These groups, in addition to students, were staff and employees who worked closely with them, such as resident advisors and hall directors. We met with each group and observed how they used OnCampus. After we collected this data, we compiled it into an affinity chart by grouping similar observations together. This allowed us to gather information and insights without bias.

Key Insight: Information Overload

Students, especially first year students, are constantly bombarded with a stream of information. They may receive it through email, phone, or social media, furthering the confusion. There are a lot of resources for students, but they often don't know it exists. How can we help our users parse through all this information?

Personas Clarify Direction

With this information, we created personas to clarify our goals. Students are our main user group, but we also had to accommodate for other users as well. Bear Creek Apartments for example, worked closely with non-freshman students. Separate from on-campus dorms, they had unique needs that we needed to keep in mind. However, most of their goals and concerns still prioritized visibility and accessibility.

One of our personas of a Bear Creek housing staff member.

Our Solution: Persona-Based Dashboards

We determined that persona-based dashboards would best support our users. Dashboards are modular and intuitive. Each card on the dashboard would be an overview of a service. The user has all their resources available to them without too much information overload. The user can also move cards around, and even remove them if they needed to. In short:

  • Dashboards display everything at a glace. Our users don't need to use OnCampus all the time. But when they do need something, it'll be on the dashboard.
  • Each user group has dashboards tailored to them. Certain cards, like laundry, would only be displayed for students living on campus.
  • Dashboards are flexible. Dashboards allow us to add and move cards when we need them. Parking permits, for example, are only given out at move-in.

For our minimum viable product, we outlined our user groups and all the card types that would be displayed on the dashboard.

MVP for persona-based dashboard
Prototyping
Now that we had our solution, it was time to come up with the prototype. We used Axure RP because it was a robust and allowed for a clickable prototype, which could be used for testing. We designed a dashboard for each of our user groups. Here, I present the first year student dashboard.

Dashboard for a first year student.

User Testing

We tested our users onsite using our clickable prototype and used the SUS (system usability scale) by John Brooke as a basis for our testing. We had our users complete certain objectives, noting the time and what their thoughts were.  Testing during this phase was extremely important, because it allowed us to make major changes without drawbacks. Once we moved on, it would be a lot more work to retroactively change the structure of OnCampusfor our design team and developers. Fortunately, while we did need make some minor tweaks to the design, our prototype was overall well-received.

Design
Now that the prototype was in a good place, our team started on the visual design of our product. We created our designs in Sketch, and used Abstract to help us with version control and collaboration. For on-campus residents, we prioritized putting the balances, laundry, facilities services, and tutoring cards on top because these were the most frequently used services. They can move the cards however they'd like, but this is what every student living on campus would see on initial log-in. Our other user groups are similar, but have less cards because they don't have as many services as a student living on campus.

Desktop Dashboard

Click to see the full dashboard view.

Mobile Dashboards

Mobile views for dashboard, onboarding, and dark mode.
Onboarding screen for new students.

Highlight: Onboarding Screens

First year students have a lot of tasks to complete. They need to fill out a room condition form, roommate agreement form, and complete bystander training. Previously, they received this information through email and their RA. To minimize confusion, we decided to communicate these important tasks through an onboarding process, which will then turn into a checklist. This checklist will remain on their dashboard until they've finished everything.

Highlight: Dark Mode

Students are often staying up late to study. We wanted to incorporate a dark mode to help ease eye-strain and help readability in low-light environments. Adding in a dark mode was relatively straightforward with our color scheme, and was an easy way to add more customization to OnCampus.

Click to see the full dark mode view.
Final Thoughts
OnCampus was a huge undertaking and an amazing learning experience for me. Our team was very thorough and did extensive research to get to our final product. One lesson that I felt was significant was the prototyping process. I realized that while prototyping, I needed to be really intentional with my design decisions, because it would determine the structure of the final product. I learned how to gather and interpret feedback from our users, and what it means to design for the user instead of me.

If I had more time, I would definitely love to conduct further testing on our final product and properly assess its impact. OnCampus was focused on the housing and dining aspects of the university, but I'd love to incorporate more services into OnCampus to further unify the student experience. This would really help streamline their experience and prevent them from getting confused.
Nibble
Swivel
Designed in Webflow by Kathy ❤