School to Prison Pipeline Journey Map

Jeffrey Rawizza
5 min readSep 23, 2019

--

What is a journey map?

A journey map is UX tool for designing, where you create a map of the site that you are creating. This way you have a visual map for how the user will interact with the site, which allows you to figure out some paint points and how the site should work before you have it tested.

Step 1: Open

Obviously you start by opening the site. When you are on the homepage of the site, you’ll see an introduction explaining the purpose and how to use the site. You will also see the people whose stories you can listen to and interact with.

Home page wireframe

What does the user see?

  • Header, with navigation and site name/logo
  • Into/about the website
  • Basic information about what the school to prison pipeline is
  • Image of the school to prison pipeline
  • Grid of people

Happy path

The user reads the how to use the site and the what is the school to prison pipeline section, then scrolls down to the storyteller section and picks a storyteller.

Pain Points

  • The user doesn’t read the intro/how to use the site
  • The links on the site dont work

Opportunities

  • Make multiple ways to get to the same page

Step 2: Selection

The next thing that the user would do is pick a person’s story to hear. There would be many different people, and stories to pick from, to listen to. Each storying giving you different a different experience and interactions.

Home Page Wireframe

What do they see?

  • A grid of people
  • Profile picture
  • Name
  • Intro to story

Happy path

The user reads the introductions to the stories and listens to the story.

Pain Points

  • There are not enough storytellers
  • The user doesn’t know to click on the storytellers for more information

Opportunities

  • Ensure that there are a lot of different storytellers
  • Have a hover for the storytellers so the user knows that they are links to more information.

Step 3: Introduction

This is the introduction where you meet the person via pre-recorded video. Each person would take somewhere between 10 and 15 minutes to listen to there story and interact with.

Storytelling Wireframe

What do they see?

  • Storyteller picture and name
  • Story introduction
  • Video player
  • Previous, home, and next buttons
  • Interaction map

Happy path

The user plays the video and listens to the story.

Pain Points

  • the video doesn’t work
  • the user doesn’t know its a video

Opportunities

  • clearly label the video

Step 4: Interaction

This section is the interactions, where periodically through the story the person will give you a chance to interact with them. You’ll be able to ask questions, or make comments on there story via the text field. The amount of interaction you have will vary depending on who the person telling the story is, as will the way in which you interact with them. Sometimes it’ll be them asking you a question and other times you be able to ask them questions.

Interaction Wireframe

What do they see?

  • A map next to the video
  • Pop-up from bubbles
  • video, text field, and transcription of the interaction video
  • Bubbles that show where in the video the interactions are

Happy path

The user gets to the interaction and the interaction window pops up. The user then would type their answer to the storytellers question, or type a question themself. The interaction video would then respond to the users answer or question, and then close and the story would continue.

Pain Points

  • The user asks an unexpected question
  • The response doesn’t make sense or creates more questions
  • The user could ask something that is answered later in the story

Opportunities

  • If there isn’t an answer to the question then the site could email the user at a later date if they would like with an answer to their question
  • There could be a “do you have more questions box before the interaction closes
  • The storyteller responds with “that question will be answered later” so the user isn’t skipping around in the story

Step 5: Feedback

After your interaction with the person, they will then respond in some way to either your question or to your answer to their question. Then their story will continue.

Interaction Wireframe

What do they see?

  • A new video based on their input into the text field
  • A box for further questions
  • A done button to continue with the story

Happy path

The user gets a response to there question or answer and goes back to the story and interacts with the storyteller again later in the story.

Pain Points

  • There isn’t a response for the question that the user asked

Opportunities

  • The storyteller responds with “that question will be answered later” so the user isn’t skipping around in the story

Step 6: Repeat

After all your interactions and their story is over, the user is prompted to reuten to the home page, where the stories that you have hear already will have a colored background to indicate you already did that one.

Home Page Wireframe
  • how do they get back
  • how do they know who they've done and haven't done
  • The how do they know they need to do everyone

What do they see?

  • a home button to be taken back to the home page
  • A change in color to the stories that have been listened to already
  • Into/about the website
  • Basic information about what the school to prison pipeline is
  • Image of the school to prison pipeline
  • Grid of people

Happy path

The user finishes the story and goes back to the homepage, and listens to the rest of the stories until they are all a different color.

Pain Points

  • The color change isn’t noticed
  • The user wants to listen to a story more than once
  • The user can’t find the home button

Opportunities

  • Make the color change have enough contrast with the rest of the site
  • Allow the stories to be repeated, via a repeat button
  • Have multiple ways to go back to the home page.

This concludes my journey map, hopefully it was clear and explains what the school to prison pipeline story site would look like. As well as how the site would work, and allow the user to interact with it.

--

--

Jeffrey Rawizza

I am an Interactive Design Major at Maryville University. My main interests in Interactive Design are animation, illustrations, and web development.