URBAN TACT

Mobile App Design

THE PROBLEM

Each yeah, citizens petition their local governments to change their cities that are designed solely around cars. This comes at the cost of comfort and safety within communities. Change can’t always happen successfully through waiting long-term for leadership, approvals/permission, and supplies through local governments.

Kai, Janice, Andrew and I put together competitive and comparative analyses of other volunteering organizations and urban change websites, and discovered a few features that entice users to volunteer and connect further with others who want to join a cause.

RESEARCH & USER PERSONAS

We conducted 7 user interviews and surveys and synthesized our data by creating an Affinity Map and Cartesian Plot in FigJam. We discovered that users' discovery and motivations around volunteering opportunities fell into two groups: actively searching online, and passively getting opportunities through third-parties (not online).

These two groups were turned into two personas, Ellen Tudor and Sam Young. They will each take a different path through our app to reach the same goal of signing up for a Tactical Urbanism volunteering opportunity.

IDEATION

Kai, Janice, Andrew, and I identified features to prioritize from Must Have, Should Have, and Could Have, brainstorming and mapping out various features we deemed to be most effective for our goal.

We then created user flows for both Ellen and Sam and expanded on those to create journey maps for each of them. These journey maps show how potential users will interact with the new product.

Ellen is directed to the Tactical Urbanism app through her professor, and she starts to explore the app, reads case studies, and browses local volunteer listings. She chats with her friends and professor about their volunteer experiences and what best practices she should be looking for. She then finds an opportunity that qualifies for her school credits, best suits her busy student schedule, and is nearby her location. Ellen applies, is accepted, and reaches out to the program coordinator to confirm a few details before she starts volunteering.

Sam actively looks for new volunteer opportunities, comes across Tactical Urbanism, and does his own research. He browses opportunities, adds a few to his favorites, and chooses one to learn more about. He chooses Volunteer Coordinator as the title he wants to apply for, and applies. Sam is accepted and messages the team that he’ll provide pastries from his part-time bakery job!

DESIGN

After doing some inspiration research, we worked together forming a style guide. I came up with the app’s name “Urban Tact” and made a few logo/word mark options. We started out with hand sketches and then I made a low-mid fidelity wireframe of the home page and as many components as I could (global navigation, menu, buttons, project cards) so that my teammates could match their wireframes and we would end up with a cohesive look and feel across the board.

We split up all of the pages between the four of us and completed our low-mid fidelity wireframes. We then moved onto high fidelity mockups, adding our color palette, filling in dummy text and images throughout.

Main Design Goals

• Incorporate necessary information and case studies about the concept of Tactical Urbanism

• Provide an easy-to-navigate central location for users to volunteer

• Provide detailed opportunity descriptions including location, dates, and commitment levels

• Include volunteer positions ranging from least to most experience needed

• Provide filters for users to search for opportunities that meet their specific needs

Ellen wants to find a low-stakes opportunity that will also qualify for college credits

By creating an Explore page with a robust list of opportunities that are sorted by Newly Added, Nearby, and School Sponsored, users can easily flip between these tabs without needing to endlessly scroll. With the addition of a more detailed filter button in the search bar, users can further sort through opportunities based on Commitment Level, When (Dates), and Location.

These filters give the user a more streamlined list of opportunities that fit their exact needs. The user can tap into an opportunity to learn more and see all the available positions they could volunteer for, giving them the autonomy to choose based on their own skill level or commitment.

Sam wants to utilize his skills and experience in volunteering to give back to the community

By creating a Favorites page, users can easily access new opportunities they’ve been eyeing. The autonomy of choosing a volunteer position and the simple two-step application process is the same in all cases. After applying, users will receive a confirmation page with the options to go back to the Home page, Add to Calendar, or Chat with the volunteers to further connect with them.

ITERATIONS

Iterations were based on usability testing from four users and instructor feedback.

1. Improving accessibility/visibility of the chat and global navigation

• 3/4 users struggled with finding the chat and contrast of navigation

2. Switching the wordmark logo

• 1/1 instructor was uncomfortable with the typeface of the logo

3. Improving users’ understanding of iconography

• 2/4 users did not know what the “school sponsored” icon was

NEXT STEPS

What features can be added in the next step? What could be improved?

1. Provide options for lecture series and feedback from the community

   This will allow for mutual growth and understanding, both from the volunteer and organization side.

2. Get a heuristic evaluation

   Receiving this from experts will optimize usability.

3. Add even more detailed filters and ability to save applicant information

   Further customization can help the user find opportunities that will best match their needs.