San Francisco Community Ambassadors Program

I collaborated on a 3-person User Experience design team to develop an iOS app for the San Francisco Community Ambassadors Program increasing user engagement and internal operation time efficiency by 73%.

iPhone1.png
iPhone2.png
iPhone3.png
Themes

Information Architecture, Interaction Design, Visual Design

Team

3 User Experience Designers

Tools

Sketch, InVision, Google Forms

Timeline

1 Month

 
INTRO

Logging daily tasks can be a pain for San Francisco Ambassadors.

San Francisco Ambassadors are the bridge between the residents of San Francisco and San Francisco city services (providing directions for tourists, providing food and cleaning products for the homeless)

 

In addition to the great job they do, they also have to log every single thing they do. Logging interactions help Ambassadors to stay accountable for their work, helps the team lead track performance and trends, and allows leadership to illustrate the program’s positive impact on the city. 

 

I joined the Community Ambassadors Program as a UX Designer, responsible for designing the new mobile iOS app as an internal tool. The newly designed app empowered Ambassadors to record interactions quickly and accurately, resulting in logging more than 142 Thousand interactions and serving more than 80 Thousand residents of the city a year.

SF CAP.png
GOAL

How can we improve the Ambassadors’ experience so they can record their interactions quickly and accurately?

With 32 Ambassadors in 5 different teams, long-form completion and event organizing were becoming time-consuming and frustrating for Ambassadors. The program needed to have shorter forms that are easier to log interactions while interacting with the city residents. I was responsible for improving user flows and interaction design to redesign a mobile-suited form experience that promotes faster task completion, which will help Ambassadors feel more comfortable using the forms.

32
Ambassadors

5
Team Leads

Feeling overwhelmed with long

forms. Unaware of some mistakes

in their responses

Receive inaccurate data due to some mistakes in Ambassadors’ input. Often spending time explaining how to log in some interactions to new Ambassadors every 3-6 months.

 
FIELD RESEARCH

To identify the frustrations in the existing system, we spent a week and a half observing and interviewing Ambassadors while working in the city. What I discovered was surprising - Ambassadors tend to stop engagements with the residents to write their interaction down on a paper before they input the same interactions again later on Google forms in their break time!

KEY INSIGHTS

Overwhelming Long Forms

Ambassadors will only see and fill out what is relevant to the actions taken with limited options to prevent errors and increase data accuracy.

SUCCESS GOALS

Improved Forms Flow, With Shorter Pages

Eliminating unused pages, shortened pages, and introduced conditional branching.

Preventing Errors with Limited Clear Options

To log in a single interaction, Ambassadors have to fill out a form of 10 pages.

Connecting Related Reports and Adding Events Support

-Incorporate incident reports into the app and connect them directly to the interactions reports.

-Creating a list of events, allowing ambassadors to get more detailed instructions, and joining the event session before logging event interactions.

Inaccurate Data Being Reported

New Ambassadors get confused about answering some questions and might answer them wrong.

Keep Teams Accountable

Program leaders want to keep their teams accountable and have reports that show the program's impact on the residents of San Francisco.

Design Scope

MUST
Presentation1 copy.png

Improve the current Google forms

  • Eliminate unused screens

  • Reduce screen scrolling

  • Reorganize the screen flow

COULD

Design a mobile app

 

  • Have the ability to add a partner when logging actions

  • Keep track of actions recorded

SHOULD
WON’T

Design a wearable device app

  • Safer to use in certain areas

  • Eliminate the need for notepads

High Impact

High Cost

Low Impact

Low Cost

Design a mobile app

 

  • Improve events logging

  • Logging actions more efficiently 

  • Address incident reports

THE SOLUTION

Improved Forms Flow, With Shorter Pages and Conditional Branching

Leveraging past data and our research, we simplified the forms by introducing conditional branching, eliminated unnecessary pages, shortened several pages, and removing unused pages.

THE LAUNCH
 

Empowering Community Ambassadors with an efficient mobile system

