Config Server

Role: Lead Product Designer

Timeline: 24 weeks

Tools: Figma, Figjam

Platform: Samsung DSP (B2B SaaS on website)

Project Overview

Background

The objective of this project is to design and deliver a platform for backend developers to monitor, analyze and manage any number of TV models. The Configuration Server determines if a particular TV is enabled to show ads or not based on the critical information such as product type, country and model code.

• No current UI platform to perform edit tasks (everything is done through hard coding)

• Long turn around time (up to 2 weeks) for one edit change

• No documentation for change reason

• No viewing abilities for Ad Ops (those who are not engineers)

The Problem & Challenges

Discovery and Research

Conducted discovery workshops with UX researcher to understand the current user journey and user personas in order to map out the use case scenarios, pain points and future scopes.

Information Architecture Exploration

Ideate different possible ways of organizing the data given before focusing on one direction. Mapping the data in different layouts in low fidelity mocks to explore various ways of representing the data dependent on use cases.

Concept Review & Scope Refinement

After weighting the pros and cons of each exploration, the top few were taken to broader stakholders in order to host a concept review session. Discussions and brainstorming sessions followed as we reviewed each concept and decided on a direction.

Wireframing & Iteration

Based on the findings from previous concept review, iterations were made to the low fidelity mocks to solidify a direction before turning them into mid fidelity mocks for user test.

User Test

Collaborating with the UX Researcher, we came up with a script along with tasks for the user to perform in order to test the effectiveness of the proposed solution. A figma prototype was designed to correspond with the intended tasks.

Iteration Based on User Test Findings

Based on the findings from the usability test, iterations were made to the mocks in order to fine tune the solution and address certain concerns.

Final Mocks and Prototype Delivery

Delivery of the final mocks and prototypes to the product and engineering team.

My Involvement

120+ screens

6 Key Flows Prototype

Business Impact

Reduced the turn arund time from days to minutes

30% reduced blank impressions

15% more RTAC impressions

Deliverables

Discovery & Research

In order to understand the process and complexity, I scheduled several meetings with the back-end developer and UX researcher to fully understand all the use cases and current user journey.

Current User Journey Map - Pain Points

  • Very long and time consuming process to code backend

  • Chances of error and lack of history recording.

Mapping Current VS Future Users

  • Current User: Only one engineer and one person from the company HQ

  • Future State: Allow view and edit permission to multiple engineers and HQ, and view access to Ad Ops and Biz Ops

Understanding the configuration possibilities

  • A single TV model can be composed of product type, ad type, model ID, PSID, country and year

  • A request to edit a TV model can be in any combination (ex: turning all 2020 TV models in Canada off)

Ideation

Information Architecture Ideation

  • Ideation on how to best visually display the information associated with a TV model

  • The 4 main categories were:
    - Model by year
    - Ad type
    - Country
    - Model category

Low Fidelity Sketches Exploration - Potention Design Solutions

  • Displaying different sets of information architecture

  • Ability to customize table charts at the top of the page VS separating into a drawer

  • Having tabs on top of table to add extra level of information

Learnings and Summary after Exploration

  • The 2 main categories are country and ad type

  • Model year, category and model ID are subcategories within the 2 main dimensions

  • PSID needs to be on a separate page due to legal reasons

  • On and Off models need to be shown separately due to “Special Models”. If there are 100 models, if 50 are ON, does not mean 50 are off

  • There needs to be a “Change Reason” to be logged in a history log

  • Users need to be able to download the data in a CSV format

  • There needs to be a view for users with permission to edit, and one to just view

Iteration - Translating Findings into New Design Direction

  • Upon discussions with the stakeholders, a design direction was established

  • A set of new low fidelity sketches were made to accommodate the design direction for concept proving before proceeding with high fidelity mocks and prototype for user testing

Narrowing down the Requirements

  • Country and Ad types are on the main pages, while 2nd level categorizations are on a drawer

On and Off cannot be shown together

  • If there are 100 TV models and 50 is “ON”, it does not mean 50 is “OFF”. We need to show On and Off separately.

Separate the levels of Edits

  • Split off the detailed level of edits on a separate drawer to reduce confusions and limit the amount of information on the home page

