CX Strategist | UX Researcher | UX/UI Designer | Interaction Designer
I lead and collaborated with developers, solution architects, (C-level) stakeholders and project managers throughout the entire process, from Discovery to the end of MVP1.
The BCX client requested UX/UI/CX design services for a client engagement portal. The goal is to enhance communication, collaboration, and overall ease of doing business to both retain existing clients and attract new ones. The key objectives for BCX are as follows:
- Facilitating seamless information exchange, communication, interactions, and - transactions between BCX and its customers
- Offering a comprehensive 360-degree view of the customer to empower frontline employees in delivering a superior customer experience
- Enabling self-service capabilities for customers, providing real-time information, streamlining communications, and offering opportunities for browsing and ordering.
As part of BCX's commitment to improving the Client Experience (CEX), the CEX team conducts an annual measurement of CEX levels. Unfortunately, BCX's CEX levels have decreased significantly over the past two years, resulting in increased client turnover and decreased revenue. Frontline employees have also expressed frustration due to insufficient client information during interactions.
To address these challenges, I incorporated suggested solutions based on the survey results obtained from FY20 CEX, resulting in a unified digital platform for both frontline employees and clients. This single platform streamlines services for employees and simplifies interactions for clients, consolidating various digital platforms into a single source of reliable information.
I have implemented a user-centric approach in the design and development of the BCX OneCX product, placing the users at the core focus. By gathering data and insights into their needs, I have fostered empathy for our end-users, resulting in a user-friendly interface that is well-received. My approach involves:
- Involving users from the start to understand their needs and guide design choices
- Analyzing the competitive landscape and market
- Aligning with our clients' business objectives.
The strategy design for OneCX was developed using the Double Diamond design model, which divides the process into four distinct phases:
Discover phase
Gather product insights, user needs and potential gaps better to understand the goals and scope of the project
I conducted a thorough analysis of (6) six local and (4) four international competitors, with a major emphasis on their customer-facing capabilities during the "Aware & Learn" phase of the customer's journey. My analysis included an internal evaluation and a review of competitor white papers, reports, or case studies.
Help’s me do business
- Bundling BCX's key services can streamline scoping and installation while maintaining a focus on customized solutions
- Custom business solutions enable process automation and reduce churn in scoping
- Providing trials for BCX products can reduce the need for future manual adjustments
- Emphasizing BCX's third-party contributions enhances its position and removes any obstacles perception.
Help’s me communicate
- Using FAQs and advanced bots improves initial customer relations and BCX's market position.
- Hosting the portal on BCX's site offers global access to vital information for business customers.
I gathered insights (pain points and challenges) to understand users and inform a relevant, personalised interface design that will be quickly adopted by targeted staff and customers
Whom we interviewed
- Delivery: Solutions Architect, Technical Architect, Chief Financial Officer, Contracts, Customer Solutions, Service Delivery & Integration Manager, Project Manager
- IT Services: Executive IT Service Management
- Sales and Commercial: Solutions Integration Manager, Account Executive, Sales Management, Sales Support, Finance Business Partner, Commercial Management, Commercial Back Office, Product Manager.
Activities & Deliverables
- Interview scripting
- Interview sessions
- Survey generation
- Feedback report.
"
Employees, their clients, and customers are keen to switch to minor manual and more automated ways of administration, especially in terms of contracts and order documentation as well as monthly reporting, which is calendar controlled and not real-time.
"
Users wanted a self-service hub for accessing real-time information and their solutions, providing a single, reliable source.
"
"
Accountable staff members face communication gaps between internal processes. Many BCX staff juggle multiple roles and tight schedules, requiring hyper-efficient time management.
Users sought a complete view of various information types, including documents, communications, status reports, and involved individuals in the request process.
"
The organization employs a diverse range of devices, with Windows-based devices and Android phones being the most prevalent. A minority of customers favor Apple devices.
"
Most users primarily utilize Windows-based laptops provided by their employers and operate within a business environment.
"
Department and process switch in orders/solution requests leads to either loss of sight of data or, alternative, duplication of data
"
Users expressed a desire for a centralized hub accessible to both clients and employees, where all current solutions would be readily available.
As-is journey mapping
User Journeys are a way of illustrating the steps that individuals take to achieve a goal. They begin with a timeline of user actions, and then thoughts and emotions are added to create a narrative through the (8) pillars of engagement. This refined narrative results in a visual representation of the customer's overall experience with BCX.
Define phase
Review hypothesis and refine priorities to inform design decisions based on evidence rather than assumption.
Archetype Development
Due to the BCX OneCX portal's emphasis on the overall user experience, I opted for behavioural Archetypes over Personas, as personas rely on demographic data to inform strategies, while archetypes focus on user behaviour and motivation. These two may not always align due to context and circumstances affecting behaviour. Archetypes, grounded in research data, are more valuable for defining user experiences and building a robust UX strategy, providing a stronger project foundation Ref: Smashing Ideas.
I defined the archetypes by initially identifying the user groups and then collecting data derived from their interactions across the eight pillars of engagement. Further insights were garnered through user interviews and surveys.
Archtypes
Trend Watching Supervisor
They are proactively watching for patterns in the data to proactively craft solutions for the future. They are masters at using technology to solve business problems.
Goals:
- They aim for strategic innovation, data-driven decision-making, and operational efficiency.
Thoughts & Needs:
- They focus on data analysis, technology solutions, and require access to data and advanced tools.
Feelings & Pain-Points:
- They experience excitement, frustration, and fulfillment while dealing with data quality, tech limitations, and organizational resistance.
Actions:
- They analyze data, adopt technology, plan for innovation, communicate insights, continuously learn, and solve business challenges.
Detailed Orientated Chief
They ensure that solutions are implemented according to plan but can be caught off guard by external factors influencing their business. They head up high performance teams that are quick to raise a flag when things don't go as expected
Goals:
- They ensure precise solution implementation and sustain high-performance teams.
Thoughts & Needs:
- They Prioritize details, processes, efficiency, and timely issue reporting.
Feelings & Pain-Points:
- They experience satisfaction when plans succeed, frustration with external disruptions, and anxiety from unreported deviations.
Actions:
- They develop and adhere to precise plans while cultivating a vigilant reporting culture within teams.
Collaborative Solutioneer
Technical experts whose super power is the ability to solve business problems by leveraging technology. They collaborate to delivering solutions that bring value to the customer,
Goals:
- They aim deliver solutions that provide value to the customer using technology.
Thoughts & Needs:
- They constantly seek innovative technical solutions and desire opportunities to collaborate and share knowledge.
Feelings & Pain-Points:
- They experience frustration by lack of collaboration or understanding from non-technical team members.
Actions:
- They prioritize solutions that benefit the customer by staying updated on the latest technological advancements.
They may not be the best communicators but are invaluable when it comes to solving complicated or specialist problems. They are the lone wolves burning the midnight oil and tend to be reactive to customer's demands.
Goals:
- They aim to solve complex problems, achieving expertise, maintaining independence.
Thoughts & Needs:
- They Focus on technical challenges, continuous learning, access to resources.
Feelings & Pain-Points:
- They experience fulfillment, occasional isolation, pressure, communication difficulties.
Actions:
- They delve into deep work, research and study, occasional late nights, reactivity, selective collaboration.
Delivering solutions that create value for their customer is their super power. They understand that relationships are built on trust.
Goals:
- They foster lasting customer relationships, provide valuable solutions, and build trust.
Thoughts & Needs:
- They think about enhancing customer relationships and need opportunities to connect personally and build trust.
Feelings & Pain-Points:
- They feel fulfillment when delivering value and pain when trust is strained.
Actions:
- They listen, communicate transparently, provide quality solutions, seek feedback, personalize interactions, collaborate, show empathy, and cultivate customer advocates.
They are forward thinking and always on the look out for new technologies and product offerings. They eat, drink and sleep sales and are instrumental in sunsetting legacy technology that is not serving the customer as it should be.
Goals:
- They explore cutting-edge technology, deliver valuable solutions, and cultivate trust.
Thoughts & Needs:
- They contemplate tech innovation's role in solutions and require opportunities for staying updated and building trust through innovation.
Feelings & Pain-Points:
- They feel excitement when embracing innovation and frustration when technology barriers or customer trust issues arise.
Actions:
- Stay informed about tech trends, integrate innovation into solutions, communicate transparently, adapt to evolving tech, and educate customers about benefits.
They focus on the bigger picture and connect others to drive the business forward. They see challenges as opportunities for growth. They make quick decisions to get things done.
Goals:
- They achieve results, drive business growth, and foster a strategic vision.
Thoughts & Needs:
- They prioritize the big picture and need opportunities to connect people and ideas while overcoming challenges.
Feelings & Pain-Points:
- They feel a sense of accomplishment when results are achieved and frustration when progress is hindered.
Actions:
- They make quick, decisive decisions, connect people toward common goals, embrace challenges as opportunities, and maintain a strategic focus on business advancement.
They have been with the business since inception. They know all about the history and are champions of the brand. They display process mastery but may have bloodspots to competitions and can be slow at adopting to rapid change and new technology.
Goals:
- They preserve the company's heritage, champion the brand, and uphold established processes.
Thoughts & Needs:
- They value tradition and history, needing opportunities to maintain the brand's legacy and adapt to change gradually.
Feelings & Pain-Points:
- They feel pride in preserving the brand's legacy but can struggle with competition and rapid technological change.
Actions:
- They uphold traditional processes, champion the brand's history, adapt at their own pace, and provide stability within the organization.
Behavioral Landscape
Stakeholders were divided into collaborative ideation workshops using four (4) archetypes. These workshops concentrated on eight (8) pillars of the journey zero (0), and added identified features based on user pain points. I utilized the collective insights to further identify priorities and generate feature/solution ideas, leading to the co-creation of pivotal journeys that informed the prototype in the next stage - Design.
Ideation steps
- Identify your top 2 priorities for each step of the journey (Broken into 3 categories Employee, Customer and Employee/Customer)
- Mapping of Solution features and/or functionality
- Voting
- Questions & answers.
After aligning the necessary features with the (8ight pillars, I created customer journeys around "know me," "show me," and "enable me" statements. The journeys included various user touchpoints and archetype involvement levels.
Design phase
Prototype key features, interface structure and success criteria so stakeholders can make decisions.
Through a deep understanding of user needs, behaviors, and requirements, I created a scalable Information Architecture (IA) that was designed to align with user expectations. This IA helped to reduce cognitive load for users and enhance clarity and structure throughout the product. Additionally, my insights helped to prioritize the level of effort needed for key features in the Minimum Viable Product version one (MVP1).
During the initial phase of the design process, I had to contemplate different user interface designs, navigation structures, and ways to display information. Instead of focusing on a single design concept right away, I opted to create a paper prototype that was broad in scope but shallow in detail. I then tested the prototype with our stakeholders to gather their feedback, which helped me determine which concepts were the most important.
The user interface has been designed to accommodate pixel-perfect screens that use a 4px grid system. This approach guarantees that every element and component in the design, including buttons, text, icons, and images, aligns perfectly to the pixel boundaries, resulting in a sharp, crisp, and visually pleasing interface with reduced blurriness
I used Gestalt laws, visual and emotional design, to make sure that elements were organized in a way that was easy to understand and grouped meaningfully. To identify and address usability issues before testing and development, I carried out a UI heuristics evaluation based on Jacob Nielsen's usability principles. It was important that the interface met AA (W3C) accessibility standards, so I used a range of plugins and a comprehensive accessibility checklist. In addition to this, I followed Google's Material Design guidelines , which are essential in creating a polished and user-centric UI prototype. The end result was a visually appealing, emotionally engaging, and highly usable interface.
View Prototype
During the Design phase, I created a paper prototype (Lo-Fi) and a Hi-fidelity prototype, and for each stage, I conducted quantitative usability testing. I identified BCX stakeholders, including designers and developers, to participate in structured usability tests. I set up tasks for the test-takers to accomplish, and the data collected allowed for a rigorous assessment of usability. This helped identify various pain-points, interactions, time spent on tasks, success rates, and user satisfaction ratings. Below are some of the issues that users highlighted, and I'll explain how I approached solving them.
The Problem
A significant number of testers encountered difficulty locating the 'follow' action within the row item, primarily because of table overflow.
The Solution
To address this, I revamped the table design by incorporating a 'sticky' meatballs menu on the right-hand side, ensuring that the menu remains visible even with table overflow. Additionally, we introduced an arrow indicator on the 'sticky' table header, complementing the scroll bar at the bottom of the table for improved user navigation.
The Problem
A considerable number of testers were choosing to upload attachments before selecting an attachment document type, leading to errors during the CX request completion.
The Solution
To tackle this issue, I reevaluated the user flow and made an adjustment. We now guide users through the process of uploading a document, with the 'attachment document type' dropdown pre-enabled. This change ensures a smoother attachment process, reducing the likelihood of errors.
The Problem
A minority of testers mistakenly selected the "Reactivate" option after deactivating a user's account, as the "Reactivate" button shared the same style and position within the deactivation process.
The Solution
To address this, I revamped the final step of the process by assigning the "Reactivate" button a distinct secondary style and relocating it. This adjustment aims to reduce the occurrence of unintended clicks, ensuring a smoother user experience.
The Problem
A minority of testers refrained from interacting with the input fields, finding them confusing due to uncertainty about their interactivity.
The Solution
To mitigate this issue, I revisited the design of the input fields and implemented changes by adding edit icons to align with globally recognized standards. This visual enhancement should make it more apparent to users that the fields are interactive, thereby improving usability.
Deliver phase
Review hypothesis and refine priorities to inform design decisions based on evidence rather than assumption.
Collaboration with stakeholders during the entire project was crucial, as well as working closely with developers to maintain the integrity of the continuous delivery pipeline. Developers played a significant role in ensuring a smooth transition of code from development to testing and resolving issues quickly during User Acceptance Testing (UAT). Our project concluded with the development phase, which included an exhaustive evaluation of BCX OneCX's functionality, usability, accessibility (Wave), and overall performance (DevTools Lighthouse) within a DevOps environment. The UAT phase was designed to ensure that the solution met the needs and expectations of end-users. This collaborative approach resulted in the delivery of a robust and user-centered solution.
.jpg)
.jpg)
.jpg)
.jpg)
%20-%20User%20journey%20%2B%20task%20flows.svg)
%20-%20User%20journey%20%2B%20task%20flows.svg)
%20-%20User%20journey.svg)
%20-%20User%20journey.svg)
%20-%20User%20journey%20.svg)
%20-%20User%20journey%20%2B%20task%20flows.svg)
%20-%20User%20journey%20%2B%20task%20flows.svg)
%20-%20User%20journey%20%2B%20task%20flows.svg)
