Spark NZ · 2017–2019 · 6 min read

Modernising MySpark Business self-service on a legacy platform

MySpark Business was Spark's large portal for business and government customers, but many simple tasks still needed a service request or a phone call. As the only UX designer across up to four squads, I set the design direction and helped move customers from service requests to self-service in stages, around the old platform.

  • Self-service
  • Legacy platform
  • B2B portal
Role
Senior Experience Designer
Team
Product Manager, Senior BA, up to 4 squads, and teams from sales to provisioning
Timeline
2+ years
Platform
Web portal and React micro-portals
The redesigned MySpark Business connection details screen on a laptop, showing a mobile connection summary and a data usage chart.
  1. My part

    I set the design direction as the only UX designer on the whole portal, across up to four squads

  2. Key decision

    We moved tasks from service requests to self-service in stages, around the old platform, instead of waiting 18 months for a rebuild

  3. Result

    Customers could do more themselves. The work contributed to 20% fewer MySpark-related calls, an estimated $2–3M a year

01 · Overview

A portal that sent people to the phone

Picture an office manager who needs to add a new staff member to their company’s Spark account. In the old portal, they couldn’t do it themselves. They had to fill in a form or call Spark.

MySpark Business, earlier called MySpark Digital, was Spark’s portal for business and government customers. It covered mobile, data, broadband and managed services, with thousands of forms and variations across products and customer types.

Most tasks ran on service requests. A customer filled in a form, or called the contact centre, and Spark staff did the task behind the scenes. Key features sat three or more clicks deep, and some customer groups had no digital option at all. For Spark, that meant support costs that grew with every new customer.

02 · My role

What I owned, and who I worked with

I was the only UX designer on MySpark Business, and I set the design direction for the portal for over two years. I joined Spark as an Interaction Designer, and my title became Senior Experience Designer after a restructure.

My work covered the whole portal: navigation, existing journeys, moving service requests to self-service, new products, specialised micro-portals, buying and managing services, and login, users, billing and usage.

  • I owned discovery, journey mapping, user flows, interaction and visual design, prototypes, customer testing and handover.
  • I worked as a trio with the Product Manager and a Senior BA, supporting up to four squads at once, and planned journeys four to five sprints ahead.
  • I worked with CX, engineering, sales, account managers, billing, contact centre staff, network engineers and provisioning teams.
  • I mentored three designers who joined in later phases.

03 · The problem

Starting with why people called

It would have been easy to start with what looked broken. Instead, we focused on why customers were calling Spark, and which tasks could realistically move to self-service.

The research covered both sides. More than 30 interviews with small business, enterprise and government customers. Usability testing in Spark’s UX lab and remotely with regional customers. Interviews with the call centre, sales, network engineering and provisioning. The analytics and research agreed: customers couldn’t finish basic tasks without help.

Making the problem visible

The problem crossed a lot of teams, and most had never worked with a UX designer. So I built a wall. Using Spark’s JUCCI framework as a guide, I laid out customer needs, the core journey steps, pain points and questions, detailed user flows and the existing screens.

A long glass wall covered in printed journey stages, coloured circles, flow diagrams and sticky notes, in an open-plan office at Spark.
The wall on the office floor, where people walked past it every day.

People from sales, billing, engineering and provisioning would stop, ask questions and add what they knew. Those conversations connected customer needs with the processes and systems behind them, and approvals got faster because people already understood the problem.

04 · Key decisions

Four calls that shaped the work

Challenge

A full rebuild was about 18 months away. Waiting for it meant customers would keep calling, and nothing would improve in the meantime.

Decision

Improve the portal in four phases around the legacy platform. Each phase shipped on its own, so customers saw changes straight away.

  1. 1

    Quick wins

    Simpler navigation, the new brand, visual consistency.

  2. 2

    Self-service capability

    Password reset, user management, usage visibility. The things that caused calls.

  3. 3

    Core journeys

    Redesigned ordering and account management: buy, add, change, cancel.

  4. 4

    Micro-portals

    Separate React portals for segments the platform couldn't serve.

