Spark Portal

Analytics
Analytics
Landing Page
Landing Page
Statement
Statement

Category:

Website Application

Client:

Spark

Duration:

6 months

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


Matrix

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.


pain points

Identified high impact pain points

Journey mapping workshop two


Journey mapping

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

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.


User Persona

UCDC canvas


UCDC canvas to define

Information Architecture

Hierarchical UX


IA

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);

  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

Design phase

Ways of working- Agile sprints

To keep track of the project and have a delivery timeline, Azure boards was used


Azure taskboard

Project task board


Azure 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 designs


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 test

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 file

Zeplin files handed over to the developers


Zeplin comment

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)

Thank you for reading!

Create a free website with Framer, the website builder loved by startups, designers and agencies.