Overview

In 2021, Facebook’s Content Design team ran its inaugural Bridge Builders mentorship program. I was invited join and was paired with a manager who assigned work and guided me through a weekly series of projects surrounding the UX flow and content redesign of a selected mobile app.

For the program, I chose to rewrite and redesign the ticket purchasing flow of the Ventra Mobile App for Chicago’s mass transit system, factoring in user flow, accessibility, localization, and tone and voice. The program also included group critique and review on my work.

The Ventra mobile app for Chicago area transit tickets and routing. (Image courtesy of Ventra).

The Ventra mobile app. (Image courtesy of Ventra).

Phase 1: Analyze Flow

The initial step was to review the current ticket purchase flow to understand its impacts on content changes. I also looked for UX issues overall to determine which few issues I would actually suggest edits for. Selected issues were for me to determine and capped at three.

Review of user flow through the ticket purchasing process.

Flow Map: This shows the ticket purchase flow. Drawing out all the actions and steps to move through the purchase flow allows me to get a holistic view of the process and analyze content from there.

Review of various UX and content issues within the user flow, meant to identify specific content issues to improve.

UX Analysis: Here, I point out all the various UX issues within the purchase flow. Though I would focus only on content issues, I wanted to understand any connected issues or complications.

Phase 2: Write Alternatives

Following my initial review, I selected three content areas to improve. To do so, I would generate multiple alternatives for each content area, along with rationales that considered things like accessibility, localization, and audience. Click here to view all alternatives.

Each of the three content areas include:

2-3 new suggested alternatives
A rational for each suggested alternative (black bullets)
Research usefulness to organization, i.e. “What greater ideas can be learned from researching this suggested alternative?” (blue bullets)
A basic (Google Translate) review of character length against the 3 most-spoken, non-English languages in Chicago

Following these write-ups, I presented my work to a group of peers and content designers at Facebook for feedback prior to the next phase.

Selection of three content-based issues chosen for improvement.

Identifying Issues: These areas mark the three content pieces I chose to prioritize.

Alternatives for Content Area #2: Ticket Titles/Descriptors with emphasis on reasoning (black bullet points), research usefulness (blue bullets), and localization with an awareness of phrase length. Full write-up can be seen here.

Phase 3: Voice and Tone

Voice: The consistent brand personality.

Following the development alternatives, I dove into voice and tone, analyzing the app’s current voice and suggesting how it might be improved. This being a transit and routing application, the app’s designers seemed to have chosen a very direct, formal, and sterile method of speaking to the user.

Though the formality needed to be maintained due to people’s lives and experiences depending on the app’s descriptive and accurate nature, the language treated the user like a robot. I chose to humanize the voice, exchanging excessive formality for more personable language. The proposed tone relaxes on seriousness, embraces contractions, reduces jargon, lowers reading level, and acknowledges user action and intentions as driving forces in interacting with the app.

CURRENT: The current voice with three examples of where that voice is shown.

Current Voice: The current voice with three examples of where that voice is shown.

PROPOSED: The proposed voice with three examples highlighting how we might modify the current voice to a new one.

Proposed Voice: The proposed voice with three examples highlighting how we might modify the current voice to a new one.

Tone: The contextual fluctuation of the otherwise consistent brand personality.

The app’s current tone was direct, literal, informative, and unchanging regardless of user action. In that sense, it functioned more like a voice than tone. I proposed a fluctuating tone based on the type of content piece or action taken. This would help to go beyond just informing, but also motivate or reassure a user as they went through the ticket purchase journey.

To determine how to modulate the voice, I separated out the major content pieces within the app and put them on a standard UX tone spectrum based on my intention for the user when interacting with that content piece. For example, I wanted call-to-action buttons to be reassuring and affirming in the user’s decision, rather than just formal and directive.

CURRENT: The current tone on a standard UX tone spectrum. As you can see by the single spectrum line, the tone was unchanging throughout the entire app.

Current Tone: The current tone on a standard UX tone spectrum. The tone was unchanging throughout the entire app.

PROPOSED: he proposed tone on a standard UX tone spectrum, fluctuating based on the type of content encountered or action taken.

Proposed Tone: The proposed tone on a standard UX tone spectrum, fluctuating based on the type of content encountered or action taken.

Tone Spectrum: A more comprehensive breakdown of the proposed tone spectrum per content type with examples and reasoning.

Phase 4: Review and Finals

Following the tone and voice work, we returned to our initial content alternatives to review if they aligned to our proposed voice and tone. Then, based on community feedback and review, I made final mocks of one of the content change areas, in this case, the ticket titles and descriptions. The rewrites would serve to be more informational, use less jargon, and use verbs to try to make users feel like they’re getting something out of an otherwise mundane buying process.

I also added a minimally-intrusive pop-up to inform returning users to a change in the ticket names.

The original vs updated ticket titles and descriptions, incorporating a new voice, less jargon, and more practical descriptions. Also includes a new pop-up banner for alerting return users to the title changes.

Ticket Name Updates: This shows the updated ticket (product) descriptions, incorporating a new voice, less jargon, and more practical descriptions. This also includes an info banner alerting the user to the changes.

A closer look at two options for pop-up banners with reasoning for their construction. These banners would alert return users to the changes in the ticket names and descriptions.

Info Banner Options: This is a closer look at two options for pop-up banners with reasoning for their construction. These banners would alert users to the changes in the ticket names.

Outcomes

Beyond the practical skills and knowledge gained from such an intensive program, I gained extensive practical experience in the operation of content design and a large tech company. I successfully performed within weekly sprints that included assignments, deadlines, critiques, review, and collaborative work. This was an exceptional experience in practical UX writing and all the rationales and considerations involved.

I successfully completed the program, receiving positive feedback from my mentor and creating many templates, tools, and skills that I now use regularly.