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:
In response to client requirements, there was a demand for features allowing users to set budgets and effectively track spending within the vendor management product.
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
Ideation:
Wireframes: Balsamiq
Balsamiq mock-ups here
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.