Billea Breen | UX

Compassion

Compassion is a platform where someone with means can donate directly to someone without means which they pass on the street. There is a growing base for social good most people don’t know where to start. The app is as fast and easy as pulling a dollar from your wallet.

I was part of a small team alongside with Unice Arce and Morgan Princiotta. My role was Team Lead, where I was responsible for research, front‑end development, and interaction design.

Problem to solve

How can we make donating an essential good to someone in need as simple as giving a dollar from your wallet?

How can we make donating an essential good to someone in need as simple as giving a dollar from your wallet?

Homelessness in New York City has reached the highest levels since the Great Depression of the 1930s. Each night thousands of unsheltered homeless people sleep on New York City streets, in the subway system, and other public spaces. There is no accurate measurement of New York City’s unsheltered homeless population, and recent City surveys significantly underestimate the number of vulnerable homeless New Yorkers. While there are shelters and people donate money on the street, there are plenty of basic needs that homeless people are still missing.


Concept research

Solution needs to be mobile
Americans spent almost $400 billion online in 2016, and nearly half of that happened on a mobile device. According to the Online Fundraising Scorecard from Dunham+Company, 84% of nonprofits didn’t optimize their donation experience for a smartphone or tablet.

Items to donate.
The data pointed to hygiene items mostly and more basic food items, mostly shelf stable. We can offer them via different groupings and different price points. The prepared kits will cut down on decisions and items can be ready to deliver at a moments notice. Also a general donation should be available as well.

And don’t forget…

Make it simple.

What do you prefer to donate?

#1 reason for giving money was convenience


User Research - Buyers

We needed to understand the process of someone donating to a homeless person in need. We needed to understand the motivation, pain points, and comfort levels of users.

Do you prefer to give money or food/goods to someone in need? Have you ever gone to the store to purchase something specific that someone asked for? Why?  

Yesenia: I prefer to give food/goods. I have purchased food for a family in need after they asked for help as I walked past them. I asked if they would like something to eat and when they said yes, I came back with some food.

Does donating to a homeless person or panhandler make you feel anxious or uncomfortable? Is there a way to ease that discomfort/anxiety?  

Cecile: yes it does. I wish I were a better person, but it feels like an infringement of my personal space. Also, I know it's a horrible stigma, but not knowing what they'll use the money for is a huge deterrent. That's why it's easier for me to donate to people I've seen around my neighborhood. I get a better sense of who they are and want to help them. Possibly a profile or backstory on the person would do a lot to humanize them.


User Research - RECEIVERS

There are also the end recipients to consider. We had to be sure that the goods and service that this app would provide to the homeless population would be received positively.

Homeless research.png

I spoke to three men near Time Square, each of them I gave a small travel kit, along with a bottle of water and a KIND bar.

Greg: Water is great, backpacks or those cloth shopping bags

Sam: Someone gave me a toothbrush once, that was nice. I’d love one of those phone battery packs. (he waved an old iPhone at me)

Mike: Aside from money, band-aids could come in handy. I get blisters really bad

John, I found near the Staten Island Ferry, he was very friendly and soft-spoken.

John: Honestly anything you can give would be great. (He was sleeping on cardboard boxes so I offered one of those travel pillows and he like that idea a lot. I ran into Duane Reade and got him one)


Sample User Journey

DEREK

“I try to give when I can”
Demographics
Age: 23
Location: Brooklyn
Job: Copywriter/Music Blogger
Salary: $ 40,000/year
Family: Single
Education: BA in English
Technology skills: Computer proficient, PC user, iPhone mobile device

About Derek
New York transplant from Ohio, he’s focused on making friends and having a good time. His priorities are, paying rent, good music, and friends to share it with. Since he moved to NY about 3 years ago, he’s still learning the city and likes to explore. He’s glued to his phone more than he’d like to admit, he is constantly posting to instagram or Snapchat.

Pain Points

  • Not aware of his surroundings, he often doesn’t notice
    homeless people unless they’re in front of him.

  • He needs prompting to donate; it’s not a common task.

Mental Model - Derek - Click to see his full journey


Branding

When considering the branding for this project we looked to our motivation to influence our name. As there are delivery and location elements to the product, we explored words like delivery, local, distribution, and donate. We settled on compassion as it contained the word compass, giving us the location elements we needed.

The logo was created by using two location pins and combining them into a heart shape.

For colors and font, our aim was something gender neutral and approachable.

 

Prototype - Evolution

Version One

In the first draft, we explored the idea of horizontal and vertical swiping. Allowing users to shop by three categories, premade care kits, kits by cost and individual items, this was in response to some research that suggested it would be easiest to purchase items at a dollar amount.

Our research also showed that some users would want to buy one off items or create a custom care package.

Version Two

