DirectED NPO
Role: UX Designer
Designed the web and mobile version of the homepage and dAPP for this startup organization
Duration: 4 Weeks
Tool: Figma
Team member: 4
DirectED is a non-profit charity that supports high school students in Kenya and Ethiopia with tech education, including coding, data analysis, cyber security etc. But instead of the regular way of raising money, their donation method is “futuristic” – by donating cryptocurrency on blockchain. They’ve adapted the new way because:
​
Traditional charities fall short on:
-
Transparency: What did the board do with the money? Who received the money?
-
Feedback: Donors expect to see what difference did the donation make?
The benefits of donating through cryptocurrency on blockchain are:
-
Decentralized identity: enable secure data exchange, and keep the anonymity of participants
-
Full transparency and reporting to track the donation process
-
Less tax which means more available amount for charity
The idea is innovative and beneficial. In order to achieve them, the organization needs a decentralized application (usually called a dAPP) which is an app (sometimes shown as a web page) that employs blockchain technology to enable users to complete transactions without relying on a central authority.
Problem Statement
However, DirectED is still a startup company that doesn’t have a solid structure yet, so they were facing a few problems:
-
There is no seamless flow from (a) learning about what the DirectED programme is and then (b) being able to donate using one's crypto wallet.
-
No graphic profile of our charitable organization
-
No user personas/understanding of the user concerns of our potential customer (user) base
Goal
Their goal for the homepage and dApp is:
-
Donors can quickly understand what it is that we do.
-
KPI: 70% of respondents report that they feel like they have a good understanding of what DirectEd is within 1 minute. 90% of respondents report that they understand what DirectEd does within 2 minutes.
-
Donors are inspired to donate.
-
5% of home page visitors who spend more than 1 minute on the website click the “enter donor portal” button
-
1% of home page visitors connect their wallet
-
0.5% of home page visitors donate
Our Proposal
We had 4 weeks for this project, so we decided to tackle the first problem. Our goal was to help the organization rebuild both the web and mobile version of the homepage, and the dAPP.
We proposed to do:
-
Research existing donor platforms and charities to formulate hypotheses about important design elements
-
Conduct user interviews to test these hypotheses if there's enough time
-
Propose Figma designs for the home page and donation page
Then we splitted into 2 subgroups: Homepage and dAPP, and I focused on making the dAPP page with another teammate.
Competitive Research
We did competitive research on many websites that have the same flow and summarized what we liked and disliked about each website.
There are some similarities:
​​
User Flow
The major users for the dApp are donors that are ready to make a donation, which include crypto-native donors and new-to-crypto donors.
As a donor, I would want to…
-
Be able to quickly understand how the dApp works
-
Know where to click to make a donation
-
Have a smooth and reliable donation process
-
See all the features dApp provides including transaction history, student progress check, etc.
With the user needs in mind, we listed all the tasks and came up with the following user flow.
​​
Sketch
We then started sketching our ideas down on paper and later on made them into wireframes. Considering how to make the donation process more smooth, we offered three options: a regular webpage version, a scroll-down version and a pop-up card version. The regular page option is straightforward and familiar to what users utilize on a daily basis. The scroll-down allows users to unlock more steps as they complete the current task, and the pop-up card is more interactive since there’s more animation involved.
After discussing this with the development team, the client decided to choose the regular page version since it requires minimum time and effort.
Hi-Fi
We then made them into HiFi mockups in Figma. The color scheme we chose was inspired by the scenery in Kenya and Ethiopia. The picture below shows two different options of making a donation which the client wants to run A/B testing for.
Conclusion
Because of the limitation of time, we weren’t able to run the usability test with potential users. The company was very satisfied with the final screens and was looking for participants to run the test. They will continue working on testing and reiteration until all users are happy about the website.