UX/UI Design Case Study
A cloud-based customer portal is re-designed to improve user experience and increase business value.
Sector
Information Technology & Services
Challenge
Improving the user experience of an existing cloud-based customer portal that is used for customer account, system and ticketing management.
My Role
User Experience and Interface Designer
Project Time
6 weeks (initial handover)
8 months total (phased iterations)
Overview
Pulsant is the UK’s leading IT infrastructure services provider with 10 regional data centres, delivering secure, compliant and intelligent platforms to customers across public and private sectors. Customers can access their network by using the cloud-based customer portal to view account details, system status, set up permissions, and log service desk/ maintenance tickets. The portal was designed primarily for viewing on desktop or laptop monitors.
Pain Points
Customer usage of the cloud-based portal was decreasing due to various factors such as outdated implementation, lack of consideration to content design for different users viewing specific information based on their permission setting, non-efficient layout and non-responsive interface. All of this impacts brand positioning and the re-assurance to customers that choosing Pulsant to support their business is the right decision.
The screen examples below shows what the Customer Portal used to look like. The UI/UX was re-designed across the entire system.
Identifying the Goal
Improve the customer experience and increase usage by re-designing the UI/UX whilst remaining in step with current branding initiatives.
Understanding the Users
The company works with many different types of customers with individual needs and individual characteristics. However, there are some common personality traits across them all. During in-depth customer research, the company have identified three key ‘personas’ which cover the most important customer groups.
Solution
Re-design the existing UI/UX with a focus towards well-organised presentation of information and efficiency, from on-boarding through to managing granular account detail. The initiative will incorporate responsive design for mobile devices thereby increasing accessibility.
Unique Constraints
Due to the complex nature of data infrastructure and legacy of back-end technology implementation, it was essential to weigh all technological constraints and prioritise areas of improvement accordingly. The project will also require an outsourced full-stack development team within a different time-zone to implement a phased re-design, on time and within budget. Thorough planning and good management was essential!
Project Requirements and Scoping
At the very start of the project initiative a workshop was held which included key business stakeholders and senior team members. The workshop was divided into 3 phases as follows:
Discovery
-
Creating a consensus for project milestones, plans, vision and overall direction
-
Understand business requirements, expectations, research and broader context
-
Gather existing knowledge about the project
Prioritization
-
Building a consensus on which features stakeholders value most and create a plan of action
-
Focussing on goals, ideas and user groups
-
Understand timelines, resources and limitations
Empathy
-
Understanding who the users are, their specific needs, motivations and behaviour
-
Shifting stakeholders perspective towards a user-centric mindset
Define and Ideate
A final requirements document was produced over four weeks by the project lead through consulting with all technical teams involved, outlining in detail the priorities of each project phase. I then analysed the findings and synthesised a design strategy that conforms to branding guidelines.
Branding & Strategy
As best practice dictates, one should consider the essence of the company’s brand, mission, vision, values, identity and tone of voice, and seamlessly incorporate it into the entire UI and UX workflow.
The essence of the brand strategy sees technology as the ultimate enabler. The company’s role is to help customers reach their potential, optimise performance and achieve growth targets, while meeting the challenge of managing a hybrid environment and maintaining compliance and security.
Vision
To help organisations reach their full potential by taking advantage of cloud to drive real business benefits. Ensuring that technology is a business enabler, underpinning future success and meeting the challenge of security and continuous compliance.
Mission
To continuously develop our knowledge, enhance our capabilities and improve our solutions in order to proactively meet the needs of our customers and stay ahead of a rapidly evolving market.
Values
Empowerment / Passion / Empathy / Simplicity / Accessibility / Humanity
I distilled the existing brand guide into this simplified guideline used for digital application development.
Prototype
The following illustration provides the information architecture of the customer portal showing all the screens within the system, however, access can be given to specific areas depending on user permissions settings.
The UX flow was defined through an annotated wireframe design shown below. Due to time-constraints, the wireframe was not interactive (or clickable), rather it was static. However, it still communicates key information of the UI elements with more detail.
The customer portal was designed to responsively scale when viewed on different digital devices, from desktop to mobile. The wireframe below shows early consideration.
The image below illustrates the entire core UX-flow, and finalised UI design applied using Adobe XD, which enables prototypes to be fully interactive and navigable.
The image below shows the final design of the customer portal dashboard (home screen), which is the outcome of much collaboration between key Pulsant stakeholders based in the UK and internationally based development teams. Behind this screen lies an incredibly complex IT maintenance infrastructure.
The screen designs below show more detail of key customer areas such as viewing and editing an account, adding a new account, creating a new ticket and viewing the service desk.
It is important to consider the customer's journey from the start to the very end and deliver the best possible UX. The example below shows the entry point for a customer, the login process.
As a multi-disciplined designer with experience in both user experience and interface design, I created a UI style guide, shown below, to aid developers in implementing the final design.
Test and Iterate
Testing was conducted during and after completion of each phase of the project by the outsourced, full-stack development team. Findings that effect UI/UX were communicated to me by the technical team lead and addressed accordingly through design iterations across the project lifecycle.
Outcomes and Lessons
The final product received positive feedback from internal departments which included marketing, sales, support and development, with overall customer usage measurably improved.
By using a modular design approach, development time was decreased ensuring timely delivery of the project. Working with an agile development team with an extreme time-zone difference was challenging but thorough planning and good project management helped smooth over any bumps along the way.
Tools Used
Adobe Photoshop, Illustrator, XD. /. Microsoft Office, Teams