Comm(you)nity

Details:

✦ Ongoing
✦ Figma
✦ Lead designer, working with a front end and back end team

link to prototype 🡥

Background:

Comm(you)nity is an app designed to enhance the experience of discovering, saving, and sharing local events in Pittsburgh with friends. Offering a customizable approach, the app curates event recommendations based on your individual interests and preferences. All events are sourced from data-scraping the web for local events. From music to food to art or outdoor activities, Comm(you)nity ensures the user stays informed about relevant happenings in the city. It facilitates easy event sharing and collaboration with friends, creating more opportunities for social connection and effortless planning with a fun and intuitive UI.

                                                                                                                                                                                                                                                                             

Walkthrough:

The following video demonstrates an overview of the app from onboarding to the navigation bar. The app includes features like "likes" that allow uses to save events on their likes list and these events are automatically added to their calendar. Users can also add friends and see their events on different days. Each event page includes details scraped from the web including date, time, location, and a link the any existing website with further information. Events are recommended based on a "tag" system that recommends events based on the interests the user selects, displayed in their profile.

Key Features:

Comm(you)nity's customizable onboarding process allows users to define their interests and receive personalized recommendations of events in their feed. The calendar feature lets users view their scheduled events and see their friends events planned for the day in order to optimize the process of scheduling events with friends. The like page features a list of user-saved events and subsequent event details including the location with map integration, similar events, and a link to additional information on the event from the web.

                                                                                                                                                                                                                                                                             

User Flow:

I created user flow diagrams in order to identify the start point, actions taken by the user, various possible paths, and end points. The former diagram shows a broad overview with more information about the user onboarding process while the latter unpacks the possible paths from each individual screen after the user enter the app.

                                                                                                                                                                                                                                                                             

User Personas:

In order to understand how to satisfy the needs and pain points of the user, I created two user personas based on the target demographic identified by my team. Based on these goals and frustrations, I was able to make decisions on how to optimize this experience for users of the comm(you)nity app.

                                                                                                                                                                                                                                                                             

Wireframing:

The first step was to get an idea of the main screens we needed as described by the front end/back end teams. After sketching out some quick visualizations, I began on the first iteration of wireframes using no colors to simply lay out the basic flow and interactions. From there, I began brainstorming ideas for visual identity/branding and incorporated these colors and motifs into the next iterations as well as improving the flow and functionality.

Visual Identity:

I developed a branding guide for the app based on a video game aesthetic, reflecting the app's intention to "gamify" the process of finding, saving, and sharing local events in Pittsburgh.

                                                                                                                                                                                                                                                                             

Process:

We took inspiration from several existing apps with similar features or existing UI to support the functionalities we wanted to incorporate into the app. For instance, The app S mores has a similar purpose of collecting local events, Pinterest has a similar user onboarding process that offers customization based on interests, and the profile page of Tiktok.