UI UX Case Study
BitSmart
BitSmart is a mobile app designed to address the prevailing lack of financial literacy and understanding of cryptocurrencies among individuals. BitSmart aims to bridge this gap by providing a unique platform that educates and also empowers users to learn in the world of cryptocurrencies.
Problem Statement
Many individuals who are interested in cryptocurrencies encounter challenges in accessing reliable and simplified information, leading to misconceptions, concerns and are demotivated in learning further.
Solution
A mobile app that serves as a comprehensive, engaging educational platform, encouraging individuals to learn about cryptocurrencies.
UX Hypothesis
If BitSmart structures the app to resolve users concerns, by offering segmented videos, interactive lessons, quizzes and gamification, this will lead users to feel more motivated to continue building their knowledge of cryptocurrency
Alex Thompson
Age: 30years
Occupation: Marketing professional
Hobbies: Fitness and sports, Reading,
Technology gadgets
Painpoints
Overwhelmed by the abundance of information available.
Lack of structured learning paths for cryptocurrencies
Market volatility and security issues
Too technically complex.
User requirements
Alex has recently become interested in cryptocurrencies and wants to expand his knowledge to make informed investment decisions. He has some basic understanding of financial concepts but lacks knowledge specific to cryptocurrencies. He is motivated to learn about cryptocurrencies to diversify his investment portfolio and stay ahead in the digital economy. However, he finds the existing resources overwhelming and lacks a structured learning path.
Background
low
clear learning path
high
low
Personalisation
high
low
Engaging interactions
high
low
Reliability
high
Proto Persona
Research Survey
From the research survey conducted, One major concern for users is the risks that are associated with cryptocurrencies. Also, most users preferred interactive quizzes and simulations for learning.
Empathy Map
An Empathy map was made to gain a deeper understanding of Alex’s needs. This helped us as a team to put ourselves in his shoes and gain insights into Alex’s thoughts, feelings, needs and behaviour. We deduced that Alex was scared of being scammed, he lacked time to learn, he also lacked basic understand of the security measures on cryptocurrencies.
Thinks
Does
Feels
Says
I worry that my progress wont be saved if I am not consistent or do not fully complete tasks.
I might get ‘left behind’ if I don’t start to gain knowledge in the area
Uses other cypto services such as ‘Coinbase’
I think there are too many negative conceptions on cryptocurrencies
I think it is kind of gambling, I need to know more
I mostly use youtube videos to learn anything
I lack the the time to study long courses, so need something quick and easy to follow
Crypto is going to be the future as many people are presently investing everyday.
I have limited/ basic experience with crypto currencies
That there is a lack of security with my details being given to the app and that I will be scammed
Endless intervals between tasks will benefit from due to my busy schedule
Researches on Google and YouTube.
Empathy map
User Insight
User needs a trustworthy and accessible platform to learn about cryptocurrencies, as they are concerned about scams and overwhelmed by technical jargon. BitSmart should offer easy-to-understand content with visuals and a ‘Learn to Level Up’ approach, incentivizing users with points for completing tutorials and quizzes, fostering confidence and interest in cryptocurrencies and engaging them to continue learning.
Value preposition
Bitsmart: Empowering individuals to understand, explore, and confidently navigate the world of cryptocurrencies. We address the lack of financial literacy and dispel misconceptions by providing user-friendly tutorials, interactive quizzes, and trustworthy resources.
Alex Thompson
Age: 28 Years
Occupation: Graphic Designer
Hobbies: Playing video games, watching documentaries, exploring new technology trends
Painpoints
Lack of Knowledge: Alex feels overwhelmed by the complex jargon and technical terms associated with cryptocurrencies.
Security Concerns: The idea of linking bank accounts or personal information to a cryptocurrency platform raises security concerns for Alex.
Scam Awareness: The fear of falling victim to a fraudulent scheme has made Alex skeptical about embracing cryptocurrencies.
User Needs
Simplified Learning: An educational platform that simplifies complex concepts, providing bite-sized, easily digestible information.
Trustworthy Information: A reliable source of information that debunks misconceptions and highlights trustworthy cryptocurrencies and investment practices.
Motivating Incentives: Gamification elements that encourages users to learn more.
Interactive Engagement: Engaging features such as interactive quizzes.
User Persona
User Scenario
Alex, a tech-savvy individual with a strong design skill-set, is interested in learning about cryptocurrencies. However, he is apprehensive due to the myths and risks associated with this complex domain. He has heard many misconceptions and feels it may be too overwhelming, which has stopped him exploring further into the world of cryptocurrencies.
Journey Map
Alex, a tech-savvy individual with a strong design skillset, is interested in learning about cryptocurrencies. However, he is apprehensive due to the myths and risks associated with this complex domain. He has heard many misconceptions and feels it may be too overwhelming, which has stopped him exploring further into the world of cryptocurrencies.
Curious
Alex wants to learn more about cryptocurrency, but doesn’t have the time to watch lengthy videos.
His friend introduces him to app ‘Bit smart’ and he decides to check it out.
Start Journey
Alex downloads the app and goes through the onboarding process.
He sets his current level of knowledge/experience.
Alex also finds and follows his friend Max, by securely syncing his contacts.
Absorb Information
Alex begins his journey with the first lesson in the ‘Easy’ series.
He watches short videos to fit around his schedule.
Once confident, he decides to take on the lesson quiz.
Level Up
Alex passes his first lesson quiz and earns some points for doing so.
He has climbed a little higher on the leaderboard with his total points and can see he is almost as high as Max.
Continue Learning
The next day, Alex receives a notification reminding him to complete the next lesson to maintain his scorestreak.
He has a spare 5 minutes in the afternoon, so begins the next lesson.
Motivated and eager to learn more, he recommends the app to some other friends. Who will rank highest?
🧐
😊
🤓
🤓
🥳
😄
Mood
User tasks
Provide a clear value proposition on the app page
Simplify the sign-up and onb onboarding process.
Implement interactive and engaging quizzes that test Alex's knowledge and provide immediate feedback on his progress.
Offer special rewards or recognition to users like Alex when they reach certain milestones on the leaderboard, motivating them to continue their learning journey.
Offer bite-sized lessons or learning materials that can be completed within a short time frame, catering to users with busy schedules like Alex.
Introduce special rewards or bonuses for maintaining scorestreaks, motivating Alex and other users to keep learning regularly.
Provide more detailed information on the leaderboard, such as displaying Alex's current rank and the number of points needed to surpass the next rank.
Provide clear and detailed tracking of Alex's progress through the 'Easy' series, showing completed lessons, quiz scores, and the next available lesson.
Offer bonus points for joining to give them an insight into points and leaderboard.
Opportunities
User flow
The user-flow highlights the app's onboarding process, quiz, and leaderboard feature. It starts with coaching screens, syncing options, before reaching the homepage. The second flow involves selecting a skill level, watching a tutorial video, taking a 4-multiple choice quiz, and earning commendations and reward points. Finally, users can view their leaderboard ranking among friends.
Lofidelity Wireframes
After having an understanding of what the app will entail, a lo-fi wireframes was built for a visual depiction of BitSmart and in preparation for usability testing. Shown are the key screens; Find friends, dashboard, short videos, quizzes, and leaderboard.
Usability Test Plan
After having an understanding of what the app will entail, a lo-fi wireframes was built for a visual depiction of BitSmart and in preparation for usability testing. Shown are the key screens; Find friends, dashboard, short videos, quizzes, and leaderboard.
Task 1: Sign up/Create Account
Research Question: How can BitSmart improve the onboarding process for first-time users?
Goal: Obtain user feedback and suggestions for improving the account creation process
Success Criteria: The user is able to create an account and provides valuable feedback and suggestions for improving the account creation process for first-time users.
Task 2: Find Friends
Research Question: Are users able to find their friends and add them?
Goal: Access if they can add friends to later find their friends on leaderboard
Success Criteria: User has successfully synced their contact list and added friends
Task 3: Continue on your learning journey
Research Question: How effective are the educational tutorials and quizzes in enhancing users' knowledge about cryptocurrencies?
Goal: Assess the educational content's effectiveness and gather feedback on potential improvements
Success Criteria: The user gains new knowledge or insights from the educational content, finds it engaging, and offers constructive feedback for enhancement.
Task 4: Leaderboard
Research Question: Are users motivated by looking at leaderboard and their total points?
Goal: Users are able to complete the quizzes and check their ranking at leaderboard.
Success Criteria: User can see where they rank on the leaderboard against their friends
Hi Fi- Wireframes ( before iterations
With the style guide, the low-fidelity was transformed into high fidelity prototype. Here are the main screens from earlier, now incorporating our style elements.
UI Style Guide
Using InVision, we created a mood board to establish a strong and recognizable brand for BitSmart. The dark color palette, featuring deep purples and vibrant accents, sets us apart from other learning platforms and creates excitement around cryptocurrency education. Consistent colors, easy navigation, and readable contrast enhance the user experience.
Find Friends
Continue
Search...
Emily Johnson
ejcrypto22
Alex Turner
crypto_novice
Samantha Lee
samlee_123
Home
Learn
Leaderboard
Settings
Welcome back,
Full Name
Continue Learning
View All
Getting Started with BitCoin
75% Complete
25% Complete
Cryptocurrency Investment Strategies
Upcoming Live Events
View All
320
exp. points
2 day
score-streak
Changpeng Zhao
@zhao
Understanding and spotting honeypot scams
August 9th @ 13:00PM GMT
Lesson Content
01
What are Cryptocurrencies?
Home
Learn
Leaderboard
Settings
Skip To Quiz
Lesson 1 / 3
What are Cryptocurrencies?
What are cryptocurrencies primarily secured with?
Traditional
Currencies
Decentralised
Networks
Government
Regulations
Physical
Assets
Question 1/4
2
n
d
920 pts
@davidsBTCvault
1
s
t
1,230 pts
@ejcrypto22
3
r
d
880 pts
@samlee_123
Friends
Global
Home
Learn
Leaderboard
Settings
590 points
@crypto_novice
4
YOU
Username
448 points
5
420 points
@wallhammer
6
370 points
@snipebyte
7
210 points
@sj00
8
200 points
@wander_lst
9
Hi Fi- Wireframes ( before iterations
With the style guide, the low-fidelity was transformed into high fidelity prototype. Here are the main screens from earlier, now incorporating our style elements.
Find friends
Dashboard
Short videos
Quizzes
Leadership-board
The registration process is a littlr lenghty
The flow is really nice, but i would like the see the correct answers
Its a little difficult to see the progress of the lessons on the card
A search function to easily find lessons would be great
Hight priority for users
Hight priority for BitSmart
Nine participants provided positive feedback during usability testing, leading to valuable improvements. Changes included restyling cards, optimizing gradients, shortening onboarding, adding a search function, and refining the quiz for better learning.
Future consideration
Further Testing: We would conduct additional rounds of testing with a larger and more diverse user base to gather comprehensive feedback and ensure the app meets the needs of various users.
Further Rounds of Iteration: Based on user feedback and insights, we will continuously iterate and refine the app to enhance the user experience and address any identified pain points.
Gamification Enhancements: Explore and implement more engaging gamification elements to keep users motivated and incentivized to continue their learning journey.
Final Thought and conclusion
Looking to the future, BitSmart remains poised for evolution. Strategic partnerships, advanced learning tracks, and further gamification elements stand as opportunities for continued growth and enrichment of the user experience. The case study of BitSmart demonstrates that with a blend of innovation, empathy, and technology, it is possible to transform financial education, empower individuals, and inspire meaningful engagement within the realm of emerging technologies like cryptocurrencies.
Looking to the future, BitSmart remains poised for evolution. Strategic partnerships, advanced learning tracks, and further gamification elements stand as opportunities for continued growth and enrichment of the user experience. The case study of BitSmart demonstrates that with a blend of innovation, empathy, and technology, it is possible to transform financial education, empower individuals, and inspire meaningful engagement within the realm of emerging technologies like cryptocurrencies.
c
2023
Deborah Omonori
All right reserved