CryptoScans
Helping entrepreneur owners make more informed decisions when investing in crypto assets by giving them information on blockchain strategies and crypto assets.
My Role: UI/UX Designer working with a team of two other UI/UX designers
Tools: Figma
Timeline: One week of orientation, Five weeks of UI/UX designing
The Challenge
CryptoScans is the web application that represents a globally-used cryptocurrency profile platform. In the platform, users can explore different types of crypto and make a streamlined, knowledgeable decision to invest in crypto blockchain assets, which are a method of encrypting crypto digitally so it can be sold and traded to new owners in the market. The platform will help entrepreneurs by showing crypto profiles to choose the right blockchain platform and building their own application. This product will be for the Pronovean company, which is a modern management consultancy helping to transform digital technology for small and medium businesses.
The Outcome
My team and I created a web-based application in order to design a solution that helps business users interested in cryptocurrency platforms to discover different types of crypto available in the market and to allow them to research and analyze information about crypto blockchain assets. Then the users can make informed decisions when investing in crypto assets. My team ran out of time to include the last step of users being able to make the transaction and investment of crypto on the market, so we decided to focus on the discovery part of the crypto investment process. We were given primary research consisting of slides and notes with the needed data, and we decided to do our own secondary research on similar products.
Competitive Analysis
CryptoScans is an application for researching and analyzing available crypto on the market, focusing especially on a crypto called Solana. Solana is a great example because it provides fast and secure crypto for users. Most of the crypto platforms focus on the trading feature, but the application is going to focus on filling the gap in educating about what the cryptos are and what they do. So, my team split the work in the discover phase and one of us looked at three similar apps along with a few others and studied them through a competitive analysis of related products. Through the analysis, they discovered to:
​
-
Include extra sections with daily updates, news articles, updates on social media, and trades in real time.
-
Highlight important information on the key points of the crypto such as the founders and what makes the crypto unique and add an extra section for what people also watch to aid research.
-
Separate information into clear, organized sections and include an in-depth tokenomics section with comparison of crypto and a summary of price update.
Competitive Analysis First Page
Competitive Analysis Second Page
Competitive Analysis Third Page
Style Guide
My team did not have a lot of time to put together a whole style guide with UI elements but decided to focus on the important color palette aspect of the project based on the requirements and needs of the app. My team and I worked on the color palette as we were starting to design the high fidelity prototype because before the prototype, we focused on finishing the iterations of the first round of low fidelity wireframes.
Style Guide
Persona
From the requirements of the target user, I and another on my team worked on the user persona for the web app. We at first made a persona for a business owner and a persona for an entrepreneur leading a business, but we realized that could be combined into the same persona. The goals of the persona are:
​
-
As a small/medium business owner user with limited knowledge of blockchain crypto, I want to learn more about specific projects to invest in and identify the most suitable blockchain for their solution which is a new blockchain based platform.
-
As an entrepreneur who is looking to develop their own blockchain based platform, I want to compare and to evaluate projects to help select the most suitable crypto.
Persona
User Flow
Looking at the challenge brief, I and another on my team created a mainstream user flow made up of two paths based on the two goals of the persona. One path is for the user to take a quiz to find out different crypto to look at, and the second path is for the user to take a brief overview of the crypto assets and make a decision.
User Flow
Sketches
Once my team did the competitive research, the persona, and the user flows, each person on the team drew a page and created a sketch of three pages for the Dashboard, Discover, and Profile Page. After my team got feedback from the client, we realized that the discover page was similar to the dashboard page and the discover page could be more focused on helping users to identify a specific crypto that meets a certain criteria through a series of quiz questions. We merged the pages into the Find A Crypto and Profile pages for the sketch.
First Round: Dashboard Sketch
First Round: Discover Sketch
First Round: Profile Sketch
Second Round: Find A Crypto Sketch
Second Round: Profile Sketch
Low-Fidelity Wireframes
After we did the sketches, my team moved on to work on the lo-fi wireframes in Figma and created the base skeleton of the design without the actual color and chose a basic font. We then realized in our first round of wireframes that the design was meant for expert users instead of beginner users, so in order to streamline the process, we did another round on wireframes to get the home page to be beginner-friendly and the other pages to be more simple in layout. I mostly worked on the Profile pages, including the information sections and the compare sections.
First Round: Lo-Fi Wireframes
Second Round: Lo-Fi Wireframes
User Research Iteration
Next, my team prepared to test the low-fidelity wireframes, one of our team prepped the test questions, and the rest of us worked on the prototype animation. We reached out to four users and got three users for testing which we recorded in video with permission and in typed notes. My team analyzed the findings and organized them into a written document to present the main and minor feedback from the three test sessions. The main changes we needed to implement:
​
1. We needed to add a plus sign for the boxes in the compare section, add features to the profile sections, add columns in the table for Find A Crypto page, and add back buttons to most of the pages.
Find A Crypto and Profile Pages after Iteration
Beginning of Quiz Pages after Iteration
Middle of Quiz Pages after Iteration
End of Quiz Pages after Iteration
High-Fidelity Prototype
Our team made the changes in the iteration of the wireframes as we added style to the shapes in the pages, changed the fonts, and made layers of color palettes into the shapes, turning it into the high-fidelity prototype. The team decided that we did not have enough time to do another round of user testing, so we focused on refining the prototype. I worked on the flow of the quiz pages and we all helped with the prototype animation between the screens.
Round 1: Profile Pages in Prototype
Round 1: Beginning of Quiz in Prototype
Round 1: Earlier Middle of Quiz in Prototype
Round 1: Later Middle of Quiz in Prototype
Round 1: End of Quiz in Prototype
Round 2: Profile Pages in Prototype
Round 2: Beginning of Quiz in Prototype
Round 2: Earlier Middle of Quiz in Prototype
Round 2: Later Middle of Quiz in Prototype
Round 2: End of Quiz in Prototype
Final Designs
Here is where the prototype can be accessed.
Result & Next Steps
1. While starting this project, I really enjoyed learning more about cryptocurrency and blockchain strategy because it was a new topic for me and I was curious to learn about new technology. I also liked creating web apps that provided me with more space to design and to organize information. Since I was working with a team for the first time, I was excited to get to know other UI/UX Designers and to expand my design knowledge with them.
2. During the project, I feel the team members supported each other and helped each other to get things done in a timely and clear manner. My team and I don't have any major regrets because we used very organized folders and documents to get everything done on time and we communicated very thoroughly on what we needed to get done. While we attempted to get ready for user testing, we struggled with getting users to schedule, so we pushed back the deadline by a week to have enough time to make the hi-fi prototype. Even so, I think we persevered as a team since we finished the whole project by the extended deadline, and we polished a full prototype by the end.