UX/UI Case Study – BTC Responsive Website
Btcnow is a website for a fictional bitcoin store to help newbies and not technical users to get easily into bitcoin and make their first investments, both digitally or physically with coupons.
The iterative Process:
1
Empathise
2
Define
3
Ideate
4
Prototype
5
Test
1. Project Overview
Project Duration
Sep 2021 – Nov 2021
The Product
Btcnow is a website for a fictional bitcoin store to help newbies and not technical users to get easily into bitcoin and make their first investments, both digitally or physically with coupons.
The Problem
Investing in bitcoin might difficult and confusing for some people, specially non-technical, elderly, newbiies, etc… We identified that many would be willing to invest in bitcoin if it was easier and more accessible
The Goal
We want the user to be able to buy bitcoin seamlessly without having any technical knowledge. The idea is to become an easy entry gate to the most famous cryptocurrency on Earth .
My Role
UX designer designing an app for this Local Altcoin project from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
2. Understanding the User
User Research: summary
I conducted interviews and created empathy maps to undestand the users I’m designing for and their needs. A primary user group identified through research was people willing to buy btc online but who lack technical knowledge and feels threatened by scams etc. Another group is people who would only buy bitcoin physically with coupons that feel more “tangible”.
This user group confirmed initial assumptions about the the lack of knowledge idea, but research also revealed that trust and security weren't the only factors motivating users, but other users also wanted an easy way to buy, some support and guidance in the process, payment options, etc..
User Research: pain points
1
Intangible concept
For certain users, bitcoin is a very abstract concept and its intangible nature does not pass trust
2
Security Concerns
Buying bitcoin might still be seen as one of those “internet scams” by certain people
3
Payment Options
Some users feels frustrated with the lack of payment options when buying online.
4
Lack of Information
Some users don't really know anything about bitcoin. The lack of education and information about it, leads to fears and distrusts.
User Research: Personas
PERSONA: THAIS
Problem statement:
Thais is a 34 years old psychology student who feels comfortable with technology who needs an easy, reliable and straightforward way to buy bitcoin online because she lacks information is concerned about lack of security, info and clarity
PERSONA: PACO
Problem statement:
Paco is a 65 years old retired man who “has heard” bitcoin is the future who needs an easy, reliable and straightforward way to buy bitcoin offline because he refuse to buy anything online.
User Journey Map
PERSONA: THAIS
Goal: Buy bitcoin online easily and reliably. Comfortable with technology but wants and easy and reliable site to buy online
PERSONA: PACO
Goal: Buy bitcoin physically easily and reliably. Prefers to buy a coupon in a store physically because it feels more secure
3. Starting the design
Ideation: competitive audits
Ideation: crazy 8
Sitemap
Paper Wireframes
Taking the time to draft iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the homepage i prioritized a quick and easy access to the main areas of the website
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Digital Wireframes: Screen Size Variations
The differences of expected device usage in the research made obligatory to design the product for desktop and mobile
Low Fidelity Prototype
The low fidelity prototype connected the primary user flow of buying bitcoin and redeeming coupons, so the prototype could be used in a usability study with users. Everything was done using ADOBE XD.
Check the Btcnow Website here:
Usability Study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining
Round 1 findings:
1
Btc price difficult to find within the website
2
Videos were difficult to find initially
3
More help within the purchasing process is needed
Round 2 findings:
1
Adjust hierarchy and proportion in certain elements
2
Font weights must be rebalanced
3
Colour contrast adjustment
4. Refining the design
Mockups
After usability study, I added a little bar in the header with the btc price, viewable from all the screens of the site
Mockups
After usability study, I added links to extra info and explanatory videos in order to help users who feel stuck or lost within the purchasing process
Mockups: Original Screen Sice
Mockups: Screen size Variatios
High-fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for buying btc and redeeming coupons. It also met user need for checking bitcoin price, download app as well as more options. Everything was designed using ADOBE XD
View the BTCNOW Website
5. Going Forward
Takeaways
Impact:
The web offers a straightforward process to purchase bitcoin and redeem btc coupons easily. The app makes users feel the app really thinks about how to meet their needs
One quote from peer feedback:
“That's exactly the kind of website I’d need to introduce myself into the world of bitcoin”.
What I learned:
While designing the Btcnow responsive website, I learned that the first ideas for the website are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next Steps
1
Conduct another round of usability studies to validate whether the pain points user experienced have been effectively addressed.
2
Conduct more user research to determine any new areas of need.
3
Keep iterating and polishing the design accordingly. Constant improvement.
