Three UK
Creating a Digital Corporate Portal to enable businesses with over 50 connections to manage their accounts online
Three Business was on a rapid growth trajectory, aiming to prioritize a digital-first approach for both customer and channel experiences.
The client noted that in nearly all recent corporate bids, the need for a corporate self-service portal ranked as a top priority. Delivering digital self-service capabilities was crucial to success, particularly for their medium to large corporate customers.
At the time, Three was the only MNO without a corporate portal, limiting their ability to compete effectively in the market.
/Users/mauromicozzi/Downloads/unica-masterpiece-complete-process.png
Project statement
The client needed a Digital Corporate Portal to enable businesses with over 50 connections to manage their accounts online. The primary focus was on in-life self-service account management for medium, large, corporate, and public sector customers.
During the “Discovery phase” we had to deliver an MVP of the portal, covering 3 key user journeys:
- Dashboard view at different levels (Corporate - Department/BAN - Line/MSISDN)
- Add new line
- Raise a ticket
Users
Corporate admin:
- Acts as the primary point of contact for day-to-day interactions with service providers
- Manages accounts, including personal information and onboarding/offboarding of user
- Authorizes workflows, such as approving user requests and purchasing on behalf of users, depending on the workflow context
- Generates reports related to billing and out-of-plan charges
- Typically found in larger companies with dedicated IT departments
- In smaller companies, this role may be assumed by the business owner or delegated to a personal assistant
Responsibilities
As a member of the UX team, my responsibilities included:
- Understanding business requirements, brand guidelines, and the design system
- Conducting stakeholder interviews
- Performing competitor analysis
- Defining key journey flows for the MVP
- Designing high-level wireframes with journey walkthroughs
- Creating an interactive prototype
- Presenting designs to the client and collecting/implementing feedback
- Handover all approved wireframes to the UI team
Design process
The project was organized into 4 design sprints, each lasting 2 weeks:
- Weeks 1-2 Understand of business and technical constraints and aspirations
- Weeks 3-4 Prioritize list of features for the MVP, along with an initial assessment of effort
- Weeks 5-6 Define target user journeys and design first draft of the B2B portal
- Weeks 7-8 Finalize work package for the MVP with defined product backlog
At the end of each sprint, we conducted a meeting with the client to share our progress and gather feedback for implementation the week after.
Scope and constraints
The scope of the “Discovery Phase” was to assess the current market landscape and analyze competitor offerings to deliver a Digital Corporate Portal that allows Three UK’s clients with over 50 connections to manage their accounts online.
In a large project like this, numerous stakeholders and teams are involved, making it challenging to stay updated on all changes, from UX research to the technologies involved.
Managing client expectations was quite difficult at the beginning. Considering the nature of the “Discovery Phase”, client expected us to explore solutions for different user journeys but we did not have clearly defined them, spreading precious time and efforts. After the first two sprints, we clearly defined the features and user journeys to be finalized and this allowed us to proceed with our work more smoothly and maintain an efficient workflow.
Competitor B2B telco portals analysis and interviews with experts to understand what the market is offering
I started analyzing the main competitor such as Vodafone and EE, creating a sitemap of every corporate portal and taking screenshots of the main pages.
Then I helped the Research Team conducting interviews with experts in the telco field, resuming the main points in 3 slides.
Finally I have collected all the analysis results in a comprehensive Miro board.
User journeys map to clearly define the MVP scope
We have to deliver 3 main journeys for the MVP that involve the Corporate Admin in:
- Adding new lines (Adapt Business Plan)
- View usage (BAN level + MSIDN level, both with and without Three Analyst subscription)
- Raise an issue
I structured every journey with a precise goal and expectations. The flows show different phases of the journey in the horizontal axe and their related experience analysis (touchpoints, emotions, pain point etc.) on the vertical axe.
v.1.0 - Wireframing first concept of the dashboard from low to high fidelity
Based on the research outputs and defined customer journeys, I organized the architecture information for every view of the dashboard (Corporate - BAN - MSIDN) followed by the first wireframe draft.
After that I moved on designing high-fidelity wireframe. The main sections highlighted in the first draft were populated with placeholder content to have an overall view of the structure.
v.2.0 - Exploring interactions and search functionality
After made sure the first structure was pretty solid, the next step was to focus on the Corporate view. I started exploring interactions and search functionality.
A desired feature was that users have to be able to quickly perform actions even on the Corporate view page, that is the highest view/level on scope.
v.3.0 - Introducing dashboard customization with widgets
At this point the dashboard concept evolved completely. After the interviews with experts in the telco field we realized that there is no “right” solution for a perfect corporate dashboard layout that can address all users needs.
The only feature that can helped us solve this problem was to introduce the idea of a customizable dashbboard.
I redesigned the dashboard with a list of default widgets that composed the layout. In this way users can use the default layout or add/delete widgets, or they can change their order and build a custom view based on specific needs.
Designing solutions for navigation, search functionality, quick actions and widgets
At this point I designed different solutions for the dashboard main navigation, search functionality and quick actions.
The introduction of the customization feature was game changer. At this point I had to design different solutions to create an initial set of widgets that could display useful information, perform quick actions and promote marketing offers.
Before create the set of widgets it was time to finalize search funcionality, quick actions and dashboard navigation so I wireframed different options.
Search and quick actions
Full screen and side navigation layout options
Main navigation
Top, side and sticky navigation options
Widgets
The initial set of widgets to create the dashboard views: Corporate - BAN - MSIDN
Completing user journeys: add a new line and raise a case
Once the set of widgets were completed I focused on the other two customer journeys for the MVP.
Add new line
The journey has been divided in 6 steps where the user has to input all the required information to complete the action.
The layout is composed of 2 columns:
- Left column shows the first request to the user such as “Department selection”
- Right column shows related information to be filled based on the first request
The user can go to the next step only if all the required info are inputted, while he can go back to any previous step with the related “Edit” link.
Once the process is completed a successful message is displayed and it shows the updated number of lines with useful information.
Raise a case
The layout is a simple one column that clearly shows the form with all the required information to raise a case.
If users have a dedicated Customer Success Manager, the related box with its name, surname and contact number is displayed before the form.
Once the process is completed a succesfull message is displayed and it shows the case reference number with useful related information.
Preparing final prototype to deliver the MVP
All wireframes were finalized and ready to create the interactive prototype for the MVP.
I added smooth animations on every customer journeys of the MVP and I focused on little details like loaders and error messages.
The prototype has one entry point from where you can start interactive with the dashboard and test the customer journeys.
Evolution of the user interface created by the UI team
While I was working on the wireframes, in parallel the UI team was creating different version of the UI. Here some visuals of the dashboard UI evolution.
Final UI mockups
Active side navigation
Collapsed side navigation
In just 2 months, we successfully met client expectations by providing all necessary information and materials, enabling the client to make informed decisions about the portal's development.
We delivered an interactive MVP that addressed the three key user journeys and presented the requested features.
Additionally, we began exploring advanced features (despite them being out of scope) that, based on our research findings, could significantly impact the product. These included dashboard customization and advanced search capabilities.
Ready to take your digital product to new heights?
Schedule your free 30-minute consultation right away!
Why reserve your spot now:
Receive instant feedback from a design expert with over 10 years of experience
Gain access to a network of specialized freelancers I regularly collaborate with
Join the consultation online via Google Meet, accessible from any location on your preferred device. Plus, it’s completely free!