Separate the Review Panel

  • Allow custom edits on a separate UI to allow complex level of edits. Include Reason for documentation.

User Test Findings

Test Objectives

  • Information architecture (understanding content and available edit functions)

  • Enable/disable TV models based on requirements

Needs Fixing:

  • Some users miss the ribbon

  • The On and Off switch was not as noticeable on the table as user wasn’t sure if they were looking at On or Off, and some used it as an action button

  • Missing functionality for choosing a country group (customizing it), since it is difficult and tedious to find the exact country

Needs Some Attention:

  • Some users find “Action” copy confusing as it is for turning on/off

  • Summary Chart not as useful all the time, depending on the user’s needs
    Just a modal is not enough to review changes being made

Successful:

  • Custom Edit was a success, no usability issues

  • User find the step to step instruction to be clear

  • The review before confirm is essential

  • Custom Edit and Normal Edit covers all use cases

Iteration Based on User Test Results & Final Solution

Final Dashboard

  • The summary chart and Model Availability table are separated by accordions, allowing users to easily collapse the summary when not needed

  • New Country Group Listing is introduced - This is to allow users to get to the information that matters to them faster

  • Added “On” or “Off” in the table itself to remind users what status they are looking at for affordability

Main Edit Features:

  • Country Group (NEW) - allows user to create custom country listings

  • Custom Edit - allows users to use any combination od ad type, country and or model to batch edit

  • Batch Edit by Country and Ad Type

  • Individual Edit within the selected Country and Ad type to edit sub details like Ad Server URL, Blank Server URL, Model Status and Real Time Ad

Country List Creation:

  • Users are able to select common country groupings by regions

  • Users can also create their own country groupings to allow easy batch edits for countries they only care about.

Custom Edit

  • When the use case involves more complex configuration, “Custom Edit” becomes an essential feature

  • In “Custom Edit”, you can decide which exact groupings of models, countries and ad type to select

  • These selections are always requested by HQ to be performed precisely

  • Once the user has made the selections and entered the “Edit Reason”, it goes into a review state where the user is then able to review and complete the edits

Batch Edit by Countries and Ad Types

  • Users are able to perform filter on the Model Availability before selecting multiple or all line items, or can select the whole created Country List

  • This function allows users to easily edit multiple ad types per multiple countries at once

  • Since they are on the “Model On” status, batch editing them will turn them off, and user need to input a “Edit Reason”

Single Edit by a Single Country and Ad Type

  • Users can go into a particular country’s ad type, and make single edits to the Ad Server URL, Blank Server Url, Model Status and or Real Time Ad Status

  • Once a status has been chosen to be edited, the line item is selected where you can choose to edit the other status or URL

  • Once all the edits have been made, user will need to review before committing to the change

Batch Edit by a Single Country and Ad Type

  • Users can go into a particular country’s ad type, and make batch edits to the Ad Server URL, Blank Server Url, Model Status or Real Time Ad Status

  • Once an edit type has been selected, the user can batch edit all the model selection to that change at once, for example changing all the TV model’s status to OFF

  • Once all the edits have been made, user will need to review before committing to the change

Business Impact and My Learnings

Key Benefits

  • Provides users (ie business, sales, product, engineering) a convenient UI to quickly understand ad configurations for different device groupings around the regions of the world.

  • Allows users with the proper credentials to manage changes in real time. It drastically reduces the turn-around time from days to minutes and reduces the chances of error in the requests for Configuration changes and the actual changes being made.

  • Allows users with permission to quickly modify ad configurations in production without requiring a production release.

  • Allows multiple teams (ad ops, ad client, back end) teams to move quicker and will save a large amount of time dedicated to requests and verifying.

Results

  • 30% reduced blank impressions

  • 15% more RTAC impressions

My Learnings

  • An enterprise platform for such an internal tool requires very technical user journey that must be simple yet precise

  • Important to separate complex user flows to reduce confusion (allowing simple edits at the first layer, but also provide the ability to perform intricate level of editing on another page)

  • Important to advocate for features that will save a lot of time for the users for the MVP stage (Adding a custom Country Listing)

Next

Creative Preview Gallery