ReentryGuide GR


Impact: The app's posters displayed in Michigan Department of Corrections (MDOC) parole office in Grand Rapids.

icon Visit Website
arrow
icon Visit Github
arrow

Technology

React Native, Docusaurus, Figma, Inkscape, Krita

Service

Software Development, UX Design, User Research, Usability Testing, Deployment, Web Design, Graphic Design, Logo Design, Digital Illustration

"ReentryGuide GR" is a mobile application developed in collaboration with Reentry Reimagined, designed specifically to support the reintegration of former prisoners into society within the Grand Rapids area.

The Challenge

A local non-profit organization "Reentry Reimagined" needed a mobile app to help formerly incarcerated people navigate to locations that provide crucial resources for their survival, such as food, clothing, hygiene, and healthcare.

User Research

Our user research focused on understanding the unique needs and challenges of our target audience: formerly incarcerated individuals seeking crucial resources.

Key Findings:
• Demographics

Our users come from diverse backgrounds and varies in age, but share the experience of reintegrating into society after incarceration.

• Environment

Many of our users navigate high-stress environments daily, dealing with uncertainties in housing, employment, and social reintegration.

• Technology Experience

A significant portion of our user base has limited experience with modern smartphones and apps.

• Cognitive Abilities

Some users have various cognitive disabilities, requiring special consideration in our design approach.


reference
reference

Technology Stack Evaluation

  • Agile methodology for software development. Utilized Scrum framework for iterative and incremental development.
  • Trello for agile project management, Used for backlog management and sprint tracking.
  • Github for hosting git repository

  • React Native as framework

    • Large Community: accessible to large amount of npm packages.
    • Cross-Platform Code: One set of code for multiple potential platforms.
  • Expo for managed workflow and easy debugging on physical devices
  • Yarn as local package management, as it perform better than npm


Map Integration Decision

  • Options Considered:

    1. Develop a fully-featured map applications, including navigation that leads user to resources locations that provides food, clothing, etc.
    2. Create an app that generates links to Google Maps with few clicks.
  • Decision: We chose option 2 - generating links to Google Maps.

  • Rationale:

    • Cost-effective: Avoided expensive API costs for local bus route data
    • Sustainability: More beneficial for long-term maintenance and updates
reference

(Credit: Asana)

UI/UX Design Research

Visual Design Approach:
  • We opted for a calm, soothing visual design to provide a sense of stability for users navigating potentially stressful environments and coping with past traumas.
  • This decision was directly informed by our user research, which highlighted the high-stress situations many of our users face daily.

UI Design System Analysis:

We compared several prominent design systems to inform our UI decisions:

  • Fluent Design (Microsoft)
  • iOS Design Guidelines (Apple)
  • Refactoring UI
  • Material Design 3 (Google)

Key Decision: We adopted a hybrid approach, drawing inspiration from iOS settings menu and Fluent Design, with additional accessibility design suggestions from Refactoring UI.

Rationale:

  • Emphasize Depth: Created clear visual cues for clickable elements, crucial for users with limited smartphone experience.
  • Avoid Confusion: Steered away from the flatter aesthetic of Material Design 3, which might be less intuitive for our user base.

reference
Design Choices:
  • Straightforward and Streamlined process: when the user needs something like food or clothing, we want to help the user to get to their desired locations with few clicks and without extra effort.
  • Limited Options on one page: Reduce cognitive load and make sure a Simple and straightforward process.

    • Highlighting the most likely choice with limited options by the user ensures a streamlined user experience

  • Accessible Placement: Buttons located in the middle or lower half of the screen, making it easier for users to reach with minimal hand movement

    • Thumb zone for left handed people

    Thumb zone for right handed people

  • Buttons: Large, clearly defined with shadows to indicate 'clickability', with unified style across the app to avoid confusion.
  • Combining Texts with Icons: Aid understanding
  • Font: Manrope, which is similar to Product Sans as regular font, increasing the familiarity to Google Maps.
  • Big Texts: Font size should be at least 17px to ensure readability, especially for users with visual impairments
  • Color Scheme: Light, Neutral color like #FCFCFC as background color, #FDDEBA as primary button color to ensure brand consistency with Reentry Reimagined.
  • High Contrast: Ensuring all components are WCAG AAA compliant.

Usability Testing

We conducted thorough user testing to ensure our app meets the needs of our diverse user base. Our testing group included:

  • 40s male, formerly incarcerated (2 years ago), homeless, limited smartphone skills
  • 50s male, formerly incarcerated (1 year and 7 months ago), has autism
  • 30s male, homeless, limited smartphone skills
  • 30s female, homeless
  • 40s male, formerly incarcerated (2 months ago), limited smartphone skills

    • Ferguson Apartments in Grand Rapids Downtown: One of the usability testing locations

Testing Methodology:

  • Implemented iterative usability testing process

    • Conducted two rounds of evaluations
    • Used different participants for each round
    • Analyzed results and adjusted the app after each round

  • Testing session setup:

    • Met participants near their homes or location of their choice for comfort
    • Provided a testing phone with preloaded app

  • User Interview:

    • Used standardized usability testing script
    • Guided participants through app tasks
    • Employed 'think-aloud' protocol for deeper insights
      • Participants verbalized thoughts
      • Explained screen content in their own words

  • Data collection:

    • Used personal phone to record:
      • Verbatim quotes
      • Detailed observations of user responses
      • User interactions with the app and performance of doing tasks
    • Maintained natural testing environment while documenting accurately


Key Findings

Positive Outcomes:

  • Font Readability: All users found the chosen font comfortable to read.
  • Clear Navigation: The app's navigation structure was intuitive for all users.

    Areas for Improvement:

    • 1. During the first round of testing, we found that the users with autism (User No.2) and the ones less familiar with smartphones (User No.1) found the timing and open/closed status confusing.

      • Solution: We changed the alignments of the elements from horizontal to vertical and the wording to present tense. We did not find this confusing anymore in the second round of usability testing.

    • 2. During the first round of testing, we found that the users with autism (User No.2) got lost in Google Maps and did not click on the blue "start" button to start the navigation.

      • Solution: We added a simple page to remind the user to click on the start button, before our app opens the google map only for the first time.


    • 3. In the second round of usability testing, the bus option in Google Maps confused users with limited smartphone experience.

      • Future Plans: We are planning to shoot a video guide for how to use Google Maps Bus routes, and link the video into the app.

reference reference reference

Final UI

ProminentDisclosure.js

ImportantNotice.js

RequestPermission.js

MainMenu.js

MealOrGroceries.js

LunchOrDinner.js

ResourceLocation.js

SelectResourceLocation.js

SelectResourceLocation.js

AllLocationsClosed.js

(I temporary set time to 11:24 pm)

ResourceLocationsList.js

ResourceLocation.js

MoreInfo.js

SelectTransportation.js

/components/GoogleMapsTutorial.js

DidGoogleMapsCrash.js

DidGoogleMapsCrash.js

FindHealthcare.js

The Website

icon Visit Website
arrow

The website for ReentryGuide GR is built using Docusaurus and React, serving three primary functions:

• Download the App

Provides a google play link, ensuring easy access for users.

• Download Resource Sheet

For those who cannot use a smartphone.

• Documentation

Allowing developers to fork the project and adapt it for use in their own cities.