Bitmini | UI UX Case Study
Why do we need more forms of cryptocurrency? Don’t we already have more than enough? What makes Bitmini.org so special?
Introduction
Bitmini envisions a cryptocurrency system that is free, fair and efficient for the next millennium. Bitmini is not just storage of value, but Storage of Freedom and Storage of Civil Rights.
The goal of this project was to design an intuitive and informative website to illustrate how Bitmini differs from other forms of cryptocurrency.
This project was planned and executed by my team of four:
As the project lead, my role was to conduct user experience (UX) research and create a clickable desktop and mobile prototype based on our research results.
Business Goals
An equal, efficient and decentralized system that would fundamentally solve current cryptocurrency design flaws.
User Goals
Learn about the advantages and disadvantages of Bitmini and how Bitmini differs from other cryptocurrencies.
Project Goals
To design an intuitive and informative website to illustrate how Bitmini works and why it is different from other cryptocurrencies.
UX Design Process
Hypothesis
Our users are interested in investing in cryptocurrency but the current system is too volatile and they do not want to purchase expensive hardware.
Research and Discovery
The Challenge
The brief of this project was to create an intuitive website, that people can access to understand how Bitmini operates, how it differs from other cryptocurrencies, and encourage users to follow Bitmini.org on Twitter.
The key design features our client requested were the following:
- 1-page design
- Social media section
- FAQ’s
- Roadmap (on each quarter)
- Links to social network
- Include a live Twitter plugin
Crypto-what?!
In all honesty, I did not have any prior knowledge about cryptocurrency before this project.
Before we began investigating how certain cryptocurrencies differ from each other, we had to establish a thorough understanding of cryptocurrency industry and blockchain. This involved reading articles, watching documentaries, watching YouTube videos, interviewing current investors, and much more. As a designer, it is my job to understand the goals of my users, making this part of the design process crucial and valuable.
Once each member of my team was comfortable talking about cryptocurrency and blockchain, we moved on to conduct detailed domain research.
Domain Research
Domain research helps set the foundation for project research. My team researched numerous local and international cryptocurrency companies to understand the advantages and disadvantages of different cryptocurrencies.
Based on our research, the primary distinction between Bitmini and it’s competitors is that Bitmini is truly decentralized (powered by new consensus algorithm and voting), faster transactions (powered by ZDAG; fast and instant confirmation), energy efficient and does not require specialized mining hardware.
We investigated numerous cryptocurrencies available in Vancouver, BC and globally. The websites we explored include Bitcoin, Bunny Token, Steller and XRP.
Comparative Competitive Analysis
To help visualize and compare the websites mentioned above, I created a comparative competitive analysis (CCA) (Figure A).
In addition to the measurements illustrated above, we measured the value/mission of the organization, analyzed website layout, and common patterns (e.g., colour scheme).
Using the information gathered in our domain research, we were able to identify how different cryptocurrencies market their respective coins and their unique value proposition. This understanding allowed us to further understand the unique properties of Bitmini and give us direction on how we could design the website.
The CCA allowed us to easily refer back to our domain research and understand the information we gathered with a simple glance.
User Surveys
After collecting preliminary research, we began formulating survey questions. The objective of our survey was to understand the pain points of our users when searching for a consultant and what might help resolve these frustrations.
Our survey targeted 3 primary groups of users:
- Cryptocurrency investors
- Users knowledgeable in cryptocurrency, but have not invested
- Users interested in cryptocurrency, but are not knowledgeable
Groups 1 and 2, were our primary targets for this project. Below are examples of questions asked on the survey:
We deployed our survey to the cryptocurrency community on Telegram and the general public via LinkedIn and Reddit.
As we waited for survey data to be collected, we conducted user interviews.
User Interviews
User interviews contribute to qualitative research and allow UX designers to better understand the industry and users.
An example of a question we asked our interviewees is the following:
In your opinion, what would motivate individuals to learn more about cryptocurrency?
Some of the responses we received to the question above are recorded below:
The prospect of making money
The potential of it as an alternative to the currencies we’re so used to using
To understand how the world is changing the alternative to conventional banking
Survey Results
We received a total of 53 responses to our survey. After collecting the results, we analyzed the data using multiple techniques.
The first method of analysis was simple: read and understand the results.
The survey results demonstrated that our user’s experience is enhanced when the website incorporates text, images and videos to educate the user on cryptocurrency (Figure B).
The results also help identify flaws in the current cryptocurrency system (Figure C) and advantages (Figure D).
To complement this initial analysis, we created an affinity diagram to visualize our research results.
Affinity Diagram
Affinity diagrams are utilized by UX researchers to group research/data into meaningful clusters for analysis.
All of the data points collected from the survey and contextual inquiry were included in the affinity diagram.
The affinity diagram shed key insights into our research findings and allowed the UX team to easily extract valuable information.
User Persona
The affinity diagram illustrated above helped create the user persona for this project.
We created two users personas to capture the two primary user groups our data revealed; users familiar and interested in cryptocurrency (Figure E), and users unfamiliar but interested (Figure F).
The user persona was a helpful tool throughout the design process and bridge the gap between research and planning.
Planning
The UX research set the foundation for planning the design and allowed me to identify user pain points and key features for the website.
The storyboard below depicts Austin’s (primary user persona) frustrations.
1. Austin daydreams about making a fortune from investing in cryptocurrency
2. Then the reality of it daunted on him — the expensive hardware he would have to purchase
3. He quickly realizes the process of mining would also require a lot of energy
4. *SIGH* “I only have an average computer..” (he thinks to himself)
5. Austin surrenders his dreams of being a millionaire
The storyboard above helps build empathy with the user by identifying pain points and creates context for the demand of the current website.
User Flow
As illustrated in Figure G (above), my team was able to identify the minimal viable products and create a simple user flow.
The arrangement of content was crucial because this was a 1-page website and our goal was to keep users engaged. The user flow above was the third iteration after testing.
Due to the limited scope and content of the current project, a content audit and information architecture was not necessary. Therefore, we were able to jump into design after creating our user flow.
Design
The design objective was to utilize the UX research to foster simplicity and ease of use of the website and responsive design.
Before designing wireframes, we executed an exercise called design studio. This exercise allows each team member to display their design concept of the website and describe why we choose that particular design.
Design studio permits collaboration of designs and a smooth transition into wireframing.
The user flow map and design studio paved the way for the first version of wireframes. Without the user flow, wireframing would have been difficult and time-consuming because design variations are infinite.
Below you will find a low-fidelity copy of the website wireframe (Figure G).
After creating the desktop wireframe, we conducted user testing to test the flow of the app.
Website responsiveness is a crucial aspect of design because users access websites from a variety of different devices, such as laptops, phones, tablets and more.
As we tested the desktop paper prototypes, we simultaneously began creating the mobile prototype to ensure our website will be responsive on mobile screens (Figure H).
As illustrated to the left, we created two iterations of the mobile low-fidelity wireframes.
In the first iteration (top), the user could access the side navigation by clicking on the arrow on the left.
After conducting testing, we designed a second iteration, as our users did not find the arrow intuitive or useful. Therefore, we changed the design to incorporate a floating side navigation, similar to the navigation available in the desktop website design.
Paper Prototype Testing
Testing revealed the flow was simple and the website was easy to use.
Key feedback we received that the roadmap occupied too much space, so we changed the roadmap from vertical to horizontal to create more whitespace.
Testing also revealed that “Key Features” should not be a CTA (call to action) located under “What is Bitmin”, but rather a section of its own.
This feedback was incorporated in the digital prototype.
Prototyping
Using the feedback gathered from the paper wireframes (as discussed above), we created the mid-fidelity digital prototype (below).
As displayed in the image to the left, we re-designed the website to include “Key Features” as primary content at the top of the page.
In efforts to simulate the user experience with the floating side navigation, we incorporated the side navigation directly into the mid-fidelity prototype (on the left side). This simulation is primarily to illustrate that each section would be highlighted when the user reaches the corresponding section.
This does not accurately depict the way the user would interact with the side navigation because the navigation would be floating and static, rather than a separate bar for each section.
Furthermore, as illustrated on the left, the side navigation consists of circles with the corresponding section name in the middle. For the mobile design, we changed these circles to icons and included the section name in smaller writing at the bottom. We made this adjustment to account for lost space due to the smaller screen size since circles with headings inside them would take up too much space.
Our first iteration of the mobile side navigation did not include headings, however, after conducting user testing we decided to implement headings under the icons to avoid user confusion (Figure I).
Using the mid-fidelity prototypes, we continued user testing and began designing the high-fidelity screens.
Testing
We tested on 5 participants for the desktop prototype and 5participants for the mobile prototype, for a total of 10 testing sessions.
The method of testing was structured; we identified the scope of the test and gave the user-specific objectives. We took detailed notes on their interactions with the prototype (e.g., long pauses), noted all feedback and timed the digital testing sessions.
User Objective:
1. Find the Key Features
2. Find the Roadmap
3. Find the Specifications
4. Find Bitmini’s live Twitter feed
5. Access the Whitepaper
6. Access the FAQ’s
Desktop Testing Results
Mobile Testing Results
All feedback from desktop and mobile testing was considered before moving onto the next stage. The team made revisions, referenced research and retested throughout the testing phase.
Take a look at the high-fidelity desktop prototypeand mobile prototype on InVision.
UI Design
We aspire to create a cryptocurrency system that is more fair, accessible, energy efficient and can process transactions faster.
The final design phase for this project was broken into components to be completed by each team member and I put together the final prototype and design.
The UI design required a lot of continuous feedback and retesting to create the final product.
The design inception was to foster a feeling of trustworthiness, inclusive, optimistic and powerful. This was achieved by using gradients and vibrant colours. The serious and rounded typeface used gives a sense of power and depth to the website.
The image at the top of the website (Figure J) was designed by Umaru and I. Our goal was to create a sense of global connectedness and the nodes represent the transactions between users. To the left of the image is Bitmini’s mission and value statement.
Below you will find the high-fidelity version of the screens discussed in mid-fidelity prototyping.
The tools I’ve used are Sketch and InVision.
Future Improvements
There is always room for improvement.
The 3-week timeline of the current project did not allow for many features.
Future considerations include offering the website in multiple languages. This website will be accessed globally and our goal is to make it accessible to all, if not most, populations.
Second, we would add a 1-minute animation video on how Bitmini operates and highlight the key features and specifications.
Conclusion
The goal of this project was to design a website for a cryptocurrency that aspires to build a free, fair and efficient cryptocurrency system for the next millennium.
We accomplished this by adopting a design that fosters trust, optimism and power to create a positive user experience.
The team worked well and hard to create a simple, functional and grounded website to improve the experience of users.
The final product exceeded the business goals, user goals and project goals.
