Self Serve
Customer
Portal
Building a library of
design components
and documentation
Thismoment is a marketing technology company that enables the world’s biggest companies to connect with their target audiences in real time on any device. Through Content Cloud, a digital storytelling platform, TM enables effortless content curation, digital experience creation and sharing, as well as seamless enterprise technology integrations. More than 150 top brands and agencies use Thismoment, including Coca-Cola, Intuit, Levi’s, Wells Fargo, Sephora, Fleishman Hillard and Digitas.
In my role as a UX designer for Thismoment, I was responsible for product documentation, digital asset management and supporting the customer experience.
Clients using TM's product had to use a library of templates in order to customize their campaigns on social media. They could also choose from a series of widgets and change their appearance to match their branding.
Finding the right strategy to achieve the goal
TM realized that they would have to create a digital platform for their customers in order to deliver better customer service for continual success. The support system had to undergo deep digital transformation due to their old underlying legacy systems and outdated technologies.
Phone calls with customers had to be scheduled individually to find the right materials and information. This was an enormous strain on time, effort and energy for the support team. Automating this process would not only free up valuable resources but also allow for significant cost savings.
Researching, Assessing and Organizing the existing material
As a first step, the current state of the library had to be examined. The Content Cloud offers several types of layouts for YouTube, Facebook and custom web environments. Each layout is described through a template in photoshop format. It outlines the design system a client has to follow in order to correctly apply their customized artwork. The Content Cloud maintains multiple formats for each of their layouts, so they can fit the various environments YouTube and Facebook offer for their social media channels.
The existing library was poorly maintained and had no clear structure. First I learned that the main component of a layout was a slideshow or video player called theater. Some layouts / theaters only fit into certain environments, which made the task more complex. For example, the "Mosaik" theater only works in the 970 pixel wide YouTube channel, whereas the "Sidebar" theater is only available for the 810 and 520 wide Facebook feeds.
Therefore I created a matrix that organized all layouts (theaters) to the matching format types of the Youtube, Facebook and Web environments. I was now able to build a folder hierarchy in order to sort all templates in to groups so they could be properly identified. Extra metadata attached to each group, provided useful information. A hierarchy could now be applied to the matrix, in which the most common formats are on top and the edge cases are placed towards the bottom.
The matrix was also a blueprint for a labelling system, so each individual file could be renamed and tagged with a set of keywords. Now it was possible to perform a simple search or do filtering.
Creating a usable Design System
- laying the groundwork for a self serve customer portal solution
Before we could even talk about a customer portal it was necessary to make the content itself more accessible. The support team not only had to talk each client though all of our available layouts, but also explain the use of our templates. We would provide the needed photoshop file to the design department or agency representing the client. The templates had a few annotations that were written vaguely and not always put in proper context. As a result, the graphic assets our clients sent back were seldom in their correct format and had to be constantly adjusted.
I embedded the design system's guidelines directly to each component of the layout. Some components have little restrictions, whereas other are complex in their functionality and required specific formatting. An additional challenge was the referencing of generic control elements like buttons or sliders that are maintained by a separate sprite file. I implemented visual aids like color codes, screenshots, index numbers etc, to present the instructions and annotations as simple as possible.
The Content Cloud consists of 4 areas:
-
The header area holds the banner design of the brand. This element is common across all formats.
-
The Theater is the central part of the product. It is a rich media container that displays videos and pictures. Each Theater has a specific layout so each client can find their preferred flavor. Certain Theaters are only compatible with specific formats and sizes supported by Facebook and Youtube.
-
Below is the Full Width Banner - a second area to display graphics and branded designs
-
At the bottom is the Conversation area and the Right Rail Modules - small widgets that display a countdown clock, slide show, images etc.
Documentation - making a complex library accessible to clients & company
A challenge was to determine if all design elements reflected the current version of the Content Cloud. Several features had been added and the styling of various items were changed over time. This made the documentation process difficult, as this required the correct reference material.
I successfully updated all templates and organized them along the above referenced matrix. The next step was to make this information available to our clients but also to marketing and customer support. There has been a great deal of confusion within our teams about what could actually be provided to the customer.
I created a "digital brochure", where the above described annotation and structure of all of our templates was documented. Those brochures could easily be shared and quickly searched. Internal hyperlinks made it easy to jump to corresponding pages, referencing additional information and options.
When it came to the documentation of our mobile solutions, many colleagues and customers had a very hard time to understand what screens were to be designed and in what sequence they occur.
It took again lots of research to find out what platforms and versions are supported as well as which screens allow custom designs.
For our mobile documentation material I created two levels of instructions. The first page presented an overview of the full UX flow. It shows the user all steps of the journey when experiencing the Content Cloud on a portable device. The second page then referenced all screens that allow a custom design. Annotations explain to which step of the UX flow they belong and the required specs for each individual graphical element.
Collaboration is key - across all departments of the company
The process to update our design system and create a comprehensive documentation library required extensive research. Many meetings with product managers, people from customer support and especially the engineering team established fruitful relationships across the company. Everyone's expertise and knowledge was not only readily provided, but also my feedback and documentation
was appreciated, as it made their work easier.
Now that the groundwork was laid out for the design and construction of a self serve portal, I had to rely again on the collaboration with many of my colleagues. A meeting with the head of engineering and the director of customer relations kicked off the next phase of the project. Having gained a good sense of where to find the needed information to gather initial ideas, I was able to get a quick start.
Building a Self Serve Customer Portal
based on a structured design library
The previously developed matrix served as a blueprint to sketch out a concept for the self serve portal. The reorganized library had a clearly structured hierarchy for format, type and layout (theater). This provided the needed information architecture behind the customer portal. It had to accomplish serving three types of customer types:
The New customer:
Allow a new client to easily find the template(s) they need for their Content Cloud environments, without any direct assistance by customer support - "Design Hub"
The Returning Customer:
Allow a returning customer to quickly find and download a required template - "Download Hub"
The Potential Customer:
Allow new customers to explore all design options of the Content Cloud service - "Demo Hub"
Technical Vetting
The technical feasibility was discussed together with engineering. A flowchart outlined the overall
structure of the self serve portal. The challenge was to find an efficient solution that enables the functionality of the Design, Demo and the Download Hub. An an unnecessary duplication of technical elements had to be avoided.
The core of the system is the library which organizes all templates as well as any extras and widgets. A user would just have three different types of access to the same environment.
The Design and Download hub allow a "guided browsing" plus download options. The Demo hub would only allow "free browsing" without a download option. This raised the question if a user authentication system was required, which would increase the technical scope of this project.
In a meeting with the product and customer support team it was determined that such an extra authentication system was not necessary. These templates are only meaningful for customers that have purchased a Content Cloud licence. If in the future the sales process would also become a self serve system, then the management of individual user accounts would need authentication.
In conclusion, the customer portal allows an unrestricted access to the library, which kept the technical requirements simple. The difference between each Hub was a unique ux-flow. A Demo hub would have an extra space to show some live examples as well as links to some content cloud channels from our customers. It also gives access to the template library for individual browsing. For returning customers, the Download Hub provides immediate entry to each template via a single overview page.
The core function of the self serve customer portal is the enablement of new customers to easily find their needed materials without any additional support. A simple step-by-step flow would allow a user to quickly zero in on the required target. Reflecting on the structure of the library, only three steps are necessary, with step two branching into a "Template" and "Extras" flow. In each step the user must identify which option matches the purchased content cloud licence. With the information from the licence at hand, one can easily follow each step, zeroing in on the environment (Format, Type) and Theater until the correct material is found and downloaded.
Together with peer designers we discussed how to translate the ux flow into a seamless and simple user experience. Low fidelity mocks were created to visualize the user journey from step one, all the way to clicking on the download button.
The Customer Portal home page should clearly present all available options, so that new, returning and potential customers can quickly understand which path to follow. A "Get Started" call to action button could also be easily referenced in any kind of instructions a new customer receives after they have purchased a Content Cloud licence. Instead of directly going to step one we decided to insert a welcome page. In this space we present an brief overview of the process of finding and retrieving the required material. It also points to their purchased licence as source to identify the correct choices as they walk through each step.
In step one all formats and types are presented. Logos of Facebook, Youtube, Custom and Mobile environments as well as simple wireframes help to better recognize each format as some differences between types can be subtle. Step two then shows a full screen outline of the selected format. Within the multimedia section, all compatible theaters are listed. Small thumbnails illustrate their unique layouts. Here the user can also choose to explore the Extras available for this format. In step three the download button is reached. It provides the template needed to create a custom artwork for the licenced content cloud channel. In case the user has made a mistake, a step by step navigation in the top left allows going backwards to start over their journey.
Sketching out the user experience
Building a prototype to validate and gain stakeholder buy in
The already created wireframes, mocks and ux flow diagrams were used as visual aids in a presentation to pitch the self serve customer portal concept to the executive team.
The mocks were turned into a prototype by adding hyperlinks between pages, creating a click through PDF. Clicking the main buttons on each page simulated the user experience flow for new, returning and prospective clients. Annotations helped to describe further functionality as well as other elements that could not be simulated in pdf format. The interactive nature of the
prototype made this pitch a compelling demonstration to the CEO.
His feedback was very valuable and resulted in some fine tuning of the concept. The budget for the development of the self serve customer portal was given the green light. Sharing the prototype with engineering quickly brought the developers up to speed.
Before valuable time and resources would be invested into the implementation of the customer portal, the developed concept needed to be validated. The restructured design library and newly created documentation material was already being used by customer support. It generated positive feedback and was perceived as very helpful when engaging with clients. Since the customer portal concept is build around the design library we were able to consider these indicators as part to the validation process.
With the assistance of several product managers I asked a few established clients to volunteer in some user testing. During a phone interview we would walk them through the concept and showed them a prototype of the customer portal. Everyone really liked the presentation and emphasised that it would enable their creative team to better comply with the required specs for the graphic assets.
Integrating the Self Serve Customer Portal into the company's website
I collaborated with a team of visual designers, who also maintained the corporate web site. They applied the color scheme, fonts and layout patterns consistent with the look and feel of thismoment.com. All pages and steps of the customer portal now seamlessly fit into the company's online presents, making it easy for our clients to recognize this new service. All final mocks and graphic assets were then provided to the engineering team.
Unfortunately I was not able to witness the release of the self serve customer portal as I pursued another career opportunity. It would have been valuable to measure the time and money saved by the customer support team. Follow ups with clients could have given feedback on the usability of the portal and revealed any pain points in finding the right templates. However I felt confident that this first iteration of the customer portal was a gain for all clients as well as the company.
