MarcomCentral
The MarcomCentral marketing portal is a platform that allows organizations to internally manage, customize and distribute marketing materials. The Marketing Portal is sold as a white-labeled product that can be highly customizable to fit any brand’s needs. After receiving customer feedback, the MarcomCentral team decided to go through their first redesign in years in order to improve usability and aesthetics of its asset management system (AMS).
Role: UX/UI Designer | Agency: Telepathy | Client: MarcomCentral
The Project
When customers purchase an instance of the marketing portal, they gain full access to redesign every aspect of the platform, from the way the interface looks to end-users, to back-end admin features. The goal of this project was to redesign the entire marketing portal experience with an emphasis on three key steps of the user journey:
1. The design of a white-labeled design system flexible enough for customization
2. Improve the overall user experience of the asset customization feature across breakpoints
3. Optimize the check-out experience to resemble current-day e-commerce flows
Image has been blurred for legal purposes.
Competitive Audit
After the initial immersion phase within the MarcomCentral marketing portal, we started a competitive audit to gain knowledge around industry best practices and discover UX improvement opportunities. After multiple user interviews and sales calls, we compiled our findings into a spreadsheet that allowed us to make comparisons and find patterns throughout the products.
User Interviews
The project started with a series of user interviews where we got the chance to talk to current customers of the platform. This exercise allowed us to get a deep dive into the current workflows and different types of users of the platform. During the interviews we talked to marketing managers and platform admins, who then referred us to end-users for the usability testing phase. A key theme we found across industries was that the admins of the portal were highly technical, while the end-users were not tech-savvy and had trouble performing small tasks like finding the most up-to-date content.
Persona Mapping
The customer interviews served as the foundations of our proto-personas. The persona chart helped us put together a document which played a critical role in informing our design decisions. The persona documentation pointed out the different ranges of roles and titles of users, as well as the level technical knowledge they had, how they used the platform and how often.
Job Stories
In order to dive even deeper into user behaviors, we decided to start creating feature-specific job stories. Crafting job stories helped our team remain focused on the design context and user motivations, instead of relying on subjective opinions. Additionally, job stories helped us develop more effective interaction designs later on in the project.
Whiteboard Wireframing
After our initial research phase, we proceeded to create high-fidelity whiteboard wireframes containing detailed information around content, user flows and in some cases, component interactions. Rather than diving straight into pixels, this method kept us focused on the user experience.
Responsive Wireframing
The whiteboard wireframes we had created were detailed enough to create a responsive wireframes prototype quickly and easily. At this phase, the primary focus was the responsiveness of the platform, so we created an audit of features that would be available at each breakpoint, beginning to think about interactions that were relevant to each part of the flow. During this phase we also focused on optimizing the UX copywriting to achieve a voice and tone that was helpful and empathetic.
UI Design:
Responsive ScreensFollowed by the responsive prototype, we brought the visual design of the platform to a higher fidelity. One of the primary goals of the visual redesign was to remove visual clutter, establish a clear sense of hierarchy and reduce the amount of CTAs to the absolute necessary ones to prevent any distractions throughout the user journey. Additionally, the updated interface design was intended to resemble e-commerce experiences to increase familiarity and reduce the learning curve for personas that weren't as technologically inclined.
Mobile Flows and UX Patterns
During the user interview phase, our primary focus was on understanding how to scale the marketing portal to mobile devices. Research uncovered that users were looking for an easy way to order business cards, show pamphlets during sales meetings, and check-out assets through their mobile devices.
Heuristic Evaluation
In preparation for visual design, we ran a heuristic evaluation internally to ensure we were meeting user experience best practices and accounting for important system feedback designs. The heuristic evaluation served as a checkpoint to stress test our designs, as well as iterate and refine features.
Usability Testing:
The Game Plan
Our goals for the first user testing session were to validate designs with real customers and uncover any patterns that weren't in line with user goals. For this test, we recruited users who use the platform on a daily basis, at varying capacities. Since the majority of existing MarcomCentral's users interacted with the platform on desktop, the usability test helped us uncover insights on user behavior on the newly designed breakpoints. The test contained tasks that took users through the experience of browsing for an asset on the catalog, editing the information on it and proceeding to checkout.
Usability Testing:
The Multi-Screen Experience
Since the majority of existing MarcomCentral's users interacted with the platform on desktop, the usability test helped us uncover insights on user behavior on the newly designed breakpoints. The test contained tasks that took users through the experience of browsing for an asset on the catalog, editing the information on it and proceeding to checkout.
Usability Testing:
The Customization PanelCompared to the original asset customization tool, the redesign introduced a side panel pattern, which allowed users to edit and view changes to an asset live, introduced auto-saving capabilities, as well as a "save as a draft" feature (future release). The user testing results showed that the introduction of the editing panel significantly improved users ability to quickly edit content and proceed to the checkout phase.
Responsive Component Library
After a successful usability testing phase, we moved on to the refinement of the design system. During this phase we compiled and specked out individual components to add to a master sketch file with responsive symbols for the easy design assembly of future screens.
Quality Assurance
Our engagement concluded with a thorough round of QA, followed by a short round of testing. During this phase we worked closely with the MarcomCentral engineering team to ensure a seamless handoff.