A 0—1 MVP marketing website & dashboard design for a crypto mining startup
Time
Dec 2021 - Feb 2022
Tools
Figma, Miro, Notion
Client
ABC Blockchain
Team
Design team: Junjie (Jackie) Xu, Yiling Li, Sichen Li
Product Manager: Phyllis Liu
My Role
I was part of the integral team that is responsible for creating user research and persona. I developed the Information Architecture, created wireframes, High-fidelity prototypes, and interaction designs for the iOS App, and conducted useability testing.
Overview
About Mining3
Founded by a group of Google engineers in 2018, our client ABC Blockchain soon evolved into a technical community for engineers, researchers, investors, and enthusiasts to collaborate on blockchain technology advancement. They have hosted more than 50 symposiums in the past year. The company now wants to expand its business scope by providing an end-to-end crypto-mining service called Mining3.
Objectives
The Business Need
For the first phase, we are involved in the project as the design team to rebrand the company and to design a business website and user dashboard for this new service. The client expects to enhance digital presence, scale up their business scope and attract more customers.
Solution
Landing Page
Promotes the business and attracts potential users
The user is curious about crypto-minging and is able to find clear and helpful descriptions of the service on the landing page. The information supports the user in making quick purchasing decisions.
User Dashboard Page
Displays a clear visual framework of total revenue
After purchasing several mining plans, the user can use this personal dashboard to get a holistic view of the mining earnings through essential data and filters on total revenue.
Order Detail Page
Checks and compares specific mining orders
If the user is interested in any specific mining order, they can easily check each order status and choose filter options on the order page. They can also compare and contrast different orders and decide whether they want to buy or sell a particular order, based on the earning curve.
How we got there
Challenge
Working with a startup company and building something brand new is very exciting. However, there are certain challenges to face. Based on the stakeholder interview, we discovered many challenges and potentials.
This is all the material we got from client at the beginning.
Challenge 1
Start from 0 to 1
Challenge 2
A complex system
Design 2 products for 1 client
As shown above, we got very limited data during the project kick-off meeting. Before we started, the client mentioned the expectations to develop two products: a landing page design and a dashboard design. We realized that these two products need two different design strategies. Therefore, we decided to start with the landing page because it is more critical for the business, especially when it’s a start-up and we need to expand the customer base.
With only a small group of Discord users, we developed multiple research methods to understand user needs. We need to research the market, summarize the best way to brand Mining3, and generate insights from user interviews.
After the kick off meeting with the client, we came up with our design questions:
01
How might we attract new users with limited blockchain and De-Fi (Decentralized Finance) backgrounds?
02
How might we make the complex crypto mining process more scannable and help users quickly understand the business service?
Plan a Timeline
Setup a Road Map for 2 products
We started by planning a timeline to develop two products within a limited timeframe. We chose to focus on one product at a time with knowing that most research information can be shared across these 2 products.
User Interview & Persona
Understand our Audiences and their Needs
We started our user interviews with active users in the Mining3 discord channel because they are interested in the business model. During the interview, we focused on the user goals and motivations, their pain points, as well as their knowledge of crypto mining or other decentralized concepts. We want to uncover what information users care about the most when investing and what motivates them to invest in crypto mining.
With these findings in mind, we created a user persona after the user interview:
Part 1 - Let’s talk about landing page first.
Design Principles
Based on our user research, we established several design principles to guide our design.
Learn from the Competitors
We looked into some remarkable websites in the market aiming to study how do others process the landing page.
As a team, we discovered the commonalities shared amongst successful landing pages:
Findings
Commonalities Among Successful Landing Pages
01 Prominent CTA button
02 Appropriate hero images that speak to the company’s goal or the product
03 Consistent UI
Wireframe
Besides our competitive research, we also talked to our client to gain more information about the company goal and challenge. We understand that goal of the landing page is to introduce a new service model and attract new users. Therefore, we incorporated the previous findings into our design and came up with two iterations of the landing page. During the design, we used the Why-How-What (Start with why -- how great leaders inspire action | Simon Sinek) structure to organize our design focus. After design critique with stakeholders, we consolidated the iterations into a Hifi version that prioritizes the What factor.
Version 1
Prioritize Why
Version 2
Even Distribution
Landing Page
Final Design
Summarize
How we managed to collaborate with different stakeholders during the design process?
During the landing page design, we worked closely with the clients aiming to showcase their company goal and business impact. Our landing page design was mainly based on the client’s request. During this process, we did not work closely with the users to check how users might interact when they browse the page. Although this design strategy may be time-efficient, we found the need to focus on the users and rationalize our design with users. After addressing this concern with clients, we shifted our priority from focusing on clients to focus on the users.
Part 2 - Let’s move on to Dashboard next.
Personal Dashboard Overview
Our next step is to design a user dashboard to display personal earnings and profits during the crypto-mining investment process. Our challenge is to figure out all kinds of data information that users need and eliminate irrelevant and unnecessary information. This will help us to determine the key features and the information hierarchy.
Research
Competitor Analysis
We looked into the dashboard designs of some popular platforms on the market and gather what features they provide and prioritize. We want to make sure that our design includes all the common and essential features that customers value the most.
Design Opportunities
How might we learn from them?
Data Visualization
Incorporate investment data to a clean and easy visualization, without overwhelming the users.
Easier Access
Provide easy user flow and guidance to help users invest and manage the coins.
Promotion / Rewards
Add incentives in the investment experiences by giving rewards when users invite friends.
User Survey
We created a survey with several questions and send to potential users to find user pain points when using crypto mining experiences. Meanwhile, our clients have not completely flashed out how big the service scope is. To help our client figure out whether they should include or exclude certain cervices (for example, renting or buying mining machines), we also decided to include some questions regarding crypto mining platform and helped the client to better make their judgement. Then, we organized some of the feedback and answers we got into an affinity map and presented to clients.
Affinity Mapping
Design Insights
We generated our design insights based on our previous research. We also took into consideration aligning our design goals with company objectives and strategies. As a result, we set up a set of guidelines to measure the success of the Dashboard design, for better readability of data information, efficient purchase path, and future scalability for other functions.
Ideate
Information Architecture
With these insights and guidelines in mind, we decided to make a first version of information architecture to identify and organize the relevant information in the dashboard.
Our Initial Proposal
Prioritization Matrix
After showing the first dashboard proposal to the clients, we are informed that the company has limitations on the development bandwidth. Some of the features are too complicated to develop during the first phase. During the sync meeting, we quickly identified the prioritization matrix to find out what our MVP version needs to include. Afterward, we adjusted the current information architecture to better fit the current company's capability.
MVP User Flow
We used the chart to create the MVP Information Architecture to guide our wireframe design of the dashboard and worked out our lo-fi version to test with potential customers. Then we organized into a user flow to guide our design.
User Flow
Iterations
Usability Testing
We conducted several usability testing in order to validate our design decisions. We set up one-to-one interviews using the guerilla user research method and gave users 3 major data-driven tasks: User Dashboard, Order Page, and external Wallet.
Zoom Interview due to the Covid-19
We found out that:
User Dashboard
Order page
Wallet page
Pain points
Undesired Information
Cognitive Overload
No Error Prevention
User Feedback
“I want to see more about the increase in my coins, not money currency. ”
“I am not sure where to look at. Those curves are really tiny.”
“I am worried that I would hit the transaction button by accident and I can’t go back now.”
We did 3 rounds of iterations based on user testing feedback and internal reviews. We then created high-fidelity prototypes based on the feedback.
1. Dashboard
Design Decision 1: Sidebar
Single Page Sidebar
Scalability (Long term, product functions)
We decided to include the sidebar as a navigation method. This is to keep our information architecture clearer and reduce the cognitive load of our users. We also want to make our design more scalable for future phases and further development.
Design Decision 2: Critical Data
Previous version Display in USD
Display revenue in USD.
The visual weight gives the user a clue about its importance.
After Display in Coin Amount
Display in ETH.
Change the visual hierarchy and reassign visual weight to help users see what is more important, in this case, their revenue.
Design Challenge:
What data to show and what do our users care about the most?
After conducting usability testings, we changed the unit in our earning display. We de-emphasized the earnings in USD because money currency usually reflects the market fluctuations, but users care less about the ups and downs. They care more about how much Bitcoin and other coin types they have mined because coin amount reflects the changes in machine speed and hash rate. Therefore, the coin amount becomes more relevant for users.
Final Version
2. Order Page
Design Decision 1: Data Hierarchy
Prioritize on Data Charts
Prioritize on Order listing
How do we show users their orders in an efficient way?
We considered two design options to display order data. First, we thought of displaying the visualized data analysis for their orders. After usability testing, we realize that users want to get to access, sort, and arrange their orders in a fast and efficient way. They found too many visualizations to be distracting for accessing their order information. So we decided to provide a simpler version of lists that displays the important numbers.
Design Decision 2: Revenue Curve Display
Design Options
Display every revenue curve on one single page
Add a separate Card for each revenue curve when user clicks an order
Add list Inlay to display revenue curve as a detailed information and allow user to compare each order revenue curve
Users have a difficult time differentiating the revenue curves because the curves tend to have less fluctuation in the real world.
“The curve is too flat, I can’t see any differences between them.”
During usability testing, users brought up the frustration of distinguishing different curves when they are on the same page. We enlarged the revenue curve by assigning a separate card to it. We tried to consider different scenarios about how users might interact while checking their order revenue. Then we found out that users sometimes want to compare and contrast specific orders so we ended with using list inlay to display order to provide a clearer “revenue comparison” display.
Final Version
3. Wallet
Linking to external wallets
Design Decision 1: Single page or pop up window
Single page
Pop up window
Hierarchy and Simplicity
We initially had two versions of connecting wallets: have a single page or add as a popup window. After talking to the clients, we realize that with the current phase, we don’t have enough content to show on a single page. Therefore, we decided to simplify the process to increase the efficiency for users and emphasize the “Connect Wallet” function by adding a popup window when users want to connect their wallets.
Final Version
Design System
For Efficiency and Fast Results
Our client wants to limit their investment during the first phase of this project so we decided to use an open-source design system, Ant Design, as our main style guide. It is easy to build and ship and has a set of high-quality components and offers support for support and server-side renderings.
Success Metrics
How we measure success?
As designers, we want to make sure our design will bring value to the business and the users. When the project launches, we plan to measure the success with the following data.
• Increase in Website Visits
• Higher Net Promoter Score
• Higher Conversion Rate
Reflection and Next Steps
Takeaways
1. It's important to initiate and promote design values as UX designers to clients. In the beginning, we did not work closely with the clients and only designed based on the client’s request. Later, we identified the issue to our clients and were able to persuade clients to shift our focus from a “time-efficient” approach to a user-centric design methodology. As human-centered designers, we can’t design products based on our own assumptions or solely based on clients’ needs. We also have to actively identify potentials through user research and other forms of user analysis.
2. Communicating with all key stakeholders is critical. When gathering and documenting requirements to avoid missing major information, we need to. This happened early on when we had missed some of the clients’ requirements and led to misleading deliverables.
3. Prioritizing feasible features. While many features are reasonable to have in order to achieve the business goal, we need to consider the engineering bandwidth and the limitation of the current stage.
4. Use the design system early on in the design phase. Our early Hi-fi prototypes started without using a design system, and quickly we realized some inconsistencies among each screen. After deciding on using an existing open-source design system, we realize the importance of defining a design system early on before we start to design. I think in the future, I would involve design systems early on.
Next Steps
1. Involve more potential users for research and testing.
2. Build prototypes with real numbers and data to validate the design.
3. Work on more blue-sky features such as shop machines and other services.
4. The design process is about making tradeoffs considering all factors while aiming for the optimal UX. Some features will have to be designed for high-frequency users that may not be beneficial to low-frequency users. When it comes to tradeoffs, we should keep revisiting the personas and using big picture goals to derive low-level solutions.