Approximately 6 minutes read
March 2020- July 2020
Project overview and goal
The purpose of this project was to improvise on the existing reporting and the billing data by designing and developing simple, interactive and easy to analyse dashboards thereby reducing human cognition in data visualisation and increase the digital automation in reporting and billing life cycle.
My role and the wider team
I lead the UX/UI side of things and the other members included a CX person, Customer outcomes, Client leads, Data automation team, Delivery Enablers, Product Owner and End to End Architects.
Organisation big vision
To help all of New Zealand win big in the digital world.

Design Process
We adopted the agile working model to achieve our project goal. The Design thinking framework we followed was called Five D's which translates to Discover, Define, Develop, Deliver and Determine

The Five ‘D’ process
Discovery phase- Qualitative research
The main purpose of conducting Qualitative research was to question the brief and gather as much information as possible. Co-create workshops encouraged effective collaboration. The outcome of the workshop was to define a clear problem statement.
The Risk Matrix approach
X value: Low Pain to High pain
Y Value: Low impact value to high impact value

Users pain points mapping session
Risk Matrix workshop one
Journey mapping helped gain lots of insights on the user touch points and identify the manual steps. This created a huge opportunity to identify key pain points and channels to improve the user interactions.

Identified high impact pain points
Journey mapping workshop two

UX wall- Journey mapping session to identify the pain points on using the existing portal
Outcome
The define phase allowed us to narrowed down our focus on users and business pain points and find opportunities how can the portal solve these issues.

Outcome of finding balance between Business goals and user goals and how the portal can solve them
Qualitative methods
We were able to learn about the current usage traffic of the portal. Due to the information confidentiality the numbers cannot be addressed in this case study.
User goal
Users wants to track the usage and get accurate billing information across all the products they consume from Spark.
Business goal
Provide real time information by filtering raw data into usable information and automate the entire billing and reporting life cycle.
User need statement
Andy works in a bank as a data analyst and he needs to monitor his company's usage in order to analyse that information and create strategy to save operational cost and drive his company's performance.
Outcome
We were successfully able to get the most important things that was required to proceed with the next phase;
Understanding the user group
User needs
Clear problem statement
Define phase
Based on the research and the user need statement we created a persona and performed a journey mapping session. My role was to identify the pain points and find opportunities in the journey where we could address and solve the customer's problem and understand their needs.

UCDC canvas

UCDC canvas to define
Information Architecture
Hierarchical UX

Portal Information Architecture
Big room planning priority board

Prioritisation board during big room planning session
Outcome
By identifying the high impact pain points we could list the top 10 pain points as a Minimum Viable Product (MVP);
Right Billing information
Right usage history
Real time information
Simple user interface
Export data into suitable formats
Reach help desk
Show yearly trends
Summary vs detailed breakdown
One stop shop portal
Single sign-on and role based access
Design phase
Ways of working- Agile sprints
To keep track of the project and have a delivery timeline, Azure boards was used

Project task board

Azure task board

End to end system level view
UX Strategy
As the lead designer I had to plan things in advance and design future proof design so the dev teams can catch up.

Planning in advance- MVP to future features sets
Low fidelity wireframes


Low fidelity wireframes in Balsamiq
Design System
We had inhouse brand guidelines and visual style and re usable components in the design system. This saved the designer a lot of time and made design work efficient.

Design System

Design System
UI Anatomy
The designed left nav is used across all the Spark self portal products

Desktop Nav

Desktop Top Nav
Tools and softwares- Sketch+Invision+Zeplin
Working file
User Testing
I conducted a moderated usability test session with five users, to seek feedback and validate my assumptions with the prototype.The purpose was to test the prototype and seek insights on the users flow to capture information.

User testing to gain customer feedback and validate assumptions
Key learnings
Users were expecting the items to show up in few clicks
Users were struggling to get clarity to understand some information in the low fidelity wireframes
Users appreciate appropriate CTA's
Early testing helps gain customer insight in idea level sufficient enough to validate our assumptions
Users are looking for most amount of information in least amount of time.
Users needed instant view so it careful not to use too many visual elements.
Users care more about the summary rather than detailed views.
User Interaction and visual design
The below video demonstrates High fidelity screens of the dashboards
Future features
Deliver
The handover process begins by giving a product demo presentation and explaining the key stakeholders the design features and the interface.

Final demo presentation of the portal to the dev team

Design Presentation to the wider business group
Project documentation

Zeplin files handed over to the developers

Project learnings
Few screens and have been built and rolled out to the pilot customers as a Minimum Viable Product (MVP). The development of the other screens are still under progress.
The key take away was that the implementation of the MVP approach and rolling out to pilot customers rather than to everyone. It was interesting to get exciting feedback from the users who were early adopters to this self service portal.
Customer feedback
Thanks for the improvements made on the portal. These kind of changes make a big difference in our organisations daily activities.
-Mr. Watson (Department of Conservation)






