Sean Baik — CryptoX

CryptoX is a beginner-friendly cryptocurrency exchange where users of all proficiency and experience levels can easily purchase, sell, and trade digital currencies. This widely compatible platform enables traders to interact with the innovative medium of exchange in an enjoyable manner. CryptoX’s goal is to make digital investing intuitive, secure, and pleasant for all types of users.

The Challenge

Available cryptocurrency exchanges have complex UI’s, cluttered designs, inefficient sign-up processes, and lack of desktop support. Moreover, entry-level traders want to know exactly what they sign up for, and where their money goes.

The Vision

Design an intuitive, secure, and enjoyable onboarding journey for a modern cryptocurrency exchange developed primarily for investors with little to no experience - make crypto fun and accessible for all users.

Week 1

Week 2

Week 3

Week 4

Week 5

Week 6

Synthesize Content

Lo-Fi Wireframing

Usability Testing

Hi-Fi Mockups & Prototyping

Test, Refine, and Launch

phase 01

Understanding the user.

Entry-level crypto investors lack the knowledge to confidently allocate their money securely and worry-free.

To better understand the users I was designing for, I conducted interviews and developed empathy maps as my primary methods of research. This user group closely matched the initial expectations I had, but research also revealed that time and knowledge were not the only obstacles users faced. Other problems included: financial anxiety, insufficient resources, security concerns, and complex UIs.

Key Pain Points

Continuity

Cryptocurrency exchanges are mostly offered as applications for phones. Users need a way to comfortably invest via a desktop.

Ease-of-Use

Available platforms showcase a cluttered UI with too much information for entry-level investors to understand and use.

Accessibility

Many cryptocurrency exchanges have complex user interfaces that make it difficult for people with disabilities to easily navigate.

Experience

Competitors’ platforms do not offer beginner focused features and interfaces, making it difficult for beginners to comfortably start.

Developing user personas.

David Reed

29, R&D Engineer

Primary User

David is a 29-year-old R&D specialist and engineer who lives alone in New York. They work during the day and enjoy the rest of the evening learning new skills. They are passionate about the crypto industry, and are eager to learn and start investing, but find the sign-up process a bit daunting. They wish the onboarding experience was more intuitive.

Rachel Tsu

32, Public Relations Manager

SEcondary User

Rachel is a PR Director based in San Francisco. They are inexperienced with crypto, and are looking for a safe way to invest their money. They wish exchange websites would educate them about the process along the way to alleviate their worries. They hope to be able to find a site in which they can join securely with peace in mind..

Mapping out the journey.

Action

Tasks

Feeling

Opportunity

Choose an online crypto exchange.

Search online.

Choose platform.

Access platform.

Excited to learn and interact with crypto.
‍
Curious about crypto currencies.

Implement strong SEO practices to help users find CryptoX with ease; stand out from the noise.

Browse through benefits and information.

Sign-up bonuses.

User requirements.

Prepare documents.

Happy to see benefits from signing-up.

Anxious about the need for official documents.

Offer competitive sign-up benefits and incentives.
Add easy-to-digest details about required documents.

Initiate sign-up process (onboarding flow).

Click on sign-up CTA.

Input personal info.

Access promo codes.

Eager to begin investing.

Focused to avoid any mistakes.

Keep pages simple, intuitive, and inviting. Add visual cues to make the entire process pleasant and enjoyable.

Submit application and wait for approval.

Provide docuements.

Submit application.

Wait for approval.

Anxious about inputting sensitive information.

Nervous about the approval results.

Reassure users with continuous security and privacy reminders. Implement pre-approval flow for certain users.

Get approved and begin investing.

Open approval mail.

Confirm offer.

Sign-in to portal.

Relieved about positive approval results.

Thrilled to begin investing through new portal.

Design attractive email flows to encourage users to take action post-approval. Create intuitive landing portal.

phase 02

Launching the design.

Laying the foundation.

Low level of interactivity and lack of desktop support were key pain points for users. With that in mind, I developed a sitemap that would not only improve ease-of-use, but also introduce an entirely new desktop crypto exchange experience for all users.

Sketching on paper.

I then sketched out paper wireframes for each main screen, keeping user pain points in mind (ease-of-use, accessibility, experience). The variations of the Home screen as seen on the right focus on enhancing the experience for all users, including those with disabilities. To address accessibility requirements, I opted for a single-column layout with easy to understand visual cues and elements. Taking into consideration that most of our target users are likely to access CryptoX on a variety of different devices, I worked on additional designs that are adapted to diverse screen sizes. This step was taken in order to make sure the site would be fully responsive.

