top of page

Overview

My Role

Lead Designer, User Research, Municipality Research, User Interviews, Wire framing, Usability Testing, Hi-Fi Mock Ups

Tools

 Sketch, Axure, Invision, Otter, Pen and Paper, Miro, Google Suite 

Team

 4 Designers

Sprint

3 Weeks

Objective

Redesigned the Department of Returning Citizens homepage to improve usability, functionality, and simplicity for citizens being reintroduced from incarceration.

Thoughts & Feelings

  Initially I wasn't very excited about this project. It wasn't till I realized how big of an impact our team could have on the city of Boston and it's citizens that I started getting excited. We were solving a serious problem that was affecting people daily. I was determined, curious, and ready to design a better solution.

Problem

Solution

Individuals affected by the process of incarceration lack accessible knowledge to supportive resources that help get their lives back.  People affected by incarceration need an easy and effective way to access helpful information

We believe that by introducing information early to individuals affected by the process of incarceration, they will have a more effective approach to adapting to society and rebuilding their lives.  We will know this to be true when we see an increase in scheduled meetings and usage of the web page

The departments home webpage's primary function is to display the departments mission, values, and provides an intake form to fill out so the applicants needs are easily identified for the caseworker.

About The Department 

The Office of Returning Citizens (ORC) works to support re-entry of people coming out of incarceration. Established in the fall of 2017, the department serves as an information hub that allows the incarcerated to be paired with a case worker to find program that meets their needs.

 

They have been working incredibly hard to pull together resources, to provide a space of respect, forgiveness, and support for second chances.

returning citizens - logo.png

Getting Started

We started off the project by developing a Statement of Work, Project Plan, and Project brief to establish scope for the ORC and Boston Digital Team.

 

The ORC’s current webpage was developed from a news article and was not based off user centered designed. It was explained to us early on that this work would be heavy in research since there were so many unknowns about our users after incarceration.

 

Our strategy was broken down into 2 phases over our 3 week Sprint. 

​

​

Phase 1

Research to determine our users wants, needs, thoughts, and feelings. Determine and present possible solutions for Phase 2 to ORC and Boston Digital Team.

(2 weeks)

​

Phase 2

 Design on solutions best suited for our users and create plan to implement for Boston Digital Team.  

(1 week)

linked in 13.jpg

PHASE 1

Understanding Our Users

User Research

We wanted to fully understand the extent of knowledge our users had about The ORC or programs that could help them from beginning to end.

​

To receive the most accurate perspective on our users thought process we decided to interview participants by identifying 3 classifications.

​​

Pre Release - Had limited knowledge of the ORC 

Mid Transition - Was in the process of using the ORC

Full Transition - Had used the ORC to successfully find a program

​

Because of our unique user base, the ORC helped recruit our participants for interviews and testing. Interviews took place at the Department of Returning Citizens and the Sofolk County Prison.

​

Department of Returning Citizens  

​

10 Users

​

Mid to Full Transition

  

 

​

Sofolk County Prison

 4 Users

​

Pre Release 

 

 

​

Interviews

We interviewed 14 users total and while doing so, transcribed with Otter to highlight key insights. After, we had each participant complete a usability test on the current ORC website. The interviews took place at both the ORC and Sofolk County Prison. 

"If it wasn’t for this office, I wouldn't be halfway or nowhere near where I am now.  I was here hanging off the edge. Now I'm standing on the edge. Just getting a little further and further, as each day goes, I don't stop."

"I just to see a whole bunch of writing. Just the page explaining what the program is and everything like that is good, but a lot of people coming out of prison needs a more personal touch to things and help understanding."   *Homepage*

“I came out of prison, and I had no income, no clothes, no, really anything, I was lucky to get on a bus”

"Out there, you need to have someone point you in the right direction.  Need to figure it out and feel it in order to do it."

"You need a mediator, to get you from A to B."

Results

  • Users often came out of incarceration with no knowledge of programs to help them with their needs

  • Did not have a support system to help them get back on their feet

  • Had limited resources (money, housing, food)

  • Were grateful for the ORC and the personalized help they provide

  • Would call the ORC to see how they could help them.

Affinity Map

ORC - Affinity Map.png

Themes

​

  • Having limited to no access to technology; making a phone call could be ‘it’ at first

  • Feeling overwhelmed about adapting to life outside of an institution, including technology

  • Knowing they need to come up with a plan to keep them from going back to an institution, but with no means to resources

  • Hearing about the ORC through word-of-mouth only after they were released

We synthesized those results using Miror to identify themes from our users. We grouped common insights together and assigned “I” statements to each theme. 

Personas

The affinity map uncovered 2 proto-personas which helped develop and reinforce the users story, feelings, pain, and goals. The biggest difference between these 2 personas was time of incarceration.

 

