Role
Vunet Systems
Dashboard & mobile design - B2B SaaS
UX Research
Dashboard Design
Mobile
Designing for AI
In this mid-sized startup, I took on many roles as the only designer among 70 employees. I delved into research, concept development, wireframing, and designing the company's AI-led business insights and ML Management Dashboard. On this page, I go over my contribution to their web B2B SaaS platform and designing a companion mobile app for the product.
Role
Product Designer
Duration
Jun 2020 - 21
Context
Startup environment
There is no ideal design process in a startup. We ideate and prototype quickly. Features would be designed in a week, and I would work with proxy users.
Design as a business goal
Investors suggested that having a good design and experience would help the product overtake competitors, because design is often overlooked in B2B products.
Technical complexity
The product is super complex and had to be designed with development constraints and scalability in mind. I was often doing what I coined ‘mental model dance’, because I had to be aware of how any new design changes would affect the customer mental model.
The Process
1
Research
User Interviews
Contextual Inquiry
2
Define
Personas
UX Documentation
Web requirements
Mobile requirements
3
Ideate
Sketching ideas
Quick prototyping
Testing and feedback on the iterations
4
Design
Wireframes
Final design
Development handoff
The Problem
The initial problem was replacing the development-first process with a design and user first process. A common problem across several parts of the product was having a large amounts of information which can overwhelm the users when displayed in a small space.
“It works so well, but is difficult to use. If the look and feel was better, I would use it.”
- Customers
“We first focused on technical aspects and development, to ensure we are well funded. Now that we are established, we want to ramp up design.”
- CXOs
“We struggle with design decisions, because we are not designers. Consistency is difficult to maintain and sometimes there is too much information and we just do not know how to make it better.”
- Development Team
The Solution
1
User Research Documentation
Understanding users, and document findings
2
Dashboard Redesign
Based on information design principles
Data tables, data charts, KPI components, alerts and controls
Close collaboration with development team for deployment
3
Mobile App
Mobile app for our analytics product
Dashboards, alerts and insights
Close collaboration with development team for deployment
1 User Research Documentation
Research
Interviews with various stakeholders - CXOs, Development team, Sales team
5 semi-structured interviews & cognitive walkthroughs with our (proxy) users
Building user flows, touch points, time and clicks per task
Design Decisions
I used Notion to document our company wide user documentation. Everyone across all teams was encouraged to learn about the users we were creating our products for.
The document can be found here. We had 3 kinds of users. In the document, each user profile had 3 parts, as follows.
User personas
Describes our users, their demographics and their story
Touch points
All the triggers that make the user interact with the product
Task map
Common user work flows incl the tasks done and time taken
2 Redesigning the dashboard
Challenge
Dashboards are under constant observation, necessitating their simplicity and speed in usage. The layout must convey immense data within minimal space. We had a functional product that clients loved, but it lacked an organized design system. I initiated the development of our design system piece by piece while collaborating with the engineering team for deployment.
Process
Understanding software framework & platform constraints
New simplified icons, colors and font
Dashboard design guide for engineers that build dashboards for customers
Redesigning individual components using information design principles
Quick deployment & testing of design with development team
Navbar
Updated icons
Search
Controls
Business Metric Unit
before
after
Severity color
Historical data
iteration 1
iteration 2
iteration 3
iteration 4
iteration 5
iteration 6
final
Dashboard
Dashboard before
Dashboard after
3 Mobile App Design
Challenge
Representing a dashboard on a mobile device was challenging. Data tables, charts and KPI components were scaled down. Most non-mobile dashboards are displayed on large monitors with no interactivity. This meant that each component would be interactive, and could be expanded for further details. Actions such as share and export would be top actions users would perform. Alerts was custom made from ground up to be more compatible for mobile.
Design
Process
Sketches
Wireframes
Final design
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Correlated alerts
show less
Alert summary text would go here. This is just sample text, which will have details about the correlated batch of alerts.
Alert Title
transaction
20
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Line Chart
30
40
20
10
5:00
4:00
6:00
7:00
UPI
Alerts
1 hr
Search
BUsiness Dec
20
Tech DEc
20
Tech DEcline
Alerts
Storyboards
Insights
Profile
3.06 k/min
Affected Requests
2 hrs
Total Duration
Alerts
Storyboards
Insights
Profile
Alert Title
CRITICAL
Overview
Corr. Alert ID
185977234
Active Duration
00:30:00
Status
Open
IP Address
73.133.250.155
Assignee
Prabhu (prabhulongsurname@gmail.com)
Created At
21/05/2021, 7:45PM
Location
Vishakapatnam
Summary
Alert description text would go here. This is just sample text, which will have details about each of the individual alert that has occured. This is alert description text, just some dummy text that goes as an extra line.
RCA
Response Time Degradation
The current response time (26.8s) exceeds the auto-detected baseline (148 ms) by 20%
transaction
20
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Alert summary text would go here. This is just sample text, which will have details about the correlated batch of alerts.
Alert Title
transaction
20
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
UPI
Alerts
1 hr
Search
BUsiness Dec
Tech DEc
Tech DEcline
20
20
Alerts
Storyboards
Insights
Profile
mobile - alerts
Expanding correlated alerts
Expanding a single alert
mobile - dashboard
Table
BMV
Filter
Time Selection
Vunet Systems
Dashboard & mobile design - B2B SaaS
UX Research
Dashboard
Mobile
Designing for AI
In this mid-sized startup, I took on many roles as the only designer among 70 employees. I delved into research, concept development, wireframing, and designing the company's AI-led business insights and ML Management Dashboard. On this page, I go over my contribution to their web B2B SaaS platform and designing a companion mobile app for the product.
Role
Product Designer
Duration
Jun 2020 - 21
Context
Startup environment
There is not ideal design process in a startup. We ideate and prototype quickly. Features would be designed in a week, and I could not have access to actual users, but to proxy users.
Design as a business goal
Investors suggested that having a good design and experience would help the product overtake competitors, because design is often overlooked in B2B products.
Technical complexity
The product was complex with several development constraints. Customers were used to having things a certain way. I had to be aware of how design changes affect the customer mental model.
The Process
1
Research
User Interviews
Contextual Inquiry
2
Define
Personas
UX Documentation
Web requirements
Mobile requirements
3
Ideate
Sketching ideas
Quick prototyping
Testing and feedback on the iterations
4
Design
Wireframes
Final design
Development handoff
The Problem
The initial problem was replacing the development-first process with a design and user first process. A common problem across several parts of the product was having a large amounts of information which can overwhelm the users when displayed in a small space.
“It works so well, but is difficult to use. If the look and feel was better, I would use it.”
Customers
“We first focused on technical aspects and development, to ensure we are well funded. Now that we are established, we want to ramp up design.”
CXOs
“We struggle with design decisions, because we are not designers. Consistency is difficult to maintain and sometimes there is too much information and we just do not know how to make it better.”
Development Team
Solution - Explainable AI insights on data dashboards
1
User Research Documentation
Understanding users, and document findings
2
Dashboard Redesign
Based on information design principles
Data tables, data charts, KPI components, alerts and controls
Close collaboration with development team for deployment
3
Mobile App
Mobile app for our analytics product
Dashboards, alerts and insights
Close collaboration with development team for deployment
1 User Documentation
Research
Interviews with various stakeholders - CXOs, Development team, Sales team
5 semi-structured interviews & cognitive walkthroughs with our (proxy) users
Building user flows, touch points, time and clicks per task
Design Decisions
I used Notion to document our company wide user documentation. Everyone across all teams was encouraged to learn about the users we were creating our products for.
The document can be found here. We had 3 kinds of users. In the document, each user profile had 3 parts, as follows.
User personas
Describes our users, their demographics and their story
Touch points
All the triggers that make the user interact with the product
Task map
Common user work flows incl the tasks done and time taken
2 User Documentation
Challenges
The dashboards are monitored 24/7, which requires them to be easy and quick to read. The design must communicate overwhelming amount of information in a limited space.
We had a live product that was being used by customers, but no design system. I began to build our design system, a component at a time and closely worked with the development team to deploy.
Research
Understanding software framework & platform constraints
New simplified icons, colors and font
Dashboard design guide for engineers that build dashboards for customers
Redesigning individual components using information design principles
Quick deployment & testing of design with development team
Updated icons
Search
Controls
before
after
Severity color
Historical data
iteration 1
iteration 2
iteration 3
iteration 4
iteration 5
iteration 6
final
Dashboard before
Dashboard after
3 Mobile App
Challenges
Representing a dashboard on a mobile device was challenging. Data tables, charts and KPI components were scaled down. Most non-mobile dashboards are displayed on large monitors with no interactivity. This meant that each component would be interactive, and could be expanded for further details. Actions such as share and export would be top actions users would perform. Alerts was custom made from ground up to be more compatible for mobile.
Process
Sketches
Wireframes
Final design
Design
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Correlated alerts
show less
Alert summary text would go here. This is just sample text, which will have details about the correlated batch of alerts.
Alert Title
transaction
20
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Line Chart
30
40
20
10
5:00
4:00
6:00
7:00
UPI
Alerts
1 hr
Search
BUsiness Dec
20
Tech DEc
20
Tech DEcline
Alerts
Storyboards
Insights
Profile
3.06 k/min
Affected Requests
2 hrs
Total Duration
Alerts
Storyboards
Insights
Profile
Alert Title
CRITICAL
Overview
Corr. Alert ID
185977234
Active Duration
00:30:00
Status
Open
IP Address
73.133.250.155
Assignee
Prabhu (prabhulongsurname@gmail.com)
Created At
21/05/2021, 7:45PM
Location
Vishakapatnam
Summary
Alert description text would go here. This is just sample text, which will have details about each of the individual alert that has occured. This is alert description text, just some dummy text that goes as an extra line.
RCA
Response Time Degradation
The current response time (26.8s) exceeds the auto-detected baseline (148 ms) by 20%
transaction
20
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Correlated alert text would go here. This is just sample text, which will have details about one of the correlated alerts.
transaction
now
Alert summary text would go here. This is just sample text, which will have details about the correlated batch of alerts.
Alert Title
transaction
20
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
Alert description text would go here. This is just sample text, which will have details about the individual alert that has occured.
Alert Title
now
UPI
Alerts
1 hr
Search
BUsiness Dec
Tech DEc
Tech DEcline
20
20
Alerts
Storyboards
Insights
Profile
mobile - alerts
Expanding correlated alerts
Expanding a single alert
mobile - dashboard
Table
BMV
Filter
Time Selection
back
menu
back
menu