inFeedo

Expanding the website with a new visual and content approach to enable exploration and conversion.

Brand

inFeedo helps elevate employee experience using an AI chatbot called Amber, which chats with a company’s employees and proactively finds those who are disengaged, unhappy, or likely to leave. It helps CHROs find gaps in their culture, managers and remote employee experience.

Backed by Y Combinator and Bling Capital, inFeedo is one of Asia’s leading employee experience platforms that help engage employees and predict attrition. Spanning 60 countries, their customers include MNCs like Samsung, Xiaomi and Lenovo, conglomerates like TATA and Godrej, and unicorns like Paytm and OYO.

Role
Design Direction
UI/UX Design
Year
2021
Sector
SaaS — Human Resources
A great looking mockup of an iMac, a Macbook, an iPad and iPhone showcasing the responsive website designs made for inFeedo

Challenges Faced by the Old Website

The client, inFeedo, is a digital-first brand with major user touchpoints being the website, social media, emails and ad campaigns. The target audience for the brand are HR leaders, CHROs, and HR managers from companies with 500+ employees.

Despite offering an innovative solution, inFeedo faced several challenges in their web presence. Their current website failed to effectively convey the right information about the company and its offerings, making it difficult for potential customers to understand the true value of inFeedo's solutions.

Outdated Visuals

The visual language of the website looked like it was from the early 2010s. The site needed a visual update that placed inFeedo correctly in the market alongside its competitors.

Poor Engagement Metrics

One of the biggest challenges was a low sign-up rate. Compounded by short average visit durations and high bounce rates, the user exploration of the website was very limited.

They needed a new website that was organized better for user navigation, provided well-structured, easily digestible information and improved credibility. The new visual language had to look fresh and unique while also reflecting the maturity of the company. Furthermore, they needed the new website to be built on a tech stack that easy to maintain and had a robust and scalable backend.

Project Research & Discovery

Our team aimed to gain a deeper understanding of the company, its offerings, and the problems faced by the website to ensure the redesign was effective and met the needs of both the company and the user. Through both qualitative and quantitative methods, we gathered key information about the company and the website that helped inform the design process.

A snapshot of notes and images from website audit

UX Audit of Website

We performed a thorough heuristic evaluation of the website and identified visual, content, and usability issues. We found several areas of improvement including the overarching need to simplify the information structure and redesign the content architecture.

A snapshot of data from user analytics platforms including pageviews, user demographics, scroll and click heatmaps, user funnels, etc.

Data from Analytics

User analytics data came from platforms like Google Analytics and Hotjar. Apart from user demographics, we got useful specifics like pageviews, conversion rates, user funnels, session durations, scroll and click heatmaps, device and browser shares amongst users, etc.

A snapshot of notes from product and sales process review

Product & Sales Walkthrough

The design team received a comprehensive product offering and sales process walkthrough from inFeedo. This helped us better understand the company's product offerings, and direct our design to better align with the company's business objectives and effectively support the sales process.

A snapshot of notes from user interviews

User Interviews

We also conducted a series of interviews about the website with various stakeholders, including inFeedo's C-level executives, new hires, past and present customers, and prospects. This led us to understand the website's strengths, weaknesses, and business and user goals.

Competitor analysis was another critical aspect of our research process. By studying the websites of inFeedo’s competitors, we were able to understand what worked well and what didn't in their designs. We analyzed the features and functionalities that differentiated these competitors and how these could be applied to our website. To compare inFeedo’s website with those of the competitors, we mapped them based on how simple or extensive their content structure is and how traditional or fresh their visual language looks. This allowed us to discuss with other stakeholders what the ideal position for inFeedo in this map would be.

An Extended Sitemap & IA

Based on the insights gathered from our research and competitor analysis, we embarked on the UX design process to overhaul the website, starting with a new sitemap that addressed concerns about lack of information and a cohesive explorative structure. We expanded the sitemap to include new Product pages that would clearly explain the values of the new streamlined product structure, and a Solutions section that would elaborate on different use cases of the products across different industries. We also reorganized fragmented pages from the old sitemap into cohesive user flows under relevant sections.

Incorporating suggestions from the website audit and user interviews, we created an improved information architecture that ensured easy access to relevant information and consistent CTAs on every page before conversion. We interlinked pages within each section and across sections at relevant spots in the UI to allow seamless website exploration. This also meant visitors are more likely to remain on the site for longer.

Developing on the IA, we wireframed basic UI layouts that defined the hierarchy of content and elements within pages. Iterating and defining the visual and content requirements before higher fidelity design stages helped ascertain that we are the right track, and also if the designs were feasible to develop within the scope of the project.

New Website with a Fresh Face

To design higher fidelity prototypes, we had to set up a new visual language and a basic design system with colours and typography. The old look of inFeedo was simple with minimal use of colours, very basic illustrations, and a mascot looking underdeveloped. The new website needed a visual overhaul that looked fresh and young while reflecting design maturity. We explored different design directions through references from competitors, similar players in other industries, and unrelated but visually useful sources on the internet. Refining these references provided a visual moodboard to begin designing based on.

Upon deciding on the direction, we started with tweaking the existing colour palette by adjusting colours to look younger and more welcoming. We also added a new yellow to the palette to be used with the orange in contrast with the primary blue hues. The illustrations were to look subtly textured with neutral-coloured human figures along with Amber, the AI chatbot, in bright, almost cherry red. With type, after multiple iterations, we landed on rarely used, distinctively characteristic typefaces, both sharp and legible — Cosmica for headings and Allrounder Grotesk for bodies of text.

We first updated the site navigation and homepage with our new design language. We redesigned the product walkthrough experience in the homepage and added testimonials near CTAs to improve credibility. We used the darker colours as backgrounds to highlight key information and CTA blocks, drawing attention with contrasting bright colours on top of them.

We tried to use the different colours in our palette to generate thematic colour schemes for different product and solution pages to visually differentiate between them. The illustrations, iconography and motion graphics were also supposed to match these colour schemes. We designed interactions that are feasible for implementation with Webflow, a no-code platform that the website was to be built on. But since my time at Frozen Iris was over before the project was, I did not get to direct the design of pages in later phases, the visual graphics implementation and the development of the website.

fin.

Extras
Some tools/resources I remember using —
Ouch by Icons8 - More than a hundred 2D and 3D illustration packs with different art styles to browse and take references from.
Blush Illustrations - Another bunch of illustration packs with distinct art styles.
Fresh Fonts - Online repository and monthly newsletter to browse some very cool, contemporary typefaces out there.
Fonts In Use - A searchable independent archive of typography
Some lessons from mishaps —
For a website’s visual revamp, the art will make or break the whole look. Since I was not part of the team towards the latter parts of project during which the illustrations were made for the UI, I realize when I lookback at the implementation that I did not leave adequate references and guidelines to model the illustrations after, and that left a major impact on the overall look of the new visual language.
Unfortunately, a few months after I left Frozen Iris, post further design and development phases, the CEO decided to revert back to the original design language while keeping the site expansion and information architecture. I believe this could have been because A, the art didn’t land and B, the attachment with the old visual identity over years of habituation.