Redesign an AI powered applications creation cloud platform
Intro
OpenAI's launch of ChatGPT 3.0 at the end of 2022 was a watershed moment in the AI industry, igniting a wave of growth and innovation across related fields. Epsilla, a pioneering Retrieval Augmented Generation (RAG) startup backed by Y Combinator '23, is at the forefront of this revolution, aiming to bridge the gap between information retrieval and memory retention in Large Language Models.
Following the initial implementation of their cloud platform, I took on the challenge of redesigning it to enhance user experience and optimize performance.
My role
During the period between February 2024 and June 2024, I had the privilege of leading the design of the cloud platform. This was a truly collaborative effort, as I coordinated the implementation of the redesign for the landing page and worked closely with our cofounders and programmers on the information architecture, workflow, style guide, and prototyping. Together, we gradually developed the design system that you see today.
I finished the redesign work from research to final deliverables.
We held weekly syn meetings with stakeholders to share my design processing and arrange next week's work during the entire design process.
As a SAAS company, Epsilla provides a AI cloud platform that users can create four types of AI solutions for clients: AI chatbot, AI search, AI agent, and AI recommendation with their own knowledge.
The last two type solutions are still in development. Epsilla Cloud supports organizations' or power users' solutions by local utilization combined with LLM.
THE DISCOVERY
INSIGHTS FROM INTERVIEW
Kick Off
To find the real issues with our product, we used an online interview and usability test with our users trying to create a chatbot from scratch.
Our goal was to identify potential the user difficulties and understand the underlying causes. Below are our the major issues we discovered.
Unclear Input Box
The user did not understand the purpose of the drop-down input box before clicking it and found the 'Create new project' location confusing.
Navigation Sidebar Does Not Match Content Steps
The user needed clarification on the sidebar navigation, which should align with the displayed content on the right side.
The Hierarchy of Projects and Applications
The unclear logic relation and the application’s types make users confused.
The Non-consistent Org Button
The users need to recognize this as the Org button or understand how to organize all their projects and apps by this feature.
DEEPER INSIGHTS
CREATE A PERSONA UNDERSTAND THE AUDIENCE
To deeply understand our audience's needs, we created a persona representing a 34-year-old working at a high-tech company in the Bay Area of San Francisco. This persona aligns with the interests of stakeholders and other team members.
Takeaways
We need a responsive website that makes it easy to learn how to utilize the AI application processes best to effectively consolidate the management and editing of the user’s applications.
REFRAMING THE PROBLEM
POOR WORKFLOW CAUSES A BOTTLENECK IN
THE APPLICATION CREATION PROCESS
Epsilla scaffolds a RAG AI platform for individuals and organizations to create their own AI applications. We observed that users faced challenges due to complex workflows and unclear terminologies. How might we improve Epsilla’s navigation system and simplify the workflow to enable users to effectively create their own applications and increase Epsilla’s new user NPS?
WORKFLOW REDESIGN
THE FUILD NAVIGATION STREAMLINES THE WORKFLOW
The existing workflow issues
“Step 3 : Create an Application” is at the end of the process, where users add their name and choose the application types. Users are confused about the kinds of applications here.
How can we rebuild the workflow using task-driven approaches to ensure users clearly understand their actions upon landing on the cloud page?
Solutions
First, we list four tasks we want users to complete at the beginning. Those four tasks are also our primary services (Creating chatbot, AI agent, enterprise search, AI recommendation).
Secondly, add the application's name and icon after creating a project or using a default project instead of doing it at the final step.
The Improved Workflow
Rebuild Information Architecture
Create a RAG APP button with a CTA on the left navigation bar so users can quickly access the application build process.
Billing, sign-out and setting sections go to under the account info tag.
Change the label 'Vector Databases' to 'Knowledge' and place it on the side navigation bar to make users feel more comfortable and reduce field-related barriers.
FROM AMBIGUOUS TO OBVIOUS
NEW WIREFRAMES PRESENT THE WORKFLOW IN A MORE INTUITIVE WAY
Craft Wireframes That Embody Our Workflow
New low-fidelity wireframes clearly illustrate the steps for creating applications.
The top project navigation bar displays the hierarchy between projects and applications, which is not evident in the current version.
Processing segment buttons indicate the user's current step during application creation and provide flexible options to switch between processes.
VISUAL REDEFINED
DESIGN SYSTEM GRADUALLY DEVELOPING
We began developing the design system based on Google Material 3 and our style guide, with a primary focus on the right-side navigation bar and the top projects indicator.
Navigation Bar Evolving
The left-side navigation bar iterated several times from the existing version to a wireframe one to simplify the final version that removed the developing two feature icons.
THE Hi-Fi Screens
Finally, we create the Hi-Fi version for each page and get an interactive prototype.
WORKFLOW REDESIGN
FINAL THOUGHTS
Rebuild Information Architeture
The Epsilla AI cloud process redesign was a transformative journey where we optimized the side navigation bar, enhanced the UI design, and improved the AI application creation workflow. Through meticulous research and engaging conversations with stakeholders, I gained extensive domain knowledge about AI RAG, which helped me understand how to create an effective workflow that fulfills users' needs.
Collaborating with team members provided powerful insights from different perspectives, enriching the design process. As a fast-paced startup, Epsilla iterated the side navigation bar multiple times during the design process to adapt to evolving requirements. Many tasks are ahead, including further usability testing and potential iterations of the navigation bar.
We also plan to track critical data using PostHog to inform future improvements. This project highlighted the importance of continuous iteration and user feedback in developing a robust and user-centric platform.
.png)
.png)
.png)
.png)
JI LI