Billing invoice design

1. Custom
Design for
Invoice
Storytelling

2. Introduction

3. 2 Disconnected Systems
Wireless Wireline

4. Legacy Systems
No UX presence
Culture
Challenges
Technical limitations
Restructuring in Management
Limited Resources
Team new to Agile
No APIs

5. Documentation
User Flow Diagrams
Lo-Fi/Hi-Fi Wireframes
Initial Visual Design
Prototypes
My Role & Responsibilities
User Research
Management
Cross Team Collaboration
Interaction Design
Brainstorm Features

6. Brainstorming

7. Rapid Prototyping

8. Agile Team

9. Me
Product Owner
(Billing)
ATG Developer
ATG Developer
Product Analyst
Product Analyst
Java Developer
Scrum Master
QA
Front End
Developer
QA
Front End
Developer
The team

10. Started with Wireline
Wireless Wireline

11. Invoice Page - Summary
Old New
Allow user to focus on the
core content - the charges
Hide & reduce space for
secondary information

12. Invoice Page - Details (Table)
2 Pages - User loses context
Old New
One Page - User keeps context

13. Summary-Details Navigation
vs
1 21
New Old
page pages &
popups

14. From the Eyes of the User
If the user wants to focus on the
details of the charges, they have to
keep on going up and down & up and
down on the page.
This created an opportunity eliminate
a usability issue and create a unique
design solution
Independent of User Story work, I
started brainstorming a solution…

15. Once Upon
a Demo

16. Table Nav Bar - Prototype

17. Split Back-to-Top - Prototype

18. “Verizon does not have that”
Fist Bump !

19. Table Navigation Bar
1

20. Table Nav Bar
User can navigate between tables
without having to navigate back up

21. 2Split Back-to-Top

22. Split Back-to-Top
Quickly takes user to top of the
invoice page regardless how low they
are in the page
Quickly takes user to top of the table
so they can quickly navigate to other
tables

23. Agile Team

24. Focus shifted to Wireless
Wireless
Wireline

25. Unexpected Charge Complexity
Wireline Wireless
Line-
Level
Charge
Line-
Level
Charge
Details
(Tables)
Line-
Level
Charge
Details
(Tables)
Line-Level
Charge
Line-
Level
Charge
Details
(Tables)
Line-Level Charge
Line-Level Charge
Wireline
Type+ + +

26. Wireless Invoice Summary
Exploring ways to show additional
invoice summary information
Exploring how to communicate middle
tier charges that didn’t exist in wireline

27. Wireless Invoice Details
Search results for phone numbers
Similar to wireline, most granular
level of charges are often in tables
Middle-tier charges unique to wireless

28. 3Sliding Panel

29. Interactive Prototype

30. Wireless Invoice Details

31. Summary-Details Navigation
vs
1 30
New Old
page pages &
popups

32. Future

33. 4Invoice Timeline

34. Timeline Prototype

35. Thank You,
Ahmed Arshad