Cerberus Cryptoexchange Responsive Website
PROJECT TYPE | UX Case Study
THE PROMPT
Create a balance withdrawal flow for a cryptocurrency exchange
THE SOLUTION
Cerberus is the latest and greatest cryptocurrency exchange and wallet, boasting tighter security than any other exchange on the market. Do trades, manage your portfolio, transfer funds in a breeze with an easy-to-use interface that seamlessly moves from mobile to desktop so you can take it anywhere.
Considering current regulatory processes in place regarding exchanges of any kind and the volatile nature of cryptocurrency, prevent the management of wallets along with an exchange. This was a fun hypothetical project to combine the two in one platform.
My strategy for the app:
Create a one stop shop for all of a user’s needs for handling their crypto assets
Create the cross functionality of a crypto wallet and exchange
Make the app enjoyable to use
PROJECT DURATION
4 Weeks
October 2021 - November 2021
Here you can view the high-fidelity prototype using Adobe XD
PROJECT ROLE(S)
UX Designer
Paper + Digital Wireframing; Design Iteration; Low + High Fidelity Prototyping
UX Researcher
Conducting Interviews and Usability Studies
Visual Designer
UI Design
SOFTWARE USED
SUMMARY + PAIN POINTS
One primary group of users I identified through my research were of course crypto traders. I was able to conduct interviews to assess how I wanted to design my hypothetical exchange wallet. Below describes the foundation of my crypto exchange and wallet mesh concept.
SCAMS AND HACKERS
As cryptocurrency coins and tokens become more and more prevalent in today’s markets, scams and hacker attacks become more frequent, gaining access to obtain keys to wallets on various exchanges or sending false links for crypto wallets, running off with small and large investments.
UNDEPENDABLE SECURITY
Cryptocurrency holdings aren’t protected in the same way as money in banks or traditional central institutions, they end up having vast fortunes and are ripe for becoming targets and the user potentially can lose all of their investments. Furthermore, exchanges may also stop you from being able to access your invested crypto entirely.
TIGHTENING REGULATIONS
Because cryptocurrencies are often part of an investment contract, the Securities and Exchange Commission has authority to regulate them even further. Fear of furthering regulations may stop crypto use as a means of exchange or payments. Moving over to decentralized finance platforms may relieve some of the pressure.
PERSONA | ROBERT
Robert Is a cryptocurrency investor and software engineer, who needs a trusted and secure cryptocurrency exchange because they don’t want to be susceptible to hacker and scam attacks.
SITEMAP
Mapping out the sitemap showed that Robert could still perform his basic task of completing a withdrawal from his account on the exchange and if he so chooses, move the funds into his digital wallet, while also knowing that every transaction was encrypted and moved with the tightest security.
PAPER WIREFRAMES
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. I wanted to make sure that my persona, Robert, would still be able to make that withdrawal. Utilizing the site map I previously created helped guide me through this process.
DIGITAL WIREFRAMES
I needed to make sure that each web page for desktop could easily format into a mobile design. Using the paper wireframes, I created a modular design for each section of the web page.
LOW-FIDELITY PROTOTYPE
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to direct users to utilizing the withdrawal feature by introducing a reminder feature that gave clues as to what to do next. Within the context of the website, the users can set reminders for themselves so that next time they log in they can perform the various tasks they set out to do, managing, trading, exchanges, orders, transfers, and withdrawals.
USABILITY STUDY | FINDINGS
I conducted a single round of remote moderated usability studies with 5 participants, with each interview lasting between 7-15 minutes. Findings from this first study helped guide the designs from low to high fidelity prototype.
STUDY 1
Users wanted to see sample data in the low fidelity design, so that they may better understand what they were looking at.
Users were confused as to what the various placeholders were.
BEFORE & AFTER USABILITY STUDY 1
Early designs did allow for some customization, but after the usability studies, I decided to start adding color and icons to address the new pain points. Exchanges and various wallets display the same information granted in different presentations and UI. I made mine in a more progressive styling, utilizing the popularity of a darker layout and using complementary colors of blue and orange, which also fall into accessible color ranges for those users that have varying degrees of color blindness.
KEY MOCKUPS
KEY MOCKUPS | SCREEN SIZE VARIATIONS
HIGH-FIDELITY PROTOTYPE
The high-fidelity prototype showcases high levels of visual and organizational principles, while meeting users needs of placing orders and exchanges of various crypto currencies and tokens, managing their wallet and profile, and conducting transfers and withdrawals.
ACCESSIBILITY CONSIDERATIONS
1
Detailed imagery helps all users better understand each section of the app.
2
Large buttons that change color when hovered over or selected makes flowing through the app an enjoyable experience.
3
Dark layout with light text creates a look that’s sleek yet easy on the eyes.
LESSONS LEARNED + NEXT STEPS
During this project, I learned just a bit more about the world of cryptocurrency. I invested hours of time learning the ins and outs of how crypto works having no prior insight into how it actually functions. Now I currently have some knowledge but still, its a very confusing subject. The website provided a very barebones look at what a cryptocurrency exchange and wallet could feel like. In the end, users were somewhat pleased with what details they could see but ultimately wanted more from the low-fidelity prototype.
“This seems like it could be interesting. Can’t really tell. Would like to see it again when it’s all filled out.”
With this project, I learned the importance of UX research and usability studies. With each study conducted, I will be able to continue to improve and iterate on my design until I meet the needs of my users. Below are the take aways and next steps in my UX design process:
1
Conduct another round of usability studies to determine if color choices and sample information make it easier to understand each section of the app.
2
Build out more sections of the app, such as the profile section and creating a identity verification simulator as shown in the sitemap.
3
Create and test more screen size variations for mobile for each page of the website to test its responsiveness