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.

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.

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.

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)