Spend Analysis Widget

Venminder

My Role:
  • Primary Designer
  • Research
  • Wireframes
  • High Fidelity Design
  • Prototyping
  • User Testing
Tools:
  • Balsamiq
  • Figma
  • Visual Studio
  • Zoom
Team:
  • Designer
  • Product Manager
  • 3 Back-end Devs
  • 1 Front end Dev
  • 1 QA person

Challenge:

Clients requested the ability, based on user permissions, to track spending within the Venminder app, for each of their vendors and products.

Solution:

Addressing client expectations, the vendor management product is equipped with the ability for clients to set budgets and monitor spending, enhancing financial oversight.

Additional functionality:

  • Create multiple budgets per vendor
  • Ability to track multiple products per vendor
  • Manual, Import budget and spend data
  • API
  • Manage attachments
  • Download data

Process Summary:

  • Discovery
    • Discuss vision and direction with product manager
    • Stakeholder interviews
    • Identify personas
    • Evaluation of existing product and processes
    • Gather and review feedback from customers
    • Story mapping
  • Ideation
    • Sketch ideas on paper
    • Low fidelity wireframes in Balsamiq
    • Internal Reviews, design iterations
    • High fidelity mockups using HTML prototype
    • External reviews with select CAB (client advisory board) members
    • Internal user stories, Size project
  • Validation
    • User testing with internal teams
    • Pilot testing with select CAB members
    • Post launch interviews with CAB members

Discovery:

Stakeholder interviews

Screenshot

Ideation:

Prototype: HTML / Javascript

Below: This screen would be an example of an empty state.

Below: An example of a vendor with a budget of 250k, with 200k already spent.

Below: In this case the Vendor First Core has 4 products the client is tracking spend for within the budget "First Core 2021".

Below: In this example the client has added notes and attachments to the budget spend details for the 4 products.