designer. thinker. programmer.
new-cover-4.jpg

Visual & UX Design for Blockchain Startup

p01.jpg
 

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)

 
 

Tools

Sketch, Invision, Zeplin, Adobe Illustrator, XMind

Team

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.

 
 

Branding

 

Timeline

p02.jpg

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

 
p03.jpg
 
 
 

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

 
p05-2.jpg
 

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.

 
p06.jpg
 

Design Process

 
 
 

Brainstorm & Collect Feedback from Team:

p07.jpg
 
 

Refine Design (Digitally):

p09.jpg
 
 
 
 

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.

 
p10.jpg
p11.jpg
 
 

Website Design

 

Research Process

 

Analyze existing blockchain company websites

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

 
p14.jpg
 

② Propose site map for MakeCents

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

 
p15.jpg

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.

 
web-sketch-1.jpg
 

② Revise content and layout design

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

 
web-sketch-2.jpg
 

Create visual design

 
web-visual.jpg
 
 
 

④ Fine-tune details in HTML/CSS

full-page-s.jpg
 
 
 
 

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:

LogBackIntotheApp.jpg
 
 

Redesigned customer app UI:

 

Landing Page

User Account and Payment history

mkct-app-2.jpg
 

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.

 
mkct-app-3.jpg