DataBuck Hero Image 1

Scope: UX Re-Design for the Minimum Viable Product

Project Brief

The project aims to revamp the UI/UX of a data trustability application catering to enterprises with extensive data assets. The proposed solution entails a comprehensive redesign to modernize the UI, standardize taxonomy, streamline navigation, enhance data visualization, and introduce a personified AI Assistant for validation tasks.

Customer

A Silicon Valley startup having state of the art technology for creating Autonomous Data Quality Validation for all the data in any enterprise. They had a proof of concept level product UI ready, we created a much learnable, contemporary and easy to use experience for the enterprise users.

Hero Icon

Stage – Minimum Viable Product

Domain Icon

Domain – Enterprise App for Data Quality

Design Process Followed

Design Process Animated Infographic
  • Domain Understanding
  • Product Walkthrough
  • Stakeholder Requirements
  • User Understanding
  • Heuristic Evaluation
  • Problem Identification
  • IA Revamping
  • Redefined Flows
  • Paper Sketches
  • Improved Taxonomy
  • Refining AI Interactions
  • Low-fidelity wireframes
  • UX Pattern Definition
  • Analytics & Visualizations
  • 4 Visual Design Proposals
  • Final UX Specifications
  • Detailed Design System AKA Component Library
  • UX Governance while implementaiton
  • UX Testing & Iteration during Development

1. Requirements & Planning

1.1. User Personas Creation

Persona 03

CMO

Business User

“I want a simplified user experience with clear task flows so that I can easily validate the quality of my data without needing deep technical knowledge. I anticipate intuitive visualizations that’ll transform complex data into actionable insights effortlessly.”

Pain Points

  • Non-standard taxonomy reduces comprehension.
  • Features were hard to find.
  • AI functionality wasn’t clear.
  • Data visualization lacked business focus.
Persona 01

Data Architect

Technical User

“I want a streamlined and user-friendly process for managing data connections and validation checks, so that I can easily onboard datasets into different projects and ensure data quality without manual effort.

Pain Points

  • Non-standard taxonomy reduces comprehension.
  • Collaborating with non-tech users was tough.
  • Data segregation between projects/domains was improper.
Persona 02

Data Analyst

Technical User

“I want an intuitive and comprehensive user interface with task-oriented workflows, so that I can efficiently navigate and validate data, manage custom rules for data tables, and easily communicate insights at different levels of administration.

Pain Points

  • Challenges in conveying data quality needs to engineers.
  • Difficulty understanding technical data quality insights.

1.2. Heuristic Evaluation of Existing UI

Three seasoned design experts conducted a heuristic evaluation focusing on distinct aspects of usability. Their collective evaluation aimed to refine the design aspects, prioritizing user-centric improvements like usability, learnability, findability, standardization, etc.

DataBuck Heuristic Evaluation Part01
DataBuck Heuristic Evaluation Part02
DataBuck Old UI 02
  1. The filter icon which is essentially a column level search opens up a pop-up for search and adds an extra unnecessary step.
  2. The export table options belong at the table level menu and should be harmony with the visual style of the table.
  3. The green fill around connection name makes it looks like a button. It just indicates the health status of the connection.
  4. The vertical lines are not needed and they increase the visual noise in the table.
  5. The action icons are all in different colors and are visible all the time for all the rows which makes the table look cluttered.
  6. The more options show the hidden column values, which is not a very good way to show them.
  7. “Show” does not very clearly indicate that the filter is being “applied”

During the heuristic evaluation, recurring usability issues were identified:

  • Improper navigation leading to reduced findability of features.
  • Non-specific, cluttered & inconsistent action buttons.
  • Disorganized and cumbersome table filtering.
  • Inconsistent highlighting of selected options.
  • Mismatch between page titles and menu titles.

2. Ideation & Paper Sketches

2.1. User Flows

User flows were crafted after a comprehensive assessment of the current proof-of-concept product, ensuring a systematic approach to understanding user interactions, needs, and navigation within the application.

DataBuck Old User Flow

2.2. Paper Sketches

Concepts were iteratively developed through multiple rounds of paper sketches before jumping to the digital medium and preparing the wireframes.

Paper Sketch Image

2.3. Revamping the Taxonomy & Information Architecture

The app’s structure and navigation were redesigned, improving how users find features. This revamp focused on reducing clutter by refining options and optimizing taxonomy, leading to a more intuitive and efficient navigation system.

Revamping AI Image

3. Wireframing, Refine & Iterate

3.1. Low-Fidelity Wireframes and Interaction Patterns

Interactive design patterns like table interactions, data filtering, status indicators, etc, were introduced for enhancing the usability.

4. Visual Design & UX Specification

4.1 Hi Fidelity Screens

The Low-fidelity wireframes were refined with the added visual design in accordance with the brand identity of the product. Furthermore, interactions were designed and highlighted using zero-code clickable prototypes.

4.2. AI Assistance

Conceptualization

The AI assistant was personified as a “Buck” character which also serves as the brand mascot. This adds to the visibility, interactivity and engagement of the feature.

AskBuck Mascot Image

Interaction Guidelines

After research and iterations, following interaction guidelines were defined to increase the perceived credibility and engagement of the AI assistant:

  • Ensure trust through upfront disclosure of capabilities and limitations of the chatbot.
  • Implement dynamic delayed responses for a realistic interaction.
  • Show task completion progress and allow users to terminate tasks at any stage.
  • Enable users to make amendments within the chat interface.
  • Provide optional visibility into the logic behind the provided information.
  • Cite sources of information from within the application, e.g., table or project names.

AI Autonomy

  • Buck provides autonomous recommendations to enhance user efficiency.
  • Autonomously suggests actions based on user behaviors and preferences.
  • Makes independent decisions to streamline user experiences.
DataBuck AI User Flow Image
User Flow with AI assistance
DataBuck Login Page Image
App Login Page showing Brand Mascot – Buck
DataBuck AI Section Image 2
AI Assistant Conversational Interface Design
DataBuck AI Section Image 1
Autonomous AI Recommendation Widget in Dashboard

4.3. Design System

We designed a complete Design system, comprising of all common UX patterns, to make the application consistent and make a matured Enterprise Application. Some examples of component specifications and visual style guide from the design system.

DataBuck Design System Image 2
DataBuck Design System Image 1

5. Implementation & Quality Control

Design Specifications Handoff :

  • Detailed design specifications provided to Front-end development team.

Recommendations for Specification Corrections:

  • Noted errors in specifications and suggested necessary corrections.

Identification of Bugs and Loopholes:

  • Identified and reported bugs and functional loopholes in the implemented product.

Multiple Rounds of Testing and Feedback:

  • Conducted iterative testing sessions post-implementation.
  • Solicited feedback from design team and relevant users.
  • Implemented optimizations to make the product more lightweight and efficient.

Refinement of Design Specifications:

  • Revised design specifications based on feedback and corrections.

Thank You For Scrolling!

Let’s Craft Brilliance Together