2017-2019

Product Design | E2E Journey | UX Design

MySpark Business

B2B, B2C Self Service Portal

What did i do?

I was the only designer for MySpark Business, the self-service portal for Spark's business customers. I led and managed research, design planning, and workshops to align stakeholders from different departments. I also developed the product design strategy with the team and made sure we delivered the design for the first release.

I took on different roles as needed, sometimes working with a team and other times leading company-wide initiatives. I also partnered with and mentored junior CX and UX designers when I needed extra help to carry out my vision and responsibilities effectively. This allowed me to contribute to different parts of the business and achieve successful results.

Identifying problems

When I started, I noticed two major issues right away. The first was improving the look and feel of the portal to match Spark's new design. The second was addressing the customer needs and problems faced by SMEs, Government and Corporate customers. It was clear that the portal's outdated and clunky features were causing a lot of customer calls

1. Product enhancements

Spark decided to upgrade the portal from an old platform with broken features to React. This new approach would use patterns from MySpark, our consumer-facing portal, to solve problems. However, building new features on the old platform was still hard.

2. Addressing customer needs

I started by understanding current user pain points through customer and call centre feedback and a UX audit and UCDC (user-centered design sessions) session to pinpoint needs and opportunities.

We had to make decisions

We have decided to make incremental changes to the portal to ensure it continues running smoothly for current customers and to enhance new features separatly.

Low-hanging fruits
Modify the Interface by changing navigation, font colours and spacing on the existing platform to align with Spark's new design guidelines for an improved look and feel.

Freeze existing journeys and features
Stop any further development or enhancements to existing journeys or features unless they were identified as broken.
Adopt React for new stand-alone features. This approach made for seamless integration with the portal or display within an iframe, maintaining consistency and leveraging the benefits of modern technology.

Micro-portals for bigger product sections
Create a dedicated section under 'MySpark Business' specifically for managed data, and Government customers focusing on special product-oriented content. This new area would be built from scratch using React to ensure optimal functionality and user experience.

Improvements

We are constantly planning improvements, and maintaining constant communication with key stakeholders - tribe lead, product owner and lead business analyst.

As the project unfolded, I helped shape the backlogs, initiated design activities, conducted research and led the redesign efforts. Throughout the process, I ensured a collaborative approach by incorporating feedback into the designs, conducting testing and iteratively refining the solutions to align with project goals.

1. Navigation, Colors, spacing & typography

First we modified the navigation, typography, colours and spacing of the existing .NET platform to align with Spark's new design guidelines for an improved look and feel.

2. Continuous testing plan

We conducted ongoing tests on the concepts in our UX lab, involving both customers and call centre staff. Recruiting business customers was a constant challenge so we limited their involvement to significant changes and introducing new journeys. Our goal was to consistently achieve a System Usability Scale (US) score of 80 or above. This helped us ensure usability and customer satisfaction with our initiatives.

3. Redesigning Forms

We had a major issue with the forms used to gather customer information, handle service requests, and request quotes and proposals. These forms were inflexible, lengthy, and couldn't populate customer details, which frustrated customers who had to enter the same information repeatedly.

redesigned the remaining Forms, incorporating clear labels, smart features, shorter formats, and displaying only the necessary fields. We now collect only mandatory details, the minimum information required to fulfil a customer request or order.

4. Self Serve first

Through extensive research and auditing of existing forms, streamlined the user experience by transforming select forms into self-service features, empowering users with greater control. Eliminated redundant forms and introduced dynamic new ones. For instance, instead of completing lengthy forms to request data usage history, users could conveniently access it online

Solving customer problems

Through discussions with architects and shadowing team members from data, development, sales and provisioning and business analysts, I acquired sufficient knowledge to initiate the project and gather basic business requirements. Despite the complexity of the products, I created detailed logic flows for Move, Modify, Add and Cancel journeys across multiple products and variations. Step by step, we modernised and enhanced the journeys and features. Throughout this iterative process, I generated wireframes and screens, testing them with both customers and staff members for continuous improvement.

The wall

I've started an ambitious wall to build a display of artefacts, using Spark Digital's JUCCI framework as a guide. At the top, I listed the identified customer needs, followed by the core journey steps underneath, and then mapped out the key points to consider. After that, I placed detailed user flows and mapped the existing screens.

How the wall helped me

I worked closely with various teams including sales and marketing, product and pricing, billing, network engineers, provisioning, and logistics. These teams had not previously collaborated with an Experience Designer.

I found that displaying journey maps, user flows, and other visuals on the floor was incredibly helpful. People passing by would stop and look at the wall, leading to conversations about different aspects of the product, journeys, and solutions. I was always available to answer questions, share ideas, and post them on the wall, which gave me incredible insights and led to some great conversations.

Workshops

I planned and facilitated multiple workshops throughout my time working on the project for various reasons, including UCDC workshops, Current and Journey Mapping Sessions, and collaboration sessions with architects and development teams.nt teams.

Journey mapping workshop

UCDC Session with Provisioning team

Journey map session CMN

User Centered Design Canvases

I've used UCDC as a discovery tool to thoroughly identify user needs and business requirements. By collaborating with stakeholders, we pinpointed who the users are, what they need, and what solutions we can bring. This deep understanding of our target audience helped us define the product, adjust our business strategies, and determine our competitive advantages.

Storyboards

Based on the situation and problem I need to solve, I usually create multiple artefacts to communicate with the stakeholders. Storyboard is my go-to tool to communicate ideas effectively to the team

Userflows

I always map out user paths to understand the different ways users interact with a product. I use tools like Draw.io, Lucidchart, Figma, and Miro to create visual representations of user flows, gaining a deeper understanding of user paths and system processes.

Journeymap example

Journeymaps

Depending on how much we know about the journey, I've used various methods to create current-state and future-state journey maps. These maps provide detailed insights into the customer's experience, highlighting frictions, pain points, and emotions. This understanding allows us to improve and optimize the user experience effectively.

Usertesting

Getting larger customers, such as corporate and government clients, to participate in user testing is always a hassle. So, we heavily rely on small and medium business owners to test our ideas. Once we deploy the changes, we gather feedback from the bigger clients through our sales and marketing teams. This approach allows us to continuously refine our solutions based on diverse perspectives.

Design system & Handover

I have utilised, created, and contributed to Spark's design system, and I have crafted our final designs using it. I shared the designs with the development team via Zeplin and organised handover meetings to explain expected behaviour, variations, edge cases, error scenarios, and supported the development team throughout the process.

Outcome

Step by step, we modernized and enhanced the journeys and features. Throughout this iterative process, I created wireframes and screens, testing them with both customers and staff members for continuous feedback and improvement. This collaborative approach ensured we consistently refined and optimized the user experienc

Portal improvements

  • Login and user management

  • Change password

  • Buy journeys - Product and services

  • Add product journeys

  • Change journeys - Product and services

  • Cancel product journeys

  • Change ownership journeys

  • Service request - Self-service

  • Billing

Micro portals (design finished)

  • Managed data Self-service portal

  • MAAS Service (Mobile as service)

  • CMN portal (Cloud-managed network portal)

  • PAPN -Order portal

  • ADS Queue for Staff

  • Portal for Government customers

Achievements

Received the best team player award during the project, emphasizing the commitment to collaboration and delivering high-quality results.

Recognised for saving significant resources and effort by understanding core needs and providing alternative solutions for projects.