Kiran-Portfolio

Problem Statement

The dashboard builder flow is not user friendly.
Trying to display too much cards and information on a single dashboard can overwhelm users.
Poorly chosen charts or graphs can make it difficult for users to interpret data.
Inconsistent use of colors, fonts, and layouts across widgets can create a disjointed user experience.
Portal is not responsive
Table widgets are like table format. We can show case them in different and interactive way.
Content is not accessible

Project Solution

Creating user friendly flow for dashboard builder
Prioritize key metrics and use progressive disclosure for additional details in Dashboard.
Select appropriate data visualization types for different data sets and provide clear labels and legends to charts/graphs.
Establish a style guide for consistency in design elements throughout the dashboard.
Implement responsive design principles to ensure the application adapts to various screen sizes and orientations.
Creating different types of widgets for tables

Research

StakeholderInterviews

• Capture user pain points from Internal and external stakeholder interview
• Understand the critical usability issues in application

App Demos

• Understand high-level existing application
• Deep dive into functionality

ExpertAudit

• (Heuristic analysis) Apply experience audit best practice
• Capture usability problems and what’s working

Created current User Journey Map based on the research

Dashboard builder flow

We have gone through the current dashboard builder flow in the research phase and captured pain points /Insights

• Adding widgets through popup makes confuse the user to predict the dashboard view.
• User can’t add the multiple widgets at time
• There are no features for templates and theme while creating dashboard

What did we learn from research

• The dashboard builder flow is not user friendly. Adding widgets through popup makes confuse the user to predict the dashboard view
• Trying to display too much information on a single dashboard can overwhelm users.
• Poorly chosen charts or graphs can make it difficult for users to interpret data.
• Inconsistent use of colors, fonts, and layouts across widgets can create a disjointed user experience.
• Application not display well on different screen sizes or devices.
• Table widgets are like table format. We can show case them in different and interactive way.
• Filters and search functionality poor

Mood board

We have gone through several other dashboard applications like Creative-tim, Tableau,Microsoft Power BI, Google DataStudio and Domo. Observed their functionality and design. When choosing a dashboard builder application, it's essential to consider factors such as the specific needs of current requirement, ease of use, integration capabilities, and scalability.

Ideation– Dashboard builder wireframes

1. User visits the web application's landing page.
2. Starts the process of creating their first dashboard.
3. User choose the template, adds widgets and add the theme to their dashboard to visualize data.
4. User configures and customizes the widgets to display in the dashboard

Design System

A design system is a foundational element in application design that supports consistency, efficiency, scalability, and collaboration. It not only benefits the design and development process but also contributes to a positive and unified user experience.

Visual Design

Before

After

Updates

Fully AA compliance & accessibility.
Clearly segregated cards which aligns with the grid system. User can scan the card content easily.
A left navigation collapses or adjusts its layout on smaller screens, ensuring a positive user experience on both desktop and mobile devices.
A left navigation is visually scannable, allowing users to identify options easily, even at a glance.
Consistency in Icons, colors, typography hierarchy, it ensures the usability and accessibility across all pages.
Key metrics, KPIs, and performance indicators are presented in a clear and organized manner.
Interactive features such as cards, filters, sliders, and clickable elements provide users with the flexibility.
Single click filter option

Mobile friendly and scalable to apply across all Devices

Helping developers with responsive mockups during development involves providing clear guidance and support to ensure that the design translates smoothly across different screen sizes and devices.

• Provide Breakpoints and Grid Systems
• Specify Flexible Layouts
• Consider Content Priority:
• Optimize Images and Media
• Test and Iterate
• Document Guidelines and Best Practices:

Developer’s Figma Handoff file

The Developer Figma Handoff file serves as a crucial resource for developers during the implementation phase of a design project.

• Access to Design Specifications
• Insights into Interaction Patterns
• Exportable Assets
• Access to Components and Symbols
• Code Snippets and CSS Styles
• Interactive Prototyping

The Business Impact

Quickly access relevant information, streamlining the decision-making process.
Increased user satisfaction and engagement with data, fostering a positive overall experience.
Data is presented in visually charts and graphs, making it easier for clients to understand complex information quickly.
Increased engagement often leads to higher conversion rates and more opportunities for revenue generation.

User can easily create the dashboards by using updated dashboard builder flow.
User can adjust the layouts, and applying personalized visualizations for a more meaningful and contextualized experience.
Intuitive design and user-friendly interfaces reduce the learning curve, allowing users to interact with and navigate dashboards without extensive training.
A responsive design ensures a consistent and optimal user experience across various devices and screen sizes, promoting accessibility and flexibility in data access.

Leading Health care Reports