TeleSwap Landing Page
Website design for a cryptocurrency cross-chain application
Landing page 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, Flaticon
Methods
Requirement Gathering, Wireframing, Prototyping, Logo Design, Web Design, Graphic Design, Illustration, Usability Testing, User Interviews
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 lead designer, supported by the engineering and management teams.
Over the course of 5 months, we designed the app and a landing page for the same. My work consisted of conceptualizing the brand identity, creating the product logo and illustrations, designing the web landing page and app, and running user interviews to get feedback on the designs.
So, what was the problem?
The TeleportDAO cross-chain bridge triumphs existing validator-based blockchain bridges in three ways:
-
Secure: Rather than using validators (that add vulnerability to the system), TeleportDAO implements smart contracts, directly connecting different blockchains together.
-
Decentralized: Validator-based bridges can allow censoring of user cross-chain requests - by removing the validators themselves, TeleportDAO offers a truly decentralized solution.
-
Capital-efficient: By tying the security of the protocol to the security of the underlying blockchains, TeleportDAO surpasses the need to stake user collateral, making it capital-efficient.
To enable users to use the TeleportDAO bridge, we needed to make a front-end application enabling cross-chain asset transfers, which we called TeleSwap. We discuss the design of the TeleSwap app here.
To increase brand visibility and point users to TeleSwap, we decided to create a landing page, that would inform users about the benefits of TeleSwap, and point them to the app.
I see, so who was your target demographic?
Our target demographic were people with previous experience and knowledge of cryptocurrency and cross-chain exchanges. We tried to make the app and landing page intuitive enough for new users as well, but focused on attracting current users of competitor apps.
So, what was the plan?
Stakeholder interviews:
I began by interviewing the CEO and CTO to understand the requirements and aims of the landing page. Through unstructured interviews and analyzing competitor websites, we narrowed down key goals of the landing page:
-
User conversion - CTA to direct landing page viewers to the TeleSwap app
-
Showcase USP - key features and advantages of TeleSwap over similar apps
-
Provide a sense of Security - show investors and auditors backing the app to lend credibility and authenticity
In addition, we also wanted to increase user engagement with TeleportDAO's social media and Discord, as well as point other developers to the bridge documentation. These became our secondary goals.
Wireframing:
I created desktop and mobile wireframes in Figma (please give them a minute to load if needed), incorporating the goals through different sections on the page (highlighted in the wireframe). For the mobile version, I also tried to keep it compact given screen size, hence reduced images.
Desktop landing page wireframe (scrollable)
Mobile landing page wireframe (scrollable)
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:
The prototype is shown below, with the colours and content added, along with custom graphics that were either created by me for TeleSwap, or sourced from Flaticon.
Desktop landing page wireframe (scrollable)
Desktop landing page prototype (scrollable)
Mobile landing page prototype (scrollable)
User Feedback:
We got feedback on the mobile and desktop prototypes from the rest of the team before we began development. Key points brought up were:
-
The CTA was impactful - users noted they were immediately drawn to the Enter App buttons, but noted redundancy
-
Users liked how the key features were shown - not too much text, and they liked the graphics
-
The Investors and Auditors section made them feel the site and app were credible and secure
-
Users did not like the color scheme, finding it 'too colourful' and 'unserious', but liked the Dark mode
Coupling this with feedback received regarding the colour scheme for the TeleSwap app, we decided to revamp the visual design, choosing a minimal monochrome theme this time. The new visual design is shown below.
Modified brand board
Final Prototype:
The final prototype incorporated the new visual design across the mobile and desktop versions, including graphics and icons. I also changed the background video to a static image to speed up loading times. The TeleSwap logo was also recoloured to reflect the new visual design.
Desktop landing page prototype (scrollable)
Mobile landing page prototype (scrollable)
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 web developer, and the site was developed and is now live at Teleswap.xyz!
Embedded live site (scrollable)
Nice! Who else knows?
The website was launched just last month, so we haven't had time to collect analytics on this yet. However, we've shared news about the site 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 feedback and quick turnarounds, which we implemented via alternate day check-ins for minor design changes, and closely collaborating internally for design feedback.
Hmm, interesting. What’s been your biggest takeaway?
Getting to work on this project as I was just out of academia gave me key insights on the difference between academic and industry projects. While academic projects I had worked on had much longer timelines, greater scope, and very different goals, through this industry project I was able to learn how to adapt design methodologies to smaller timelines and quantifiable goals.
Working with a small team also allowed me to take on larger and broader responsibilities, including web, visual, and graphic design, through which I could hone multiple skills!
So, what’s gonna happen next?
Not much, we're very happy to have launched the app and website, and will continue to monitor usage!
Do check out the TeleSwap app and website!