Imagine if we can save at least an hour a day from Ambassador's time completing the daily forms. SFCAP App helps with time efficiency when logging actions by reducing screen scrolling, limiting answer options, and introducing conditional branching. 

 

The app's goal is to empower Ambassadors to record their interactions quickly and accurately at the moment, ultimately resulting in a better in-session experience and improved data.

IPhone all tasks.png
iPhone-6S-Plus.png
sign in.gif

Log In / Sign Up

When we walked along with Ambassadors and through Google Forms that are currently used. I noticed Ambassadors must enter the team names and zone each time they report an action. With the app, the Ambassador will be able to enter this information only once when they sign in, which saves them a lot of time.

When a new Ambassador joins the team, they will have access to register and enter their personal information before signing in to the app later and recording the interactions.

Logging Actions

When ambassadors need to record actions, they only see and fill out what is relevant to the actions taken with limited options to prevent errors and increase data accuracy

We chose to use modals for additional information when needed to reduce the number of pages.

The Ambassador will receive a confirmation with a reference number to make it easier to track when needed.

iPhone-6S-Plus.png
logging actions.gif
iPhone-6S-Plus.png
311 Reports.gif

Logging 311 Reports

The ambassadors will only fill out what is needed and related to the report using modals. Without having to go through all 311 report pages, only what applies to the issue reported.

Event Support

Events are really important and take a lot of time in Ambassador's daily interactions. Designing the mobile app allowed us to focus our efforts on making event interactions and impact more tangible. We did this by creating a clear list of events ordered by date and time, allowing ambassadors to get more detailed instructions and joining the event session before logging event interactions.

iPhone-6S-Plus.png
Events.gif
iPhone-6S-Plus.png
Incident Reports.gif

Logging Incident Reports

Incident reports currently exist as a separate google form. This design allowed us to incorporate incident reports into the app and connect them directly to the interactions reports.

After reporting a 911 call, the ambassador will get a reminder to follow up with the incident report where the app directly connects to existing reports to add more information.

FUTURE CONSIDERATION

A Wearable Device Version

An unexpected pain point that we uncovered from the Ambassador teams is the issue of safety. Aside from form length and efficiency, Ambassadors have expressed that they need to stop in a safe vicinity before taking out their phones to begin logging. In the state of technology that we’re in, we thought that a wearable app would address this problem creatively.

Apple Watch2.jpg
 
IMPACT

Results

73% Faster
Task Completion

Measured by the comparison between the time spent on completing a wellness check task with the old form and newly designed app.

1.5X More
San Francisco Residents Helped

Measured by a 2-day work in a team of 3 Ambassadors in the Tenderloin area in San Francisco.

Improved Time Efficiency

I wanted to validate our proposed solutions by doing a side-by-side comparison of the time spent logging one of the most common tasks, a wellness check.

Current Google Forms
Improved Google Forms
The Mobile App

Success

This design project received positive feedback from the program team. They were excited to receive recommendations that could be implemented immediately, and delighted at the creativity we demonstrated to achieve more. They also appreciated our engagement with the Ambassador teams and the Ambassadors loved being involved in a project that affected them directly.

IMG_F9EF59F0BB02-1.jpeg

“We had a great experience and the work is super useful. Also, the Teams loved being involved in the improvement of the program!”
 
                                               — Community Ambassador Program Manager

NEXT STEPS

Deepen our understanding. ​

Improvement Opportunity

Each team has different interactions depending on the community’s needs.


Proposed Idea

Conducting usability testing with all teams will give us constructive feedback from different perspectives. That will help us further improve the ambassadors’ experience.

Feature: Event Social Groups.​​​

Improvement Opportunity

Ambassadors spend a lot of time supporting community events, but they have some difficulties in organizing tasks and contacting each other while out in the field.


Proposed Idea

Adding events to social groups and the ability to post updates within the team and divide the tasks individually.

Feedback on the design? Want to chat over coffee about building an app from scratch?

Feel free to get in touch or schedule a chat.