Indigo
Redesigning a website for startup incubators to be modern and more representative of their values and program offering.
Redesigning a website for startup incubators to be modern and more representative of their values and program offering.
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.
In this project, our main task is redesigning Indigo's website so that it has better functionality and can present what is Indigo more comprehensively.
Industries
Startup, Incubator, Accelerator, Venture Capital, Investor
What we did
- Stakeholder interview
- Requirement study
- User research
- Usability testing
- Information architecture
- Wireframe
- Userflow
- Responsive UI design
- Design System
Website
The old website's design was out of proportion, which led to:
- Poor usability,
- A high bounce rate, and
- A lack of some very important features.
So we went on to create an engaging and useful website that would be easier to navigate, more user-friendly, and generate more user trust. We worked on a design that showcases all of the program offerings like Academy Program, Incubation Program, Acceleration Program, and Game Developer Program.
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 design 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.
Understanding Indigo’s existing website from diverse user perspectives 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 users.
Obejctives
To understand and analyze the needs and expectations from the point of view of Indigo website visitors consisting of the following 4 segments:
Participants
Segment 1
Talent / startup enthusiast
Segment 2
A startup under Indigo program
Segment 3
Telkom group entity
Segment 4
Others (venture capitals, media, and partner)
Methods
Qualitative
In-depth user interview
Moderated usability testing
Supported Documents
Research plan
Interview script
Testing scenario
After conducting research on 12 people with various user segments, we analyzed the results of interviews and usability testing using affinity mapping.
Be concise, reliable and clear about what the Indigo program is.
Making sure users are aware of programs presented on the website and offer them several options for finding what they're looking for.
Balanced visual elements to enhance the user experience.
Users find it difficult to look at the website interface due to the sharp red color and disturbing UI elements. Utilizing opacity, color, and space to give users a clear content hierarchy that incorporates 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 it’s important to use familiar conventions and apply them consistently, whether its icon, image, or grid, and so much more.
We create a user journey map (UJM) based on the research that has been carried on. By UJM format, it would make all user insights to be easier to understand by the team and the client. Inside the UJM, it describes:
- How is the user behavior when accessing the Indigo website,
- What do they feel,
- What difficulties did they face, and
- What opportunities can we develop to improve the Indigo website design
Based on the insights obtained from user research, we understand that on the Indigo website, there is a lot of information that is unclear, difficult to find, or placed in a location that does not meet user expectations. For this reason, it is necessary to improve the information architecture before working on a more detailed design.The information architecture is in the form of a diagram that describes how the content arrangement will be created on the website.
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.
We explored a number of possible style options to help Indigo deliver their message to the user. In our first choice, we attempted with the photographs and gradient colors to make the visuals contemporary while still maintaining a professional appearance. In the second alternative, we experiment further by utilizing graphics that make the visuals appear fun and youthful. On both versions, we maintained recognizable visual identity elements for Indigo’s brand personality, such as the egg shape and linear arrow.
We attempted to minimize the use of red and apply it sparingly to elements like the CTA (Call to Action) button, which plays a crucial part in better conversion metrics.
The visual designs take the shape of an egg and an arrow, which is a challenging shape to incorporate into the layout of a website. We ,therefore, attempted to show it subtly by making use of opacity, using it as an image frame and further blending the pieces with the background.
Intial Design.
Some Insights from User.
Too much unnecessary empty space
The red line on the background distracts the user's focus when digesting information
When users read the description in the hero section, they don't get the points about what Indigo is and the programs it has.
The wording on the “Join Intake-2 2021” button is confusing
Section "Publication" is not a priority for the users when visiting the home page
Users are confused to see an empty "Events" section
The navigation is hidden inside the burger and difficult to access
Improved design.
What has been improved:
The content is more compact, efficient, but still neat.
The navigation menu is placed in the header so that users can access it quickly
Content arrangement in accordance with a good information architecture. From top to bottom, content is sorted by its priority.
Using copywriting that is easier to understand and presents what is Indigo.
Maintain branding consistency (egg and arrow shapes), but with better colors and sizes so that it doesn't distract the user when reading content.
Displays Indigo's programs so users will better understand Indigo's services.
Showing the 5 best startups as Indigo's portfolio.
On the portfolio page, we display the most popular startups so that it's easier for users to find out familiar startups under Indigo's program. We also facilitate users with fundamental functions such as search, filters, sort, and women founder filter and indicator to enhance the experience of discovering Startups within Indigo.
Intial Design.
Some Insights from User.
Disturbing red line
The category filter is very confusing
The user does not find a startup that is familiar to him
Some well-known startups are found on the last page
Because it only displays the startup logo and name, it is very difficult to skimming a startup that suits the user needs
The user does not find a filter for gender founder
Improved design.
What has been improved:
5 well-known startups are placed at the most top of the page, because users prefer to see familiar startups first.
The search, filter, sort features are placed in a better layout so that it is easier for users to use.
There is a founder gender filter to meet the user needs for looking the female founders.
Startup listing display logo, name, joined year, category, and sort description.
User can quickly understand the startup overview, without opening the startup detail pages.
Before the redesign, users were confused when they landed on the startup page. Many links were broken, while some startup pages didn't include descriptions or the startup program's current phase.
Through the use of clear descriptions and visuals, such as startup products or videos, we made it possible for Indigo startups to showcase their products, services, and updates of their program on this, very thorough, portfolio and startup profile page.
To further encourage collaboration, investment prospects, and business growth, we created a form for Telkom entities, investors, and other businesses to contact the startup as well as the latest news related to the startup.
Intial Design.
Some Insights from User.
The user does not find a description that explains the startup profile and the solutions provided by their product
Because the information on the startup profile page is incomplete, users want to find out more through startup websites and social media.
Users do not understand the meaning of stage numbers and category numbers.
The user from venture capital segment, need startups that are ready to go to market to work with
Improved design.
What has been improved:
More complete and comprehensive information
There are social media links and startup websites so users can learn more about it
Explanatory videos and photo galleries are placed at the top to give users a quick overview before reading the content below
A brief description, SDG information, product knowlegde attachments are provided to help users get to know startups further
Added startup track record information consisting of the year it was founded and the year it joined Indigo, the incubation stages, and the names of the collaborating investors
Information about founders and products from startups along with links to download
Information about founders and products from startups along with links to download
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 ensured that the information given is detailed and connected to each of the community program’s external site.
Very important for us to maintain design consistency not only for the UI & UX but also for the product branding. The design system would become basic guidance for all related people to work like designers, developers, marketing, etc.
Project Owner
Year
2021 - 2022
Design Lead
“Not only is he an excellent designer, but he is also a great friend and mentor. His leadership skills are unparalleled and he always goes above and beyond to support his team members.”
“Rizqi & team is a UI/UX design genius! Their work on our project was flawless, delivering a design that not only looked amazing but also functioned beautifully.”
“Working with them was a pleasure. Their UI/UX design expertise is unmatched, and they were able to take our project to the next level.”
“Rizqi transformed our vision into a user-friendly, visually stunning reality. Their expertise and professionalism were evident from start to finish.”
