Project Brief


Design a decentralised encrypted currency exchange platform

BEBTC.COM is a website built for exchanging Cryptocurrency like Bitcoin and Litecoin. It achieves the goal of decentralisation, which is the biggest feature of all the Cryptocurrency. With BEBTC.COM, users don't have to register and have an account to have access to the service. Type in BEBTC.COM, choose a exchange provider, exchange, and get the currency. It is fast, intuitive and safe.


[unex_ce_button id="content_mcscyhvr9,column_content_9glti6uq0" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#003bff" button_border_hover_color="#ffffff" button_link="" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]CHECK THE BEBTC.COM LIVE SITE[/ce_button]

My Responsibilities


A full process design experience

BEBTC.COM is a client project I finished in a Shanghai design consultancy: ARK Design.

Creative Director: Teng Lei 
Project Manager: Zudy Zhu Dan 
UX Director: Dai Yinyi 
Designer: Me

I went through the inspiration, ideation and implementation with the help from the great ARK staff, and was responsible for the UI, UX design.
The project cost 4 weeks to design and was launched in May 2016.
I reached to the developers and had a 3-week iteration process. With the communication, testing, and bug fixing that I and the developer worked as a joint effort, we successfully launched the first decentralised Cryptocurrency exchange website in China. The web site received positive feedback from the growing Cryptocurrency community.


A relaxing moment in ARK Shanghai office

The Challenges


How fast can you get some Bitcoins?

The client from BEBTC.COM reached ARK asking us to create a faster way to introduce people to the Cryptocurrency community. After some research, we found that the biggest barrier lied in the procces is getting some Cryptocurrency. We hope that with the new design, this website can provide a faster exchange experience and actually bring Cryptocurrency to the user who wants to give a try. 

The Process


Learn the cryptal currency system, understand client, know the user by heart.


Understand the rules and tech restraints of Cryptocurrency

Creating the user journy map for both the coin provider and coin seeker

Research synthesis presentation

The Process


Interaction Design

Designing a clear and guided exchage process is how I provide the sense of secure to ther user of a no account system. 
In the interaction design phase,  I created a fast web based prototype to show how  transaction interacts with user, the prototype helped me a lot in terms of communicating how the design works. 

The web prototype focused on the key flow

Interaction design document

The Process


Visual Design

Moving from a concept design to a more solid production ready design is a hard but interesting process. I used to make a lot of design work in Sketch, this is the first time I moved from Sketch to Photoshop to cut all the visual components out for the website and manage the layer and state information in the .PSD file. Developers in the windows environment can understand the design and use file from the file instantly. 

I went through several design interations under the guidance from Teng Lei and our client

A lesson learned: .PSD is perfect for traditional web develpment process. Why? Windows environment+relevent develop tools

Several screens from the project

Design Guideline

The Reflection


From Macro to the Niity-gritty

The project was considered to be an "easy" one. But once all the design job was put one individual's shoulder, it is easy no more. Three lessons from this hard process. 

1. Communication comes first

If there is anything unclear, check it with the client or the creative director. This sounds like a cliche but when you get anxious about all the things you have to do, forget to hear and talk can be possible. 

2. Design for the the real production environment
I used Sketch, the developers use windows computer. I did not find this problem just before our client started to develop. To make the most of design resources, I remake all the design files to fit the developers need. I spent about one day at client site to talk to the client and understand their process. This level of detail is not common from a design consultancy, most of the time the deliverable would be some key screens in key flows. is different from other projects because ARK invested this company and we were the only design resources they had. 

3. Attatch to the goal, not the design
In this project, detail visual design were a part of deliverables as well. I was not fluent in the visual deisgn area but I had to do this. Getting too attatched to the design was my problem. But seeing the power of itteration gave me a better vision of what matters and pushed me move on. 


A picture of me sharing street dance knowledge in ARK office

The Recognition


Great feedback from User, Client


"Fast, simple, safe. BEBTC.COM has become the to-go place when I and my friends want to have some cryptal currency "