My Responsibilities

• Reviewing user flows and translating to wireframes
• Building design system to ensure consistency and scalability
• Conducting competitive analysis of AI Agents
  
• Designing high-fidelity mockups
  
• Developer Handoff
  

Setting the Stage

Data has been essential to decision making in any successful 21st century business. However complex data analytics tools are difficult to adopt especially for users with non-technical background. Our AI data analytics agent, ‘ekai’ aims to bridge that gap and enable business owners, executives, and non-technical workers access to large datasets and make informed decisions without having to learn complex tools.

The Challenge

Create a tool that integrates data seamlessly, manages users efficiently, and features an intuitive chatbot interface empowering non-power users with the full capabilities of complex data analytics tools with minimal learning required.

Our Users

My starting point for this project was that I was taken through a number of user flows by the project manager. There were four categories of users we were building for:

1. Ekai representative: Has the ability to create owner accounts
2. Owner: Has all the capabilities of admin and cannot be deleted
3. Admin: Can add or remove data source integrations, users, and projects
4. User: Can only access data permitted by admin and generate prompts
   

Key Use Cases

User needs to be able to

Login to ekai using provided credentials

Generate prompts to get business specific data insights including statistics and graphs

Provide feedback on quality of results

Miscellaneous settings such as dark mode, account information, change password

Admin & Owner need to be able to:

Database Management:
Central to ekai is the data. Admins need to be able to connect to multiple data sources for instance, mySQL, Athena, CSV, and Excel

User Management:
Add and remove users, and manage permissions

Project Management:
Projects are the connection point of data and users. A project determines which group of users is able to access which datasets. For instance a person in the digital marketing department should not be able to access sensitive data limited to executives.

See below for a snapshot of a couple of user flows:

Wireframing

In the wireframing stage, I made sure to make quick and dirty wireframes with live feedback from the product manager. This helped us stay agile and avoid going back and forth. We skipped low fidelity wireframes for the actual chatbot due to its simple interface and focused on the admin capabilities.

Design System

I built the design system from a mix of existing and tailor-made components. For instance, to save time I took buttons and fields from existing design systems. I built out components such as the sidebar, chat bubbles, loading states, and graphs from scratch. One challenge here was that the ekai brand colors were not giving good contrast in the UI. We tweaked them accordingly to ensure accessibility

User Interface Design

Chatbot

The chatbot was one of the simpler designs with a text input, chat bubbles, and a sidebar for chat history. We also focused on adding nudges and suggestions to help the user explore and also accounting for errors and loading times in case of human errors and system constraints

Graphs

One of the key features was graphs. We shortlisted the types of graphs needed, used an API, and styled them according to our interface.

Settings

We kept the settings options minimal for the user in order to keep a simple experience. Here, the user could access account information, change password, or switch to dark mode.

User Management

The admin side had more interesting challenges. We had to define the backend of the ekai system in order to enable a seamless and simple experience for our users. The first aspect of this was adding/removing users and managing permissions.

Database Management

The database management feature enables admins to import and manage databases from various third-party platforms. Admins can also add additional information to make the AI smarter in its responses including adding table descriptions, column descriptions, data linkages, and business context.

Project Management

Projects are the connection between databases and users. Using a project, admins can control which users are able to access particular databases. This ensures sensitive data is protected and users only access information relevant to them.

Results and Next Steps

The design was well-received by stakeholders and with some iterations with the product manager, was handed off to development. After some demos, the project was selected by the C10 Labs Venture Builder Program in Cambridge, MA for further development and took on the largest fintech in Pakistan, Telenor Microfinance Bank as a client.

Key Learnings

• Understanding user journeys streamlines design: With a strong foundation of user journeys, I was able to quickly wireframe solutions that met user needs effectively. Hence, the efficacy of each step in the design process determines the quality of final results
• Close collaboration with PMs and researchers aids iteration: By working closely with product managers and researchers, I received timely feedback and insights, facilitating faster and more effective design iterations.
• A robust design system accelerates high-fidelity iteration: Design systems with reusable components and guidelines enable designers to iterate quickly in high fidelity, maintaining consistency and speeding up development.
• Constraints become evident during implementation: Practical limitations and challenges often surface as designers and developers start building, guiding adjustments to ensure the final product meets both user expectations and practical requirements. It was important to let go of some functionality to keep up with tight timelines and development constraints
• Early involvement of developers enhances outcomes: Including developers early in the design process allows for early identification of technical challenges and alignment on implementation strategies, ensuring smoother development and reducing revisions later on.