Going digital.

When translating designs from paper to digital, I made sure to put the user front-and-center, basing my digital wireframes on the feedback and observations attained from user research. An easy and intuitive interface allows for users to see and listen to their work within the app, and ensuring navigation works with assistive technologies.

Connecting the dots.

To officially add interactivity, I developed a low-fidelity prototype by connecting all of the screens involved in the primary user flow. Improvements and iterations were made according to the suggestion of peers. I ensured that all of the feedback that was received was taken into consideration, implementing them based on the users' pain points.

Experience the low fidelity prototype

↗

Testing for usability.

An unmoderated, remote usability study was conducted to determine if the main user experience, signing-up for the exchange, was easy for users to complete. The goal was to understand the specific challenges that users might face in the browsing, sign-up, and account creation processes.

Affinity mapping.

Arranging all of the notes taken from the usability tests and breaking them down to similar categories helped uncover common issues that the lo-fi prototype had, and it prepared me for the first round of iteration.

Prioritized insights

Privacy

The Privacy Policy acknowledgement page only includes one option to select with no further information provided for users.

Verification

The account creation and identity verification procedure was only possible with an email address (no phone option).

Visual cues and actionable buttons throughout the interface were not as clear nor attractive as users both expected and wished.

phase 03

Polishing the design.

Create an Account

To give users more flexibility when verifying their identity, I added an input box for their phone number in the account creation page. This provides users an additional way to verify their identity while further protecting their personal data and investment information.

Referring to the insights from the usability study, I made a simple yet effective improvement that would help users gain the comfort they need to confidently navigate through the privacy page: the addition of a secondary button that helps users learn more about CryptoX's policy.

Final Mockups

Screen Size Variations

Connecting the journey.

Desktop Prototype

Experience the high fidelity prototype

↗

Mobile Prototype

Experience the high fidelity prototype

↗

Crafting with intention.

ACCESSIBILITY CONSIDERATIONS

Hierarchy

Clear visual hierarchy was implemented through proper usage of typography, colors, and sizing.

Scan-Friendly

A single-column layout was used to facilitate scanners to read content for users with disabilities.

Landmarks

Landmarks and fixed UI elements were added to help users navigate the interface intuitively.

BRAND DEVELOPMENT

To emphasize the app's simple yet enjoyable interface, I strived to develop a youthful brand identity and design language that conveyed happy emotions for the users. By incorporating light purple, which represents "light-hearted energy", I intended to emit comforting and peaceful emotions to calm the users. On the other hand, a darker shade of purple that symbolizes "ambition & wealth" was incorporated to portray the great returns on the investments our users expect to have.

#5252D8

#A9A9E3

#A798EC

#707070

#BCBCBC

#000000

#FFFFFF

Century Gothic

Bold, 60 px

Century Gothic

Bold, 55 px

Century Gothic

Bold, 50 px

Century Gothic

Bold, 42 px

Title

Century Gothic

Bold, 35 px

Body 1

Avenir

Light, 30 px

Body 2

Century Gothic

Regular, 25 px

The name CryptoX came along by combining the word "crypto", which represents the direct product the platform offers, and the letter "X", which is a shortened version of the word "exchange". Together, the brand CryptoX aims to represent the market as the go-to cryptocurrency exchange platform in a new era of digital investment and trading.

phase 04

Moving forward.

"The process was very easy--I didn't notice that I was done with the sign-up process so quickly."

- Participant from Usability Test

Takeaways

CryptoX’s target users and primary audience expressed that the overall design of the platform was intuitive to navigate, more immersive than just a smartphone app, and enjoyable to use with fun visuals and encouraging CTA buttons. Furthermore, the simplified onboarding process enables users to feel more confident when taking on an entire new financial trek.

Lessons

By making this project come to life and engaging with users via research and studies, I learned that every single component and element that goes into UX design is truly centered around the end users. When the users’ needs are clearly addressed, and their pain points are taken into consideration front-and-center, exceptional designs come to life.

Next Steps

Conduct additional usability studies to examine whether the pain points have been addressed as intended.

Conduct complementary user research to determine new areas of need and additional feature implementation.

Prepare design for hand-off to engineering teams to enter production and prepare for official release to market.