O1

My Role

Research
Spline
Wireframe
Visual design
Prototype

Tools

Google Analytics
Spline
Figma
Posthog
Fig Jam

Project Brief

I recently undertook a project to redesign the landing page for Epsilla, an AI Retrieval Augmented Generation (RAG) startup. Epsilla offers services enabling users to create their AI chatbots and agents, leveraging data and AI generators such as OpenAI, Gemini, and Allama. The project, spanning two weeks, involved everything from user research to the development of the design in Figma.

02 Challenge

How to increase the landing page conversion rate?

How to make the page easy to use and understand for both tech-savvy AI engineers and everyday AI app users?

How to create a design that appeals universally, accommodating users with varying levels of technical expertise?

O3 Research

Stakeholder Interviews: Engaged in discussions with stakeholders to understand the company's vision and business goals. We used FigJam to sketch and share the ideas. (The below is a sketch of Epsilla concept for AI generate images.)

Analytics with Posthog: Utilized Posthog’s heatmap to track how customers interact with the website.

User Behavior Analysis: Analyzed screen recordings of user mouse movements and heatmaps, revealing that 86% of users accessed the site via desktop and 14% via mobile devices, highlighting a lack of responsive design for mobile users.

Competitors analysis (landing pages comparison and data analysis from Similarweb)

O4 Insights

Users spent an average of 40 seconds on our landing page, indicating a lack of engaging content.

Several buttons confusingly redirected users back to the homepage.

The hero section featured complex coding visuals, deterring general users.

Social media icons occupied valuable space in the navigation bar.

Our hero section copy is too general to attract users’ eyes.

Missing sign in button for return users.

05 Solutions

Navigation Bar Redesign: move social media icons to the bottom of the site, to leave more space for main navigation buttons.

3D Animation Illustrations: Used Spline to create a engaging hero section to demonstrate what role Epsilla plays in the RAG application making process.

AI-Generated Images: Enhanced comprehension and showcased our competitive edge.

O6 Visualization

To ensure responsive design, I created two versions of the Spline file tailored for desktop and mobile usability.

Mobile Hero Section

Desktop Hero Section

Logo mark and word mark combination will be applied in our system in the future.

O7 Iteration

After we launched our new landing page, we faced a problem with slow loading times for the Spline files. We considered replacing animations with static images. However, we will lost the better way to demonstrate the concept of company processing. In order to preserve the essence of Epsilla's process, I optimized the Spline files to enhance performance without losing the animated concept.

Spline file performance text results