Objectways Suite

A software suite for Data Labelling, Annotation using Machine Learning

CONTEXT

Objectways is a social impact sourcing company that specializes in data labeling services and machine learning. They employ people who have limited opportunities for employment and provide them with career development prospects.

OBJECTIVE

Objectways requested me to revise their complex ML-aided website suite that deals with video, audio, and text annotation, in order to make it more understandable and user-friendly. The suite consists of multiple interconnected webpages that allow users to annotate, label, add relationships and comment on videos, audio files, and text documents.

The goal of the revision was to make the suite more accessible to users of all technical backgrounds, while still allowing for advanced users to make use of the powerful features available. As part of the revision, the website was redesigned to be more intuitive and less cluttered while making optimum use of space and also improved navigation and easier access to the suite's features.

Before & after UI/UX Design image by Raghu Bhat

Role

Research

Product Design

Visual Design

Interaction Design

Liaison with Developers

Tools / Tech

Figma

HTML

CSS

JavaScript

APPROACH

Understand & Evaluate

.01

As with most of my projects, I take a thorough, in-depth look at the website analyzing and understanding every part of it, from top to bottom. For this website, I went through every page, every feature, every corner, and every detail, taking note of all the good and bad UI points I found. This includes taking note of the current layout, the navigation, the color scheme, the font, the typography, UI elements like buttons, nav bars, cards, tables, forms, breadcrumbs etc., and the overall user experience. I also made sure to benchmark the website against the industry standards and best practices, ensuring that the website is up to date with the latest trends. Armed with sufficient information, I started the redesign process.

Define

.02

For me, the most efficient method for understanding large amounts of information and develop a unified design is to divide it into more manageable pieces.
My design philosophy is along the lines of Brad Frosts Atomic Design Principles.

"Atomic design is a modular system founded on the principle that a whole system can be subdivided into smaller parts (modules) that can be independently created, replaced, modified, or exchanged with other smaller parts or across different systems."

Atomic Design Principle

Design

.03

Fundementals

Creating a successful product starts with establishing a cohesive color palette and typographic style.

We primarily selected blue and white hues since they symbolize a feeling of professionalism, dependability, and reliability.

Objectways Color Schemes, Typography & Iconography

Raghu Bhat UI/UX Design system - Atoms

Components

Components are the foundation of any well-structured design system that can be combined for a variety of purposes and re-utilized. Some examples of components that we built for objectways - buttons, inputs, radio buttons, checkboxes, chips, and so on.

Objectways Sample Components

Raghu Bhat UI/UX Design system - Components

Templates

Following that, we combined various components together to create complex, reusable, and scalable entities called as templates.

Objectways Sample Templates

Raghu Bhat UI/UX Design system - Templates

Pages / Result

Finally, we use these templates as a starting point for creating more intricate and sophisticated web pages. This UI redesign for the Objectways ML-aided website suite shows the significance of user-centered design in making an easier and more accessible interface. The redesigned interface is more user-friendly, easier to navigate, and makes efficient use of space. It is better suited to the needs of all users, regardless of technical background, and is an example of successful, accessible, and inclusive web design.

Sample Screen 1 - BEFORE

Sample Screen 1 - AFTER

Sample Screen 2 - BEFORE

Sample Screen 2 - AFTER

Sample Screen 3 - BEFORE

Sample Screen 3 - AFTER

Other Projects