A New Student Support Experience

UX/UI Design | UX Research | Branding

Challenge:

Design an informative and robust profile page for Wonolo workers that improves engagement, increases accountability and incentives better work performance through gamification.

Client

In 2020, Johns Hopkins launched a Shared Services Organization that combined three functional areas: student accounts, registration and financial. This new team is tasked with providing services to students related to their overall enrollment and finances.

Role

My focus has been overseeing the end to end UX design process. I have also worked on branding, graphic design and UI design. Methods included: user interviews, shadowing, co-design sessions, usability testing, affinity maps, surveys and journey maps. Design tools included Dovetail, Miro, Adobe XD, Figma, Invision.

Team: Nicole Pennington (PM), Kim Le (UX Research), Sarah Elvidge (Project Manager) Sam Vehslage (Marketing)

Result

Over 100,000 students have used our new tool, a case management tool (Salesforce). We also built a website and brand for the new shared services organization.

timeline:
2 YEARS
role:
UX/UI desigN, ux research, Branding

Project Context

Johns Hopkins students historically struggle to complete administrative tasks. From registering for classes, to reviewing their bill, students find themselves confused and frustrated. Students were shuffled between offices and even campuses which adds stress to their already taxing workload. With the amount of teams and digital touch point, students receive inconsistent information which leads to a poor user experience. We are working on designing an improved digital experience through the introduction of a case management tool (Salesforce), among other technological investments and design updates. The case management will create a more transparent support process and improve communication between staff and students. Our work was accelerated by COVID-19 as our students were sent home and everyone became an online student. We could no longer rely on office visits or the collaborative nature of our campuses. Combining three offices into one has been an organizational change and has caused some unease especially on the staff process during the global pandemic. Our task was to improve our interfaces to help ease both our staff and our students into this transition.

Following a user centered design process, we looked at the current challenges faced by our users. We have included students in each step of the process to ensure their voice is heard. We have included students in everything from usability tests to voting on the name of this new office and service.

User Research

While institutions like Johns Hopkins provide an invaluable education and experience to students, their digital tools and systems often seem outdated as compared to other industries. We had the following assumptions of what we sense our users are struggling with:

Methods

We watched students in their natural environments; on their laptops working through tasks as well as visiting offices to get help. We could see the frustration as students are told that there is someone else to talk, another form that needs to filled out and/or a  process unique to their school or scenario. We tracked  interview notes from our interviews in Dovetail. From those notes, we used Miro to analyze the data and see the patterns that emerged.

Main Profile

Badges

Instructions

Metrics (Pay)

Insights

Visual

Students like the option of having key information displayed in time-based and visual formats (calendar views, matrices). Hopkins students build their own systems to do this.

Personalized

Personalized information is needed so that students see answers relevant to their situations. Many of our websites and tools lack personalization. For example, certain processes are different for international students.

Trust

Trust is built when communication is clear from a trusted often consistent person and or source. Students go to peers when staff/normal channels fail or if it is faster.

Office Agnostic

Students do not now or care about the distinction between administrative offices, especially student accounts and financial aid. When possible, we should talk about the task at hand and remove jargon.

How Might We create a consistent, unified and transparent support experience for Johns Hopkin students so they can stay focused on their academic journey? 

MVP

I sketched wireframes and designed a prototype to test the case management tool. We tested a basic prototype to make sure we were on the right track and tested it over Zoom.

Design Requirements

Before our department or tool had a name, we went ahead with a basic version of the case management tool that enables students to choose a topic, submit a ticket and add attachments. The user receives email confirmation once they have submitted a case.

Profile

Bio

My Badges

All Badges

Badge Info

Metrics on Home Page

Results from User Testing

Topic Categories

  • 5 of 6 topics are clear
  • 2 of 6  need search: topics are overwhelming
  • 1 of 6 want international student category

Speed

  • 5 of 6 emphasized they would expect this to be a quicker way to get in touch with JHU (and would use it if it is)

Case Instructions

  • 5 of 6 concise and precise (unlike other JHU sites)
  • 2 of 6 should be more descriptive

Status Tracking

  • 3 of 6  expressed wanting to see more status tracking
  • 3 of 6  think text would create more transparency

