Greenbook

View the Mobile Prototype

The Process

Discovery

I started with conducting user surveys to determine what products users currently utilize for their travel, their favorite and least favorite features of those products and what features they potentially would like to see. I gathered responses from 48 participants.

Key Findings:

• Top 3 areas of travel were the Midwest, South, and Pacific West

• Airplanes and cars were selected as most used modes of transportation

• Current favorite features: Trip Planning, Reviews and Saving places to stay and places to eat

• New features users wanted the most: Local emergency numbers, Feature to report incidents, Information about closest hospitals and police stations, and Location sharing.

• 60.4% of respondents stated they would use a travel app that included information about racial incidents

Competitive Analysis

I reviewed the 3 most popular trip planning tools provided by my survey respondents:

User Personas

After gathering insights from my user survey and competitive analysis, I compiled my findings into three user personas to focus my key users, their goals and their needs.

Review User Stories here.

User Flows

I then mapped out how users would navigate through the key areas of the app.

• Creating a profile

• Planning a new trip

• Viewing their Trip Route

• Accessing Emergency Information

• Reporting an Incident

Wireframes

After mapping out the steps my user would take in the sections prioritized for the MVP version of Greenbook, I began wireframing out the layout of the screens: starting with hand sketches and then iterating digitally. I then tested my low-fidelity prototype to gauge the intuitiveness of my early explorations.

View low-fidelity wireframes here.

Low-Fidelity Prototype Testing

I tested 4 tasks using Maze and in person:

1. Plan a New Trip

   These results were largely successful, 75% of Maze participants had Direct Success while 12.5% had Indirect success and 12.5% gave up or bounced before completing the mission. Due to results, I did not make any significant changes to my wireframes for this task.

2. View Incident Zones

   Results were unsuccessful but I gained a lot of valuable insight. 50% of Maze participants succeeded through Indirect Success and 50% gave up or bounced before completing the task. In my in-person test, I found the participant didn’t really know where to start or what “Incident Zones” meant.

3. View Emergency Contacts

   33.3% of Maze testers completed the task with Direct Success, 33.3% completed the task through Indirect success and 33.3% gave up or bounced before completing the test. My in person respondent was able to complete the task. Since results for this test were largely inconclusive, I did not make any significant changes to these wireframes.

4. Report an Incident

   Results were successful as 50% of Maze testers completed the task through direct success, 50% succeeded through indirect success and my in person tester successfully completed the task as well. I did not make any significant changes to these wireframes but I did add an added screen that confirmed when users submitted the form.

Based on results from the first low-fi test, I incorporated several changes to the wireframes.

• On the itinerary welcome screen, I added a blurb that explains what users can do within their itinerary, directing them to click or hover to interact with the sections.

• I added hover blurbs that explain what users can do in each section.

• In the “Your Route” section, I added instructions to help users navigate through the window, explaining their route and how to use filters to view Incident Zones. 

After conducting another round of testing with these changes to the low-fidelity prototype, all participants successfully completed each task. I then felt comfortable moving forward into branding the experience before creating the high-fidelity screens.

Branding

The brand for this app was heavily influenced by the original safety travel tool: The Negro Motorist Green Book. I remained consistent with the green color palette and explored logos that represented travel and book motifs. My brand words were: modern, accessible, and bright.

View the full styleguide here.

High-Fidelity Prototype Testing

After creating the styleguide for my product, I applied the branding to the wireframes to produce the high-fidelity screens. I then conducted a final round of user testing to measure how the high-fidelity screens would perform.

I tested the same 4 tasks that were used for the low-fidelity prototype testing:

• Plan a New Trip

• View Incident Zones

• View Emergency Contacts

• Report an Incident

Overall, my high-fidelity prototype test results were generally successful. However, more exploration is needed to clarify what Incident Zones. I could add more booking information and features to the app to align more to peer products in the field, such as including cost and more detailed location views.

View high-fidelity screens here.

What I Learned

I was very excited about the ideation and creation of this product. It’s something I personally would use and was very excited to see what majority of my user test respondents felt it was needed as well.

This solo project taught me a variety of things:

• That the best inspiration can be found in the most unassuming ways. I came to this idea after reading a twitter thread where people were listing cities to avoid while traveling through Texas based on past racial incidents. One tweeter actually stated they wanted a resource like this to be turned into an app.

• Sizing is key! As you could probably see from my wireframes, the sizing of my icons and navigation bars were extremely big, I made sure to adjust the sizing to fit closer to the standard.

• Taking your time during the initial wireframing and mockup creation, saves you time in the end. After learning my lesson from my Ideahub project, I spent a lot more time sketching and thinking about the design for my prototype

• Don’t be ashamed to use references! I visited sites like pttrns and dribbble to see what current designers are creating.

My favorite parts of the project were branding and analyzing user test results. I was very passionate about bringing this product to life and was extremely grateful for the depth of responses I received from my user surveys.

Explore another case study: Pulitzer Center