Building from scratch for a crypto startup
Overview
Composite, a NYC-based cryptocurrency startup, made a request to our design team to build a wireframe for their main currency exchange platform website over the period of four weeks.
My Role - UX/UI Designer, UX Researcher, Design Lead, UX Architect
Team & Timeline - Team of 3 in 5 weeks (3 of us for 4 weeks originally, myself later expanded to 5th)
Tools - Figma
Methodologies - Secondary Research, Persona, Sketching, High-fidelity Mockups, Prototyping, User Testing, Next Steps Outline
Process - Design Sprint
Persona
Meet Ilse, a 30-year-old New Yorker who is a quant trader during the day. Due to her daily work, she’s good with numbers but she has never done any kind of crypto-trading.
Design goals
1. Make Decentralized Finance market more accessible to Ilse.
2. Provide a smooth CTA for the one-step process Composite website offers for the vault process, a deposit feature normally taking multiple steps in other websites/apps.
Success Metrics
Total Value Locked (TVL), or how much money users have deposited in the Composite system as a whole
The Initial Sketch of the Landing Page and its Problems
I first conducted a competitive analysis and looked at other DeFi websites such as opyn.co or cap.finance.
Their landing pages had a clear and repetitive CTA buttons. They had a catch phrase in the middle.
With this secondary research in mind, I came up with the initial sketch and conducted first round of user testing. Some issues were identified as following:
I conducted stakeholder interviews and one of them mentioned he liked the color scheme of Robinhood - how the color combination of green and pink is fun and intrigues users to take risks. It was my mistake not to check against the color psychology but I came up with the following wireframe:
Bringing Stakeholders and Designers Together
Over the next few days, I noticed that when we were wasting time, it was due to the lack of a clear project layout. We were often distracted from our main focus, which was to provide an easy solution for the CTA button on the Composite landing page. Thus, even though it was almost the final week of the project, I came up with the wire flow.
Part of the wireflow I drew
The designers and the stakeholders were able to refer back to the wire flow and add comments on it when they had questions which soon uncovered the majority of the miscommunications we had.
Final Product Brainstormed
Our original plan among the three designers was to come up with one final design, yet due to time constraints and personal issues of a designer, we were only able to deliver individual designs.
I was a bit disappointed as I was looking forward to the opportunity to have a sense of how it is to work with other designers, but I had to compromise with our reality.
I went back to the basics.
What problems is Composite trying to solve?
Customers’ ability to save in the DeFi system.
Who is their targeted audience?
Traders who may be newer to the crypto trading experience.
I reminded myself that the key factors of the design I’d build were familiarity and simplicity. For new users who are not accustomed to the crypto market, the app should make them feel welcomed, and it needs to convey a sense of trust and loyalty.
Coming up withe the UI Guideline
The color #3455DA was chosen as blue means trust and loyalty according to color psychology. Orange was chosen as secondary color as it represents confidence and bravery.
Users did not complain about the updated fonts - DM Serif for titles and Roboto for text - during the user testing.
The Final Deliverable
Next Up: User Interviews
The official four-week program had ended with the final presentation of the high-fidelity prototype, but I was reluctant to finish a project without user feedback. Therefore, I asked the stakeholders if I could extend the project to do user interviews for one week. They gladly said yes, and set up two interviews for me. In addition, I recruited three more testers who claimed they were new to the crypto world via Discord channels I was involved in.
I asked each subject to deposit into the vault as they are trying to hedge risk on the Tether. Then, I gave links to the landing page and watched them explore.
2.3 out of 7 on the easiness
The majority of the feedback was on the ‘Connect Wallet’ page.
Connect Wallet page feedbacks
For the overall rating, the app received 2.3 rating out of 7 on average, 1 being easy and 7 being difficult to use. On average, it took 4 minutes and 13 seconds for each user to finish the task.
Key Research Insights
Key learnings of working with remote teammates and clients
Remote team
With two designers and the clients living in ET and living in KST myself, I found that I ended up having meetings around 4am. It was extremely challenging for me to keep this biorhythm for five weeks.
Clients
Working with a startup at which anything could change at any moment was fun, yet extremely challenging. I had to always be ready to shift my design direction – for example, the stakeholder wanted a Robinhood-like color schema one week and a week later provided a UI guideline with nothing like a Robinhood-like color schema. It took a bit of time to adapt, but gradually I got used to it.
Rewarding feeling of leading a design team
Between the first and the second week, I sensed the need for a focal point among the designers and the stakeholders as I felt the misunderstandings between the two parties were not getting any smaller. So, I volunteered to conduct one-on-one interviews with the stakeholders and delivered their stances to the designers, which resolved most of the miscomprehension.
Next Steps
To test whether a visual representation of a ‘Payoff Overview’ section yields better user satisfaction scores
To calculate the TVL and see if it has increased or not
Final Prototype
I’d love to learn how you think about the process and chat with you! Hit me up! :)
