Rise Up Project.
Helping formerly incarcerated individuals find education and careers.
Project Overview
The Product
I was tasked to create a responsive web design for a social good. After weighing my options and seeing what is out there, I decided to create a web design for users who were formerly incarcerated to find careers and education.
My Role:
UX Designer through all design stages.
Duration:
November 2023- December 2023
The Challenge
Through my research, most of the web designs were for mentors to sign up for another project similar to this. There was nothing outright that I could find specifically for people who were incarcerated. There were a handful of other projects similar to the site I created; They were only for potential mentors to sign up. The websites whose target audience was for the formerly incarcerated were government websites. While they were usable, It was all overwhelming and not welcoming to the user. I wanted to create a simple web design that allows users to easily apply for what they need.
The Problem
Users are looking for a simple and easy way to sign up to further their education or help finding a career path after incarceration.
The Goal
The goal is to create a responsive web page design for a social good, a website where formerly incarcerated individuals can further their education and find a career. The goal is to create an accessible and smooth user journey to make it easy to fill out an application.
Project Research
Web pages like these exist at the government level. Though they are not aesthetically pleasing, and it might be a bit busy, it gets the job done. The web designs that were for mentors were really inspiring. They laid out statistics, and their mission and why they created this project. It was to help people through a difficult time. It is difficult to apply for careers and education after being in jail. Something these web designs that were missing, something inspirational to raise their spirits. To feel like someone had their back.
To help myself get in the users shoes, I created two personas. Meet Matt and Sabrina.
Main Features and Structure
With understanding where my users interest lie, and researching how other rehabilitation projects and web designs layout their navigation and pages, I started my own information architecture to include in my responsive webpage.
How would be users be navigating Rise Up Project webpage? I came up with a map of how I believe users would search through the Rise Up Project.
I created a customer journey map that helped me decided which pages are most important to the flow most users would experience. This also helped me decide that a well organized navigation bar would be the most important to curate.
I also created wireframes to help me get a sense on the general layout of the Rise Up Project website. I did this for both the desktop website as well as the mobile website. The key difference is the navigation bar.
For the desktop website, the navigation bar is laying right in front of the user, allowing them to hover and click on any prompt they need. For the mobile app, the navigation is set aside in a hamburger menu that will slide out for users to choose a prompt. This allows for a clean homepage and keeps the same items still accessible, just on a smaller screen. Over all, the mobile and desktop version will have the same look and feel.
Since I had the general layout down, I went ahead and create my low-fidelity prototype in Figma. I used general shapes, lines, and text to create the general layout of my screens.
Low-Fidelity Prototype for Desktop
Low-Fidelity Prototype for Mobile
Visual Design
Once I had the layout down and the user flow I wanted to follow, I did research into the visual design and visual hierarchy of the Rise Up Project web design. I used the type face Roboto in different sizes and weights.
For the color, I chose two main colors of the brand: An earthy green, and a deep navy blue. Blues often represent reliability and stability which is I feel is the perfect tone for this web design. With that, I also chose neutral text colors that highlight the primary colors.
Once I had my visual designed laid out, I went straight into designing my high-fidelity prototype for the Rise Up Project. After looking at my digital wireframes closer, I decided that some of the structure looked a bit off, so I changed the design as I went.
High Fidelity Prototype for Desktop
High Fidelity Prototype for Mobile
Design Iterations
Application Form
The biggest thing I reiterated on was the application. Though the information and knowledge that the project is able to share is most important to the user, the ease of filling out the application was important to me. This is such a transformational time in someone’s life, and it needed to be easy to fill out. I tried to stay away from words and sentences that could confuse the user. I also looked back at my personas, and Mackenzie and Kyle lead completely separate lives, and on different pages of their book. The applications needed to be sweet and to the point, but not overflowing with all kinds of information that people don’t need to fill out.
To fix that problem, I decided to create two applications instead of one. I created a form for individuals that are seeking help in their education through college or a trade school. I then created an application for individuals that want to find a steady career. The education form asks for your highest degree, and what you are looking for now so a mentor can help you. On the other hand, the career form outlines previous jobs they may have had before incarceration, as well as any education they may have.
Accessibility Considerations
1
Followed WCAG guidelines on color contrast to help users with visual impairments flow through the web design with ease.
2
Used images as well as text to display information.
3
Interactive elements like buttons are easy to find and use.
Takeaways
There was slight change from the beginning designs to the end of the design. After iterating on the design more, it was created to a human centered design focused heavily on feedback to make the web design and mobile website easy to navigate and use. We also based this off research and what other programs and government websites flow of design.
Next Steps
1
For future research, include a broader sample to gain more research on what users look for while ordering mobile.
2
Conduct a usability test for the interaction of the application for Mentor Request form.
3
Follow up with users who use the program to gain feedback.