MARKETFORCE INFORMATION (MFI)
In compliance with NDAs, some confidential information has been generalized or omitted.
All info below is my own, and does not necessarily reflect the views of the company.
COMPANY BACKGROUND
As pioneers in the customer experience industry, MarketForce Information (MFI) is made up of various enterprise application offerings such as client management, reporting dashboards, case management, and mystery shops/surveys.
Having grown by acquisition, application modules were built at different times by different teams in different countries. Within each module there was no visual or behavioral consistency. Uniting all of the modules into the KnowledgeForce Platform meant MFI employees and their clients could set up, manage and maintain their accounts all in one place.
STAKEHOLDERS
Solutions Managers (MFI Employees)
Support Call Center Managers & Employees (MFI Employees)
Employees & Representatives (MFI Customers/Clients)
THE PROBLEM
A single sign-in for all modules did not exist, so signing in to one logged users out of the other; an inordinate amount of time was being wasted going back and forth and logging in multiple times.
Existing modules did not share visual or behavioral consistency, so users were confused as to which module they were working in, and often did not know in which to accomplish certain tasks.
Because data did not propagate between modules, changes didn’t carry over from one to the other, and team members did not see changes happening in real-time.
THE TEAM
UX Researcher/UX & Interface Designer
Project Manager
Dev Team Lead & Dev Team of 3-5 (per module)
QA Team of 2-4
PROJECT OVERVIEW
The new, united platform would enable users to set up each customized module for each client. These set-ups involved Solutions Managers selecting certain criteria and customizing it to run reports, file and manage cases (for fraud, complaints, poor experiences, etc.), create and send out internal and external surveys, and monitor the entirety of the clients’ brick and mortar locations.
LEARNINGS ALONG THE WAY
Since the Client Set-Up and Management
module had been started in Figma by a developer,
there was no wireframing period. We designed
in high fidelity, building out modules and
the design system concurrently.
Create a consistent look and feel for all modules under one branded umbrella instituting a design system and component library for engineers to quickly execute future features.
PROCESS
RESEARCH:
A thorough audit was created of the four existing modules: Reporting Settings, Case Management (containing 2 different views: Admin and Contact Center), Surveys, and Client Management.
Recorded “guided tours” of each module were conducted by MFI Solutions Managers. Depending on the module these interviews could take multiple days and involve anywhere from two to four users (both managerial and individual/direct report).
- Not only did this assist in get acquainted with the current versions of the software, but going through every piece of each feature quickly showed redundancies and flagged features that were no longer being used.
- We also identified all “tour guides” as testers for UAT, once prototypes and development started.
MFI’s new style guides were audited to identify any components that could be used to start the design system, and a running list of necessary missing components was created.
Since each module had its own dev team, the cycles were staggered. A discovery period for the first module would start, then the design phase would follow. After the module was handed over to engineering, the discovery for the next module would commence.
DESIGN:
Below are some screenshots of the original modules and the redesigned versions, calling out some of the design solutions.
REPORTING:
Initially users needed to select from the panel on the left to bring up that section. We decided to implement a left sidebar (in green on the right) so users did not have to “back out” to navigate between sections. The sidebar sections were particular to that MFI client, only showing sections that were applicable to that account’s reporting.
Here is a before (left) and after (right) showing the redesign of one of the sections used to create the Reporting Dashboard.
CASE MANAGEMENT:
This is a view of the original case management admin view. Some of the issues users were having were:
- The infinite verticality of page made for a lot of up and down scrolling, causing users to continuously lose their place.
- Within the cluster of tabs at the top many consisted of duplicative content, and others were no longer being used (and had, in some cases, been combined with others).
- A lot of space was not being used well, the input fields were often to short to see their contents and there were so tight together, users found it difficult to read and locate a specific group.
- The horizontal space of the module was fixed, and a lot of useful real estate was getting lost on wide desktop windows.
- The overall dense nature of the page content and styling was hard for users to read and scan quickly.
Utilizing MFI brand colors to differentiate modules gave each module its own “presence,” quickly informing users where they were in the unified platform. Compiling the platform through one API allowed users to navigate in between modules (see link in bottom left corner below) in their main dashboard.
The newly designed Case Management model solved the above problems by:
- The new platform logo had the module listed under it to alert the user to what module they were in, and a separate link takes the user back to the main dashboard.
- Consolidating all the tabs into a sidebar not only made it easier to navigate between sections, but the elimination of outdated or underutilized tabs made it more scannable.
- A new smart search to quickly find specific info was added and filtered as the user typed.
- We added additional margins and padding around rows of content, making it easier to read.
- Pagination at the bottom (as well as within expanded rows) gave user more control over what they see.
In essence the two main tasks users needed to accomplish were interlinked: creating a user group and assigning its associations. It made no sense that these two things were separated, also needing quite a bit of scrolling to go back and forth between them. We united them into one section where the user could do all the necessary tasks in one place.
SURVEYS:
The survey module was unique in that the sidebar was used to illustrate the step-by-step process of creating surveys. When creating a new survey the user could navigate back and forth through survey creation settings as well as setting up questions and branching them based on the customers’ answers.
PROJECT OUTCOMES
The completely new system led users through each step in the Client Management module to get a client set up. From there they were led through the other modules to set up reporting, case management and surveys. Utilizing the MFI brand colors to differentiate modules gave ownership to each module and alerted the user as to where they were in the platform. Unifying the modules meant that the user could navigate between them in one software.
- The new design system helped developers roll out features (or feature sets) over 50% faster.
- The new software allowed Solutions Managers to set up a new client in less than half the time.
- The ability to quickly navigate between modules and make changes that populated across the account universally increased productivity 40%.
SETBACKS & LEARNINGS
The team was still new to Figma (myself included, I was instructed to “learned”get up to speed” with it the weekend before being put on the consulting assignment!) and we were still learning the software’s capabilities as we were building the product.
The design for the first module (Client Management) had been started by a developer without designer collaboration. It was a good start, but without Design QA, we needed to go back and make quite a few adjustments after the first dev sprint.
Looking back, we should have taken time as a team to get comfortable with master components in Figma. Because we were rushing we put it off, and design and development time took longer, and we needed to go back to implement them mid-sprint during the third module build.
IN CONCLUSION
Within the Admin View of all 4 different modules, there were 62 total sections that each needed to be appraised for improvements and reviewed for consolidation. After the audit 48 sections were reformatted in the new design style before development could begin.