Shivangi G.

work

services

about

let's talk

Shivangi G.

Shivangi G.

work

services

about

let's talk

Suite UX Case Study

battery deployment app at industrial scale

The Project

The Project

Industrial battery testing and deployment is a high-stakes, data-dense operation. The SUITE by Ampere Hour required a robust system to track end-to-end processes - from rigorous testing to international logistics, and finally, on-site installation. A multi-month operation involving unique stakeholders and multitude of individual tests.

The objective was to transform a fragmented utility into a precise, mobile-first experience that felt less like a spreadsheet and more like a fast and accurate operations app.

Industrial battery testing and deployment is a high-stakes, data-dense operation. The SUITE by Ampere Hour required a robust system to track end-to-end processes - from rigorous testing to international logistics, and finally, on-site installation. A multi-month operation involving unique stakeholders and multitude of individual tests.

The objective was to transform a fragmented utility into a precise, mobile-first experience that felt less like a spreadsheet and more like a fast and accurate operations app.

Role

UX Architect
Lead Product Designer
UX/UI Designer

Platform

Mobile-first
Integrates with Elina

Mobile UX

Mobile UX

UX Resarch

UX Resarch

Information Architecture

Information

Architecture

User Journeys

User Journeys

The Challenge

Friction at Every Stage

Friction at Every Stage

Field operators and project managers were navigating a deeply nested information architecture that slowed down the whole process. The interface required field workers to plunge through upto seven levels of heirarchy just to save a form, causing severe cognitive load.

Field operators and project managers were navigating a deeply nested information architecture that slowed down the whole process. The interface required field workers to plunge through upto seven levels of heirarchy just to save a form, causing severe cognitive load.

Deep Navigation

Users struggled to find key sections due to buried menus and nested hierarchies.

Users struggled to find key sections due to buried menus and nested hierarchies.

Users struggled to find key sections due to buried menus and nested hierarchies.

Mobile Inefficiency

The forms were not optimized for on-site usage in mobile view. The current design isn't intuitive and took a lot of space.

The forms were not optimized for on-site usage in mobile view. The current design isn't intuitive and took a lot of space.

The forms were not optimized for on-site usage in mobile view. The current design isn't intuitive and took a lot of space.

Error-Prone

Inconsistent data entry interfaces led to rework during the approval stages.

Inconsistent data entry interfaces led to rework during the approval stages.

Inconsistent data entry interfaces led to rework during the approval stages.

Fragmented Ecosystem

FAT, Logistics, and Installation modules felt disjointed, lacking reusable components.

FAT, Logistics, and Installation modules felt disjointed, lacking reusable components.

FAT, Logistics, and Installation modules felt disjointed, lacking reusable components.

Stakeholder Study

Understanding the Operators

Understanding the Operators

By mapping the end-to-end journey, I identified three distinct user profiles, each requiring strategic UI adaptations and role-based logic.

By mapping the end-to-end journey, I identified three distinct user profiles, each requiring strategic UI adaptations and role-based logic.

The Evaluators

The Evaluators

Require intense, regular product engagement. They process massive batches (e.g., 84 battery requirements) and need rapid, repetitive form-filling capabilities.


Product Engagement: Regular

📅 2 weeks

Require intense, regular product engagement. They process massive batches (e.g., 84 battery requirements) and need rapid, repetitive form-filling capabilities.


Product Engagement: Regular

📅 2 weeks

The Ops Monitor

The Ops Monitor

Operate on intermittent, pulse-check engagement. Tracking 6-week sea shipments requires high-level dashboard visibility and simple status updates.


Product Engagement: Intermittent at the start and the end of shipment.
📅 3-4 days

Operate on intermittent, pulse-check engagement. Tracking 6-week sea shipments requires high-level dashboard visibility and simple status updates.


Product Engagement: Intermittent at the start and the end of shipment.
📅 3-4 days

The Placers

The Placers

Require deep, focused task execution. They manage physical components over a 1-month period, needing offline-friendly, highly granular step-by-step validation.


Product Engagement: Regular

📅 1 month

Require deep, focused task execution. They manage physical components over a 1-month period, needing offline-friendly, highly granular step-by-step validation.


Product Engagement: Regular

📅 1 month

Scenario-based modeling

Scenario-based modeling

84

84

84

approx. battery packs per factory run

approx. battery packs per factory run

approx. battery packs per factory run

341+

341+

341+

approx. individual test per installation

approx. individual test per installation

approx. individual test per installation

3

3

3

distinct modules
one unified system

distinct modules
one unified system

distinct modules
one unified system

6 wk

6 wk

6 wk

sea freight tracked
per shipment

sea freight tracked
per shipment

sea freight tracked
per shipment

MULTIPLE MODULES

MOBILE UX/UI

INFORMATION ARCHITECTURE

MULTI-USER STUDY

