Chirp: Enhancing Neighborhood Connectivity Through a Hyper-Localized Communication Platform.

Course ProjectUI&UXUser ResearchWireframingPrototypingLogo DesignBrandingMaterial UI
My Role

UX Designer/Resarcher

Team

Caroline Rumani
Leilani Hedstrom
Amy Tuffour-Manu
Shaik A Aziz
Osiris Stephenson

Timeline

4-5 Weeks

Overview

Chirp is a hyper-localized platform for neighborhood communication, available as both a mobile app and a website. Users can ask questions, create events, sell items, and message others. Chirp empowers users by allowing them to moderate content, ensuring the information is accurate and validated.

The Challenge

Feeling safe, connected, and informed is crucial to being a good neighbor and active community member. However, finding relevant local information and feeling safe interacting with strangers can be challenging. These issues deter users from building a sustainable and active community.

The Goal

Chirp aims to provide an engaging and enjoyable user experience by delivering hyper-localized neighborhood information. It allows users to moderate content and offers a user-friendly application that promotes active community interactions.

The Process

We adopted a user-centered double diamond design process comprising four major milestones: discover, define, develop, and deliver. These milestones are carried out through four major steps: (discover) idea generation, (define) narrative and mid-fidelity prototyping, (develop) usability evaluation, and (deliver) high-fidelity prototyping. With an iterative mindset, we worked in 1- to 2-week sprints to mimic an agile environment in the real world while meeting deliverables at each major milestone.

Idea Generation

As part of the idea generation process, we created a mood board to help us establish a sense of brand personality and an overall tone for our design. We then conducted a design charrette to illustrate preliminary sketches and initial ideas. Lastly, we created a typical user persona with a user scenario to express user empathy by implementing our design to solve a user problem.

Mood Board

Our mood board defines Chirp’s experiential and emotional aspects, incorporating our combined inspiration, aesthetics, and desired emotional impact. The aesthetic goal is to create a welcoming, warm, and friendly space that fosters connections and community bonding. This is depicted by Chirp’s values and mission.

Design Charrette Sketches

We sketched our initial vision, including potential features, functionalities, screen flows, and user stories. Key considerations from the charrette sketches include user account creation/login, home screen, maps, and messaging. These features aim to connect users with their neighbors while ensuring safety.

Persona

Our persona illustrates the typical user of Chirp. We wanted a visual representation of who we envisioned using the application. Understanding the standard Chirp user before moving forward in the design process was essential for our team. Jill possesses traits and values embodying Chirp’s mission of cultivating community and providing users the assurance that their information and content are safe.

Scenario

The scenario delves into the process Jill takes of making an account and using Chirp, highlighting key features of the mobile app. Our team thought creating a scenario would help us better navigate the steps a user may take while using Chirp for a specific goal. We wanted to incorporate circumstances that aligned with the lifestyle Jill experiences.

Jill recently moved to Pilsen and is on the hunt for things to do with her children. Unlike her spouse, Jill takes the initiative to discover local activities. Before she moved to Pilsen, Jill recalls her cousin mentioning an app called Chirp that helps newcomers become acclimated to the neighborhood. After moving into the neighborhood, Jill signed up for Chirp by verifying her residence. On the homepage, Jill finds a post about a children's Easter egg hunt happening at a local park.

Excited, Jill saves the post and makes a note to tell her spouse about this amazing opportunity. It would be nice for her kids to make new friends, and Jill can get to know the other parents in the neighborhood.

On the day of the Easter egg hunt, Jill responds to the post and asks when the other parents are showing up. Numerous replies come in, stating that parents and their children will show up around 11 am. Jill is eager for the Easter egg hunt, and can't wait to make new connections in the neighborhood.

Jill spotted a few familiar faces from Chirp at the Easter egg hunt. She walks over and introduces herself to the other parents, solidifying the beginnings of a new friendship in her new neighborhood.

After the event, Jill goes on Chirp and joins the "Moms" Nest, a place where she can see posts relevant to being a mom, which is important to her. Jill feels confident that the community validates the posts on Chirp.

