Fin-tech Corporate Web Design – XXL | UI UX Designer

Fin-tech Corporate Web Design

posted in: Insights, UX | 0

Keyway was an early-stage finTech startup established in Oct 2016. They reached out to me to design their corporate website without a concrete vision of their branding.


Keyway Capital LTD Finance Web Design Proposal,
Frontend Implementation Guide
Jul 2017

My role in this project was to provide a design proposal for Keyway’s new company website and co-work with an engineer to oversee the implementation till launch.

Since the primary purpose of this website was brand communication, I conducted some industry research and came up with three proposals to explore the visual directions with my client.

Proposal A was young and energetic focusing on professional teamwork. The concept of proposal B was tailor-made financial solutions featuring black and white business style background images. Proposal C used red and blue as the theme color which came from the client’s initial preference.

During my first round presentation, the client was leaning toward proposal B. They were surprised to see this direction uncovered their expectations of being a more high-end financial consulting firm. ( Visit here to see the three proposals)

A Great 1st Impression

After the first presentation, I worked with the client closely to come up with a company slogan “千锤百炼,惠聚于此” / “We try our best to make every promise come true.” to represent their brand vision.

The Chinese slogan means our products are thoroughly tempered, just like good steel. So I chose different variations of lava and steelmaking images as the first screen header image in order to provide a great first impression. They finally picked this one which visualized their company motto and also left enough negative space to highlight the slogans.

Iconify FinTech

With a deeper understanding of my client’s services, I found that their core competitiveness is their technology. They use an in-house developed platform to do quantitative analysis and asset management. To emphasize this core competitiveness, four SVG icons were designed to represent the quantitative analysis, asset management, innovation, and fin-tech. What’s more, a stoke-by-stoke SVG animation is also assigned to these icons to construct a brand image of high technology.

Responsive Layout

To make the visual hierarchy neat and clear, I designed the website with a 12-column 960-grid system. Check here to view the grid on the index. The mobile view used one to two columns and collapsed menu items. Check here to view the mobile view design. You can also visit to see the final outcome or visit here to view the whole design proposal.

Dragonce Circular PreviewDragonce Circular Preview