Home

Designing a Standardized Widget Library and Creation Wizard

Company

Invent

Role

UX Designer II

Timeline

5 weeks

yEAR

2023

Responsibilities

UX Research
UX Design
UI Design

Summary

Invent®’s data visualization platform faced several challenges that hindered its usability and scalability.

This project aimed to create a standardized widget library and an intuitive creation wizard to improve the user experience, reduce development costs, and future-proof the platform widget needs.

Design Process

Step #1. Understand

  • Alignment with engeneering
  • Analytics and surveys
  • User interviews
  • Competitor analysis
  • Setting KPIs

Step #2. Define

  • Research documentation
  • Problem and hypothesis statements
  • Edge cases exploration
  • Stakeholder feedback

Step #3. Ideate & Prototype

  • Initial concepts
  • Define nice-to-have features
  • Prototype
  • Proof of concept
  • Usability testing

Final Round of Iteration

  • Improve designs based on user feedback
  • Define MVP scope
  • Hand-off

Project Description

Invent is a leading provider of innovative solutions for the financial services and real estate sectors. Their flagship product is a dynamic data visualization platform that empowers clients to curate bespoke dashboards and reports, utilizing a myriad of widgets.

Inconsistent user interface made it difficult to reutilize widgets from diffrent projects and create a consistent dashboard.
Reduce widget development cost
Easily reuse widgets in different projects
Create a stardard widget library

However, the platform faced several challenges that hindered its usability and scalability. Widgets lacked consistency, customization proved a daunting task, and the absence of future-proofing left the platform vulnerable to emerging trends and data standards.

Design Process

Invent is a leading provider of innovative solutions for the financial services and real estate sectors. Their flagship product is a dynamic data visualization platform that empowers clients to curate bespoke dashboards and reports, utilizing a myriad of widgets.

User Interviews

I planned, scripted and conducted 9 one-on-one interviews with financial professionals from 3 partner wealth management companies.

Surveys

I conducted an online survey among users of the current data platform.

Competitor Analysis

 I conducted a competitive analysis to benchmark our data visualization widgets against other similar products in the market.

Analytics

I analyzed usage levels of different widgets and visualization options of the current platform.

Project Context and Objectives

The project scope was to redesign the data visualization platform for Invent®, focusing on two main aspects: the widget library and the creation wizard. The project goals were to improve the user experience, reduce development costs, and future-proof the platform widget needs.

Increase user retention by 20% within six months

Reduce development costs by 30%

Receive positive feedback from 90% of the clients

To measure these objectives, I used various methods and tools, such as analytics, surveys, interviews, and usability tests. I also defined some key performance indicators (KPIs), such as number of active users, number of widgets created, time spent on creating widgets, satisfaction rate, etc.

Critical Analysis and Execution

I initiated my project with comprehensive user research that unveiled core user needs:

  • Data integrity, relevance, and clarity took precedence.
  • User-friendly customization stood as a vital requirement, with an emphasis on simple yet powerful controls.
  • Responsive widgets were expected to deliver optimal performance across diverse devices.
  • Aesthetics were of paramount importance, necessitating widgets that mirrored brand identity and visual standards.

To understand the user needs and pain points, I conducted surveys, interviews, and observations with 15 existing and potential clients from various sectors and regions. I also conducted an online survey among users of the current data platform. Additionally, I conducted a competitive analysis to benchmark our data visualization widgets against other similar products in the market.


Here are some quotes from the users that illustrate their frustrations:

I don’t like how different widgets look and behave differently. It makes it hard to compare data and create consistent dashboards.
Robert R., 28
I wish I could customize the widgets without having to go through customer service. It takes too much time.
Julia R., 28
I need widgets that work well on any device or screen size. Sometimes they are too small or too big on my iPad.
Chris A., 37
I want widgets that match my brand style and color scheme. They should look professional and appealing.
Carlos S., 36

I synthesized the data using affinity diagrams and created user personas that represented the different user segments and their goals, motivations, behaviors, and frustrations. I also created user journey maps that showed the current and desired user flows for creating and using widgets. 

Ideation and Collaboration

Ideation sprang forth from a collaborative incubator, leveraging cross-functional expertise to formulate a holistic strategy:

  • A widget library designed around informers, bar charts, geo charts, and pie charts, each further diversified into customizable subtypes.
  • A creation wizard materialized across three steps: widget selection, configuration, and output preview.
  • Responsive design anchored by media queries, adaptive grids, and fluid typography.

To generate ideas and validate concepts, I conducted brainstorming sessions, sketching workshops, card sorting exercises, and low-fidelity prototyping with my team members from product, development, and marketing departments. We also solicited feedback from stakeholders and users through presentations, surveys, and usability tests.

Design and Development

Design and development proceeded in tandem, ensuring a seamless transition from concept to execution:

  • A widget library that offered a consistent set of visualization options.
  • A creation wizard that guided users through a simple process of selecting widgets.
  • A responsive design that ensured optimal widget performance across various devices.

To create the final design deliverables, I used Figma. I also followed best practices of accessibility, usability, and security. I conducted user testing throughout the design phase to ensure the solution met the user needs and expectations.

Conclusion

I measured and evaluated the success of my solution using various methods and tools, such as analytics, surveys, interviews, and usability tests. 

The results showed that my solution achieved or exceeded all the project objectives and success criteria. The feedback from both internal and external stakeholders was overwhelmingly positive. 


Here are some quotes from the users that illustrate their satisfaction:

I love how the widgets look and work now. They are consistent, customizable, and responsive. They make my data shine.
Robert R., 33
I can create widgets with just a few clicks. No coding or developer needed. It saves me so much time and money.
Felipe A., 32
I can use widgets on any device or screen size. They are fast and flexible. They adapt to my needs.
Kari B., 42

By implementing my solution, Invent® achieved the following results within six months after launch:

25%

Increase in user retention

40%

Reduced development cost

95%

Positive feedback from clients

I am proud of the impact I made with this project. I transformed Invent®’s data visualization platform with a modular widget library and a wizard-like creation process. I improved the user experience, reduced the development costs, and future-proofed the platform widget needs. I helped Invent® achieve their vision of empowering clients to create stunning data visualizations with just a few clicks.

KPMG Global AI Platform

Previous Case Study

Musa Waste Management

Next Case Study
Back to Top