Introduction
“How fast can you work?”
Designing an app in 3 days
Goal
In order to test BCDEX protocol and showcase its capabilities, a demo app was put in place. The team also decided to participate to the Hong Kong Web3.0 Demo Day to test people’s interest and find potential investors.
The existing app, however, looked rushed and cumbersome. It certainly wouldn't have made a good impression at the event. Having previously worked together, the BCDEX team reached out hoping to polish it.
Problem
With the Hong Kong Web3.0 Demo Day 2 weeks away, only 3 days were set aside for the design stage. It was necessary to come up with a visual style that had the most impact with the least effort, while being quick to develop. After a quick back-and forth, we opted for a minimalistic black and white design. Elegant and trustworthy. There was simply no time for UI wizardry like gradients, shadows etc.
The existing app also assumed that users already knew how to use it, resulting in the users feeling lost, confused and wondering what it was all about. Despite not having time for a complete overhaul, we designed some small improvements to make the UX less clunky. Simple things like visual hierarchy, proximity, labels and tooltips, can do wonders.
Result
Despite not winning the demo day, the demo app managed to peek the crowd’s curiosity and to initiate some interesting conversations with VCs.
The existing interface lacked consistency and general polish. It was failing to convey a sense of safety and security, much needed in DeFi.
Success and Error Messages
2 columns layout on large devices
Single column layout on mobile devices
QR code scanning
While the new UI was being developed, there was time to design a banner for the event.
Brand Design
A Logo with an Appetite
The idea
The team started with an idea already in mind: as Pac-Man has a sweet tooth for 2D pixelated ghosts, so Bitcoin (with the help of BCDEX) chips away Ethereum’s DeFi marketshare.
Concept A
Following the Pac-Man suggestion, we tried incorporating the BTC logo and Pac-Man. The result was the head of a bird eating ERC-20 tokens, represented by a simplified version of the Ethereum logo.
Concept B
A continuous line creates a shape inspired by the bitcoin logo, modified to integrate two arrows representing the nature of the protocol: converting assets to (and from) the Bitcoin network.
Concept C
In this minimalistic design, the bitcoin logo is merged with an item that is familiar to all traders: candlesticks. Since these graphical representations are an essential part of most exchanges, just by watching the logo the viewer can grasp what is the BCDEX protocol all about. Sometimes simple things work best.
Final look
The team particularly liked concept A, so Pac-Man remained alive. Also, we decided to save the planet by recycling the black and white look of the demo app and using it for the protocol’s brand as well. After a bit of fine tuning, here's the final result.
Landing page design
One Page, No Extra Lives Needed
Intro
With the dApp and logo updated, it was now time to move on to the landing page. The team already had a landing page but, despite showcasing the demo app, it was failing to present the star of the show: the underlying protocol.
Goal
The goal was to have a single promotional page that would promote the protocol to investors, attract developers and market makers, explain the protocol to general DeFi users and get visitors to try the demo app.
Challenges
- Lack of copy. Due to the early stage of the project there was very little marketing material or documentation that could be used for the landing page
- One page, multiple targets: general Defi users, market makers, developers, investors
- One page, 2 products: protocol and demo app
Result
We divided the page in logical sections following a specific sequence. Each section targeted a specific user group and had its own call to action (CTA). Copywriting was also designed to be simple, interesting and effective.
Infographics help explaining how the protocol works
Page divided in logical sections, each with a specific goal.
Simple and evocative copywriting