With version one prototype, user testing showed two versions of swiping was confusing. Also, the button size was too small for many users and having three categories was not necessary for the user. Feedback from Usertesting.com suggested that we limit the home screen to two groups, kits, and individual items.

Version Three

After another round of user testing, we adjusted the item size going back to our first idea of square icons, which allowed us to fit more items on the page as well. We wanted to include space to promote specific kits, such as seasonal items or if we had sponsors that area will be ad space.

In future versions we would like to explore the options for Force Touch for quick adding to the cart, and recently purchased item prompts as well.


 

Disney AR Experience

Using AR (Augmented Reality) technology to prototype two add-on features for an existing app that Disney just launched for their parks.

 
Image from Disney Blog

Image from Disney Blog

Current App

PLAY is an app that Disney launched Summer of 2018 to keep visitors more immersed in the parks without putting down their phones. The app currently offers trivia games and playlists that can be accessed at any time, in or outside the park. The location-based games are meant to be played while visitors are waiting in line for rides with consistent long lines. The games use elements shown in the line to keep the visitor engaged in their surroundings while still moving along the line.


Suggested new Features

Disney has always promoted the idea of Magic all around us. With the advancements in AR technology, we can now add a little Magic to our world. Inspired by movies, Mary Poppins, Pete’s Dragon, and Bedknobs & Broomsticks, I looked for a way to provide users with an infusion of animation their surroundings. The same way Mary Poppins jumps into the drawing with the kids or Elliot befriends a lonely Pete; users can use their phone to activate the magic around the park.

Face Masks or Face Filters  

Using Facebook’s AR Spark Studio and Photoshop I was able to bring my ideas for Face Filter masks to life.

 

AR Scavenger Hunt

Using Facebook’s Spark AR studio, and 3D designs from Sketchfab, I was able to create a scavenger hunt based on the statues found in Disneyland and California Adventure Park.


Facemask process

Photoshop

These vector face came from Josue Gil from the Noun Project

To create a face filter, first I needed the filter image. I used to The Noun Project for this task as their site has some great vectors to utilize. Once I decided on my faces; I downloaded the files and began to edit them in Photoshop.

Using the tutorial file provided from Facebook Moustache.png as a guide of how large elements of my mask need to be, I began to scale out my vector. Goofy was the first mask created and the most complicated. The Goofy vector was simple, but I knew from previous projects I would have to separate out his hat, ears, and face all into four different layers to create the effect I required.

 

Trial and Error

With my layers created it was now time to save them as .PNGs to check my work. Mapping to a face is not an exact science, and it requires a healthy amount of trial and error to get it just right. My first attempt of the Goofy face didn’t stretch to the hairline, ruining the illusions. The second try it wasn’t wide enough, back to the drawing board. I went through multiple versions of each layer working to find the right fit.

 
 

Spark AR Studios

I expected working with Spark AR Studios to be very complicated and require more knowledge of coding that I possessed. I was happy to discover after walking through the tutorial a few time it’s not much harder than adjusting an image to just the right fit. I tested each material I created and moved them to the right spot on the model faces. Facebook provides a diverse group of face models for projects which allow for testing of designs.

At first, I allowed a user’s eyes to show through the design, but the effect ruined the illusion of a cartoon character. I found it better to keep them cartoon white and only allow for the mouth to show through when opened. Overall I was pleased with the effect.


Scavenger Hunt Process

Sketchfab & Photoshop

When it came time to create the scavenger hunt I wanted to keep with the theme of reality/animated movies. Adding a 3D character to existing hotspots in Disneyland would be the goal, but first, the 3D characters were needed. Sketchfab is a comprehensive site for a variety of 3D elements; the files are also compatible with Spark AR Studios. I wanted a classic character for Disneyland and a newer character for California Land. In both parks, the statues of Walt and Mickey are iconic. I used pictures found with a google search to capture the statues. Once I had a straightforward view of the statues I isolated them in Photoshop to create a trigger image.

 

Spark AR Studios

In Spark AR Studios you can create a Plane Tracker which activates once the camera detects a flat surface. I wanted to take that a step forward and activate the 3D effect when the camera recognized a specific image. The isolated the statue images in the previous steps now could be used for trigger images. With this element established I just needed to adjust the 3D item to show up on the same plane as the statue. Again with simple image adjusting until I had the desired result. I tested my effect on several statue pictures and had mostly positive effects. Since I'm in New York, not California I'll have to wait for my next Disney trip to try this out in person; but I'm confident it would work.


Prototype

This is walkthrough of the app with based off the existing screen. I highlighted the new features and built the screens to mimic existing content. The effects are static because they are only previewable from the Facebook AR Studio application.


 

JetBlue Feature

A design sprint over 4 hours to create a feature for an actual application. Using an existing design system to improve the overall appearance and function of the app as well.

 

Concept

