top of page
  • 7773c353-72a7-4144-bb5b-1b6ace8e67b2_edited
  • bd2e04ed-d363-4e48-85f5-9b121eb22046_edited
  • bd2e04ed-d363-4e48-85f5-9b121eb22046_edited
4ac49489-42ba-4120-a70f-9e2e509d3f42 (1).png

Aligning Minds, Not Just Files -

Requirements Management Tool 

4ecef6b1-3fb4-4b82-816f-22aa1e68ac4f.png

Role

UX Designer & Developer

f66fe5d4-294d-40f2-916b-69ad8143c0ca.png

Timeline

30 Days

86c8407b-8fb6-4005-8250-ec81cf522bbf.png

Client

Bosch

THE PROBLEM

At BOSCH, designing UI for car infotainment systems wasn't the hard part, aligning teams around those designs was. Developers were guessing requirements, designers were repeating themselves in email threads, and stakeholders were left asking, “Wait, where are we on this?”

The existing process was broken: handoffs were messy, documentation was scattered, and miscommunication bloated timelines. We needed one truth, one space, and one flow.

THE MISSION

Create a centralized requirements management tool where engineers, designers, and developers could collaborate in real-time and where stakeholders could actually see progress before the final demo.

f23a3ed0-46d7-4530-a6be-a7fa7b5159d0.png

Proposed solution UI - A Dashboard with HMI Screen on left and screen specific requirements on right with their current status.

APPROACH

Rather than designing in a vacuum, I grounded everything in Jobs-To-Be-Done and sprint-based Lean UX.

 JTBD + Lean UX in Action 

Why do users need the Tool? - JTBD Highlights 

requirement_engineer_clean_transparent.png

Requirement Engineer

"I want to write element-specific requirements fast and avoid repeated clarification."

2c01c8f0-3c12-4bc3-b56c-d08d03cdd55a.png

UX/UI Designer

"I want to hand off designs without manually explaining every pixel shift."

9b37cb45-919a-46e1-896d-d522d9e7dc80.png

Developer

“I want latest specs + designs in one view—no scavenger hunts.” 

eef0640a-2ac0-4490-b109-3b64a14a5b59.png

Manager

“I want live project status and clear ownership, not a Slack guessing game.”

df4b277f-e819-48e0-a843-e54e59253e67.png

Stakeholder

“I want visibility. Early. Often. Organized.”

Web App Workflow - Ideation

Workflow.png

User Journey Map: From login to complete Requirement Specifications document download

Frame 3.png

Each Requirement should contain these details

Frame 2.png

Requirement list View - Structure

Wireframes - First iteration

Wireframe1_edited_edited.jpg

Wireframe 1 & 2 : List of Projects > Each Project Overview Screen

Wireframe2_edited.jpg

Wireframe 3 & 4 : List of Screens & HMI Requirements in SRS format

Wireframe3_edited.jpg

Wireframe 5 : Screen Requirements View - Left side is the HMI screen, right side is the screen specific requirements

INTERACTION & PROTOTYPE - MVP

Built the tool with initial plan to check the usability and technical feasibility of the product and see how it could actually help its users the best!

bf83f7e9-ec85-478b-86df-d8eeea823ddb_edi

Initial Screen after login for all users

Each project tab contains project specific content, screens, requirements, download SRS option and all other details.

Project Tab when clicked takes you to Project Overview. Where the team can see overall status and project details.

All the project screens uploaded from Figma 

All the HMI requirements of the project - List view

Screen specific requirements view

Add generic/ project requirements from the list view.

Adding Element specific requirements for the screen. 

Select the element, click on the "Add Requirement" .

HIGH-FIDELITY DESIGN & ITERATIONS

PastedGraphic-3_edited.jpg

Sortable Tree View - Built the first high-fidelity design of Requirement List view.

What worked?

Requirement Card Layout

Expandable Requirement tree view for list

"Add Section" Button

Search Bar for requirement search

What didn't work?

 Requirement Status was not evident.

 Edit/Delete requirement - not accessible.

 Search filters missing.

 Visual appeal.

PastedGraphic-4.png

Refined Visual Design - High-fidelity design for the requirement list

PastedGraphic-4.png

Added a status colored bar near each requirement title for better indication of requirement status.

Frame 4.png

WHAT DID WE ACHIEVE? - RESULTS

40%

in design-to-dev handoff issues

2 Sprints

saved per release through clearer communication

Automated

SRS Document Generation

AND WE CONCLUDE! - REFLECTIONS

This wasn’t just a tool—it was a system of clarity. We didn’t just reduce errors; we rebuilt trust across roles. Designers felt heard, devs felt confident, and stakeholders finally felt informed.


This project showed me that great UX isn’t just about screens—it’s about building the connective tissue between people, tools, and progress.

bottom of page