User journey of new donors from noticing the homework app on social media to choosing to donate
My Roles
Research
The Facilitator
The Designer
Wireframe
High Fidelity
UI Design Systems
Team
Design Sprint Team of four UX Designers from BrainStation
Context
Homework is an imagined, non-profit organization
Relies on hardware and monetary donations to provide individuals in need with access to technology
Design a donation experience for the Homework brand optimized for mobile or desktop
Constraints
5 Day timeline
Colours:
Neutral colours include white, gray, and black
Tints and shades of the provided brand colours.
Our Design Process
Discovery
Secondary Research & Assumptions
User Journey
Interview Insights
Interview Insights
As a team, we each contributed to creating interview questions and were each responsible for interviewing one person.
In highlighting our strengths, I focused on consolidating, analyzing and then synthesizing the interview responses to summarize the interview insights.
HMW & Persona
Persona
Ideate
Goals
Having open-ended goals allowed each team member to be creative in their design ideas and to provide multiple options for meaningful discussions and choices for design decisions.
To achieve the next set of tasks, we set time limits to allow time to meet for discussions and to maintain our daily deliverables.
UI Inspiration
UI Inspiration
As part of our Design Sprint. we were all tasked with researching UI to inspire our sketches. Each team member found inspiration and as a group, we decided on our top examples. Our approach to this project was to have everyone participate in each step and vote for our top choices.
Solution Sketches
Solution Sketches
During sketching, I contributed to the schedule screen (drop-off or pick-up) and shared input for edits and final choices. I also helped by asking questions to verify that our choices made sense and reflected the HMW statement: ensuring the donation process was convenient and transparent.
-
Screen 1: Landing Page with CTA to Donate
-
Screen 2: Donation: Money or Device
-
Screen 3: Donation Options
-
Screen 4: Device Option Chosen - Device Options (Laptop, iPad, etc.)
-
Screen 5: Device Information to determine quality
-
Screen 6: Device Reset Option
-
Screen 7: Device Reset Video
-
Screen 8: Schedule for Drop off or Pick up Device
-
Screen 9: Device schedule confirmed
Storyboard created by one of the team members to reflect our collective vision.
Wireframes
Low-Fi Wireframes
Using Figma, we translated our first sketches into low-fidelity wireframes. Then, I improved them by adding a few relevant icons to better visually represent the options. At this stage, the wireframes were defined enough for some user testing. Based on 5 tests, we've made alterations and moved on to creating high-fidelity prototypes.
Usability Testing
Usability Testing
We created a fully-functional, high-fidelity prototype using Figma. At the same time, we started recruiting subjects for the test who fit our criteria. After 4 usability tests in the first round, we identified the main issues below and prioritized iterations for the final prototype.
Prototype
Prototype Reflections
Looking back at the prototype we created, there are a couple of things I would have personally would have liked to change:
Header and Navigation Bar Colours:
I am not sold on the colour blocking because the warm colours take the user's eye away from the content. If we had more time, creating colour studies/iterations would have been worthwhile.Add Pop-up error messages (modals):
Adding error messages to notify what action the user needs to perform to move forward would have been helpful to support a more seamless process. I think due to time we did not include them.Change Active State Buttons to Red:
A red button would stand out more and would help with reading the button text. The light blue has a lower accessibility rating.
Key Learnings
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.