Gotyme Website

A banking website built with the purpose of Awareness, Information, and Sales & Conversion (encouraging users from browsing information on the website to using the bank's services by downloading the mobile app).

Project Type:
Duration:
Role:
Tools:

UI, Individual project
1 month
UI Designer

Where’s the inspiration?

I started this project to apply for a UX/UI Design position at Tyme Vietnam, but unfortunately, the position was closed by the time I finished. Still waiting for another chance :)
After stalking, I discovered that the Gotyme app has won many international design awards, and the product design team is based in HCMC, Vietnam. As a potential user of a neo-bank, I'm excited to experience this app in reality. As a Vietnamese UX/UI designer, I feel proud of them :)
I also came across a video clip from Vietcetera featuring Mr. Minh Le, a representative of Tyme Vietnam, discussing the bank’s approach to the Vietnamese market. That was pretty interesting for me :)

Target User

Demographics:

Residents living in urban areas of Vietnam, aged 25 - 35
“Henrys” type (High Earners Not Rich Yet)
Tech-savvy

Problem:

They demand a digital-only bank offering swift card issuance, rapid international transfers, and competitive deposit rates.

Needs:

Prioritize convenience, efficiency, flexibility in financial services.

From a social post

This user flow is based on the scenario where, once a marketing campaign starts on social media, users may become interested through posts (e.g., on Facebook) and begin their discovery path.

Information architecture

The information architecture (IA) was built with detailed sections on each page. This helped me ensure I didn't miss or forget important information.

Moodboard

Including the brand’s assets such as the logo, colors, and images. Moreover, I collected some styles that I'll follow.

Wireframe

I created low-fidelity wireframes on Visily. The purpose of this phase is to establish the content flow for the website before proceeding to design. My preferred framework for this is AIDA: Attention, Interest, Desire, & Action.

Typography

I used Urbanist for both the display and body text in this project.

Color

Blue #00E5E2 is the accent (brand) color. I also have neutral and semantic colors. Besides the solid colors, alpha colors helped make the interface more subtle in some cases.

Iconography

Meet my favorite set of simply beautiful open-source icons: the Feather Icons pack.

Components

My favorite approach in this realm is "Atomic Design." It begins with the smallest pieces—atoms—and expands into molecules, organisms, templates, and pages. In this project, however, I've only reached the organisms stage.