Ingkle
Redesign a website to enhance customer retention and revenue
Project Overview
I worked at Ingkle, an industrial IoT company specializing in solutions for manufacturing and environmental sectors worldwide, as a Product Designer. I led the redesign of the company website to reflect recent updates, enhance credibility, and support global expansion. The primary goal was to create a user-centric experience tailored to the needs of target users, including IT representatives of manufacturers, PLC engineers, sales agents in manufacturing and facilities, and business development officers seeking partnerships. Collaborating closely with stakeholders, I ensured the design aligned with the company’s evolving identity and global objectives, successfully delivering a polished website redesign.
My Roles
Reconstructed the information architecture to enhance navigation clarity and content organization.
Designed intuitive user interfaces, progressing from low-fidelity wireframes to high-fidelity prototypes.
Outcome & Impact
20%
increase in conversion rate
30%
increase in return visitor rate
16
Screens
Info
Client
INGKLE inc.
Timeline
April 2023 - June 2023
Team
2 Product Designers (including me)
1 Project Manager
Contribution
Information Architecture
Design System
UI Design
Prototyping
Wireframing
Goal
Redesign the website to boost sales leads & improve user experience
Task 1
Enhance CTA Buttons to guide user actions
Problem
Insufficient Call-to-Action buttons reduce user engagement, making it difficult for users to navigate the site or complete desired actions effectively
The lack of visible call-to-action buttons led to decreased user engagement and higher bounce rates, highlighting the need to improve the website’s navigation and action prompts.
Approach
Repeatedly added visually prominent CTA buttons across the website to drive desired user behaviors
The primary goal of the website is to encourage users to take action. To achieve this, we strategically placed CTA buttons throughout the site, ensuring users could easily identify and engage with them to complete desired actions.
Output
Final Screen for Home Page & Product Page
Task 2
Reconstruct the information architecture to streamline navigation
Problem
Unclear and disorganized content hampers users’ ability to locate necessary information efficiently
Not well-structured content led to reduced average session duration and higher bounce rates. Additionally, the unnecessary inclusion of a ‘Home’ icon added to user confusion, underscoring the need for a more intuitive and streamlined interface.
Approach
Reconstructing the information architecture to improve clarity and simplify navigation
The goal is to enable users to quickly and easily find the information they need. Key improvements include:
Introducing two distinct CTA buttons in the navigation bar to provide clearer pathways for users.
Adding more visible CTA buttons to guide user actions effectively.
Placing related products on a separate page to increase average session duration.
Wireframe
Using low-fidelity wireframes to validate ideas and gather feedback
We designed low-fidelity wireframes to quickly test and validate ideas, user flows, and basic features. The main goal of these low-fidelity wireframes is to convey basic ideas and receive feedback from stakeholders and users, allowing us to iterate and improve the design before creating more sophisticated and detailed versions.
Output
Final Screens for the Website
Home
When the user hovers over the navigation bar, subcategories under each main category appear, enhancing the user's ability to quickly access all available options. This design choice improves navigation efficiency and ensures a smoother, more intuitive browsing experience.
Each category item is showcased in a slideshow that automatically transitions every few seconds, giving users a quick understanding of each item and the opportunity to explore further through the "Learn more" button. This design ensures users can efficiently overview available options.
The companies' logos scroll in a single line, allowing for quick viewing in a small space. This design reduces screen length, providing a more compact and efficient display.
Under the company name, there are items that the company uses to advertise their products, each linking to a detailed page.
At the end, an additional call-to-action (CTA) encourages users to complete the final user flow.
Businesses ( Same layout with Products & Technologies)
Multiple Contact Us CTAs are strategically placed throughout to continuously encourage users to get in touch.
Summarize the features into three points to enhance readability.
Related items from other categories are included under the detailed information to encourage users to explore more of the company's offerings.
Contact Us
On the left side of the contact form, there are FAQs so users can easily view common questions and potentially find the answers they need before reaching out. It saves users time by providing quick access to information, reducing the need to wait for a response.
Similar to the Contact Us section, we added a section on the left that showcases the company's items, allowing users to see and be reminded of the products. This encourages engagement by keeping products top of mind, enhancing the likelihood of conversion.
Request Free Demo
About Us
Careers
News
Task 3
Implement a design system to improve UI consistency
Problem
The absence of standardized design patterns and guidelines creates confusion and undermines the website’s credibility
While the website has a fixed primary color, it lacks a cohesive design principle, resulting in inconsistencies across elements. This not only confuses users but also diminishes trust in the platform, emphasizing the need for a comprehensive design system to ensure visual consistency and a more professional user experience.
Style Guide
Implement a design system to improve UI consistency
Branding
Building a Design Principle
To support the design direction, we created a brand guideline.
01
High-Tech Minimalism
We applied a futuristic and simple design to reflect the image of a high-tech company. By using minimalistic elements, we create an innovative atmosphere and prioritize functionality.
02
Refined Color Palette and Icons
To emphasize a sophisticated image, we use a restrained color scheme and enhance information delivery through icons. Icons are selected to fit their function and purpose, and they are used consistently to ensure harmonious design.
03
Readability-Focused Typography
We ensure high readability by considering font, size, and line spacing. A clean and uncluttered layout helps users understand the content, focusing on delivering the core messages of the website.
What I Learned
Reflecting on the project outcomes
This project was my first experience designing an app for clients. Since we were creating a completely new app, it was crucial to align with the clients' ideas. I learned how to communicate effectively with clients.
01
Communication with Clients
The clients only had brief ideas of what they wanted to create, so we spent a lot of time building the information architecture and developing mid-fidelity wireframes to visualize the app. This was my first time building an app from a solution, requiring me to communicate extensively with the clients to understand the background and align with their thoughts and ideas.
02
Organizing Files for Developer Handoff
Since there was no developer on our team, we needed to organize all the design files for a smooth handoff to the developers. This was my first experience seeing my design implemented in code. We created guidelines for padding and margins to ensure consistency across all designers' work.
Thank you for visiting my portfolio
© 2024. Designed by Sooin
