Baltimore AfterSchool Programs (BAP)

Many teenagers lack access to after school activities that provide mentoring, tutoring and nutritious food access. BAP is a mobile application designed to allow teenagers access to local programs after school in their neighborhood using geolocation. The app features a feed of classes and workshops, organization profiles with contact information, and directions to the sites via public transportation or walking. The website, featured below, is an added layer to this project and provides information about the application, programs, news & events and a donation link.

Competitive Audit

For this project, I looked into apps that were providing youth with opportunities in their communities after school. The one closest to the goals of BAP was Spotivity, an app based in Chicago. This app did many of the same things that I was hoping to achieve here with BAP. The key difference was that the design was not youth-centric and the interactivity and search filters were not as in-depth.

Flow

After spending time with Spotivity and thinking about what it is that BAP needs to achieve, I make a flowchart to think through how someone would sign up and join. I also considered the main features that are needed: activity feed, user profile, community organization site profile, and map with public transportation access.

Framing

After I thought through the steps and interaction between screens, I started to make rough sketches of potential wireframes for initial discovery screens. I moved from sketch to wireframe in Adobe XD to start and build components.

Design

Once I developed components and several screen wireframes, I began brainstorming a design system that could work. I took into consideration what I learned my the competitive analysis and decided to make the overall look and feel more youthful and wanted it to feel connected to Baltimore City. I used the Baltimore Ravens color palette with a playful logo with an overall sans serif for the header and body copy. I used various color combinations to provide contrast and interactivity throughout the app design.

Prototype & Outcomes

When building out the prototype, I wanted to make sure that navigating the app was seamless. I also wanted to make sure that the app successfully provided youth with a way to connect with community organizations based on their interests, and provided directions based on walking or public transportation.

The BAP Feed

Designed with the flow of Instagram in mind, the feed systems is meant to highlight local organizations events and workshops that are happening daily.

Navigation

Using geo-location, the app is meant to provide easy directions to each organization site using walking or local public transportation methods.

Profiles

Each organization has a brief profile page to highlight contact information and site details that a user can use to interact with the site via hyperlinks.