Footprints App

3rd place at Camp PolyHacks 2019

— 

Role

UI/UX design, information architecture, wireframing, high fidelity mockups

Tools

Adobe XD, Adobe Illustrator, Survey Monkey, Consumer Interviews, Team Communication, Time Management, Prototyping, Branding, Business Strategy

Timeline

24 hours

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.

Team

Kaelyn Richards (Designer)

Shelby Shikashio (Designer)

Asmita Sharma (Coder)

Phaniraj Aenugula (Coder)

Chloe Hebert (Coder)

 

 

research

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. Below 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?


Ideation

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 right you can see our initial brainstorm board. This board is the beginning to our project: it contains personas, potential pitfalls, and other rough ideas for features that we later refined into the final product.

To create a sense of social responsibility and accountability, we decided to base our app on a point system that allows users to gain points whenever they volunteer for a project. After gaining a certain amount of points, users can redeem them for discounts and rewards from local businesses. Additionally, we added a newsfeed page/network feature to establish a community of users within the app and encourage people to volunteer with friends. Users can find events through either a map or a list view and can RSVP to those events, which allows the nonprofit/organizer to get a list of expected volunteers.




sketching interfaces

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.


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 right 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

1.png
3.png
Interests.png

Mockups

The screens below 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


download (7).png

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


Systems Usability

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. This makes our applications score in the 90th percentile, and to the right are the scores of each of our participants that factored into the final score.


Future Prospects

Although we created the Footprint app in this 24 hour period, after further consideration we realized that there were potential problems that we had yet to address. As we talked through our app, we identified those problems and the possible solutions to prepare for any further development of our app:

Monetization - How will we fund the app?

  • Partnerships with local businesses

  • Paid membership for nonprofits to access app

  • “Donor” option for users

Security - How can we make sure our app is safe for users?

  • Registration and verification process before users can create an event

  • Only allow events to be held in public areas marked with green zones on the map

  • Have a required minimum number of volunteers at each event for non-verified organizations

Incentive - How do we get local businesses and nonprofits to join our app?

  • Free marketing

  • New customers in the door

Misuse - How do we prevent users from abusing the system?

  • Use a geofencing system that requires users to check into an event so that they can only acquire points if they are within the limits of the geofence.

APP+RUNTHROUGH.gif

Prototype

View our final prototype here.