Reinvent the Lasso Platform.

Introduce new product experiences with confidence.

Background

Lasso plaform has been reinvented with new product strategies. The platform is consist of 5 main navigations: Audience, Activation, Measurement, Monetization and Reporting. I was in charge of redesigning for Audience, Monetization and Reporting. In this case study, I decided to pick Reporting because the project was a complete redesign as to Audience and Monetization were the new features.

Challenge

The original design had lived for 7 years, and it was time to reinvent the page by solving reoccurring pain points. For the design stand point, it would use the new design system, Lasso Garden, with page template to start. How can I solve problems that would involve necessary UX changes on other pages? How can I incorporate new design to the current global design? How can I incorporate all the solutions in the best practice for both UX and UI?

Role

My role was to redesign the page to a modern design where helps users reduce their pains and reinvent the UX based on user needs. Eliminating unnecessary flows and adding features to create a better user experience journey.

  1. User Interviews

    Find pain points and user needs.

  2. UX Design

    Provide easy-to-use user experience journey.

  3. Product Design

    Provide a modern and slick design.

  4. Development

    Work with developers to release the product.

Design Process

I had interviews with users and empathised their pain points and business needs. I defined based on my research and created affinity map, empathy map and user persona. I started to find core problems in the original design and ideate what I could do to solve problems in the new design. I went over the ideations all total 6 times with Top Leaders, Product Managers and CS team before getting into the final prototype. In the prototype process, I started with high fidelity mock. Since I created the design system, designers started mocking using templates in Lasso Garden. After carefully finalized the mock, it was handed over to an engineering team.

1 Empathise 2 Define 3 Ideate 4 Prototype 5 Deliver

Empathise

I interviewed 16 people in the CS team who daily uses reporting page and asked their pain points and business needs.

User Interview

  1. What are the current problems and pain points in the current UI?
  2. What features do you wish to have in the new design?
  3. When do you use reporting and why?
  4. Do you find anything that you think we are missing in the page?
  5. How can I make your job easy so you can easily accomplish your task on a daily basis?

User Needs

  1. Optimization for Geo’s performance to see which device is performing the best.
  2. Want to see all time HCPs reached per ad group.
  3. Post click / Post view becomes “Visits” in Excel after download, so clients can see the data.
  4. The platform should have a place where CS can evenly allocate the remaning budget from the previous month.

Key Findings

Pain Points
  1. Want to see underdelivery & underperformance so I know when to look out.
  2. Want to see actual spend to avoid overspend & underspend.
  3. Allow for searching by ID instead of only name.
  4. Can't see conversion pixels (view or clicked) as a filter in reporting.
Feedback
  1. Add lifetime as a predefined date range.
  2. Hourly campaign performance report as an option.
  3. Allow for Ad Group ID and other Object IDs as refinements.

Competitive Analysis

I used 3 websites to compare where I frequently visit to get inspirations from. Most of all, I was inspired at the dashboard in Pinterest because it has Reporting and Custom Reports that I could borrow many ideas into our platform.

Summaries on Pinterest
  1. I can save draft reports in Custom Reports as templates.
  2. I can save draft reports with the same name that already exists.
  3. Selected columns dynamically reflects based on what I choose on the left column.

Define

I defined to find core problems and solutions by mapping out users' feelings and thoughts to understand what I can do to make better user experience.

Affinty Map

I drew affinity map based on unique insights and reoccurring pain points from my user interviews. I used research app called evolve to shadow the interview, and then summarized the notes in Figjam.

Empathy Map

Empathy map helped me understand how current user experience needs to be changed so users can efficiently get their job done in a daily basis.

User Persona

I created a strong persona based on my research phase. Throughout the redesign of reporting page, I referred back to this persona to ensure that I’m staying aligned with the most important problems that need to be solved and to help inform my design decisions.

User Persona

Ideate

Original Design

When the page was designed, design systems didn't exist in the company. All the pages were designed in the same design patterns but it was hard to be always consistent. I made consistent layouts in the code by creating reusable global CSS for spacing, colors and font sizes.

As I ideated, I found the cause of problems for users, and often they were considered as users' pain points.

Landing Page
Lasso old reporting landing
  1. Problem 1

    Pre-defined reportings often confuse users. Campaign Summary which displays datas that live in Campaign is a part of Reporting.

  2. Problem 2

    Users have to save reports in order to schedule and scheduling only can be done in Saved Reports tab.

  3. Problem 3

    Delivered Report tab was useless since it wasn't that users could reuse the report and schedule it again.

Detail Page
Lasso Reporting
  1. Problem 1

    What are the reasons why there are 2 separate filters to run a report?

  2. Problem 2

    Reports have to be run and saved in order to schedule. This will cause more storage costs in the backend.

Prototype

High Fidelity - Final Design

Since I created Lasso Garden, designers use page templates to develop mocks. This way, designers can hand off their mocks much faster which was much needed for such a fast growing company like Lasso.

Through out the ideation process, I found solutions composed of many forms of ideas. Once I designed the first around, I went over the design with top leaders and CS teams to get more feedback. The design was handed off to the developers after the five revisions.

Landing Page
Lasso Platform Final Design
  1. Solution 1

    Remove Campaign Summary from Reporting and reinvent the UX and display it in Activation.

  2. Solution 2

    Remove tabs and create a landing page where displays templates instead.

Run Report Page
Lasso Platform Final Design
  1. Solution 1

    Users can save a report as a template and schedule it by the selected cadence.

  2. Solution 2

    A report scheduled one-time only won't get saved. This way, it can save storage costs.

  3. Solution 3

    Since "Quick run" button allows users to finalize a report, there is a less chance that user needs to come back and edit.

Detail Page
Lasso Platform Final Design
  1. Solution 1

    Users can change the column order in the table.

  2. Solution 2

    Templates are editable whenever users need.

Results and Next Steps

Results

CTO really liked the idea that the company can save storage cost! Filters became much more robust to serve business needs.

These are the summaries:

  1. Reports can be scheduled as a recurring event if users save it as a template.
  2. If a report is scheduled one-time only, the report won't get saved. This helps storage costs.
  3. Users can use a feature "Quick run" before running / scheduling to finalize their table.
  4. Filtering became much more robust to serve business needs.

Next Steps

Work with developers to make sure the design is transmitted into a pixel perfect code.

  1. Sync with developers for the components in Lasso Garden.
  2. Help developers add new styles in Storybook.
  3. QA and refine the design in the platform as it's developed.
Let's work together