Idemia Experience Portal

Enhancing Technical Websites with Scalable Illustrations

Role: Art Direction / Illustration

Agency: Sagepath Reply

Time: 2022 — 2023

The Client

Idemia, a leading technology company specializing in biometrics-based identity platforms, provides secure and convenient solutions for individuals as they interact, pay, connect, and travel. They approached us to transform their developer experience portal, which offers critical products like identity proofing and mobile ID. This portal allows users to deeply understand the products through demos and engage with them through either free or paid versions to launch their projects.

  • The primary challenge was to visualize the digital platform in a way that tells a compelling story, explains the product clearly, and engages the target users.

  • We aimed to transform a content-heavy site into an engaging and enjoyable experience by using infographics and unique visual systems. Our goal was to create a seamless and intuitive experience for developers by redesigning the portal with a focus on user-friendly navigation and engaging visual storytelling. We implemented the following:

    Engaging Visual Storytelling
    Utilized abstract illustrations and detailed infographics to make complex information more accessible and engaging.

    User-Friendly Navigation
    Redesigned with helpful iconography and clear pathways to enhance the user journey.

    Responsive Visual System for Better Accessibility
    Developed custom graphics and iconography to bring content to life. This included large, medium, and small-sized customized illustrations tailored to different sections, ensuring better accessibility.

    This approach ensured the portal effectively explained complex concepts, highlighted Idemia's innovative solutions, and provided an enjoyable and informative user experience.

Redesign with Strong Visual Concept

The old site had illustrations to help explain the content, but lacked a unique and consistent visual system. We offered abstract illustrations with an improved color palette to make them more eye-catching. Despite being content-heavy, the site now features stylized illustrations and iconography along with enhanced typographic hierarchy, greatly improving legibility and overall user experience.

Enhancing Content Readability: Infographic Design

From the previous brand color, where purple was the primary color, the site had over 20 colors without clear guidelines. We organized the color scheme, maintaining the same hues but using different shades by adjusting brightness and saturation. This limited and balanced color palette makes the new design pop. The abstract infographic style uses metaphors to better engage users, such as a caterpillar icon for the free version of the program and a butterfly for the upgraded paid version. This approach ensures consistency, visual appeal, and improved user engagement.

In each round of creation, we based our work on thorough research to deeply understand the content. We then translated this understanding into sketch illustrations that effectively conveyed the intended story. These sketches were refined into final illustrations in our unique style.

Responsive Illustration for Digital Usage

The site delves into various topics across different pages and sections, often revisiting the same subjects. To address this, we developed a responsive illustration system tailored for digital use. For instance, the mobile ID program appears on the homepage banner, a single overview page, and detailed explanation sections, each requiring different asset sizes. Instead of merely scaling down illustrations, which can pose accessibility issues, we created large detailed drawings, medium simplified illustrations, and small clean icons. This approach ensures optimal performance across the entire site, especially on smaller devices like mobile phones.

Design Guideline

We created a digital design guideline that maintains consistency with our infographic styles. This includes a light text style for paragraphs, complementing the headline style and matching our illustrations. Since the UI guidelines and illustration guidelines influence each other, we developed them together to ensure a cohesive look and feel. The simple, light style of the content pairs perfectly with our vibrant illustration style, creating a harmonious and engaging user experience.

Diagram Style with Better Readability

Following the establishment of both styles, we enhanced the diagram style to improve readability, facilitating easier comprehension for developers

Page Design

The page design strikes a harmonious balance, with headlines consistently heavier in weight than illustrations, guiding the eye to scan the text effortlessly. Pop colors like light blue and gold are sparingly used on a large scale. We crafted character styles featuring elongated arms, often holding tools like magnifying glasses or ID cards, to convey momentum and ease of access in problem-solving scenarios. Overall, the pages exude elegance, balance, and enjoyment.

The Result

We implemented breakpoints that function seamlessly across different devices, ensuring full responsiveness. All headlines are optimized for SEO purposes, contributing to enhanced visibility and searchability.

Please take a moment to visit the live site and experience the final outcome, which includes motion effects on individual illustrations.

View More Works