ABOUT THE PROJECT
This is one of the design challenges I participated for Fizday - a community for designers. I had to complete and submit the designs in under 24 hours.
Year: April 2020
Role: UX Design, UI Design
The challenge
"Make it Easier to Donate Money to Charity"
Discovery/Requirement Gathering
DISCOVERY/REQUIREMENT GATHERING
The requirements were provided for this challenge. Typically this would be from a user researcher/product owner or a team work doing in-depth user research to understand the audience and their pain points.
Assuming users would use this interface when they want to financially help the needy. They would use it either from an office, home or public places like airports, cafes etc.
MARKET RESEARCH TO IDENTIFY PROBLEMS
I then started looking at similar sites to do a competitive analysis/market research to understand how donation websites work and to obtain design solutions.
These were some problems I noticed -
Cannot donate to multiple charities at once.
Donating to the same charity often is not quick.
Extra information is collected for anonymous donation.
GOAL/SOLUTION
Rephrasing the challenge/goal -
“Design an easy way to donate to multiple charities in a few steps via a web/mobile interface.”
I decided to stick to a web interface for this challenge keeping the time limit in mind.
REQUIREMENTS/User Stories
The following requirements were provided:
The interface will contain a home page, list of charities, and making payment/donation to them.
Design should involve minimal interfaces and fewer clicks as possible.
Design a web or mobile interface.
I rewrote the requirements as user stories by first converting the problems into “How Might We”s and brainstorming ideas for each which ultimately helped me outline the key tasks.
How might we donate to multiple charities at once?
As a user, I want to see a list of charities at a glance.
As a user, I want to see charities based on their categories.
As a user, I want to be able to select multiple charities.
How might we donate to the same charity quickly?
As a user, I want to be able to save my favorite charities.
As a user, I want to be able to search for a charity.
As a user, I want to be able to enter a donation amount.
As a user, I want to be able to add repetitive amounts easily.
As a user, I want to be able to select when to donate.
As a user, I want to be able to donate with different payment methods.
How might we donate anonymously without providing any information?
As a user, I want to be able to choose if I want to provide personal details.
Key tasks
I mapped out key tasks for the above user stories to be able to come up with a task flow.
Browse charity
Add donation amount
Review and make payment
BRAINSTORMING, ANALYZING AND DESIGN PLANNING
Based on the user stories, I created a moodboard with UI inspirations from various sites like Dribbble, Pinterest and Google images.
Task Flow and Sketches
With the key tasks outlined above I started defining the task flow and created rough sketches/wireframes with the help of the moodboard and user stories.
Iterations - In first iteration, I had the homepage display a few charities of different categories with a full display of charities within each category on a separate page. But keeping the goal in mind of having fewer steps and also realizing that there could be many categories, I changed the homepage to display the charities for only one category at a time via a drop-down category selection as you see in the sketches.
The wireframes would generally evolve based on stakeholder reviews in a real-world scenario. I also skipped the digital wireframes that I use for reviews because of the time crunch.
VISUAL UI DESIGN
Once the wireframes were finalized, I looked at my moodboard again to draw UI inspiration and started putting together the designs in Sketch. I took some example content from a website for my cards. A content strategist would usually help find content if it were a team project.
Click and hover over the images to read the description.
Style Guide
Logo - I created it quickly in Sketch itself. I just thought of words that would go with donations, charities. “Kind” popped up immediately.
Font - Netflix Sans App which was given by my mentor that I wanted to try. It's very clean and readable.
Color - I wanted to go with cool colors like green or blue that can be associated with kindness. I liked blue with orange-red better.
Icons - Flaticons
CONCLUSION
Knowing it was a 24 hours challenge, I had to manage my time wisely to be able to complete the task within the given timeframe. I feel I spent a little more time looking for UI inspiration which could have been shorter giving me more time to design and iterate the mockups. The designs would definitely vary if there was a usability test or user feedback throughout. However it was a good experience and very motivating. Looking forward to working on more challenges.
Go to a different project
