Mobilize

Service Design for Community Engagement

10 weeks, team of 3 | 
mobile, service, ux
Overview
Mobilize is a digital service that allows people of all ages to find and attend local events to increase community engagement. It is in partnership with the Knight Lab, an interdisciplinary community at Northwestern University aimed towards redesigning the future of local news.
My Role
UX Researcher: I conducted and synthesized user and stakeholder interviews, concept testing, and usability testing.

UX Designer:
I used insights from research to iterate low-fidelity and high-fidelity mockups on Figma.
Skills
Figma
Wireframing
Design System
Rapid Prototyping
Usability Testing

01

 The Problem 

How to connect individuals in a community?

People currently often check Facebook to find events happening near them, but these events are often cluttered, confusing, and difficult to navigate. Additionally, these events do not reflect the tight knit community that many people seek. This is especially true for people who recently move to a new city or simply want to create new friendships.

PROBLEM STATEMENT

How might we make connecting to a local community feel friendly and inviting?

02

 The Solution 

Primarily designed for New-In-Town Nick

This digital experience was designed for someone who recently moved to a new city and finds joy in attending locally hosted events of all sizes such as farmers' markets and small coffee shops. He is open to new experiences and wants to build connections with others quickly.

Secondarily for Remote Rachel

It is also curated towards people like Remote Rachel who are more introverted and want to attend small gatherings with an option to do so from home. She is very socially selective and wants to form both personal and professional connections.

Mobile access to a tight-knit community

Mobilize uses a user's location to identify local events sorted by the vibe of the event: Lowkey, Lively, High-Energy, and All-In. In the app, users can either attend or organize an event. They can also easily access their calendar of events and chat with event hosts as well as other event attendees.

With a centralized app to easily locate and attend events, people like New-In-Town Nick and Remote Rachel can find the events that best suits their desired connections and interests.

03

 The Process 

Definition

Personas
Feature Articulation
Service Blueprint
Competitive Analysis

Prototype

Pen & Paper
Wireframing
Low & High Fidelity
Design System

Evaluation

Usability Testing
Iterative Prototyping

04

 Definition 

Using previous user research for ideating

Before designing any solutions, we formed primary and secondary provisional personas based on the research to understand who we're designing for. These personas encompassed their demographics, behaviors, attitudes, needs/challenges, motivations, product desires, influences, etc. Doing so helped guide the UX goals and discover product opportunities.

Prioritizing which ideas to prototype

After organizing our different ideas into an affinity map, we prioritized these features into 3 levels: must-haves, wants, and nice-to-haves. By prioritizing these ideas, we had a better focus on which screens were crucial to the solution and organize which ones to start prototyping first. We then organized these ideas onto a service blueprint to better visualize the user journey and the touchpoints throughout it.

Competitive audits to draw design inspiration

We conducted competitive audits for existing designs and interactions that we can draw inspiration from before officially starting to prototype. These audits also helped us define what worked well and not well for each pattern. Although we get ideas from these audits, we made sure to keep the tone of our design consistent.

05

 Prototype

Starting with a pen and paper

Before creating digital wireframes on Figma, we created these low-fidelity paper prototypes with pen and paper to determine what the features entailed. These paper prototypes also allow us to define the user flow of the mobile experience.

Wireframing the user flow

Next, we created wireframes on Figma to better understand the user flow and visualize the information architecture of Mobilize. These wireframes act as skeletons to ask for feedback before increasing the fidelity of the prototypes.

Developing a design system

As we split the design work and created higher-fidelity prototypes, we realized that our designs had minor inconsistencies with the visual design. To mitigate this, we created a design system including font, colors, and spacing that we could easily reference throughout the process. The design system acted as a visual north star of our design.

06

 Evaluation 

Rounds and rounds of iterative usability testing

As we continued to refine our mockups on Figma, we conducted 3 rounds of task-based usability testing. We interviewed a total of 18 people across those three rounds to gather feedback on designs and incorporate the feedback quickly into another iteration. These tests were crucial in uncovering confusion in the app early on and allowing ample time to fix these areas quickly.

Some of these tasks include but are not limited to
- You open the Mobilize app for the first time to find local events to you. RSVP to the event The Protest.
- RSVP to the Protest event and follow the host.
- You just attended the Protest event. You had the time of your life and want to leave a review to mention something specific that happened to you at the event.

Mobilize: Local events for every interest

Mobilize is the optimal app designed for both community organizers and people seeking an event to build meaningful connections with others in their communities. Users can easily find events, access their calendars, create their own events, or chat with event hosts and attendees.

Organize a new event with ease

If the user wants to create an event, they can do so by simply adding a title, vibe, tags, description, and location. The vibes and tags make the event more discoverable. They also give a potential attendee more information about what the event is about and how to find other events similar to it.

Check upcoming events and chat with the host

After the user RSVP's or saves an event for later, these events will appear in the "Calendar" tab to have them organized all in one place. The colors clearly indicate today's date, the date of the RSVP'd event, and the date of the saved event.

Users will also have the option to chat more with an event host to ask specific questions on a 1:1 basis. They can also used this chat feature to talk with other event attendees after an event to further connect with them -- allowing a more personal, human touch to the experience.

07

 Next Steps

1

Conduct another round of testing, and incorporate feedback.

2

Check with engineering to test feasibility of the design.

3

Reach out to potential investors to launch product if desired.

08

 Learnings 

Test early and often! This helps incorporate feedback before investing a lot of time and energy into a design.
Don’t underestimate the power of a design system. It helps keeps designs consistent especially when working asynchronously with a team.

Carefully consider when onboarding happens. Hook the user into the app experience first, and prompt the onboarding process once they want to do something specific. The onboarding should not disrupt the journey of the user's goals.
← Procter & GambleFEEDING AMERICa →