Reinvent the Lasso Platform.
Introduce new product experiences with confidence.
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.
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?
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.
I interviewed 16 people in the CS team who daily uses reporting page and asked their pain points and business needs.
- What are the current problems and pain points in the current UI?
- What features do you wish to have in the new design?
- When do you use reporting and why?
- Do you find anything that you think we are missing in the page?
- How can I make your job easy so you can easily accomplish your task on a daily basis?
- Optimization for Geo’s performance to see which device is performing the best.
- Want to see all time HCPs reached per ad group.
- Post click / Post view becomes “Visits” in Excel after download, so clients can see the data.
- The platform should have a place where CS can evenly allocate the remaning budget from the previous month.
- Want to see underdelivery & underperformance so I know when to look out.
- Want to see actual spend to avoid overspend & underspend.
- Allow for searching by ID instead of only name.
- Can't see conversion pixels (view or clicked) as a filter in reporting.
- Add lifetime as a predefined date range.
- Hourly campaign performance report as an option.
- Allow for Ad Group ID and other Object IDs as refinements.
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
- I can save draft reports in Custom Reports as templates.
- I can save draft reports with the same name that already exists.
- Selected columns dynamically reflects based on what I choose on the left column.
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.
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 helped me understand how current user experience needs to be changed so users can efficiently get their job done in a daily basis.
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.
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.
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.
Run Report Page
Results and Next Steps
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:
- Reports can be scheduled as a recurring event if users save it as a template.
- If a report is scheduled one-time only, the report won't get saved. This helps storage costs.
- Users can use a feature "Quick run" before running / scheduling to finalize their table.
- Filtering became much more robust to serve business needs.
Work with developers to make sure the design is transmitted into a pixel perfect code.
- Sync with developers for the components in Lasso Garden.
- Help developers add new styles in Storybook.
- QA and refine the design in the platform as it's developed.