Spark Portal

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.

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.

To help all of New Zealand win big in the digital world.

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

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.

• 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

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.

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 to define

Hierarchical UX

Portal Information Architecture

Prioritisation board during big room planning session

By identifying the high impact pain points we could list the top 10 pain points as a Minimum Viable Product (MVP);

1. Right Billing information
2. Right usage history
3. Real time information
4. Simple user interface
5. Export data into suitable formats
6. Reach help desk
7. Show yearly trends
8. Summary vs detailed breakdown
9. One stop shop portal
10. Single sign-on and role based access

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

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 in Balsamiq

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.

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

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

• 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.

The below video demonstrates High fidelity screens of the dashboards

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

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.

Learning

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.

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)

Thank you for reading!