Indigo Case Study: User-Centered Design and Engaging Visuals

Indigo

Startup Incubator

Indigo is a program initiated by Telkom Indonesia to encourage the growth of the digital creative industry through the development of creativity, incubation, acceleration, and advanced funding programs for digital startups in Indonesia.

Indigo

Platform

Desktop Website
Mobile (Responsive) Website

Engagement

28 November 2021 - 28 March 2022

Scope of Work

UX Research & Design

UI Design & Styleguide

Icon & Illustration

Summary

Indigo wanted a design with a unified experience that represents what their programs offering, which is Academy Program, Incubation Program, Acceleration Program, and Game Developer Program.

The old website's design was out of proportion, which led to poor usability, low amount of time users spent on the page, and a lack of all important features. Therefore, we decided to create an engaging and useful website that would be easier to navigate, more user-friendly, and get more user trust.

Project Goals

Create a modern and responsive startup incubator website.

We set out to design a responsive website that will function flawlessly across all devices.

Bring seamless experiences that stay true to the brand value.

To build compelling UX/UI solutions within the constraints of the brand guideline and an efficient yet straightforward startup incubator website design.

Thoughtful information structure.

We intend to design website navigation and information with logical structure, well-functioning search, filter features, labels, convenient menus & more.

Empathizing through usability testing

Understanding Indigo’s existing website from the diverse user’s perspective was a key step to starting our redesign process.

We conducted user interviews and ran usability tests on their existing platform. This significantly influenced the design as it helped us to uncover important findings such as key pain points and developed a deep empathy for the users.

Insight from users

Be concise, reliable, clear, and precise about what is Indigo program.

Making sure users are aware of program on Indigo website and offer them several options for finding what they're looking for.

Balanced visual element to enhance delightful experience.

Users find it difficult to look at the website interface due to red color and disturbing element. Utilizing opacity, color, and space to give users a clear content hierarchy that incorporate white space and frequently gives user’s eyes a place to rest.

Lack of extremely important functionality can hinder the experience.

Many crucial features, like search, filtering, and sorting, weren't functioning properly. Since most of the user's tasks involve searching, this prevents them from completing them. As a result, user-friendly navigation is required to further enrich the experience.

Maintaining consistency.

Users rely on recognizing information they have previously seen or experienced. This is why its important to use familiar conventions and apply them consistently, whether its icon, image, or grid, and so much more.

Mapping out contents

Building a comprehensive information structure to simplify user’s search process

We built the website's information architecture to map out the content on a broad scale and learn each of the programs that Indigo offers. By reducing the number of options and making each Indigo program simpler to find, this aims to streamline the user's search process.

Early in the design process, wireframes are created to communicate and demonstrate to the Indigo team the intended functionality or layout of how the website will be structured and operated. By keeping things simple, we can review and alter the website structure more effectively as the design process progresses.

Reimagine how an innovative startup incubator would look like

We started with a mood board containing three different styles, including professional, casual/fun, and futuristic. These three approaches are common looks and feel that we researched beforehand in this specific industry.

Later, we came to the conclusion that it would be ideal to merge professional and casual styles with some futuristic elements. The futuristic touch was able to convey innovation while still sticking to the brand guidelines.

Experimenting and trying out different styles

We explore a number of possible style options to help Indigo deliver their message to their user. For the first choice, we attempt to utilize graphics to make the visual appear more fun and youthful. For the second alternative, we experiment further with the photographs and gradient colors to make the visual quite contemporary while still maintaining a professional appearance. On both version, we maintain the recognizable visual identity elements for Indigo personality, such as the egg shape and linear arrow.

Indigo

The Final Look

Balancing brand Identity and user experience

We attempted to minimize the red color's use and apply it to elements like the CTA (Call to Action) button, which plays a crucial part in user conversion.

The visual designs for the brand's identity take the shape of an egg and an arrow, which is a challenging shape to incorporate into the layout of a website. We therefore attempt to show it subtly by making use of opacity, using it as image frame and further blending the pieces with the background.

Fully functional search and filters for Portfolio and Mentor

Facilitating users with fundamental function such as search, filters, sort, and women founder filter and indicator to enhance the experience of discovering Startup within Indigo.

A comprehensive Portfolio & Startup information

Users are confused when they get on the startup page prior to improvements. Many of the links didn't seem to work, while other startup page didn't include descriptions or the startup program's phase.

Through the use of clear descriptions and visuals, such as startup products or videos, we make it possible for Indigo startups to showcase their products, services, and updates of their program phase on this thorough portfolio and startup profile page.

To further encourage collaboration, investment prospects, and business growth, we also created a form for Telkom entities, investors, and other businesses to contact the startup as well as the latest news related to the startup page.

Introducing Indigo Community

Indigo's community program is unfamiliar to new users or those who have never used Indigo before. We designed the landing sites for the Indigo community pages, which include indigoSpace, indigoHub, and indigoConnect. We also ensure that the information given is detailed and connected to each of the community programs external site.

Design system that will help Indigo’s design consistency and scales up in the future.

Based on Indigo brand identity and our exploration, the Indigo Design System was created with combining serif-sans serif typography, bold colors, outlined iconography, and 3d graphics to showcase Indigo as Indonesia's leading startup incubator.

View the design system