Co-Designing the Brand

While designing the case management tool, we were working on officially launching the Shared Services Organization. We wanted to include students in this process to ensure we used clear and friendly language. I facilitated a co-design session with students to help create names for the department based on Johns Hopkins values and their idea of the brand.

In addition to a name, we asked our 6 staff and students to create mood boards, choose styling and create a brand definition. We included 6 students and staff in this process. Below is one staff submission.

In addition to our student concepts, we received 89 name ideas from the community. From that list,  leadership narrowed the list to 12 options. We had 45 students respond to a survey with those names. The students top name was myHopkins, however we decided that was too close to the myJH platform.  

My concept, “SEAM” Student Enrollment and Account Management, was eventually chosen as the name. I created a brand guide. The home page for  SEAM  that was launched in the Fall, 2021.

Brand Guide

SEAM Website

Main Profile

Profile View Info

Preview Profile

Home Page (Metrics)

Badge Pages

Badges Explained

Ratings Explained

Introducing My Cases

As we create more transparent communication channels, we want the case management tool to act as the hub of information for student requests. We added the ability for students to see the cases they have submitted. We added the following features based on user feedback.

  • Users are able to search to find their case reason
  • Users can view their case status
  • Users are able to see popular topics by area
  • Users are able to log in when they want to submit a case
  • Users are able to view a list of cases
  • User are able to view their case details

Results from User Testing

Too many systems

  • 3 of 4 confused by names of Hopkins tools (SEAM, student information system and case management tool)
  • 3 of 4 have trouble getting back to case management tool and/or their case

Slow, unclear

  • 4 of 4  used more personal and faster contact methods to case management tool
  • 4 of 4  support process and status need to be more clear
  • 2 of 4  want  more details on case (comments, staff )

As shown on our user journey, students often get to the case management system because they simply can't find or get an answer at Hopkins. They start off the process a bit frustrated. Once they submit a case, they have to dig through emails to reference the information, which can be frustrating. Since the main communication strategy for Hopkins is email, we flood our students with communication. We even have students who created email folders for the case management tool.

In order to increase transparency and help students and staff communicate more effectively on cases, we are designing and testing the My Messages feature. Our hypothesis is this feature will help users stay organized of the updates on their case(s). Users will still receive an email update when there is an update to their case with a link to the case management tool. We are working on designing a new digital experience layer which will be able to surface updates from case management system in a centralized place with our student information system. We hope this alleviates the challenge students have of remembering how to submit a case.

Wireframes "My Messages"

  • Users are able to view notifications that they have received a new message on their case from SEAM
  • Users are able to view cases on cards which is consistent with other JHU tools (myJH)
  • Users are able to view and sort cases
  • User are able to view case messages in order to  understand the timeline.
  • Users are able to see read receipts and staff member name to see case progress
  • Users are able to case details and attachments
  • Users are able to send a new message about their case with attachments

a

b

A

c

d, e

f

g

Outcomes

In 2021, about 100,000 cases were submitted. 188 users have rated their experience from 1 (very bad) to 5 (great), we received a 2.7 out of 5 stars. On a scale from 1(very slow) to 5 (very fast), we received a rating of 2.8.

We expect the My Messages feature will improve the speed, accuracy and transparency of the student support experience. It will help students track their requests in one place. If our tool and service can give provide quicker and more personalized advice, it will live up to our goal of providing the best user experience possible. As we invest in technologies such as a knowledge base, we will give customized content to our users so they can answer their own questions.


Learnings

Academia has a tendency to market offices and products internally. While we do need to differentiate our support team, we may have caused unnecessary confusion. I recommended just using titles to differentiate that this is a new type of role and a new system. Another alternative would be to try to add more support staff under SEAM so that they take on the role of triaging all student questions as account management is a  broad term.

I  feel that we could have been more transparent in our messaging about SEAM and how though we intend to be the fastest way to get help, we are working on improving our response times. The tool still comes across like a wall between staff and students and removes the personal touch and feel. In addition to new features, I hope that we can use friendlier language and work on the brand identity.

Lets chat!

contact me