Impact
Project Overview
Impact is an all in one petition signing and donation site. Users can choose whether they want to sign petitions or donate money to causes they care about all in one place
Project Duration
November 2021 to December 2021
My Role
UX and UI designer from conception to delivery.
Tools
Adobe XD, Canva
The Problem
There are sites that allow users to either donate to causes or sign petitions but there wasn’t a site that allowed users to do both. Many of these sites don’t have mobile apps and I wanted young people, who are more likely to use apps, to be encouraged to make an impact.
The Goal
Design an app that will allows users to donate and sign petitions in one app.
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and determining information architecture.
Understanding the User
User Research
I conducted user interviews which revealed that people needed an easy and streamlined place to donate to charities and to sign petitions. Younger users seemed to prefer dedicated mobile apps while older users preferred a desktop option.
User Pain Points
Personas
Using information from interviews I created two personas to get a better idea of who Impacts’s users are. Meet David and Penny!
User Journey Mapping
Mapping Penny’s user journey revealed how helpful it would be for users to have access to a donation and petition signing app.
Starting the Design
Paper Wireframes
To get started, I created paper wireframes based on the user research I had conducted so far. I wanted to show the user flow of donating to a chosen organization.
Low-fidelity Wireframes and Prototypes
Now that I had sketched out initial ideas with paper wireframes, it was time to test out my designs using low-fidelity wireframes.
Check out the low-fidelity prototype here
Usability study: Findings
Next, I conducted a usability study. Findings from the study helped guide the designs from wireframes to mockups.
Refining the Design
Mockups
Based on the insights from the usability studies, I applied design changes like adding a menu to allow users to navigate to other parts of the app.
Additional design changes included adding a profile and a lists page.
Other mockups including organization page, checkout and checkout confirmation page.
High-fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View high-fidelity prototype here
Website Design
Sitemap
With the app designs completed, I started work on designing the website version of the app. I used the Impact sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Low Fidelity Wireframes and Prototypes
Next, I created paper and digital wireframes based on the user flow of donating to a chosen organization with an added profile and list page.
Check out the low-fidelity prototype here
Usability study: Findings
Next, I conducted a usability study. Findings from the study helped guide the designs from wireframes to mockups.
Refined Mockups and Prototypes
With the usability study findings in mind, I went on to create high-fidelity mockups and a prototype
Check out the high-fidelity prototype here
Going Foward
Takeaways
Next Steps
