Detailed Case Study: Color Pad – Stylized Water Colors for School Kids

Physical Product Design

Stylized Water Colors for School Kids

Project Brief

The objective is to design a kid-friendly watercolor box inspired by the sleek and modern look of an iPad. This watercolor box will incorporate an innovative color drop design to prevent messes, a lid that doubles as a color palette, and a built-in stand to keep the box at a proper angle, making it easier for kids to access and use the watercolor cakes while painting.

Customer

Kokuyo Camlin Ltd., a distinguished and established leader in the art supplies industry, has built a legacy of trust and excellence. With a rich history of providing high-quality products, the company is dedicated to fostering creativity and innovation for artists of all ages and skill levels.

Their mission is to inspire creativity and enhance the artistic journey by providing innovative, user-friendly products that cater to everyone from young children to seasoned professionals.

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 implementation
  • UX Testing & Iteration during Development

1. Requirements & Planning

1.1. User Personas Creation

Tanvi

7th Std Student

“I Want to create beautiful paintings to decorate my room and give as gift to family members and friends.

Pain Points

  • Gets frustrated with paint spills and stains on clothes.
  • Hard to open and close paint containers and mix colors properly.

Varad

5th Std Student

“I am creative, curious, and imaginative and like experimenting with colors and expressing myself through art.

Pain Points

  • Art supplies should be designed for small hands and are simple to use.
  • Non-toxic, child-friendly materials.

Rohan

Water Color Artist

“I am a professional watercolor artist. I have developed a unique style that combines traditional watercolor techniques with modern themes. I also teach watercolor painting at a local art studio.

Pain Points

  • Compact and easy-to-carry watercolor sets for painting on the go.
  • A sturdy, compact palette with ample mixing space and secure compartments for easy transport.

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 Final Hi Fidelity Screens design for the MVP

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. Design System

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
DataBuck Login Page Image
DataBuck AI Section Image 2
DataBuck AI Section Image 1

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