A software suite for Data Labelling, Annotation using Machine Learning
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.
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.
Research
Product Design
Visual Design
Interaction Design
Liaison with Developers
Figma
HTML
CSS
JavaScript
.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.
.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
.03
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
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
Following that, we combined various components together to create complex, reusable, and scalable entities called as templates.
Objectways Sample Templates
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