ReentryGuide GR

icon Visit Website
arrow
icon Visit Github
arrow

Technology

React Native, Docusaurus, Figma, Inkscape, Krita

Service

Software Development, UX Design, User Research, User 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 goal is to develop an inclusive and user-friendly mobile application for end users, alongside a website with documentation, encouraging people to fork the project and expand its impact.

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 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)

reference

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.

Initial 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.
  • Accessible Placement: Buttons located in the middle or lower half of the screen, making it easier for users to reach with minimal hand movement
  • Limited Options on one page: Reduce cognitive load and make sure a Simple and straightforward process.
  • Buttons: Large, clearly defined with shadows to indicate 'clickability', with unified style 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



Testing Methodology:

We implemented an iterative usability testing process, conducting two rounds of evaluations with distinct sets of participants. After each round, we analyzed the results and made necessary adjustments to the app.

For each session, I met participants at a convenient location near their residences to ensure a comfortable and familiar environment. Participants were provided with a testing phone preloaded with our app. Using a standardized usability testing script, I guided participants through a series of tasks within the app. To gain deeper insights into their thought processes and comprehension, I employed the 'think-aloud' protocol, encouraging participants to verbalize their thoughts and explain what they saw on the screen in their own words. Throughout the session, I used my own phone to record verbatim quotes and detailed observations of the user's responses and interactions with the app. This method allowed for accurate documentation while maintaining a natural testing environment.



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:

    • 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.

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

      • 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.