Cindy Phan | Portfolio

Threshold

Leveraging our spending power to create positive change

(Click for full image)

Context

What if we could use our consumer power to create positive change in the world? Think - Change.org plus Kickstarter.

Threshold’s mission is to use our consumer power to push companies to adopt better practices - either for their customers, their employees, or the environment. For example - I pledge to buy a $20 Jamba Juice gift card if Jamba Juice begins to use compostable cups. Threshold aims to create a space for people to say “hey, I want my money to mean something” and take action.

Threshold needed a beta site designed and developed in one month.

Date2015 - 2016

ClientThreshold

My RoleUX Designer, Interaction Designer, Front- and Back-end Developer

Project Overview

  1. Product Stratgy: With the Threshold team, we worked on better understanding their goals and objectives for the company and website.
  2. Wireframing: I developed wireframes for mobile and desktop with a focus on getting folks to pledge for an active campaign and source ideas for new campaigns. I drew inspiration from Kickstarter and Indiegogo.
  3. User Testing: Given the tight deadline, I conducted just a few user testing interviews to see if anything felt wrong or needed to be added.
  4. Visual Design: Using Threshold's brand palette, I created flat design files of the wireframes.
  5. Development: Once designs were approved, I began solo development of the front- and back-end of the website. This included building it on WordPress, setting up a database, adding SSL certification, and Stripe payment integration that could handle conditional transactions (you pledge, we save your info, and you are only charged at a later date if the company commits to the action requested).
  6. Iterations Post Launch: After the beta site was launched, I worked with the Threshold team to update the layout and design of the website based on user feedback until they hired on a full-time staff person.

What the Beta Site Needed

Speaking with the Threshold team, we determined these were the main pieces needed for the beta site:

  1. Mobile-first - as with everything I build, it has to work on phones, tablets, and desktops.
  2. Ability for individuals to pledge to a campaign.
  3. Ability to add new campaigns.
  4. Interface for individuals to input their campaign ideas
  5. Database to track who has pledged, to which campaign, and how much.
  6. Stripe Payment Integration that allowed for conditional transactions - someone pledges, we store their information, but they are not charged unless the company commits.
  7. Ability to charge individuals later if the company makes the commitment.
  8. SSL certification that ensure sensitive information sent over site was secure.
Homepage Wireframe (Click for full image)
Homepage Design (Click for full image)

How it was all laid out

The Homepage

The homepage would begin by clearly stating the vision of Threshold and the role of the user in Threshold’s vision. It then lists member-initiated campaigns with a quick statement on why each person started the campaign ad why. To illustrate momentum, victorious campaigns are clearly labeled.

The Campaign Page

For the campaign specific pages, we drew inspiration from the Kickstarter and Indiegogo layout. It was important to convey the most useful information at the very top to convince folks to pledge (including the goal, how much time was left, and a pledge goal to make the company take notice.

Campaign Page Wireframe (Click for full image)
Campaign Page Design (Click for full image)

Development

I had about 1.5 weeks to develop the full front- and back-end of the website. I opted to use WordPress for the website build because its easy to get up, has a vast network of plugins, and makes it easy for Threshold to update and add new campaigns as needed

The most difficult piece was the Stripe integration and charge system - since we would not be charging individuals off the bat, but instead later if the campaign won. I chose a payment system plugin to create a database of all pledges. I was then able to wrangle Stripe to work in the way I needed.

x