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.
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.
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.
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.
%20UX%20Audit.png)
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.
%20Analytics.png)
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.
%20Product%20walkthrough.png)
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.
%20User%20interviews.png)
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.
%20Competitro%20feature%20analysis.png)
%20Website%20positioning.png)
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.
%20Old%20vs%20new%20sitemap.png)
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.
%20IA.png)
%20Wireframes.png)
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.
%20Art%20direction2.png)
%20Colour%20palette.png)
%20Typeface%20exploration.png)
%20Type%20tasting.png)
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.
%20Site%20navigation.png)
%20Homepage.png)
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.
%20Product%20pages2.png)
%20Solution%20pages.png)
%20Screens.png)
fin.
.svg){kind=small}