We found that the longer the user was in the institution, the less likely they were to have a plan and a relationship with technology. Because we receive almost all of our resources and information digitally now, our users were overwhelmed with complexity and finding the information avaiable.

Screen Shot 2019-04-26 at 10.55.21 AM.pn
Screen Shot 2019-04-26 at 10.55.38 AM.pn

Journey Map

We created a journey map to help visualize our users thoughts, feelings, and actions they took from leaving the institution to arriving at the ORC.

Journey Map!.png

Comparative Analysis

We looked at 8 city programs across the U.S. with the same mission as the ORC.  We needed to understand how others were interacting with their users.  I came up with a list of elements we used to rate their websites, from from 0 - 5. (Zero, not having the element to 5, the element being excellent.)  

 

​

We found that those sites that were rated higher, were simple, well organized and used pictures to show who they were and what they offered

We took a look at:

  • Major tasks

  • Target Population

  • Navigation

  • Visual Experience

  • Marketing 

  • Functionally​

ORC - Comparative Analysis .png
ORC Action pic.png

Solutions Presented

We were torn while developing a proper solution to meet all of our users needs. During our research we discovered that the primary problem was that the citizens weren't properly informed coming out of the institution and because of their shaky relationship with technology, most citizens had only mastered using mobile devices. Knowing this, we called a meeting with the City of Boston to present three solutions to the Digital Team.

​

 

  • Create a paper pamphlet to be handed out to our users as part of their pre-release process in the institutions or to their families

    • This addresses their primary challenge of limited access to technology

  • Redesign of the mobile phone application

    • A smartphone is our users primary access to the internet

  • Redesign of the returning citizens web page

​

 

We decided together with the Boston Digital Team, that our primary efforts would be best spent on the redesign of the web page.  We learned that The City of Boston had a print department and that the website was responsive, the redesign of the web page would also result in the redesign of the mobile page.

As a caveat, we later designed a pamphlet to help the print department in future endeavors.

Simplifying the Process

Feature Guidelines

Knowing our users, we knew the features of our design had to be:  

 

  • Simple, to lessen the feeling of being overwhelmed

  • Informative, explaining what the ORC can offer in terms of services and programs

  • Trustworthy, showing who the ORC is through pictures and testimonials

  • Intentional, with the ORC office contact information easily and readily available for those looking for a phone number to call

Site Map 

ORC Site Map.png

PHASE 2

Designing For The User

Sketches

We did a design studio to brainstorm possible layouts for our wireframes. Once completed, we selected common elements and merged them into one sketch.

ORC design studio.png

Design System

#091F2F

#FB4D42

#288BE4

#D2D2D2

#58585B

Montserrat

Montserrat Bold

Use it small for navigation, links, and buttons, and use it large for primary headers. Always use it in UPPERCASE bold.

Lora

Lora Italic

Use it small for body text, or large and italic for quotes or other special secondary text. Pair with Montserrat whenever possible to reflect our bold, yet human voice

Pamphlet

We wanted to give The City of Boston our take on the pamphlet. This version is scaled down from our wireframes and rearranged the elements on paper.

 

Attached is a perforated intake form - The idea behind this was to allow user who were still incarcerated to get a jumped start on working with the ORC by mailing their program needs directly to them.

unnamed-6.png

Front Side

ORC - Pamphlet back.png

Back Side

Wireframes

ORC- Homepage wireframe.png
ORC - Housing wireframe.jpg
ORC - Intake form wireframe.jpg
Artboard.jpg
ORC - Event Wireframe.jpg

Usability Test 

We conducted 2 rounds of usability testing with 6 users over 2 days for the web design  2 of the users were our primary users, people who had used the ORC, and other 4 were our secondary users, representing family and friends.

 

Our testing scenarios were focused on contacting the ORC and finding the 'Intake' form. The insights from testing told us that the design of the page had to be more straightforward and simple in order for our users to successfully navigate the page.

3.  "Book Appointment" was changed to "Getting Started"

Iterations

1.  "Book Appointment" button changed to "Get Started" and moved 

2.  Navigation bar was made bigger

4.  "Who We Are" was found confusing and was removed

5.  The steps for the process was shortened to 3

6.  "Intake Form" was made to visually represent a new section

ORC - Main Home wireframe.jpg
ORC- Homepage wireframe.png

1

2

3

6

4

5

ORC HI FI.png

Moving Forward

Working with The Department of Returning Citizens was extremely rewarding. Being able to make a change to benefit the users needs is why I decided to design.

​

Although I felt we did a thorough job redesigning the ORC homepage we would have liked to have done more interviews and usability testing. Due to the 3 week time restraint we were limited in what we could achieve.

​

​

A4 Copy 17.jpg
A4 Copy 16.png
bottom of page