Product Configuration Tool

Product Managers collaborated and set up offer configurations by emailing Excel sheets back and forth. This often delayed product launches because of miscommunicated validations, typos, and outright missed emails.

I built this tool from prototype to production. I led requirements gathering meetings, created low and high-fidelity mockups with Sketch, designed the API request and responses, and built the tool in Angular.

A laptop showing a software interface with a blue sidebar and a white main panel, displaying a BOM type configuration screen, against a purple background.

Requirements Gathering

I started by meeting with the IT Analyst leading the project. He told me about the problem Product Managers faced, and I drafted interfaces on paper to visualize the jobs to be done.

These sketches were later used in meetings, which helped reduce the requirements-gathering timeline.

Hand-drawn sketch of a software license tool dashboard with annotations. It features a top ribbon with a search bar, project list, and project details section, along with a sidebar navigation. Annotations include notes about each element's function and design considerations for tasks and project grouping.

Prototyping

Before development, I used Sketch to create high-fidelity mockups demonstrating the end-to-end user journey of the two personas.

I iterated on my mockups by gathering feedback from future PM and BUPM users. Once they were satisfied, I gave the finalized mockups to the IT Analyst to include in their Rally user stories.

I also used these mockups to anticipate the necessary APIs and create this requirements document for the India-based back-end team. This greatly reduced the back-and-forth meetings and messages across large timezone gaps, keeping the project on track for release.

Flowchart or wireframe diagram of a software interface development or process, showing various screens and connections.
Screenshot of a technical document explaining BOM Type definition, including code snippets, comments, and a note about taskId, bomType, POST service, and taskStatus.
Cover page of an API Requirements Document with a partially visible page showing text and tables.
Screenshots of a computer software interface, including various screens with tables, forms, and menus, likely related to data management or programming tasks.

Development

To be iterative, I divided the tool’s development into two phases, one for each user persona.

In Phase 1, I built the various forms, tabular displays, and rules engine to validate product configurations as they are entered, removing delays due to user error.

In Phase 2, I added the logic to switch controls to view-only for the BUPM user. I also built out the custom table views and export features.

*Unfortunately, this is an internal tool so only mockups are available to share externally

In total, I developed 6 major features:

  1. Search filters across many subcomponents

  2. User role authentication

  3. Modal dialogs for View, Edit, and Multi-select actions

  4. Customizable table views

  5. Reactive form with validation

  6. Accordion component (later reused across the platform)