Designing a career exploration tool for UMD students

Designing a career exploration tool for UMD students

When

Jan-May 2022

My Role

Information architecture, content strategy, visual design (lead) User research, testing (support)

Collaborators

Katja Kleine - UX Researcher/Co-Designer

Tags
Content StrategyResearchContent DesignDesign (other)
icon
The University of Maryland Baltimore (UMB) is the state’s health and law university and a member of the University System of Maryland. UMB serves professional and graduate students with a focus on research, patient care and public service programs.

During my time as a grad student at the University of Baltimore, we were tasked with designing an interactive web tool to help students explore the Physician Assistant program as student consulting teams for UMB’s office of admissions. Process:

01 - Uncovering the problem

02 - Exploring solutions

03 - Impact & outcomes

01 | Uncovering the problem

UMB has an established, longstanding PA program, but has recently dealt with challenges to its business and enrollment goals. The University’s communications team decided to invest in new digital strategies to improve program reach. They partnered with my university’s design school to explore creative and interactive ways to improve user engagement with the university's web content.

CHALLENGES 🗂️ Industry Shift In 2020, an industry mandate started requiring all new practitioners to obtain a Master’s before they were eligible to apply for licensing. UMB had to reorganize many of their programs and resources to accommodate this industry change. 🗣️ Communication UMB recently expanded their professional development and specialization certificate programs. While these were designed to give students more academic and career options, research found that students were often unaware of the programs or how to take advantage of them. 🥊  Competition UMB has faced competition from both larger universities with more brand recognition and newer, less prestigious programs with more access to recruiting resources.

During our stakeholder conversations, our client stakeholders share that their main goal was to attract current students and practicing professionals to their specialization and continuing education programs. With this in mind, we created 3 project objectives to guide our work.

OBJECTIVES ✅ Increase awareness of new academic offerings to boost enrollment from current students and working professionals ✅ Improve the program’s ranking and public reputation to secure new resources and opportunities ✅ Elevate UMB’s online presence to help the program stand apart from its competitors

Gaining context

Before working on our design, my design partner and I reviewed existing literature and market data to get some more context about the problem space.

🤓 If you'd like to read my full research report, you can find it here.

We also conducted a heuristic eval of UMB’s program website and a quick competitive analysis of similar websites. From that analysis, we identified 3 major pain points on the existing site:

  • Decentralized information and content - site content is scattered and disorganize, so it’s difficult to get a clear understanding of the program.
  • Complex navigation structure - site navigation is confusing and inconsistent. There are several dead ends and no clear path from the main website to the PA program microsite.
  • Flat visuals and a lack of interactive elements - visual design flat and outdated. Some areas are very text heavy. Page structure doesn't help draw the eye to the most information areas.
image

Finally, we did a quick inventory of content UMB’s website and marketing collateral. We later reused this content to build out the content in our new app.

Getting to know our users

We used our secondary research findings to create personas for the two main user groups our client asked us to target. But after doing my initial research review, I realized there were two secondary audiences that could also really benefit from our solution - prospective students and educational professionals/counselors. Ultimately, we created a third persona for counselors and combined current and prospective students into one persona since their needs and motivations were similar.

image

02 | Exploring solutions

We framed our design vision around the idea of helping users understand how the program can help support their individual professional journey. Based on our understanding of the problem, we knew that helping users understand all of the different educational tracks and longer term career paths the PA program can offer them was the key to building a sense of connection between the student (or student advocate) and the program/community at UMB.

We also decided to lean on some key heuristic strategies to help us achieve this goal:

image

Workshopping our ideas

During the initial workshopping sessions, we quickly realized we wanted to build the experience around a few central content areas, each dedicated to exploring the program from a specific angle. This led to spending a lot of time developing the different content areas that we wanted to include in the design and mapping out how we wanted the users to move through them.

image
image

After several white boarding sessions, I used this information (and my arts degree 😜) to sketch out some paper prototypes that we used to rapid test and refine our concept.

Testing the concept

We took turns leading and observing rounds of moderated and unmoderated user testing to validate our initial design. We used test data and user feedback to rapidly iterate on our concept, progressing from paper prototype sketches, to a lo-fi digital version, before eventually landing on a final concept.

Paper prototype testing

  • Moderated hybrid remote/in-person sessions conducted over Zoom
  • 8 rounds of testing; 8 participants
  • Participants selected from various professions including healthcare, finance and education. 25% of participants were current university students

Lo-fi prototype testing

  • Unmoderated tests conducted remotely using UserTesting
  • 2 rounds of testing; 5 participants
  • Participants were professionals selected from the higher education, healthcare and education sectors
image

03 | Impact & outcomes

Making it beautiful

Again, putting my visual design background to use, I created a light brand strategy for our final concept. I chose an approachable, playful tone and incorporated imagery evoking positivity and success. I also created a color pallet that’s reflective of UMB's school brand (and our iconic Maryland state flag) — but mixed in some neutral, desaturated hues to make it bright and energizing but not overwhelming. We presented these hi-fidelity mocks in our client presentation.

I also built a hi-fi demo of the mweb solution for our clients to play around with. As a content designer, my PD partners usually handle prototyping, so this was my first time building a working demo from scratch. It’s not perfect, but i’m still pretty dang proud of how it turned out.

😎 You can check out the demo app here.

image
image
💡 PROJECT IMPACT At the end of the project, we presented our findings and delivered a strategy proposal to the client. The client was really impressed with our proposal and used the recommendations and insights we delivered to develop a solution in-house.

↻ Take it from the top