Free-Premium-1iPhone-7-App-Screen-Mockup-PSD.png

Footprints app


Context

Camp PolyHacks is a student-run, multidisciplinary hackathon dedicated to social entrepreneurship and human-centered design. Over two days, students of all backgrounds work in teams to ideate, design, pitch, and market their solution to a problem facing the community. It’s a Learn by Doing marathon of collaboration, learning, and creativity. During the 2019 event three possible trails were presented: Sustainability, Inclusivity, and Education. My team participated under the Sustainability trail.


My Role

  • Marketing Research

  • UX/UI Design

  • Business Strategy

Team

  • Jamie Chin (Designer)

  • Shelby Shikashio (Designer)

  • Asmita Sharma (Coder)

  • Phaniraj Aenugula (Coder)

  • Chloe Hebert (Coder)

Timeframe: 48 Hours

Software + Skills

  • Adobe XD

  • Adobe Illustrator

  • Survey Monkey

  • Consumer Interviews

  • Team Communication

  • Time Management

  • Prototyping

  • Public Speaking

  • Branding

 

 

The problem

It’s hard to find a solution if you don’t have a problem in the first place! So to begin our process of developing an app to benefit sustainability, my team aimed to do just that. By sending out a survey we were able to gather valuable data to jumpstart our brainstorming process. To the right are some of the highlights of our survey collection, which reached 57 people within the two day time frame. Additionally we interviewed a nonprofit organization “Growing Grounds” which focuses their events around improving mental health with sustainable farming practices.

After all of our data was collected we determined the largest trends were:

  1. People are interested in helping the environment but they don’t know where to begin or how to access resources.

  2. Community members or non profits are looking for ways to create/share and market events to gain volunteers.

This posed two questions for our group as we continued on with our process:

  1. How can we close this gap?

  2. How can we increase environmental involvement within communities?


 

 
IMG_5605.jpg

Finding a solution

After identifying the problem, the solution came relatively easily to us. We wanted to create an accessible social community around people interested in helping the environment, that might not know where to begin looking. By bridging the gap with an app that connects interested citizens to environmental involvement within communities, we can also help connect nonprofits to more volunteers.

To the left you can see our initial brainstorm board. This board is the begin all to our project, it contains personas, potential pitfalls and other rough ideas for features that we later refined into the final product.


 

 

ROUGH SKETCHES

To the right is the very beginning stage of our application prototyping process. Working under time constraint, the design team wanted rough wireframes to hand off to the back-end coding portion of the team as soon as possible. We knew we still had a lot of simplification to do and from this point began weeding out unnecessary and cluttered features.

Since the age range of the “Footprints” app is relatively wide, it was necessary to have the user interface be simple to navigate. To reach any feature of the application it needed to be minimal clicks.

Scan 2.jpg
 

 
Scan 1.jpg

REFINING THE DESIGN

When my team and I finished the above phase everyone (especially the back end coders) seemed overwhelmed with the amount of pages and features we wanted to include. To solve this problem, the designers and coders compromised. Our solution: narrow our scope to avoid spreading ourselves too thin within the short time frame we had.

The wire-framing on the left was our decided workflow for our final prototype. We wanted the focus to be on the main features of the application, from the perspective of a volunteer signing up. This design would allow the prototype user to interact and scroll through all of the main features, without getting too lost.

We then worked forward to our next live prototyping stage in order to receive some hands on feedback from users.

 

 

Digital wireframing

My design team and I transferred our rough sketches into initial digital prototyping in Adobe XD. This allowed us to experiment with color pallets and potential avenues we could travel with the branding of the application.

This step also allowed us to identify anything that needed to be adjusted or changed

*click on the images for more detail

 

 

Final Prototype

The screens to the lefts are what made up the final application prototype. In this stage, the details were placed and finalized. Color schemes were agreed upon, border radius’ were made consistent and images and text were placed.

My teams next steps were user testing as well as finalizing the applications future prospects and business strategy.

*click on the images for more detail

 

 

Branding DesigN

Name and Logo:

For the logo of the Footprints application, my design team and I wanted to remain as simple and classic as possible. We decided to go with the name Footprints because not only are these environmental events helping to reduce your carbon “footprint,” but the app also allows you to leave your “footprint” behind in your community. The simple footprint logo embodies both of those aspects.

Color Scheme:

My team and I noticed that a lot of applications in the realm of sustainability played too heavily into the “green” aspect of the market. Because of this we chose to branch away into a calmer and more subtle palette. We believe it gets the message across to the consumer, without being too cliche.

Font:

The font that paired with the applications branding needed to blend with the current theme we had going. Our logo has no sharp edges, and is all soft round curves. This same trend carried us into the soft and calm color scheme. Houschka Rounded was selected as Footprints font for its round curves and soft edges, which seamlessly blends into the existing brand.

Untitled-2.png
 

 

SYstems usability scale

Creating the app is one feat, but making sure that the consumer is able to navigate it and use it to its full potential is another. In order to ensure that the end product was functional we decided it would be useful to initiate a usability test. In order to do this we followed the standard procedure for a Systems Usability Scale, and enlisted the opinion of those around us to find out some potential perks or downfalls of our application design.

The System Usability Scale aka SUS is a 10 item questionnaire used to administer quick usability tests and has become an industry standard. The industry average is 68, and after our 6 user test our mean score was 84.16. Making our applications score in the 90th percentile. To the right are the scores of each of our participants that factored into the final score.

 
Screen Shot 2019-01-21 at 7.48.55 PM.png
 

 
APP RUNTHROUGH.gif
 

Future prospects

To fully develop a well rounded product we kept in mind the many pitfalls that could potentially occur within the application, wether it be future growth or misuse of the features. Below are some of the topics that arose and the solutions we found:

How could this be monetized in the future?

  • Partnerships with local businesses

  • Paid memberships for nonprofits

  • “Donor” option

How can we ensure safety within the application?

  • Registration/Verification process to create event

  • Similar to Airbnb and Uber process

What are incentives for local businesses, non profits and student organizations?

  • Free marketing

  • New customers in the door

  • Campus orgs that require service hours

How to prevent people from abusing the coupon/points system?

  • Geofencing system that checks users in and out of the event when they are within the set parameters of the event



 
 
IMG_5615.jpg

Thanks to my amazing team we placed third at the 2019 Camp Poly Hacks!