Revised User Flows

A to Z of Three-Modules

By mapping the end-to-end journey, I identified three distinct user profiles, each requiring strategic UI adaptations and role-based logic.

Mid-fidelity Wireframes

Combing UX thoroughly

Global Access
A unified login and homepage routing users strictly to their relevant domain (Testing, Logistics, or Installation).


Component Isolation
Breaking down massive configurations into isolated blocks (e.g., separating "Components" from "Cables" in the Installation view).


Linear Tasking
Replacing overwhelming dashboards with linear, wizard-like form completions for physical tests and photo documentation.

Shivangi quickly understood the product & proposed several thoughtful solutions for each UX challenge. By following an interesting "time spent by user" approach she gave us valuable insights that guided the decisions for each module. She’s the person for UX projects that involve complex products and multiple user types.

Shivangi quickly understood the product & proposed several thoughtful solutions for each UX challenge. By following an interesting "time spent by user" approach she gave us valuable insights that guided the decisions for each module. She’s the person for UX projects that involve complex products and multiple user types.

RISHABH KANDARI

SOFTWARE PRODUCT LEAD

READ FULL REVIEW

High-fidelity Wireframes

Streamlined forms and

Key challenge: rapid, accurate form completion with comprehensive information architecture, and zero tolerance for mis-entry that would invalidate certification.

Important design elements:

  • Component selection at the top

  • Instance detail log

  • Card information design

    • Live progress tracking as percentage

    • Status of the forms

    • Showcasing all types of test

Key challenge: replacing the overwhelming, long-scroll data tables with a Wizard UI utilizing the One-Thing-Per-Page (OTPP) pattern. Vertical tabs for form completion within each test instance.

Important design elements:

  • Easy navigation with OTPP form design

  • Live progress tracking as fractions

  • Card information design

    • Live progress as fractions

    • Info of the operator

Key challenge: high-level dashboard clarity for infrequent, time-sensitive check-ins across a 6-week shipment.

Important design elements:

  • Card information design specific to shipment process with container details

  • Dashboard design with live updates

Interface Decisions

Interface Decisions

Bottom Tab Navigation

Consistent bottom tabs, always visible, single-thumb reachable.

Consistent bottom tabs, always visible, single-thumb reachable.

Consistent bottom tabs, always visible, single-thumb reachable.

Back Over Breadcrumbs

Back button preferred over deep breadcrumb chains to have more focus on the task at hand.

Back button preferred over deep breadcrumb chains to have more focus on the task at hand.

Back button preferred over deep breadcrumb chains to have more focus on the task at hand.

Content-aware progress tracking

Fraction progress (e.g., 70/148) for physical instance tracking. Percentages for category completion to gauge overall project momentum at a glance.

Fraction progress (e.g., 70/148) for physical instance tracking. Percentages for category completion to gauge overall project momentum at a glance.

Fraction progress (e.g., 70/148) for physical instance tracking. Percentages for category completion to gauge overall project momentum at a glance.

Vertical Tabs for Forms

Vertical tab navigation within test forms (strategic, step-by-step) vs. horizontal tabs for content filtering.

Vertical tab navigation within test forms (strategic, step-by-step) vs. horizontal tabs for content filtering.

Vertical tab navigation within test forms (strategic, step-by-step) vs. horizontal tabs for content filtering.

Final Wireframes

Final Wireframes

The Impact

Scalable and Traceable

By prioritizing object-oriented UX and a clean component library, the Ampere Hour SUITE was transformed into a highly efficient operational tool.

Reduced rework and errors with clearer UX

Reduced rework and errors with clearer UX

Simplified navigation that logged complex battery tests faster

Simplified navigation that logged complex battery tests faster

A scalable design system with thoughtful UX components

A scalable design system with thoughtful UX components

More Projects

client services

BRANDING

USER FLOWS

PROTOTYPING

USER INTERFACE

IDENTITY DESIGN

GRAPHIC DESIGN

USER EXPERIENCE

INFO ARCHITECTURE

Storytelling

your story,

powerfully told

© 2024 SHIVANGI GARG

are you a young designer looking for guidance? click here to see how can I help you.

client services

BRANDING

USER FLOWS

PROTOTYPING

USER INTERFACE

IDENTITY DESIGN

GRAPHIC DESIGN

USER EXPERIENCE

INFO ARCHITECTURE

Storytelling

your story,

powerfully told

© 2024 SHIVANGI GARG

are you a young designer looking for guidance? click here to see how can I help you.

client services

BRANDING

USER FLOWS

PROTOTYPING

USER INTERFACE

IDENTITY DESIGN

GRAPHIC DESIGN

USER EXPERIENCE

INFO ARCHITECTURE

Storytelling

your story,

powerfully told

© 2024 SHIVANGI GARG

are you a young designer looking for guidance? click here to see how can I help you.