The legacy platform stays in place throughout. Each phase ships on its own.

Four phases instead of one rebuild. Customers got improvements while the harder work was still underway.

Challenge

Customers relied on service requests. Switching them off too early would leave people stuck.

Decision

Move tasks to self-service one at a time, and keep the service request open alongside each one until we were confident it worked.

Examples included adding a mobile plan, changing a plan, and adding data to a corporate connection. For some of these, about half of customers chose self-service straight away, while the rest kept using service requests.

Challenge

Most calls came from a handful of basic tasks, not from how the portal looked.

Decision

Put function before polish. Password reset, user and role management, and usage visibility came first. Spark’s monthly call centre reports showed calls about these three tasks dropped by about 15%.

Three redesigned MySpark Business screens: a mobile overview with usage dials, a connection usage view, and connection settings.
Redesigned mobile connection views. Usage, allowances and orders are up front instead of behind a phone call.

Challenge

Some customer groups had workflows the old platform couldn’t support. Squeezing them into the main portal would have made it harder for everyone else.

Decision

Design small React micro-portals, embedded in the existing site and released on their own schedule.

MySpark Business · legacy platform

Core portal

Products, billing and usage, users and roles, service requests

Embedded micro-portals · React

  • Managed Data self-serviceThe full lifecycle, across several products
  • Mobile as a ServiceEnterprise mobile device management and mobile journeys
  • Cloud Managed NetworkNetwork provisioning dashboard and tracker
  • Private APNNew orders and order tracking for government
  • Government portalCustom flows for public sector compliance
  • ADS queueA work queue for Spark staff

And several more.

Segments with their own workflows got their own small portals, embedded in the existing site. The core portal stayed simpler for everyone else.
A black and white comic-style storyboard. Grant, a Spark client lead, takes a call from Paul at a retail company, enters details while they talk, and emails a proposal straight away.
Storyboards help me get a team behind an idea before any screens exist. This one shows the Managed Data proposal journey.

Prototypes were built on Spark’s design system and went through more than five rounds of changes. We only took a journey forward once it scored above our 80+ testing threshold. I handed over annotated specs, edge cases and WCAG AA notes, and stayed involved through design QA.

Navigation patterns on a dark background: left navigation states, and three top navigation variants for customer service reps, organisation admins and portal users.
Navigation for three kinds of user: customer service reps, organisation admins and portal users.

05 · Buying online

One journey for devices, plans and accessories

I designed a connected purchase journey for devices, plans and accessories. Customers could start with any of them, set up what they needed, and add related products before checking out.

Setting up an iPhone on desktop and mobile, with colour and storage choices, accessories, a plan and special requirements.
Setting up a device, with accessories and a plan added in the same flow, on desktop and mobile.
The full cart on desktop and mobile, listing the device, insurance, plan, accessories and monthly and one-off costs.
The cart, with monthly and one-off costs shown separately.

06 · Outcome

What changed

Design was one part of these results, alongside engineering, product and support.

  • 20%fewer MySpark-related calls, from monthly contact centre reports across the portal programme
  • $2–3Mestimated yearly saving in support costs, based on contact centre data
  • About halfof Managed Data customers started using their new micro-portal soon after release
  • 80+testing score every journey had to pass before we took it forward

The wall became the standard way to do journey mapping across Spark business portal work. I added business patterns to the design system, and received the Best Team Player award for bringing other teams into the design process.

07 · Pat on the back

What the team said

Working with Shine on our Corporate Digital Portal for Spark Digital Customers was extremely rewarding. During that time we challenged the current design, looked for innovative but practical ways to implement a cohesive, user-friendly and extremely intuitive design.

Customer Journey Lead and Product Owner, Spark NZ

08 · Reflection

What I took from it

The wall turned out to be more useful than I expected. It gave teams a shared object to work around, and most of the alignment happened in front of it, not in meetings. I’ve used big, visible maps the same way since, whenever a problem is too big to hold in a conversation.

I also learnt not to wait for perfect technology. Working within the old platform got real improvements to customers far sooner than a rebuild would have. That office manager could now add a user without picking up the phone.