Billea Breen

Compassion

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

Concept

Homelessness in New York City has reached the highest levels since the Great Depression of the 1930s. While there are shelters and people will donate money on the street, there are plenty of basic needs that homeless people are still missing and can easily be provided. This app would combine a concept like Amazon Prime Now delivery with social good.

 
 

 
 

Concept Research

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

 

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

Cecile: yes it does . I wish I was a better person but it feel 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.
Tim: Sure if they seem a little crazy i won’t donate. I’ve never had anyone aggressively ask me for money but my wife has. I think being a man it’s a little different. I know I always feel safer donating with friends nearby.  

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

Mindy: I would say food and care kits.. things for survival. I recently went to the store and purchased a care kit for someone with toothpaste, underwear, flip flops and basic essentials and took it to a church that asked for help. I ended up getting to meet the woman and hear her story, we got to hug. It was such a cool experience to see where my help went even though I hadn't realized I was going to meet her.
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.

 


User research

Solution needs to be mobile
“Americans spent almost $400 billion online in 2016, and nearly half of that happened on a mobile device.” Having a mobile option encourages people to take action when they see someone they can help

Delivery Network.
We’ll need a team of delivery people that are prepared and trained to approach a homeless person

Have an easy way to give online from a mobile phone.
Americans spent almost $400 billion online in 2016, and nearly half of that happened on a mobile device. Over half of purchases made by Millennial's are made online. But according to the Online Fundraising Scorecard from Dunham+Company, 84% of nonprofits didn’t optimize their donation experience for a smartphone or tablet.
Make it simple.
Make the giving process clear and simple. People won’t engage as donors if the process is difficult and confusing. For example, if people can donate through your website, make the steps clear and the process easy. Make the “Donate” button large and easy to read, and don’t let it get lost in a cluttered website.

What to Donate?

User would prefer to give goods over money, given the option

#1 reason for giving money was convenience

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.

  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, bandaids could come in handy. I get blisters really bad   John I found near the Staten Island Ferry, he was very nice and soft spoken. It was hard to get an exact item out of him.    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 alot. I ran into Duane Reade and got him one)

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, bandaids could come in handy. I get blisters really bad

John I found near the Staten Island Ferry, he was very nice and soft spoken. It was hard to get an exact item out of him.

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 alot. I ran into Duane Reade and got him one)


User Journeys

DEREK

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

  • Always exploring

  • iPhone user

  • Doesn’t have much extra cash

About Derek
New York transplant from Ohio, he’s focused on making friends and having a good time. His priorities are, paying rent, eating good food, 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

Goals

  • work for a major publication writing something he’s
    passionate about.

  • Be a good person

  • Build a family.

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 - Assumes App is already downloaded

ANGELA

“It just isn’t very easy to donate, you have to go out of your way.
Demographics
Age: 29
Location: Queens
Job: Social Media Manager
Salary: $ 60,000/year
Family: Lives with her boyfriend

  • Frequently on the go

  • iPhone user

  • Rarely carries cash

About Angela
Angela is a 29 year old professional living in New York. Angela has recently made a new year’s resolution to give each month to charity. She frequently uses apps like Venmo to pay her friends since she rarely carries cash. She wants her giving to be a private thing but sharable when she wants to share for a good cause.

Pain Points

  • Hates typing all her information to different websites and going to clunky online processes

  • She wants privacy settings to control who can see how she is donating.

Goals

  • An intimate or personal cause

  • An incentive to donate money

  • More secure transactions

  • Have insights to charities

  • See how her donations can make an impact

Angela Mental Model.png

Branding


Lo-Fi WireFrames


Prototypes - Version One


 

JetBlue Feature

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

 
 
 

Concept

This feature provides users of the JetBlue travel app the ability to save a flight path and length 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

Branding


Hi-fidelity Screens


 

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.


Two new Features

Disney has always promoted the idea of magic being 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 and Broomsticks, I looked for a way to provide users with their own animated/real life mix. 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
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 purchase. Once I decided on my faces; I downloaded the files and began to edit them in Photoshop.

These vector face came from Josue Gil from the Noun Project

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 on destructively 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.

Spark AR Scene.png

Visuals


Prototype

Above is a 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.


 

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 a user to build or follow tours of a city of their choosing. 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

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 should be pulled from existing content forms such as Yelp or Instagram. Both have API that this platform can be built on.

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.
Marketing plan will need to give emphasis to reviews from Navi. There needs to be a draw for business to earn a review or a spot on someone’s created tour.

 

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 upon.

User research - 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.

Post survey results - Pictures have the most importance, using Instagram or Yelp images via API should solve this issue. A local user will be defined as living in the area for at least a year. A post-tour survey can be included but should be simple and easy to fill out, the end of ride Lyft survey is a good template. Navigation along tour route should include public transportation, driving, and walking directions.


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”

 


Visual Branding

Navi MoodBoard.png

Mood Board

Colors - The color palette was chosen for a gender-neutral appearance. I considered a serious grouping of blues and grays mixed with a spotlight of Teal for a touch of playfulness.

Typeface - For a typeface, I choose two san serif fonts (Balboa and FreightSans Pro) with enough difference in personality to contrast but still clear for readability.

Icons - Icons were designed to think and clear for a clean minimalist appearance


Lo-Fi Wireframes

These wireframes take you on the user journey of searching and selecting tour. Once the tour is selected, the app provides navigation and you can review some quick tips left by locals at each venue. You can choose to visit each location in sequence or skip locations if you don't find them interesting. Once you've completed the tour there is a very simple review process for user feedback.

 

 

Project: Website Redesign

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

 
 
 

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 which will drive digital content and campaigns. Their website information architecture was revised to decrease drop off.  Finally a creation of a customer portal to give clients a central location to review their services make payment.

 


reaching the Solution

Branding came first, I worked with the owner and teams to craft a brand persona and mission statement that would dictate the new digital content. 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 a little extra attention.

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

 

 

Branding Process

Discovering the Mission Statement and Tone
Customer needs - Clear path to the product, transparency of product, annual reassurances or check-in, a clear understanding of services offered
Values - Family owned, family-focused, customer transparency, custom product to fit custom needs
Tone - professional not casual, clear but not overly simple, friendly but not familiar
PR Opportunities -  Community outreach, sponsoring local events, involvement with local and state politics, charity outreach to focus on St. Jude and March for Dimes

Assessing current assets and website analytics:
Most trafficked pages - Home page, about us, contact
Least trafficked pages -Testimonials, blog, services
Forms - Site contains a "find a quote" form with limited cells to input and no confirmation screen.
Social media - Only Facebook page created that hasn’t been updated in a year+
Images/General Content - Logo image is not optimized, mobile load time over 15 seconds. The site is bogged down with extra JavaScript and not optimized for SEO. There are pages of large amounts of information and images that can be moved behind a customer portal.


SiteMaps

Original Sitemap

Revised Sitemap


Lo-Fi Wireframes