HelpFirst: Social E-Commerce Case Study





Our client, HelpFirst, needed to improve his customer-facing user interface. Following his launch on the App Store, we worked with him to make a more simple, elegant consumer experience to encourage both consumers and potential retailers to utilize his social giving e-commerce app more effectively. Our goal was to facilitate cause-based social commerce to allow the consumer and corporation to identify, educate and empower one another.



I served as project manager on a three person team. My first action was to develop a Lean UX project plan. Because we were working in one day sprints, I decided that a simple spreadsheet would allow us to most easily read and record our time.


proposed solution

Following thorough research and analysis, we proposed focusing on the redesign of the following key features to optimize the consumer-facing experience:

key features.png


Research and Analysis

HelpFirst was conceived to be a typical e-commerce app with one major difference: it helps you put your money where your mouth is: The retailer will donate a portion of every purchase to a charitable cause of the consumer's choice. To understand how that worked, we first reviewed the current MVP.

select impact.png

We then set about assigning a task analysis with the existing app to see if this structure worked -- unfortunately, it didn't. Users stumbled in a few key areas:

  • Icons ambiguous
  • Fonts hard to read
  • Unclear charity categories
  • Not enough info about products/services
  • Needed more ways to login

Knowing that there were baseline issues with the apps usability, we turned to user surveys and interviews, and the marketplace to better understand what needed to improve.

First, we explored the user to see how they interacted with both e-commerce and charitable giving. We were encouraged to find that a majority of users do make choices to purchase products that have a positive impact on their world. Otherwise, their online shopping was mostly what we anticipated: motivated by deals and value.

online giving.png

From there, we turned to market analysis to understand how charitable causes are organized and how typical e-commerce apps function. We looked at VenmoWalmart and Amazon's apps to understand how their:

potential app map.png
  • Layout
  • Purchasing Process
  • Navigation & Icons
  • Filtering & Categorization
  • Recording transations
  • Product pages
  • User settings

With this information, we redrew the app map to better account for typical layouts and what we found from users after digging deeper into the survey responses with interviews.


Sketching and Testing

Given the one day design sprints I built into the project plan, we had to get pen to paper so we could start testing. Using a design studio approach, we agreed to the key features and were each tasked with developing at least 3 versions of every feature.

H1 sketching.gif

We used these sketches to conduct another round of task analysis to see if our redesign allowed the same task to be completed. This was a success but our home page needed revision.

We moved to mid-fidelity prototype to streamline the icons and prevent people from getting distracted by our hand-drawn work. During this user testing we found that our general approach did work and people could complete the tasks but still couldn't figure out how to go home.

This work prompted us to make a few revisions before our final product:

  • Home screen "didn't feel like home"
  • Global nav icons need to be reordered to follow design conventions
    • Deals page needs its own icon
    • Account and app settings need to be split out
  • Add barcode on receipt image



As per the schedule, we needed to build out and test the final app before delivery and presentation to the client. We finalized the remaining feedback in Sketch and ran through a final series of tests to make sure that everything worked before presenting and handing over to HelpFirst.

   Key Features from Final App

Key Features from Final App



Our final product was warmly received by the client, and he already sent it over to the developer for implementation. Our focus was on the consumer experience so that this MVP can be used to attract consumers, retailers, and charitable organizations. Using the hook model for analysis, going forward we recommend:

  • Develop robust desktop website (online purchases are still primarily on desktop)
  • Develop merchant management view or standalone app
  • Develop organization management view or standalone app
  • Look beyond local: expand online shopping options
  • Suggest an organization
  • Incentive social: encourage people to add friends.

Try it yourself!