TeleSwap
UX design for a cryptocurrency cross-chain web application
User Interface for TeleSwap
Role
UX Designer, Teleport Technologies
Date
Nov 2022 - March 2023 (5 months)
Team
Sina Ghadri (Web Developer)
Niusha Moshrefi (CEO)
Mahyar Daneshpajooh (CTO)
Tools
Figma, Adobe Illustrator, Adobe Photoshop, Procreate, MIRO, Flaticon
Methods
Requirement Gathering, Competitive Analysis, Userflows, Wireframing, Prototyping, Graphic Design, Usability Testing, User Interviews, Affinity Diagramming
Overview/Context
TeleportDAO is a cross-chain cryptocurrency bridge for instant and secure transfer/exchange of assets between blockchains. The company that developed TeleportDAO wanted to promote a dApp built on top of the TeleportDAO bridge, and I worked on this project as the product designer, in collaboration with the engineering and executive teams.
Over the course of 5 months, we designed the app and a landing page for the same. My work consisted of understanding the app requirements, conceptualizing visual design, and designing and evaluating the app through wireframes, prototypes, and user interviews.
So, what was the problem?
TeleportDAO is a secure, decentralized and capital-efficient competitor to existing validator-based blockchain bridges. As a new bridge in the cryptocurrency market, we needed to attract developers to build their own dApps using TeleportDAO, as well as attract users for our own dApps built on TeleportDAO, eventually marketing TeleportDAO.
To do so, we decided to make a web application for cross-chain asset transfers and exchange, called TeleSwap.
To increase brand visibility and point users to TeleSwap, we also created a landing page, that would inform users about the benefits of TeleSwap, and point them to the app. The design of the landing page is discussed here.
I see, so who was your target demographic?
We had two use cases for TeleportDAO, each with its own target user demographic:
-
Developers who would build their own dApps using TeleportDAO, and
-
Users who would use our dApps built on TeleportDAO
For developers, TeleSwap would primarily be an example of what they could build using TeleportDAO, while for users, TeleSwap would be a functional application to perform cross-chain transfers or exchanges.
So, what was the plan?
Competitive Analysis:
There are many cross-chain transfer/exchange apps existing, for the many protocols in the crypto world. TeleSwap would be modeled similarly, and hence given the high levels of innovation and competition in the cryptocurrency world, it was important to begin by understanding where an app like TeleSwap would fit in under current scenarios, and what more it could offer to users.
I began by shortlisting top 5 competitors who were in the same cross-chain transfer/exchange domain as us, and who were doing successfully since the past 12 months. I then analyzed their application interfaces and user experiences, and below show snapshots highlighting aspects they were good/bad at. I use a framework of Unique/Best/Same/Poor to highlight features that were unique to each of the apps/features they implemented the best/features similar to our plans/features they had failed to implement or implemented poorly.
Competitive Analysis, highlighting Unique (Blue), Best (Green), Same (Yellow), and Poor (Red) aspects implemented by competitor apps
Once we had completed the competitive analysis, we summarized TeleSwap's features through the same four categories. This helped us understand what was most important to implement, and where we could stand out from competition.
Competitive Analysis results, highlighting Unique (Blue), Best (Green), Same (Yellow), and Poor (Red) aspects for TeleSwap
User flows:
Once we had determined the feature list and categorized it through the Unique/Best/Same/Poor framework, we could begin with user flows. Through an iterative design process, I created the user flows based on current apps and the competitive analysis results, with regular feedback from the CEO and CTO.
Below, I show the user flow in part, through an embedded interactive MIRO board that you can zoom in and scroll through.
User flow for TeleSwap, interactive MIRO board
Wireframing:
Once we had established our user flow, I created the app wireframe in Figma (please give them a minute to load if needed), incorporating the various directions and tabs. The wireframes were also evaluated with the executive team through quick iterations, and the final version is below.
TeleSwap app wireframe (interactive)
Visual style:
The branding for TeleportDAO was inspired by the Portal Technology from the TV series Rick and Morty. Thus, to keep the colours similar for TeleSwap, we initially planned to use shades of yellow, blue and green, shown below. Our shades were muted versions as we were aiming for a Dark mode for the website, and our primary and secondary colours were analogous shades of green and blue, with a yellow accent.
We chose a sans serif font Outfit, to embody progress and innovation, as many tech companies do.
Brand board
Prototype:
Once we had finalized the visual design, I began prototyping the app in Figma, again through the same iterative process with the executive team for preliminary feedback.
Desktop landing page wireframe (scrollable)
TeleSwap app prototype (interactive)
User Interviews:
To evaluate the usability and feasibility of the app, we conducted 5 user interviews with diverse participants - 2 were expert crypto app users, 2 had never used cross-chain apps before but were familiar with the technology, and 1 was completely new to the world of cryptocurrency and blockchains.
We used semi-structured interviews coupled with scenarios where we
-
Asked participants about any previous experience with cross-chain apps, and aspects liked/disliked
-
Gave them scenarios asking them to transfer or exchange funds, add liquidity to pools and view their transaction history
-
Asked them about features they liked/disliked about TeleSwap and what we could improve
Overall, users were able to perform all the scenarios without major issues, but highlighted minor points overlooked in the user flow/prototype. These minor fixes were made during the process itself, ensuring improved prototypes for future participants.
Key findings from our interviews were:
-
The user flow overall made sense, and was intuitive as it was similar to most existing apps
-
Participants liked the Transaction History feature that showed them the amount of time left for a transaction to complete
-
Some features like Instant Transfer and Liquidity Pools needed descriptions as they were relatively novel - we added an FAQs section to answer these and other common questions
-
Visual design was overwhelming, there were too many colours - we revamped this by focusing the visual design around one color, green (as it represents wealth and progress)
Modified brand board
Final Prototype:
The final prototype incorporated the new visual design along with changes highlighted through the user interviews. The TeleSwap logo was also recoloured to reflect the new visual design.
TeleSwap app final prototype (interactive)
Logo recolouring for TeleSwap
Oh…sounds good, how did that turn out?
The final prototype along with all other design and graphic assets was passed on to the app developer, and the app was developed and is now live at App.teleswap.xyz!
Screenshot of live app at app.teleswap.xyz
Nice! Who else knows?
The app was launched just last month, so we haven't had time to collect analytics on this yet. However, we've shared news about the app launch on our social networks, and look forward to reporting on usage stats soon!
Cool! Did anything get in the way?
In the crypto world, time is of the essence for new technologies to make their mark. Hence, we were on a tight schedule that meant compressing many stages of design and evaluation into a tiny time period. Also given that Teleport Technologies is a small-scale startup founded in 2022, we were just a small team, with limited access to potential participants for design evaluations.
This meant limited user feedback and quick turnarounds, which we implemented via alternate day check-ins for minor design changes, and closely collaborating internally for design feedback. We also only had one round of user interviews, whereas ideally we would have wanted to evaluate and iterate on the app further, but hopefully that can be done in future iterations.
Hmm, interesting. What’s been your biggest takeaway?
With no previous experience of cryptocurrency or blockchains, this project was a learning opportunity for me to delve into this steadily growing domain. I was lucky to work with a team that provided many resources for me to learn from, and were happy to answer any doubts. Working in close collaboration with the engineering and executive teams also helped the design process, providing different perspectives that could be integrated into the design.
Working in a small team, I was also able to take on broader responsibilites, for instance designing the whole app instead of a part of it, and leading the complete design process from user flows to evaluation, which helped me understand end-to-end industry design cycles.
So, what’s gonna happen next?
We're very happy to have launched the app and website, and so far have seen over $82k USD in assets traded via TeleSwap, and we will continue to monitor usage!
Do check out the TeleSwap app and website!