Token Flex

Project Overview

The TokenFlex website, developed for Token Financial Technologies, a subsidiary of Koç Group, promotes TokenFlex, a digital meal card solution. The site’s primary goal was to effectively showcase TokenFlex’s benefits, such as cost efficiency and employee satisfaction, to corporate clients. Designed with a responsive layout, the website ensures optimal usability across devices. A clear visual hierarchy and strategic content structure enhance user engagement and navigation.

Project type: UX/UI, Responsive

Case study timing: 3 Week

Role: UX/UI Designer

Sayfa sayısı: 25+

Tools: FIGMA, Photoshop, Zeplin

Problem

TokenFlex is a digital meal card solution developed by Token Financial Technologies, a subsidiary of the Koç Group. However, the digital meal card market is highly competitive, dominated by well-established players with strong brand recognition and long-standing customer loyalty. As a newcomer to the market, TokenFlex faces the challenge of differentiating itself and effectively communicating its advantages to corporate clients. In this context, designing a user-friendly and impactful website is crucial to building awareness and establishing trust in a competitive landscape.

Project Goal

The primary goal of the TokenFlex website is to create a digital presence that sets it apart from competitors in the highly competitive digital meal card market. By clearly showcasing TokenFlex's unique advantages, such as cost efficiency and employee satisfaction, the website aims to appeal to corporate clients effectively. Additionally, as a subsidiary of the prestigious Koç Group, the website will emphasize the strength and credibility of the parent company. Highlighting the association with Koç Group is intended to reinforce brand trust and foster customer loyalty, leveraging the group's reputation for reliability and excellence.

Project Plan

The project began with an in-depth benchmark analysis of competitors and industry leaders in the digital meal card market to identify key trends, successful design elements, and strategies that would help TokenFlex stand out. Based on these insights, a moodboard was created to establish the website’s visual and thematic direction, reflecting the desired brand identity and emphasizing TokenFlex’s unique advantages and its association with the Koç Group. Following this, the tailored design process commenced, focusing on creating a responsive, user-friendly website that aligns with TokenFlex’s corporate goals while effectively showcasing its benefits.

Homepage

A white background was used in the header area to create contrast with the slider structure, making the header more prominent.
To facilitate users starting the application process, the Application Form area was separated with a background color aligned with the corporate identity and positioned in a visually striking manner.
For mobile usage, the logo and hamburger menu icon were emphasized by being separated from the slider visual area with a background in the brand's color.
Since users navigate the site through the hamburger menu, this area was designed to be tappable and positioned on the right side, where research shows it is easiest for users to access with their fingers.
To ensure users can easily access navigation from any point on the site, the header structure was positioned as sticky.
The brand colors and the rounded design elements from the homepage were also applied to the hamburger menu to maintain design consistency.
Informational sections were enhanced with visuals and iconic representations to improve user comprehension.
To present information for two different target audiences on a single screen, icons were highlighted, and a more compact structure was implemented to differentiate these sections.
A banner was added to the homepage flow to highlight key information.
To contribute to brand recognition, this area redirects to the Token corporate website under the "About Us" heading.

Application Form

The application form was designed to provide a seamless and user-friendly experience. To cater to different business types, the options "I Have a Restaurant" and "I Have a Business" were implemented in a tab structure, allowing users to easily select their category while maintaining equal visual hierarchy.

To simplify the selection process, the company type field was distinguished with a radio button design, visually setting it apart from other form elements for better usability.

Specific fields were created for standardized information, such as Tax Identification Numbers (VKN), ensuring data entry is clear and structured.

Onboarding

The overall design language of the site maintained a spacious and airy structure by using large visuals and bold text elements.

The options "I Have a Business" and "I Have a Workplace" were supported with icons to appeal to the user's visual perception.

Contact Us

The form structure for users who want to get in touch was positioned at the top of the page for immediate visibility.

Contact information was presented alongside icons, creating a clear distinction and enhancing usability. A large map was incorporated to make it easier for users to access location details.