This feature provides users of the JetBlue travel app the ability to save a flight path and days of a trip, to refer back to when they wish to check prices or use as a booking shortcut. In its current state, to book a flight the user is required to enter a start point, end point, dates of travel requested, and finally passengers. With saved searches, a user can easily refer to a route they often use and save steps in the booking process. Saved searches also allow for more filters so a user can refine their search even further. These filters make the save search feature a price tracker as well. With this feature, it's even easier to plan an impromptu trip to Nashville or a three day weekend to visit family.


Concept Process

I was inspired to create this feature as my parents live in Florida and keeping track of flight sales can be time-consuming. I would love to quickly check an app every month or two when I want to book a quick flight.

I quickly mapped out the search functions I would need, along with filters that I would like to use. Once I refined those elements; I walked through a quick user journey to confirm my concept.

jetblue-pot-it.png

Design System

JetBlueDesign System.png

Salesforce has one of the most robust Design Systems on the market. I started with their system as the building blocks of the look and feel I wanted to pivot toward with JetBlue. The number of filters and search functions I wanted to provide was a perfect match with the buttons and symbols that the Lighting Design System contains.


Hi-fidelity Screens

JetBlue - Artboard 1.png

Screen Highlight One

JetBlue - Artboard 2.png

Screen Highlight Two


Project Navi

Tour Guide App - Feel like a local when visiting a new city

Travel app.jpeg

What is Navi?

A crowd-sourced site that allows users to build or follow tours of any city. The mobile app is a tour guide in your pocket. Tours can be shared and collaborated with multiple users. A desktop site for more expanded detail planning.

 

Objectives & Requirements

Business objectives  
To offer a platform for small businesses to promote themselves. Promote a greater cultural understanding of visitors through shared experiences. Use technology to show that even when we walk alone in a new city, we are not alone in our exploration. Revenue will be generated from business paying for preferred listings, selling user data, premium user memberships. A marketing plan will need to emphasize reviews from Navi. There needs to be a draw for business to earn a review or a spot on someone’s created tour.

User objectives
Gain a more insider experience during a visit to a new city. Learn more locations to visit, see a city from a different perspective.

Technology needs
Photos and reviews from existing content forms such as Yelp or Instagram. Both have API that can be used to build this platform.


Process of Development

Initial hypothesis of user needs - Clear, reviewed, verified locations that comprise a tour/experience of a city. The tours should include travel duration and tips on how to optimize the journey. Users need to be able to trust that the tour they selected, and that it will not provide them with a negative experience. The tours or tour guides will need to be verified to establish user trust. Photos and written expectations of the route and locations along the tour should be included for the user to base their decision.


User Research Results

I interviewed 7 potential user ranging in age from 22-41. Their responses were able to help reshape my initial hypothesis and give me feedback on potential features of the application.

When visiting a city, most users looking for:

  • Non-tourist locations

  • Local flair

  • Good restaurants (defined by local hang out not culinary award winning)

  • Historical Locations

Tools users use for travel research: (by popularity)

  • Google, travel websites (tripadvisor, travel blogs)

  • Social media (instagram, facebook)

  • In person recommendations from friends/family/coworkers

Defining a Local -1-3 Years of living in a location to be established

Opinions regarding Post Tour Survey:
“If it was easy like the Lyft review form I would fill it out”
“Nope, I don’t see the benefit for me”

 


Wireframes

When building screens for testing I focused on using the search function to find a tour. Once the tour is selected, the app provides navigation, and the user can review quick tips left by locals at each venue. Then they can choose to visit each location in sequence or skip places if they aren't interested. Once the tour is completed, a review promps the user for feedback.

 

 

Project: Website Redesign

Small Company looking to expand their digital footprint
(this project name & superficial details have been omitted)

 
 

Starting point

Problem

Brand A has grown quickly in the last 2 years. They opened a second office and became involved in local and state government. They are looking for a way to convey the heart of the brand and Owner’s mission statement in the digital world. The website was dated and customers were asking for more ways to interact with their accounts digitally. With newer technology emerging in their field it was important to integrate a customer portal for billing and customer account maintenance to stay competitive.

Solution

I worked with the owner to create a brand persona to drive digital content and campaigns. Their website information architecture was revised to solve the recent dropoff problem for new visitors. Also the creation of a customer portal to give clients a central location to review their services and make a payment.


reaching the Solution

Once we refined the brand tone, we updated the visual brand guidelines as well.

I worked with a copywriter to analyze the current materials and optimized them for digital content. The current website analytics were reviewed to understand what content was most popular and areas that needed little extra attention.

Then recommendations were made for a new site hierarchy and original creation of content. Once these were approved a new website was built, (sitemaps, wireframes) and a plan was put in place with the current team to keep content fresh and reusable on multiple digital channels.

 


SiteMaps

Original Sitemap

Revised Sitemap


Lo-Fi Wireframes