Widget Picker

Upon applying for the Senior Product Designer role at Enso, I successfully tackled a pivotal homework exercise, propelling me into the next stages of the recruitment process. I demonstrated my expertise by shaping user-centric experiences through extensive UX research, crafting low-fidelity prototypes, and showcasing my commitment to elevating product design.

🏙️ Company: Enso

🗓️ Project date: 2023

🖥 project type: Desktop, b2b SaaS app

👩  my role: Sole product designer

Project summary:

To enhance user onboarding at Enso and streamline the configuration of dashboards, the Widget Picker Feature was developed. Focused on simplicity and intuitiveness, the widget picker facilitates easy navigation for users, minimizing the need for assistance from the Enso team. The project involved a thorough exploration of user habits, studying how they structure dashboards and strategically place widgets in their daily workflows. The resulting widget picker ensures a seamless and user-friendly experience for effective dashboard customization.

The challenge:

Transitioning to a Product Led Growth (PLD) approach, the Widget Picker Feature aimed at enabling users for self-service dashboard configuration at Enso. The challenge was to design an intuitive Widget Picker allowing users to independently structure and configure dashboards with up to 12 spaces, varying widget sizes, and control over placement and order. The goal was zero Enso intervention, focusing on simplicity and functionality to foster easy onboarding and independent platform configuration.

Redesign of Enso's dashboard with the new widget picker menu

User tasks include configuring the dashboard with a widget picker to streamline security management.

Enso's dashboard with the new option to add widgets
from the picker menu.

user needs

User needs are centered around seamless control and customization of Enso's dashboard. The widget picker, showcasing a catalog of widgets, empowers users to handpick and arrange widgets based on their preferences. This feature aligns with the user's primary task of independently configuring the platform to suit their unique requirements, fostering autonomy in creating a personalized dashboard structure.

Addressing the broader concern of an Application Security Manager, the user aims to detect security issues early across products, manage their security engineering team effortlessly, and access crucial application security insights. This ensures the implementation of secure development practices throughout the development lifecycle without unnecessary expenditure of time or resources.

Solution

Perception of Solution

Embarking on the design journey, I meticulously followed a user-centric process to meet the challenge. Research involved a context study, identifying pain points, and a competitive audit, informing a feature narrative and design principles. Iterative ideation brought forth a journey map and UX flow, refined through low-key usability tests with engineers and designer critiques, provided valuable feedback for continual improvement.

Tangible representations included personas, user scenario sketches, wireframes, prototypes, and UI designs. These artifacts visually chronicled the evolution of the solution. Usability tests with available resources, including engineers, were instrumental in validating design decisions. The envisioned solution, driven by users' needs for customization, ensures a streamlined workflow, particularly in addressing security concerns. The tailored dashboard not only enhances immediate security measures but also facilitates Enso in recalibrating based on user insights, emphasizing the vital role of dashboard configuration.

Competitive Audits

As part of the design process, I conducted a thorough Contextual Analysis to comprehensively examine the visual and interactive aspects of Enso's dashboard configuration feature.

I delved into the visual process, scrutinizing how widgets and content are presented, evaluating the use of filters, and understanding the overall dashboard appearance upon loading.

Navigating Design Landscapes through Contextual Analysis and Competitive Audits

Analysis Process

Visual and
Analysis Process

Simultaneously, in the analysis process, I explored user actions, configurations, and widget behaviors when adjusting the dashboard. The research extended to the UX realm, focusing on the structure, functionality, and interaction design, providing valuable insights into user needs for an intuitive and user-friendly widget picker.

This in-depth analysis aimed to inform the design process, ensuring alignment with user expectations and enhancing the overall Enso platform experience.

Visual Process

To overcome resource constraints, usability studies and interview scan be used to optimize UX

Methods

How did we solve the problems?

Usability testing:
Employing a diverse set of methods, I navigated the challenges posed by limited resources to enhance the user experience .Recognizing the importance of direct user insights, I conducted usability testing sessions, crafting a protocol in collaboration with research experts.

Despite the absence of extensive resources, six usability sessions were conducted, providing valuable qualitative data on user interactions and preferences.

Adaptable widget wireframes for the new app grid

Analyzing the current app grid to enable adaptable new layouts

UX principles:
In crafting this project, I applied UX principles effectively.
By adhering to Hick's Law, I streamlined decision-making, recognizing that complexity prolongs the process. Leveraging the Law of Prägnanz, I prioritized simplicity for a clearer dashboard design, minimizing cognitive effort.

Considering Present Bias, I tailored features to align with users' inclination for immediate payoffs in decision-making. These principles collectively shaped an intuitive, user-friendly, and cognitively optimized solution.

Based on my Jira app research, I developed a grid enabling adaptive layouts

Conducting an interview and usability test with Ira, an Application Security Manager, I crafted a user journey map to gain deeper insights into the dashboard user experience.

The redesigned Dashboard's primary flow, features enhanced configuration options, as seen in a prototype screenshot during user testing.

Interviews:
Additionally, I implemented interview techniques to delve into the intricacies of business process management. By leveraging interviews, I aimed to complement traditional approaches, such as process workshops, offering a more nuanced and user-centric understanding of the processes at play. These methods collectively shaped a comprehensive approach, ensuring a user-driven perspective in problem-solving and process optimization.

The user needs a tailor-made solution for early security threat detection and efficient management of secure development practices.

Features

In envisioning a user-centric solution, I concentrated on empowering users to customize the platform, specifically designing a dashboard structure tailored to their preferences.

This self-driven configuration ensures users can confidently rely on a personalized layout that aligns with their ongoing requirements. The introduction of an option to swiftly alter the dashboard's layout addresses the need for efficient organization.

The incorporation of additional widget categories facilitates quicker information retrieval and enhances overall comprehension.

A dialog emerges when the user reaches the maximum widget limit, introducing a deliberate point of friction. This strategic friction serves to guide the user's attention, ensuring they focus on pertinent information. By preventing an overload of widgets, this intentional obstacle promotes concentration, preventing the loss of crucial security insights amid dashboard usage.

Furthermore, the separation of display-related features from more complex ones streamlines the user experience, allowing for rapid dashboard adjustments. The recommendation feature adds value by expediting onboarding through multiple integrations, contributing to a seamless and intuitive user journey. The wireframe provided an early architectural view, identifying potential issues and facilitating a smoother development process.

Before the the widget picker feature was added to the dashboard

After the the widget picker feature was added to the dashboard

To make adding widgets easier, dashboard layouts can now be changed automatically or manually

Results

Project Success Metrics:

The project significantly contributed to the company's UX process, introducing innovative perspectives. Feedback from the Head of Product, the product team, and engineers highlighted it as the most impactful research. The proposed solution surpassed alternatives, earning praise.

Despite an offered position, I chose to join another company, cherishing the enjoyable experience on this project.

User Experience Enhancements by Mitigating Loading Time Perceptions with Skeleton Screens

Reflection

Project Hindsight:

Although the suggested customizable dashboard wasn't integrated into the product, it ignited insightful discussions and provided fresh perspectives on UX processes. Stakeholders' positive feedback validated its potential impact.

This experience later proved valuable when working on other dashboards, emphasizing the importance of enabling users to create and customize, as confirmed by subsequent usability tests.

Testimonials

How people feel about the project:
“Chen's deep understanding of user experience brought a fresh perspective to our team. The proposed approach demonstrated a keen insight into user needs. While we had other solutions in place, the discussions sparked by Chen's work provided valuable insights for our future endeavors”

- Enso's product team

Next
Case