Reentry Mentor Program
Case Study

Category

UX DESIGN

Customer

Google Certificate

Date

JUNE - JULY 2024

Location

WILMINGTON, DE

Download Case Study

Summary

The Product

The Reentry Citizen Mentor Program allows imprisoned individuals to partner with other successful citizens to get help along their career paths. The typical user is between 35 and 50 years old and has wide-ranging computer skills, from slight to fully computer-literate. The goal is for a user to sign up and have their information verified. Once verified, the user can log in, select a vocational field, select a mentor in that field, and book an appointment with the mentor.

Problem

Reentry citizens need help signing up and searching for mentors online in the Delaware area. For most mentor programs, you must come in during business hours to sign up and participate.

Goal

The goal is for users to sign up and have the information verified. Once verified, they can log in, select the vocational field, select a mentor, and book an appointment with the mentor.

My role

I was the Lead UX Designer for the Reentry website design.

Responsibilities

I conducted interviews, paper and digital wireframing, low and high-fidelity prototyping, usability studies, accounting for accessibility, iterating designs, and designing both mobile and responsive website design.

User research: summary

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users hate taking a day off and going to the office to sign up for a mentor program. However, filling out forms within a set period can be difficult and frustrating for many target users. This made the stress experience even more challenging for them, not allowing users the time to look over and read everything at their own pace.

User Centered Design Process

Interaction

Reentry citizens are often busy during the day and may have time restrictions, which makes it difficult to sign up for a person program.

Automotive

Signing up for a mentor program should be available online instead of having to be done in person.

Experience

Having the user be able to search for their career path and then read about the mentors at their own pace gives the user a better experience than filling out forms in person.

Persona [TEAM-MENTOR-PROGRAM]

User Research and Create Persona

The persona defined is based on our interview and survey findings:

User Journey Map

Sitemap (Information Architecture)

Difficulty with website navigation is having simple navigation for all sections, I used that knowledge to create a sitemap.

The goal was to make strategic information architecture decisions that would improve the overall website navigation of the patient portal.

Paper Wireframes

Writing an iteration of each possible screen of the mobile website on paper ensured that the elements that made it to the digital wireframe would be well-suited to address user pain points of not being able to sign up online at a more convenient time. From the home screen, I prioritized a quick and easy process to search for and find a mentor, ensuring the process requires a low amount of computer skills to navigate and helps users save time.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on findings from user research.


More straightforward navigation allows users to locate critical website areas and elements essential to users. Will also add assistive technologies.

Mentor low fi wireframe layout

Digital Wireframes

For the Vocational Categories I made the sub-category a dropdown so user can reduce one click in the process, this way they can select Nurse’s Aid directly from the Health Services tab and not have to go to the page to then select. 

Digital Wireframe

Low-fidelity prototype

To create a low-fidelity prototype, I connected all the primary and secondary user flow screens, linking to the mentor portal to register, log in, and then search for a mentor.


At this point, I had received feedback on my designs from the user study for buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.


View low-fidelity prototype

Low-fidelity prototype

FINDINGS

Usability study

For this study, I wanted to examine the usability of the mentor’s website. I wanted to see how effortlessly users can find their occupation and career path, locate mentors for their careers, read about the mentor, and set an appointment date & time when completed.

Round 1 Findings

  1. The font size on the opening tabs needs to be increased.

  2. Increase the size of buttons along with increasing the space around the button.

  3. Need to add a back button to all pages in mentor portal?

Round 2 Findings

  1. A calendar with a date, time, month, and year is available.

  2. Add links to vocational categories to reduce clicks to mentors for that category.

  3. Add the ability to add appointments to their calendar of choice.

Mockups

Based on the insights from the usability study, I made changes to improve Vocational Categories by adding direct links to each career listed under each category, which take the user to the Mentor for that career.


Also, based on the insights from the second usability study, I added the option to add an appointment to the user calendar to improve the Appointment Calendar.

Mentor before and after mockup

Mockups: Screen size variations

Based on earlier wireframes, I included considerations for additional screen sizes in the mockups. Today, users request websites from various devices, so it was essential to optimize the browsing experience for a range of device sizes, such as mobile and desktop, using responsive design so users have the smoothest experience possible.

screen size variations

High-fidelity Prototype

The hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.

View the Reentry Citizen Mentorship Website

Accessibility considerations

 

I used high-contrast colors, so those with color sensitivity will have no issues.

I used headings and text with different sizes, marked with headings h1 to h6, for a clear visual hierarchy.

The site is designed with alt text for images and content on each page for smooth screen reader access.

Takeaways

Impact:

Our target user shared that the design was easy to sign up, log in, search for a vocational category, locate a mentor, and record the appointment when completed. They also enjoyed that a complex process was made more accessible and thought the site had a clear visual hierarchy.

 

What I learned:

The best thing I learned was all that goes into a complete UX Design to create a good user experience. The most important takeaway was the need to always focus on the user’s needs and skill level when seeking the best solutions during the design process.

.

Next steps

Continue with usability testing of elements and build out pages on the website.

Please continue to design the additional pages to finish the website redesign.

Present the website to the T.E.A.M. leadership about the implementing program and have the website built.

Skip to content