TouchPoint 2.0 is a B2B ads template system redesign which helps marketing team to create and generate customized templates for businesses and advertisers. It supports over 300 internal teams in Facebook in reaching businesses across over 150 channels (email channel, notification channel, campaigns manager channel, etc) monthly.
Problem: The existing old Touchpoint system is not easy to use for the marketing team people to send out communication to the businesses and advertisers.
My job is trying to do the investment in the new UX design based on the user needs and feedback. Let users understand system and make it easier to use.
Primary: Small and medium-sized business (SMB) marketing teams
Secondary: Other FB Ads internal teams
User research, define problems & goals, map user flows, prototype interactions, user testing, launch the product
Ads Growth Platform Team
2019
I asked my TPM to pull out some data about the “monthly active touchpoint users” (see screenshot).
Result: Touchpoint system monthly usage keeps going down.
I set up some general questions that how the users feel about using the old version platform/system and send the survey to around 300 marketing users. My purpose was trying to gather feedback from actual users.
Result: 90% of users not satisfied by using the old system.
I scheduled one-on-one meeting with our six users from the business marketing team. I spent half an hour for each users. I prepared the different questions on the paper, tried to ask users and gather the valued feedback.
One of the question was asking user to use the old version tool to create the template (tip) information and trying to do video recording at the same time. My purpose was trying to observe how a particular user use this old Touchpoint tool step by step so that I can get detailed information about a user’s attitudes, desires, and experiences.
- Users couldn’t understand the technical content.
- Take long time to set up the information in this system.
- The whole structure flows are confusing to use.
- Some of the features loading time are too long.
- Need more new features and services.
Touchpoint platform is not flexible to use because the whole structure flow is not clear.
System requires adaptation. Partner team requirements have grown, business ecosystem management has evolved.
Running into system limitations. Code is outdated, system is complex, tools are not friendly and some pages loading time are too long.
Lack of visual hierarchy, the content is very technical. It’s very hard for non-technical people to understand.
▪ Identify our key scenarios and distinct personas
▪ Break down the core required functionality and use cases across personas
▪ Invest in building simple flows for required functionality/use cases (that can also handle the complex use cases)
▪ Establishing clearer visual hierarchy by grouping related fields
▪ Reducing the number of steps to minimise time to completion
▪ Getting familiar with internal design system, component and try to come up with a a standardized styling and UI pattern for future TP2.0 system.
Simple: Touchpoint 2.0 UX should allow someone with minimal training to create and launch a tip(template) successfully. Our key challenge will be balancing the advanced features required by some users with simple flows for common usage
Flexible: Touchpoint 2.0 should be flexible enough to handle the current and future use cases
Extensible:Touchpoint should be built in an extensible way so that other teams can leverage our features instead of duplicating existing efforts
Transparent: Touchpoint 2.0 should have pre-launch transparency explaining tip(template) setup options, expected delivery (audience size, channels selected, destination experience) and post-launch transparency showing accurate delivery/performance information
For the experienced users, they will see the main overview list to check their tip(template)s status through different channels. The most important function is this page allows users create new tip(template)s by clicking the green action button.
Power Search & Saved Search - Users can user the smart search bar to search “tip(template) name”, “channel name”, “owner”, “subscriber”, “launch status”, etc to get the acurate results quickly. Also, users can save/mark any search results as the new labels after they use the search filiter. It will increases the work efficiency since the overview list changes everyday, even every hours based on the tip(template) launch status from the marketers and engineers.
For the creation pages, users need to fill out the tip(template) infomation within three steps, which are “general infomation”, “advanced infomation", and “audience targeting setup”.
We allow users select multiple channels to set up the template. We support 150 channels in our team, but currently we are migrating 15 popular channels from 1.0 to 2.0.
Users need to fill out all the required infomation for that specific channel they selected.
After user fill out all the infomation of this template, they will see this management dashboard page. In this page, user can see all validation steps (different zones to rollout) that the information should pass. Once all validations have passed, this system will generate a template based on the data the marketing person provided and send out the template to the businesses and advertisers.
Validation Steps (zones) - I designed the progress bar to provided the validation process of this template to users, and let users understand how this tamplate creent status.
Current Quality Check - This section allows users see the detail about current status for this template infomation. Also provide some suggestions about what users should do for the next step.
Performance Data & Metrics - Show 28 days performance data & metrics as default, and allow users select different days as well to see different data.
For the new users, the idea is to guide them to learn how to use the tool step by step.
Create a New Tip(template)Built an action button for users start to create a new template.
Wiki User GuideOur content stratgist was trying to create a new Wiki page for TP2.0 platform.
Tutorial Steps - Designed a simple process bar to let users know how to create a tip(template).
Tutorial Video - I designed Tutorial Video function as a future new function to guide users to use the tool easily.
I create a group of users to help me do testing for the the new beta version of TP 2.0 creation flows. Each user has half an hour to do testing, and at the same time I took notes. Also did serval video recording so that I can rewatch again later to summarize the data result.
For the secondary audience, I scheduled phone interview with them to gather some ideas about the new features and services in the new tool. I was trying to expand more users and creating the business ecosystem management in Touchpoint new system.
I create the office hours on every Friday for about two hours, allow users to come over and give them a simple training presentation about how to use the new TP2.0 system. Provided the new features and services for users. During the office hours, users also can ask questions of this product.
Video recording is one of my favourite method to record the actions that real users interact with the platform or product. The recording data helps to understand what content/features are the most interesting for the users (via heatmap analysis) as well as what interaction problems users face while they interact with my product.
After taking the video, I always go back to watch the video again to take notes, and share the notes to the team to get more feedback from them.
Based on one of the email I got from marketing team, the time that required for setting up a tip(template) has been reduced by 75%.
Improved the system structure based on the requirements functionality.
Built clear visual hierarchy by grouping different content.
Improved the content language of the system for the non-technical users.
Saved more time for the engineering team to implement the new system by understanding the internal components UI pattern.
▪ Product, design and engineering should start on a project at the same time and Move Fast (Facebook’s motto)
▪ Need to create the milestone and timeline first and try to make sure everyone in the team are stay on the same page
▪ Do deep research on the product and study more knowledge that related to this project and team/company before starting to design it
▪ Ask more and more questions that I really don’t know
▪ Need to keep the users in the forefront of my mind when I work through the design process
▪ Try to present multiple design works / examples to the team during the presentation
▪ Bring my design draft process to the users and different team for feedback. In my case, that included marketing managers, marketing team, engineers, content stratgist and project managers. Try to use their comments and thoughts to iterate and refine my process so that my design can approach to be truly user-centered
▪ Be a listener. Try to listen closely to the engineers’ feedback and learn basic coding knowledge to support a better product
▪ Don’t design a beautiful, but unusable product