Narrative Digital Prototype & Mid-fi Prototype

Our narrative digital prototype communicates ideas to potential investors and decision-makers, ensuring we understand the business value and incorporate our competitive features into the design process. Alongside the narrative digital prototype is a medium-fidelity prototype. This prototype showcases the main features of Chirp and focuses on usability as opposed to functionality and aesthetics.

Competitive Analysis

Our idea of Chirp is similar to Nextdoor; an existing app that allows users to connect to their neighborhood and engage with other users. We conducted a competitive analysis to demonstrate key differences between Chirp and Nextdoor. Our team found it beneficial to note these differences, and how Chirp sets itself apart from the current market so that potential investors can witness the uniqueness of Chirp and what it brings to the table.

User Happy Path

Below is a user happy path for Chirp; portraying ideal routes users take to achieve creating an account, moderating a post through reporting it, and visiting a Nest. Our team wanted to create happy paths for the mobile version and the website, as they differ slightly in appearance.

Usability Evaluation

A usability study was conducted to learn how users react to our initial design choices in the form of a medium-fidelity prototype, including information architecture, general layout, navigation, and overall satisfaction with the application. We recruited six volunteers to participate in a moderated testing environment where each was given three task scenarios to complete on both the mobile and desktop interfaces. Following the completion of the tasks, participants were surveyed on their satisfaction with both channels.

Results

Results of the usability tests showed that participants had an overall good impression of the medium-fidelity prototype. All participants performed tasks successfully and averaged a 4.5/5 on ease of navigation. The website scored a bit higher than the mobile version in regards to organization, but along with this observation, there were other recommendations we implemented in the high-fidelity prototype.

Changes Made

Usability changes made include:
 •  Changing “join” to “visit” when viewing popular Nests for the website.
 •  Having “upload” as the only option for address verification for the website.
 •  Having “take a picture” as the primary action for address verification for the mobile.
 •  Adding “bill” and “letter” as options for address verification for the mobile and website.
 •  Increase the font size of “create an account” during account creation for the website.
 •  Add a modal containing a breakdown of why a user’s address is required for the mobile and website.

Aesthetic changes made include:
 •  Change “your” to “my” for nests, feed, etc. for the mobile and website.
 •  Have reported posts hidden from view for the mobile and website.
 •  Add information to the side of the screen when visiting a Nest for the website.
 •  Left align items in navigation, add icons and color adjustment for the website.
 •  Replace “why do you need this” with “why is this needed” during the account creation for the mobile and website.

Hi-fidelity Prototype

Considering this to be the final version of Chirp, we wanted to incorporate all the feelings depicted in the mood board while also implementing changes and recommendations from our usability tests in the hi-fidelity prototype. The style guide standardizes the design and other visual elements of Chirp. Our team also developed components to translate our style guide into tangible designs we can reuse. This is to maintain consistency while adhering to the style guide. Style Guide, Hi-Fi prototypes, Components

Style Guide
Hi-Fi Mobile Screens
Hi-Fi Desktop Screens

Reflection

Upon reviewing all work put into creating Chirp, our group is content with our product. The most significant aspect of this process was conducting usability tests. It was necessary to gain insight from potential users on their perspectives; while we produce ideas and designs we also look at participant responses and see if they align. Usability tests solidified many design choices we had made, but also exposed flaws in design and usability. We believe that conducting these tests allowed us to refine our design in a way that empowered users to feel that Chirp was made with them in mind.

During this process, our team also discovered new tools to collaborate. These tools enhanced teamwork and made remote group work efficient. Our team learned from one another and developed new skills that we can carry forward into other projects and endeavors.

Key Learnings

 •  Usability testing enabled our understanding of feasibility and desirability in our design.
 •  Adhering to design thinking throughout our process by connecting back to our problem statement is imperative for staying on track.
 •  Collaboration using new tools such as Figma and Figjam enabled our team to quickly iterate and convey our ideas.