designer. thinker. programmer.

Visual & UX Design for Blockchain Startup


Project Goal

To design the branding and official website for MakeCents, a Blockchain startup for mobile payment

My Role

Visual, UI and Web Design Intern (Spring 2018)



Sketch, Invision, Zeplin, Adobe Illustrator, XMind


Myself, another design Intern, two full stack developers, and two android developers


Who Are the Users?

Unlike many Blockchain companies out there, MakeCents is at the same time a distributed ledger network for software developers to use, and a consumer-facing application for users to create account, store cash on blockchain network, and sent/receive payments at point of sale.

Company Background

MakeCents LLC is a tech start-up company. It builds on top of Blockchain technology and introduces a new type of mobile payment application that allow users to store and transfer their cash through a decentralized, secure and efficient network.






Research Process


Interview Founders and the Team:

We created a questionnaire to ask the whole team about the key aspects of MakeCents as a company and as a product/service. Based on the feedback, we identified keywords to summarize MakeCents's Vision, Strategy, Technology, and Product


Design Survey 1: Blockchain Apps

We picked 7 blockchain startups whose branding were well-done, and analyzed their attributes according to key aspects including Value Proposition, Function, Audience and Visual Style


Design Survey 2: Consumer Apps

Unlike other blockchain products, MakeCents is facing everyday consumers. Therefore, the visual language should express not only "high-tech", but also "user-friendliness".

We also found design inspirations based on the keywords that we gathered earlier.


Design Process


Brainstorm & Collect Feedback from Team:


Refine Design (Digitally):


Finalize Design for Different Platforms:

We fine-tuned the logo details in vector drawing, and defined the color scheme by comparing a number of existing payment-related branding designs. 

The typeface of "MakeCents" and "MakeCents Foundation" is also customized, by deriving from Open Sans and using rounded edges to appear more consumer-friendly.


Website Design


Research Process


Analyze existing blockchain company websites

To understand how their site architecture helps to introduce the various blockchain products/services


② Propose site map for MakeCents

Identify the key components of MakeCents as a company and as a product


Design Process


Organize Content and Design Layout 

I sorted out the main aspects that should be covered by MakeCents' ICO website, and created a mock-up of the web layout, in order to effectively communicate with the product manager.


② Revise content and layout design

Based on the feedback ( in regards to current progress of development and copy-writing), update the content and layout.


Create visual design


④ Fine-tune details in HTML/CSS


Customer App Re-design

Base on the new branding of MakeCents, and as the new Android features are coming out, I redesigned the customer app along with an updated style guide.


Previous customer app UI:


Redesigned customer app UI:


Landing Page

User Account and Payment history


Assets and Style Guide

I updated the entire style guide (with commends to inform developers about where to apply) for the current and upcoming customer app features.