Change Heroes — a product design case study

A bit of context

I was contracted by Change Heroes to help tackle the design of their next crowd-funding platform for charities. The challenge was to migrate their existing client services to a desktop and mobile experience. The goal was to offer charities and their donors a self serve campaign creation and donation tool.

image.gif

Notable Concerns

Currently the existing fundraiser campaigns are:

  • Manually setup for each campaign and donation page by in-house designers and devs. This is a huge burden for PM's at Change Heroes and campaign managers at the charities and organizations. (Let's hear more from them)
  • Dependent on the legacy tech stack and Change Heroes developers are overworked (limited API, functionality, no room to grow)

Change Heroes wants to make all of their campaign building services available as a tool on the web and accessible from desktop and mobile.


The team & plan

Phase 1: Discovery & Definition

This included project canvas, project plan and business analysis. Also a survey, user interviews, affinity diagram, personas, experience maps and design studio.

Phase 2: Development & Delivery

This included paper prototypes, mid-fidelity prototypes, mock-ups and a high-fidelity clickable prototype. We did several iterations and usability tests before moving on to web development for the beta program.

During this process, I was involved in all the design tasks but also played the role of team facilitator. I helped make sure everybody was on the same page and everything was aligned with the project plan as well as helping to define the design/development/testing workflows.


DISCOVERY AND DEFINITION

Surveys

To get the research phase going, we made a survey that we shared with existing charities working with Change Heroes. We got around 30 responders.

Interviews

We interviewed 11 people to start. We conducted the interviews by phone with people who live outside Vancouver. We recorded the sessions using the Call Recorder mobile app.

Experience Maps & User Flows

Throughout the process I developed dozens of experience maps and user flows each going through countless iterations.

Feature Definition

One of the most valuable exercises in the process was the creation of a Feature Priority Matrix. Using a whiteboard and sticky notes, we were able to prioritize features needed for the MVP without bloating the timeline. We wrote down all the feature ideas based on the research findings and sorted them by prioritization and category.

One outcome was the creation feature maps where the MVP’s features are colorized while the future features were displayed in grey used for better context during discussions and planning.

IRAP Bonus Round

During the discovery and definition phase, there was also an opportunity to assist the founder in the creation of an IRAP proposal. I produced a few high-level infographics intended to visualize the results of our discovery and research as Change Heroes core technology offerings.


DEVELOPMENT AND DELIVERY

We started by designing for a mobile experience. While many of our survey results revealed that much of the campaign setup and creation would happen on a desktop, nearly 80% of respondents indicated they would be using a number of core tasks while on their mobile device.

Whiteboarding & Paper Prototypes

The results of our paper prototypes helped us quickly test several IAs and navigation models. We recruited the help of the rest of the team in this stage to get as much unfiltered input and create as many concepts as possible to evaluate and test.

Mid-fidelity Prototypes

After countless iterations we managed to produce over 100 screens addressing some of the more complexed user goals. Within these screens we were able to create shorter, task-driven prototypes to test and validate our design decisions.

Mid-fidelity User Testing

We used Invision and custom web prototypes to validate many of the user goals with our testers. I had the opportunity to setup the user testing process from scratch which meant using some of the latest and greatest tools.

I was floored with the functionality and design of lookback.io. We ran numerous user tests with local and remote users throughout the mid-fidelity and beta test phases. The feedback was invaluable to our process and enabled us to forget about the tools and focus on the design and feedback.

Screengrab from a Lookback User Testing Session


DESIGN AND DEVELOPMENT WORKFLOWS

I also had the opportunity to help define the product design & development processes and workflows from the ground up. I introduced a number of philosophies to the team which were applied to everything from micro-level interactions to macro-level business problems.

A visualized system for moving "jobs" through the process of using known design patterns & data. We come up with concepts, implement one, and test it in context. Did it do the job? What worked? What didn't? Then we document our findings to contribute to the data for future iterations or evolutions of that "job".

Styleguides, Design Systems, Mockups & Beyond

During beta testing I spent some of my time working ahead on what the desktop platform could look like rendered out with a bit more polish.

A mockup of the header & navigation.

Styleguide for Components and UI Development

I pride myself as a designer who is also capable of UI Development so I started on a preliminary design system that includes component names for CSS selectors as well as unit measurements.

CONCLUSION

Small, scrappy product teams often have to define their own processes for getting software built and I loved every minute of it. My time with Change Heroes was a good opportunity for me to really dig in and contribute to what I do best as a product designer. Leadership, communication and hard work was imperative during the few months I was there. We managed to design, launch and test an MVP and a beta version of the platform resulting in new clients and investors for the company.