#4 Internal Engagement
Overview
Throughout the branding project, I extended my efforts beyond external-facing design tasks to also contribute to internal initiatives. My aim was to ensure alignment in the brand image of KINTO across all facets of the organization.
Design Process
Beyond digital efforts, I translated the subscription flow into easily understandable print materials using timelines. Additionally, I developed video content tailored for global internal stakeholders to elucidate the development and services offered by KINTO Japan. Furthermore, I utilised motion graphics to articulate the intricate workings of KINTO's backend analysis platform during global summits.
By actively engaging with internal stakeholders and designing materials for internal communication, I played a pivotal role in fostering a consistent and unified brand identity within the company. This internal alignment is vital for reinforcing the brand's values and objectives among employees, ultimately contributing to a cohesive brand experience for both internal and external stakeholders.
Significantly increased application contracts
from 30,000 to
52,000
by Q3 of 2022
#3 Brand Progression
Overview
I embraced risks and learned through trials and errors in this fast-paced e-commerce environment, often facing tight schedules and limited budgets. Whilst the design process initially followed a top-down approach, I soon realised that many issues like the absence of a design system and a clear brand position. I played a key role in shaping the brand in the rebranding team, taking a bottom-up approach to align the entire company.
Design Process
After identifying the brand archetypes as a fusion of "Everyman," "Explorer," "Jester," and the originality of "Sage" from Toyota, I focused on integrating the "Everyman" archetype into my UI design by utilising timeline, components, infographics. This helped establish cohesiveness among all car models and created consistency across all platforms, resulting in a sleek and minimalistic design approach that was both smart and effective. Other aspects of the archetypes were reflected in the service itself.
Reflection
Through this experience, again I deeply felt the significance of brand strategy and design in shaping the customer journey for KINTO users. I came to realize that not all elements of a brand need to manifest visually or superficially; often, the most significant impact is felt through the brand's actions and behaviors. This insight underscored the importance of aligning every aspect of the brand, both in its visual representation and its operational execution, to create a cohesive and authentic brand experience for our users.
2.2 A/B Testing
For social media platforms, we conducted A/B testing on web banners in LINE Messenger. The aim was to determine which design was more appealing and what time garnered the most inspiration and click rates. The results showed that users preferred photo-centric designs over graphical web banners, and peak engagement times were around 17:30-18:00 and 21:00-22:00, the golden hours after work. This data guided release timing of the web banners and my decisions to enhance better UX and user-centric designs.
2.3 Interactive Contents
Unlike the previous method of pouring out all the information, I adopted an approach of leveraging social media platforms for interactive communication like personal quizzes. This strategy aims to spark interest in our service by allowing users to discover what suits them best. By tracking user data, we can provide a more dynamic user experience with KINTO.
By offering interactive content such as quizzes, I aimed to make an enjoyable experience for users whilst gaining valuable insights into their preferences and behaviours. Analysing this data enables me to tailor better design and messaging to meet their needs and interests. This data-driven approach allows for a more personalised and engaging user experience.
Challenges
-
The shortage of lifestyle photos featuring Toyota cars limited photo-based storytelling design.
-
Limited front-end developer resources restricted UI motion and dynamic style implementation.
Reflection
Starting with homepage discussions, I became more proactive in the redesign. Though challenging to encapsulate the brand image, I shifted focus to Gen Z through unconventional design, aiming for tidiness. However, I desired more collaboration with front-end developers for varied perspectives beyond the creative aspect. Despite emphasising the Jester archetype, this process ignited my passion for brand design, leading to the formation of a rebranding team to refine brand strategy further.
Design process
-
Prioritised customers' needs and KINTO's objectives in reconstructing the page.
-
Developed user flow and wireframe for the contents based on these priorities.
-
Redesigned the header menu to improve navigation.
-
Created new key visuals for the carousel, limiting them to a maximum of 3 to reduce clutter
-
Utilise the characters and illustration to narrate the services
-
Adopted vibrant colour palettes to appeal to the Gen Z demographic.
-
Incorporated shape dividers to create a dynamic flow and reduce the need for complex UI motion development.
-
Enhanced copywriting to improve SEO effectiveness.
#2 UI/UX Revamp
2.1 Homepage Revamp
Before our branding team was established, I recognised issues with the homepage design. Proactively, I shared these concerns with my manager, leading to the formation of a small team. Together, we analysed research and data, discussed layout options, and crafted personas. Subsequently, discussions with the CEO resulted in a decision to revamp the homepage, targeting Generation Z with a more engaging and youthful design. I became the designer of the homepage revamp.
Aim
Our goals included refocusing on Generation Z, enhancing UI/UX, simplifying information, revitalising KINTO's appeal, and reducing the website bounce rate, whilst also gathering user engagement data for analysis. My manager was particularly keen on emphasising the joy of mobility in the design, establishing a clear distinction between KINTO and the traditional car wholesale industry.
1.2 Expansion
The illustrations I crafted and their integration into the designs received widespread positive feedback within the company. The characters resonated deeply with everyone, fostering a sense of attachment and connection. Building on the feedback, my manager, Creative Director suggested adding a small joyful character to serve as a supportive intermediary, facilitating better communication between customers.
Design Process
I created a character named KOBITO (elf), drawing inspiration from KINTO's name and logo (the flying nimbus) to serve as the communication medium for storytelling KINTO's services. It embodies the attributes of Jester archetype.
Later, we conducted click-through rate and conversion rate tests to track visitors' behaviour through advertisement banners to the website, utilising KOBITO. We constructed the persona, citing examples of users concern, which were used as theme for the web content. I integrated KOBITO with the copy to motivate users to engage more deeply with KINTO's services.
Initially, the design and characters were flat. To enhance the depth of the design, I animated the 2D KOBITO. The animations were exported into Lottie format to reduce page loading times and improve UX. The UI remained simple and straightforward to effectively deliver the service content.
When designing mobile app icon...
My design decision for WARIKAN KINTO, a letterform logo combining Japanese characters and the KINTO logo itself, was to incorporate a car symbol. This addition ensures that users can intuitively recognise the app's association with cars.
Initially I designed symbols for 4 types of cars (Raize, Yaris, Crown & Corolla) with KINTO brand colour. Upon review, the CEO selected Corolla. Next, I simplified the icon by integrating the letters into the logo's shape and tested with the screen, ensuring the symbol is distinctive and memorable.
Mobile App
Whilst I wasn't directly involved in the UI/UX process due to the outsourcing of the WARIKAN KINTO app's design and development, I designed extra illustrations to enhance the overall user experience and maintain consistency across the platform such as walkthrough and help screens.
Specification change
Originally, I used illustrations for the registration process flow. But with changes to accommodate both existing KINTO ONE users and non-users, I redesigned the layout.
UX: I introduced tags for segmentation, directing users and non-users to their respective registration instructions. Additionally, I incorporated a horizontal scrolling timeline to clearly outline each step to avoid the content being too long before the CTA button.
UI: I prioritised simplicity to facilitate a quick and straightforward registration process. As a result, I opted for a minimalist design without illustrations.
#1 EMOTIONAL DESIGN
1.1 WARIKAN KINTO project
WARIKAN KINTO is a P2P car pooling and car sharing service featuring multifunctional cost split on the mobile app.
Approach
I drew design insights from the the targeted Z generation users, guiding design decisions. I infused emotionally engaging design with characters simulating scenarios to evoke affinity. The characters' communication aimed to be friendly and helpful, enhancing the user experience.
When designing the landing page...
-
I initially laid out the content to ensure it was easy to understand and readable.
-
I created two main characters with simple lines and colours.
-
I decided to use an SUV for the illustration as the car model suited the theme of this car sharing.
-
I immersed the illustration with a realistic mobile frame to metaphor KINTO's value of "Breakthrough" for the key visual.
-
Then I designed an additional sub character to complement the concept of car sharing.
-
I positioned the characters as friends to both the users and setting, assisting without overwhelming the information.
-
Overall, I designed the UI in a simple and clean way to enhance readability.
Old Designs
Background
KINTO operates in a highly dynamic and fast-paced environment, with services that undergo frequent updates and changes. As I entered the company, I observed the complexity of KINTO's offerings reflected in the website's design.
Pains
The website was cluttered with web banners and text, creating an overly informative yet chaotic experience for users. The lack of a clear focal point made navigation difficult, resulting in a high bounce rate and a poor brand image. Additionally, the design lacked cohesion, further worsen the user experience issues.
Furthermore, other teams prioritised quantity over quality, often cramming excessive information into the website with a hard-sell approach. This undervaluation of design made it challenging for designers to advocate for user-centric design principles.
Put lots of effort
At that time, the rebranding team had not yet been established. As a lead designer in the team, I played a pivotal role in enhancing UI/UX, key visuals, page revamping, digital materials, and motion media to create a more user-friendly and visually appealing website, and eventually worked on branding.
KINTO Design Projects
KINTO from Toyota provides a B2C MaaS solutions, offering a wide range of mobility services, including subscriptions, car pooling, after-services, outing experience programs, mobility apps, and more via ecommerce.
Role
Digital Design | UI/UX | Web & Mobile App Design | Print Design | Illustration | Motion Graphics | Art Direction
Duration
1 and a half years