Overview
Crypto Classroom is an online education portal for everyone who wants to learn about cryptocurrency and blockchain technology. The website is owned by Genesis Block, a company that offers cryptocurrency trading service.
Problem Statement
As cryptocurrency is considered as the hottest topic nowadays, Genesis Block would like to gain more popularity in the market and convert more audiences into actual users through a variety of educational content. However, the key concepts and technology behind it can be very difficult to understand. In fact, many beginners are scared away before even getting started.
Although Genesis Block has been constantly publishing new articles to their Crypto Classroom, as well as uploading weekly videos to their Youtube channel, the engagement does not meet their expectation.
Design Brief
To redesign the existing Crypto Classroom website below. 👇
The new Crypto Classroom should fluidly guide crypto beginners from beginning to end. In terms of KPI, the new design should aim to increase on-page time, engagement, and course completion rate.
User Interview + Affinity Mapping
Key findings from 12 respondents:
- Users think cryptocurrency and blockchain are very difficult topics.
- Users don’t know where to begin, as there are too many starting points.
- There is no measurable, effective way to validate learning outcomes.
- Users are overwhelmed by the amount of content displayed on the Crypto Classroom homepage.
Personas
Based on our user interviews, we have found out that there are 2 different types of beginners.
The first type of users belong to the younger generation, who already believe in the future of cryptocurrency. They are ready to start trading anytime. All they need is a little push (some how-to guides) to get started.
The second type of users are conservative investors like Warren Buffet. They embrace value investing and think crypto is too risky. They want to fully understand everything about cryptocurrency before they start investing.
HMW + Solutions
Summary of our solutions:
- Categorize learning contents into learning paths (lists of lessons) and individual lessons.
- Use a clear and powerful CTA to guide users where they should begin.
- Combine videos, articles, and quizzes together as learning materials.
- Reward users with Genesis Coins after completion of lessons, coins can be used to trade in trading simulator.
User Journey Map
There are 6 different steps in the user journey map.
Among all the steps, users have the worst experience on the onboarding stage. They are confused by the overwhelming amount of information and don’t know where they should begin learning. Therefore our team’s main focus was to improve the onboarding experience.
Information Architecture
After discussion with the Genesis Block team, we all have come to a conclusion that the Crypto Classroom should be built as a stand alone product, so it can prevent sharing the same navigation menu that causes confusion. Also, since all the learning contents are very disorganized, and the poor categorization makes it hard for users to find their topic of interest, it is necessary to completely rebuild the information architecture.
Breaking down the iterations:
Onboarding process (my main duty)
Over the 3 weeks period, my team and I have conducted multiple usability tests with users to validate if the new design is easy enough to use. We iterated twice after the first mvp (wireframe) was built.
I will explain my thinking process behind the onboarding process (my main duty) and demonstrate how I iterated from the first mvp to the final prototype. First, take a look at the current website.
As shown in the original website, everything is in chaos. There is no clear CTA, and the search bar serves no purpose to beginners who have no idea what to search for, which is a critical problem.
1st MVP
In our 1st MVP, I have created a simple CTA button that says “Start here” to act as a starting point for absolute beginners. In addition, there are also several goal-oriented learning paths and some topics to browse for.
Later in our usability testing, we realized no one actually clicked on the “Start here” button. Instead, they scrolled down and clicked on something else. Also, users have shown hesitation in selecting learning paths due to the lack of description.
2nd MVP
In our 2nd MVP, I moved the learning paths to the top and used them as the new CTAs. With the newly added description text to learning path cards, users were much quicker to pick something to begin with.
However, some users think the website has a very cooperative feel, and the cover image seems like we were a SAAS company.
3rd MVP
In our 3rd MVP, I created a custom illustration to better align the company’s brand with the headline message, as well as to make it feel less cooperative. Finally, I rewrote some text for the CTAs and made some minor changes to the layout style.
Completing the UI
Finally, this is how the redesign of the onboarding part looks like after 2 iterations.
Concept Sketches
Wireframe
Design System
Graphic Illustrations
Custom illustrations made by Derek.
Final Prototype
Conclusion
Throughout this project, I have applied what I’ve learnt about building products for the past few years - constantly test your idea with users, get feedback from them and keep iterating.
Our client Genesis Block was very surprised to see the results that we have achieved in just 3 weeks with a team of 3, and they were so excited to tell us that they would pass the design files to their product development team in Malaysia to further develop the idea. This is such a fun and exciting project for us, because we have not only learnt about design and building products, but also expanded our knowledge on cryptocurrency and blockchain.