top of page

BotIQ

UI | UX Case Study.

An Automated

AI Platform for Data Forecasting.


mock.png
Problem Statement

Lack of an automated platform to make time-series predictions, which is used by various industries for day to day operations.

In this era of industries and big tech firms, all these rely on data and how it can be used to forecast for future planning and enhancements. This is generally done by data scientists, and they need to go through many algorithms, which can be a huge workload really stressful sometimes.

Project Overview

Building an Automated Data Forecasting AI Platform.

Duration

August 2019 - February 2020

7 months.

My role

The goal of time series modeling is to predict future performance from past behavior – such as forecasting sales over a holiday season, predicting how much staff you need for the upcoming week, or ensuring inventory meets manufacturing demands without overstocking.

The applications of time-series modeling are wide and in various industrial sectors. Majorly used for Financial Analysis, Weather analysis, Healthcare Analysis, etc.

Working with a team of UI/UX Designers and Graphic Designers, led the initiative of conducting ideations and brainstorming sessions with Data Scientists and Data Engineers.

Based on analysis worked on User research, and created wireframes. Also contributed to the interface design of screens and interactions. 

Solution

Proposal

BotIQ, An AI based platform that involves automating the entire process of machine learning application by working with various stages of machine learning & deep learning.

Strategy

The Process

Working with in house design and development team for the project, the process started from working on User Research. Which included brainstorming sessions and later conducting user interviews and competitive analysis to understand the market better.

processsss_1.png

Based on the analysis and research, we started working on the user flow framed with the team of Data Scientists and Data Engineers. According to the user flow, we created low-fidelity wireframes using paper prototyping and later refined them by converting them into High-Fidelity wireframes.

processsss_2.png

Worked on interface design with the team for creating final UI Design of the screens for the platform and later guided the development team and performed User Testing of the application.

The Analysis

UX Research

The user research was an essential part of the project which helped strengthen the base of the project. Through the sessions with the team, collective inputs and ideation sessions helped in forming the user flow for the application using which we were able to integrate the user research into building wireframes for the application.

Brainstorming

Conducted  brainstorming sessions with the team of Data Scientists and Data Engineers who were working on building machine learning algorithms for Automated Time-series for Data Forecasting. During these sessions, we discussed the possible applications, target users, and the type of industries we can serve using the product. 

Understanding Problems

Time series modeling can be a complex and laborious process because many historical events can impact the current predictions, and finding the most influential signals is difficult. As the environment changes, such as after introducing a new product or a competitor opening a new store, these models need to be manually re-built.

The future based prediction data are used widely by various industries which impacts their daily production of products on the basis of sales prediction next month for example. 

 If a company produces more than required, for such situations companies look for some predictions.

Competitive Analysis

By performing competetive analysis, we managed to find three product working on providing such similar solutions. The three products were from- Datarobot, H2O, Nanonets.

compe.png

Through the analysis performed it was found that the user interface of the applications were quite complicated by providing numerous options making it problematic for the users. 

The whole process was complex and navigation from one step to another was difficult, making user think twice before selecting any step. In one case, too many functionalities in the product led to deviation from the primary feature.

User Interview

bot state.png

Research Outcomes

Key Learnings

Upon user research we felt there was need of such an application with easy navigation and visualization along with advanced features for the data science professionals.

Based on competitive analysis and user interviews, we came to conclude that the existing platforms are quite complicated and provide some unnecessary functionalities resulting in a confusing and bad user experience.

From internal team discussions, we formulated our target users and were able to understand the different needs of different users. Through identifying various industries where the application is useful, we got a better idea of the functioning and requirements of such companies.

UX Design

Key Learnings

Based on the user research conducted with the team and brainstorming sessions helped us get a proper idea of the project requirement. Using the card sorting methods we started sorting on features and functionalities which was needed for the application. This played an important role in framing Information Architecture and User flow mapping for the project.

Information Architecture

Through the ideation sessions conducted we were able to list put all the features for the project using the card sorting method. Based on the complete list of functionalities we sorted out the main functionalities and arranged them under main sections.

IA Bot.png

Categorizing all the features into 3 major options for the application making it easy for the user to understand and interpret the interface of the application. This helps the user to answer where to go when they look at the main heading of the section and all related functions are available in one place.

User Flow

With the team of Data Scientists and Data Engineers, we conducted ideation sessions to understand the flow and process of the algorithms to make predictions and forecasting values and data. The flow ensured a proper step-by-step flow for the users' smooth flow of interaction throughout the application.

user bot.png

Wireframes

Once the user flow of the process and the flow of the application was finalised, we started working on the wireframes for the application. Through the wireframes we introduced a simpler and cleaner interactive elements throughout the application which reduces the possibility of confusion of the flow among the users.

wire bot2.png

Application wireframe

comp wire bot.png

* Due to the confidentiality policy of the company, complete wireframes cannot be showcased or disclosed.

UI Design

Ideation

Taking into consideration all the required aspects based on user research conducted, we decided the application to be white-color based interface with clean font to increase readability

Appropriate colors for elements and typography were finalised for various options like call to action buttons, notifications, parameter settings, etc. Such colors were chosen which attracts attention of the user to complete or undergo any necessary task.

Logo Build

The resemblance of the process of application with the working of Robot by automating actions, led to the name of the AI platform. Using the same logic, a simple icon which fits right for all all platforms which resembles to a robot was designed for the application. "Squircle" form was chosen for the logo following latest design trends.

bot logo.png

Logo variations

bott logo – 1.png

Color Palette

color bot.png

Typography

typo bot.png

Typography colors

typo color bot.png

UI Screens

Final Platform

The platform involves complex functionalities, thus the interface should be clean with minimal UI. The target users are generally business professionals older in age, which brings the requirement of easy to use and understand the interface.

We worked on making the process simpler and made sure the navigation is easy for good user experience. By placing the menu bar at the top section of the screen resulted in bigger space for the application and maintained proper white space throughout the screens.

Dashboard -

Dashboard – 13.png

Model & Algorithm Selection -

Predictions - Choose algorithm – 3.png
Choose Algorithm – 5.png

File preview -

Predictions - Data – 13.png
Predictions - Feature selection – 1.png

Model Process -

Training Process – 12.png
Choose Algorithm – 2.png

Model Prediction & Deployment -

Choose Algorithm - Options - Plot Graph
Choose Algorithm - Options - Set future

Getting Started -

Artboard – 15.png

Project screens -

all screen.PNG

* Due to the confidentiality policy of the company, all final screens cannot be showcased or disclosed.

bottom of page