Overview

Theta Assistant is a smart AI chat tool that helps you create and train custom assistants for different topics or projects. You can set up multiple threads in one assistant to keep conversations organized and focused. Different types of data can be uploaded to the assistant like files, documents, spreadsheets, or guides. The assistant learns from these files, giving answers tailored to the information you provide. This makes it great for managing projects, training, or answering specific questions.

Problem

Design an engaging interface to enhance the initial work done by developers, as features were added before the visuals. At the same time, establish design guidelines to ensure reusable components for the ongoing addition of new features.

Challenges

• Project timeline was short which meant I had to come up with a quick and efficient UI style guide that served the purpose for the project
• Using React and Bootstrap to implement designs in a short amount of time ensuring consistency with the design and proper code structure to facilitate future changes
• Single ui designer/developer collaborating with a single software engineer
• Requested to have a theme management, light and dark modes.

Process

I joined this internal project a couple of months after the development started, since the idea was already stablished and it was in need of a design, I was brought in the project to stablish the design guide and implement the UI in their current code base as a single designer/developer, all this had to be done in a fast pace while working on other multiple projects.

Initial Discovery

After discussing the project and gaining access to the development environment, I began analyzing the product, reviewing all the different screens, and establishing the initial foundational design structure for the project.

During the analysis of the screens I noticed that the current state of the project had no structure and was difficult to navigate and understand the screens and it lacked consistency in each of the actions

I was not only trying to create a beautiful and modern user interface but also improve the navigations and readability of the screens as well as reducing complexity and implementing patterns for each of the actions to create visual and functional consistency.

The screens below show the initial state of the project.

Design

Even thought the development of the features was started first, I approach this project as a redesigned. I began creating the style for the typography, choosing the right color palette that aligned with the company products and defining a common spacing and grid system to create familiarity and stablish patterns.

Once the initial core elements were stablished, I began creating the initial common UI components like buttons, form inputs, links, cards and modals including hover, active and disabled states. In the meanwhile a was also defining the iconography for components.

To improve the readability and reduce the cognitive load of each screen I implemented common interactions, positioning and patterns for opening of menus, validations and different states and effects. This builds consistent patterns and fosters familiarity across all features and actions.

Because it was a fast paced delivery I went straight into creating the designs for the pages while also stablishing the patterns needed for some new flows in the navigation and actions while iterating on the pages as I created designs for each screen to make sure there was consistency in behaviors.

The following screen show the initial designs.

Development

Once the designs were approved I started implementing the user interface in the codebase picking up from what the developer had set up. The project was using React and Bootstrap.

The approach I used was to make as many of the changes using the already available Bootstrap sass variables for global changes. I also created or updated components with custom functionality or styles for different parts like navigation, buttons, inputs and more. I developed the light and dark mode feature, added the ability to switch themes, and ensured the project was fully responsive across all devices

Getting familiar with the project was easy but the biggest challenge was working around the tight deadline, updating some components and moving the code around to accommodate for the new styling. in collaboration with the developer we managed to implement the designs in no time.

Adding new features became easier as there were consistent and reusable components which accelerated anything related to the front-end development.

TODO: This is the how the final MVP looks like. either add video or remove.