Peerlift Microscholarships UI: Case Study
Background:
I co-founded Peerlift last year, a tech nonprofit that lets anyone create a micro-scholarship, and enables college students in need to apply and win on our site. Before building a marketplace, Peerlift was a database of resources for college, and we grew to 45,000 users and 175,000 pageviews within a year.
This case study goes deep into the UI and technical decisions I made creating Peerlift’s micro-scholarship platform over three weeks in August 2018. I was working full-time in San Francisco on Peerlift with my co-founders, and we were part of the Fast Forward Accelerator, where we received $25,000, mentorship, and support. For a comprehensive case on the user research and process I led to take us to this point, you’ll want to start here first.
Goal: design, build and ship a platform to enable anyone to quickly create a micro-scholarship, and let students apply and win directly on the platform.
Scope:
This was a big product— essentially, build a marketplace from scratch. As this marketplace had two sides, I would have to design and build for the needs of each target group — working professionals and college students in financial need, and minimize the friction between their interactions. I made the decision to focus on the donor’s needs first, because as the supply in our marketplace, they were critical to getting initial traction.
Our value proposition for students (win free money for your critical, in-the-moment expenses!) was clearer than donors (directly give back to students in need), so I would need to design to leverage social proof and make a frictionless donor experience.
Key user flows for donors:
- Sign up to create a micro-scholarship
- Create a micro-scholarship in under five minutes
- Watch and choose a winner for the scholarship you create
1) User Flow: Sign up to create a micro-scholarship
Here, visual design and trust were the most important factors. For visual design, I focused on making Peerlift feel human and authentic: real people, playful colors, and copy written for students established this. For trust, I included student and donor testimonials, high-profile institutional donors, and an FAQ.
2) User Flow: Create a micro-scholarship in under five minutes
Objective: Enable prospective donors to quickly and easily create a micro-scholarship in under five minutes.
How might we make donors feel like superstars when they create their own award?
The word scholarship carries heavy connotations of status and prestige, which was appealing, but intimidating, to the working professionals we targeted.
There was an action that professionals believed was out of reach for them (create their own scholarship), but following through on that action created strong feelings of fulfillment and achievement.
To break this fear, the scholarship creation flow had to assume zero knowledge about scholarships, and abstract away any non-essential information to leave donors feeling in control.
Lo-fi prototype: fast-feedback
Before creating anything, I cold-emailed 25 Stanford early to mid-career alumni.
I set a 40-minute timer, jumped on Sketch, and created sample criteria page that donors would use to create their scholarship, and a visualization of what their scholarship would look like.
First feedback
My teammate Julie and I presented the following criteria page to the alumnus we were interviewing, and asked her to simulate creating a scholarship with the form available to her. In real-time, as she made choices, I edited a mockup to visualize the decisions she made, then sent her the file (much to her surprise!)
Learnings for medium-fi:
I repeated this with two other interviewees that day, and generated a set of design principles for medium-fi from their feedback.
- Make it clear that users can choose criteria for their micro-scholarship, but they don’t have to. Interviewees struggled to think of who they wanted to help, and were intimidated by the large drop-down forms with no context.
- Provide context of how a donor’s scholarship will impact students whenever possible.
- Progressively disclose the decisions users make. Creating a microscholarship essentially comes down to the following core actions.
By saving the hardest step for last (execute the payment), I was pulling from psychology with the Foot in the Door Principle, which shows that people are much more likely to fulfill a large, unpleasant task after previously accepting a smaller, mundane one. Cool stuff!
Medium-fidelity wireframes
Over the next two days, I created a series of wireframes to map out the actual flow, and then connected them together with Invision.
There’s a lot going on here, so I’ll highlight key areas along the flow, and how they evolved. For feedback, we walked through the creation process with professionals that we contacted and met with at Box, Airbnb, Okta, Google, and Docusign.
Area one: determining criteria for micro-scholarship:
Here’s what I quickly learned wasn’t working.
From that feedback, I created another flow over the next day and a half, and significantly reduced the length of the creation experience. The criteria page now was a single page, instead of a four-page long click-through experience.
Awesome — the scholarship creation form was now a fraction of its original length, and provided context on where their award would go. This part of flow now looked like the image below.
However, the user still needed to 1) confirm their scholarship, 2) create an account on Peerlift, and 3) execute the payment. Let’s dive in.
Area two: preview a user’s micro-scholarship
This page served duel roles for the user and Peerlift — for the user, they receive an elegant, in-context view of what their micro-scholarship would look like when they confirm. For Peerlift, this was our opportunity to get buy-in on a transaction fee.
Since the donor was doing a charitable act, I had to design carefully around the presentation of the fee. We prototyped transaction fees up to 10% of the scholarship amount — a precedent established by other donation platforms like DonorsChoose. Here’s a summary of what I learned about the design after the first iteration.
On the user end, the introduction of the platform fee caused moderate concern. Users craved more information around what it would go towards, and some expressed frustration at a fee being “forced upon them.”
SOLUTION: Create choice for donors on where to pass the fee
Rather than forcing a hidden fee on users, I prototyped enabling donors to decide whether they would cover a platform fee, or reduce that amount from their micro-scholarship, essentially passing that charge to the student.
The response from the following 10+ potential donors I demoed our progress to was incredibly positive (yay!). They appreciated having a voice in where the fee went, and 10/10 chose to cover the platform fee themselves.
Area three: executing the payment
This is where it all comes together — except we had a small problem. Donors didn’t trust Peerlift enough to input their payment information.
I learned an important lesson here — to always consider what companies or resources are doing a certain service or action better, and bring these products into the fold to supercharge what the product offers.
We decided to integrate Stripe’s payments API to handle transaction logistics. I designed around Stripe’s credibility here, highlighting the billions of dollars processed and enterprise-level security offered on our payments page to leverage their credibility as our own.
Putting it all together
After two days exclusively focused on building the scholarship process, a week of on-and-off iteration, and more on/off time to set up the Stripe API, we had a usable framework to develop, and push out to real users for more feedback.
3) User flow: Watch and choose a winner for the scholarship you create
Objective: create a streamlined process and visual display for donors to compare applicants and select a winner.
Background: Students apply to micro-scholarships on Peerlift with 1–2 minute long, Snapchat-style videos, in response to a question the donor selects. Each donor receives between 8 and 15 applicants.
Storyboard:
Considering the ambiguity of the challenge, I started by imagining what an 11/10 experience would be for a donor making a decision. (Thanks to Brian Chesky for this technique here)
I then took my ideas to paper. Usually, I like exploring the design space by drawing out lots of iterations of an interface, and then choosing a handful of interfaces to mock-up. I’ve experimented with paper prototypes and the like before, but am not the biggest fan — I’ve found I get higher quality feedback when I provide an online visualization.
With ideas swirling around, I asked the team to each record a short video of themselves to a given prompt, as if they were applying to a scholarship. We then came together to decide who should win. Even in such a low-stakes, no tech setting, some things became immediately important to design for.
- Authenticity and passion were immediate signals of quality candidates.
- Decision making was qualitative and criteria varied across individuals.
- The direct nature of watching videos of real students, and awarding real money, is memorable and emotionally charged.
Medium-fi:
After multiple iterations, I reached the first prototype of the interface.
Again, I interviewed a combination of Stanford and Upenn alumni, and tech workers in the Bay Area for 20 to 30 minutes each. The decision to display multiple candidates in one view was well received, but people felt very uncomfortable at having to rate students on a star scale they would normally reserve for their UberEATS driver or Airbnb host.
High-fi
Below, I mocked up the experience for donors, and built out the full flow to select a winner.
We chose this interface to develop and add functionality to. So far, the actual version has been prototyped with $750 of real micro-scholarships and 20 students. However, as this is a UI focused case study, I’ll leave the specifics of the implementation to future articles.
Learnings
Be vigilant about getting lost in the weeds for visual design on time-sensitive projects.
This is the equivalent of writing beautiful, elegant, robust code on a time crunch — yes, it’s important, but it’s often a lot more important to ship the product on time. With design, it’s easy to get lost adding flair to micro-interactions and visual assets, but at least on a design team of one for a product that shipped in 3 weeks, there was less of a place for that.
I made interesting, visually striking icons that shape the feel of the brand, and I believe that creating a visual identity is important. I just needto deeply understand the motivation and goal of a visual asset before including in a project.
What worked for other products won’t necessarily work for my product.
Airbnb is awesome, and I took a lot of inspiration from their host onboarding flow when designing our scholarship creation flow. It’s tempting to look at other products, say “that worked”, and emulate their style or decision. However, Airbnb and Peerlift are in two different spaces, with different unique insights, and different team compositions. Just because it looks good, doesn’t mean it will satisfy your userbase, and that’s what I learned as I iterated on our scholarship creation process and diverged more and more from the baseline that Airbnb set.
That’s it! If you’ve made it this far, thanks for the read, and always happy to talk more at sgorman @ stanford.edu! I’ll be here!
