User journey of new donors from noticing the homework app on social media to choosing to donate
UI Design Systems
Design Sprint Team of four UX Designers from BrainStation
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
5 Day timeline
Neutral colours include white, gray, and black
Tints and shades of the provided brand colours.
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.
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.
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.
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.
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.
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.
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.
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.