Enabling safety managers to
access different types of reports
associated with their fleet

Enabling safety managers to
access different types of reports
associated with their fleet

Enabling safety managers to
access different types of reports
associated with their fleet

Enabling safety managers to
access different types of reports
associated with their fleet

Responsibilities

Requirement gathering

Stakeholder interviews

Ideation

Competitive analysis

Wireframing

Visual design

High-fidelity prototyping

Design hand-off

QA

Documentation

Team

1 UX Designer

2 Product Manager

2 Engineers

Prototype links

Mobile

Desktop

About

Designing the report section allowing safety managers to subscribe/request for various reports associated with their fleets

About Netradyne
  • B2B fleet management company that focuses on improving road and driver safety.

  • Founded in 2015, Netradyne is an industry leader in fleet safety solutions and was recently named in the Forbes AI Top 50 Companies to Watch list for 2022.

Responsibilities

Requirement gathering

Stakeholder interviews

Ideation

Competitive analysis

Wireframing

Visual design

High-fidelity prototyping

Design hand-off

QA

Documentation

Team

1 UX Designer

2 Product Manager

2 Engineers

Prototype links

Mobile

Desktop

About

Designing the report section allowing safety managers to subscribe/request for various reports associated with their fleets

About Netradyne
  • B2B fleet management company that focuses on improving road and driver safety.

  • Founded in 2015, Netradyne is an industry leader in fleet safety solutions and was recently named in the Forbes AI Top 50 Companies to Watch list for 2022.

Responsibilities

Requirement gathering

Stakeholder interviews

Ideation

Competitive analysis

Wireframing

Visual design

High-fidelity prototyping

Design hand-off

QA

Documentation

Team

1 UX Designer

2 Product Manager

2 Engineers

Prototype links

Mobile

Desktop

About

Designing the report section allowing safety managers to subscribe/request for various reports associated with their fleets

About Netradyne
  • B2B fleet management company that focuses on improving road and driver safety.

  • Founded in 2015, Netradyne is an industry leader in fleet safety solutions and was recently named in the Forbes AI Top 50 Companies to Watch list for 2022.

Responsibilities

Requirement gathering

Stakeholder interviews

Ideation

Competitive analysis

Wireframing

Visual design

High-fidelity prototyping

Design hand-off

QA

Documentation

Team

1 UX Designer

2 Product Manager

2 Engineers

Prototype links

Mobile

Desktop

About

Designing the report section allowing safety managers to subscribe/request for various reports associated with their fleets

About Netradyne
  • B2B fleet management company that focuses on improving road and driver safety.

  • Founded in 2015, Netradyne is an industry leader in fleet safety solutions and was recently named in the Forbes AI Top 50 Companies to Watch list for 2022.

Why do we need a reports section

Reports central was a section in the dashboard from where safety manager could:

  1. Access and download any of the report.

  2. Request and subscribe/unsubscribe to any of the reports.

What I did

I was responsible for the design of the reports section for both on mobile and web. Here are the steps that I took for the same:

  1. Stakeholder Interviews: Gathered initial requirement from the product team.

  2. Low-fidelity prototypes: Created rough wireframes and shared it with the stakeholders.

  3. Incorporate feedback and improve: Improved the designs based on the feedback received from the stakeholders.

  4. Final designs: Created high-fidelity UI designs and clickable prototypes on XD.

  5. Hand-off: Collaborated with the developers to ensure proper hand-off of the designs.

  6. Design for mobile: Designed the same functionality for the mobile application as well.

Understanding the Requirements

PRD + Interviews

Insights: "adsads" "sdasdsa" asdsadas

I was responsible for the design of the reports section for both on mobile and web. Here are the steps that I took for the same:

  1. Reviewing the product-requirement document (PRD): Discussed the PRD with the product manager and customer success manager to clarify my doubts and ensure both user and business needs are met.

  2. Low-fidelity prototypes: Created rough wireframes and shared it with the stakeholders.

  3. Incorporate feedback and improve: Improved the designs based on the feedback received from the stakeholders.

  4. Final designs: Created high-fidelity UI designs and clickable prototypes on XD.

  5. Hand-off: Collaborated with the developers to ensure proper hand-off of the designs.

  6. Design for mobile: Designed the same functionality for the mobile application as well.

Final Designs

Some of the screens from the final design.

Desktop version
Mobile version

Why do we need a reports section

Reports central was a section in the dashboard from where safety manager could:

  1. Access and download any of the report.

  2. Request and subscribe/unsubscribe to any of the reports.

What I did

I was responsible for the design of the reports section for both on mobile and web. Here are the steps that I took for the same:

  1. Stakeholder Interviews: Gathered initial requirement from the product team.

  2. Low-fidelity prototypes: Created rough wireframes and shared it with the stakeholders.

  3. Incorporate feedback and improve: Improved the designs based on the feedback received from the stakeholders.

  4. Final designs: Created high-fidelity UI designs and clickable prototypes on XD.

  5. Hand-off: Collaborated with the developers to ensure proper hand-off of the designs.

  6. Design for mobile: Designed the same functionality for the mobile application as well.

Understanding the Requirements

PRD + Interviews

Insights: "adsads" "sdasdsa" asdsadas

I was responsible for the design of the reports section for both on mobile and web. Here are the steps that I took for the same:

  1. Reviewing the product-requirement document (PRD): Discussed the PRD with the product manager and customer success manager to clarify my doubts and ensure both user and business needs are met.

  2. Low-fidelity prototypes: Created rough wireframes and shared it with the stakeholders.

  3. Incorporate feedback and improve: Improved the designs based on the feedback received from the stakeholders.

  4. Final designs: Created high-fidelity UI designs and clickable prototypes on XD.

  5. Hand-off: Collaborated with the developers to ensure proper hand-off of the designs.

  6. Design for mobile: Designed the same functionality for the mobile application as well.

Final Designs

Some of the screens from the final design.

Desktop version
Mobile version

Why do we need a reports section

Reports central was a section in the dashboard from where safety manager could:

  1. Access and download any of the report.

  2. Request and subscribe/unsubscribe to any of the reports.

What I did

I was responsible for the design of the reports section for both on mobile and web. Here are the steps that I took for the same:

  1. Stakeholder Interviews: Gathered initial requirement from the product team.

  2. Low-fidelity prototypes: Created rough wireframes and shared it with the stakeholders.

  3. Incorporate feedback and improve: Improved the designs based on the feedback received from the stakeholders.

  4. Final designs: Created high-fidelity UI designs and clickable prototypes on XD.

  5. Hand-off: Collaborated with the developers to ensure proper hand-off of the designs.

  6. Design for mobile: Designed the same functionality for the mobile application as well.

Understanding the Requirements

PRD + Interviews

Insights: "adsads" "sdasdsa" asdsadas

I was responsible for the design of the reports section for both on mobile and web. Here are the steps that I took for the same:

  1. Reviewing the product-requirement document (PRD): Discussed the PRD with the product manager and customer success manager to clarify my doubts and ensure both user and business needs are met.

  2. Low-fidelity prototypes: Created rough wireframes and shared it with the stakeholders.

  3. Incorporate feedback and improve: Improved the designs based on the feedback received from the stakeholders.

  4. Final designs: Created high-fidelity UI designs and clickable prototypes on XD.

  5. Hand-off: Collaborated with the developers to ensure proper hand-off of the designs.

  6. Design for mobile: Designed the same functionality for the mobile application as well.

Final Designs

Some of the screens from the final design.

Desktop version
Mobile version

Why do we need a reports section

Reports central was a section in the dashboard from where safety manager could:

  1. Access and download any of the report.

  2. Request and subscribe/unsubscribe to any of the reports.

What I did

I was responsible for the design of the reports section for both on mobile and web. Here are the steps that I took for the same:

  1. Stakeholder Interviews: Gathered initial requirement from the product team.

  2. Low-fidelity prototypes: Created rough wireframes and shared it with the stakeholders.

  3. Incorporate feedback and improve: Improved the designs based on the feedback received from the stakeholders.

  4. Final designs: Created high-fidelity UI designs and clickable prototypes on XD.

  5. Hand-off: Collaborated with the developers to ensure proper hand-off of the designs.

  6. Design for mobile: Designed the same functionality for the mobile application as well.

Understanding the Requirements

PRD + Interviews

Insights: "adsads" "sdasdsa" asdsadas

I was responsible for the design of the reports section for both on mobile and web. Here are the steps that I took for the same:

  1. Reviewing the product-requirement document (PRD): Discussed the PRD with the product manager and customer success manager to clarify my doubts and ensure both user and business needs are met.

  2. Low-fidelity prototypes: Created rough wireframes and shared it with the stakeholders.

  3. Incorporate feedback and improve: Improved the designs based on the feedback received from the stakeholders.

  4. Final designs: Created high-fidelity UI designs and clickable prototypes on XD.

  5. Hand-off: Collaborated with the developers to ensure proper hand-off of the designs.

  6. Design for mobile: Designed the same functionality for the mobile application as well.

Final Designs

Some of the screens from the final design.

Desktop version
Mobile version

Project Goal

Hearing back from the customers about the issues they are facing or any other feedback about the product is really important. The aim of this project was to enhance the customer feedback flow and reduce the time taken to respond to the customer feedback.

My Responsibilities

Gathered initial requirement from the product team.

  1. Analyzed the current feedback flow to find what needs to be improved.

  2. Created the first version of prototype, shared it with the stakeholders and improved upon it as per the feedback received from the stakeholders.

  3. Collaborated with the developers to ensure proper hand-off of the designs.

  4. Designed the same functionality for the mobile application as well.

Impact

  1. All complaints/suggestions now were getting categorised automatically, hence helping the support team in organising their workflow and improving their productivity.

  2. New flows asking for product improvement from users were also added, thereby creating a way to gather direct feedback from the customers.

Final Prototypes

Mobile prototype
Desktop prototype

Final Designs

Desktop version
Mobile version

Project Goal

Hearing back from the customers about the issues they are facing or any other feedback about the product is really important. The aim of this project was to enhance the customer feedback flow and reduce the time taken to respond to the customer feedback.

My Responsibilities

Gathered initial requirement from the product team.

  1. Analyzed the current feedback flow to find what needs to be improved.

  2. Created the first version of prototype, shared it with the stakeholders and improved upon it as per the feedback received from the stakeholders.

  3. Collaborated with the developers to ensure proper hand-off of the designs.

  4. Designed the same functionality for the mobile application as well.

Impact

  1. All complaints/suggestions now were getting categorised automatically, hence helping the support team in organising their workflow and improving their productivity.

  2. New flows asking for product improvement from users were also added, thereby creating a way to gather direct feedback from the customers.

Final Prototypes

Mobile prototype
Desktop prototype

Final Designs

Desktop version
Mobile version

Project Goal

Hearing back from the customers about the issues they are facing or any other feedback about the product is really important. The aim of this project was to enhance the customer feedback flow and reduce the time taken to respond to the customer feedback.

My Responsibilities

Gathered initial requirement from the product team.

  1. Analyzed the current feedback flow to find what needs to be improved.

  2. Created the first version of prototype, shared it with the stakeholders and improved upon it as per the feedback received from the stakeholders.

  3. Collaborated with the developers to ensure proper hand-off of the designs.

  4. Designed the same functionality for the mobile application as well.

Impact

  1. All complaints/suggestions now were getting categorised automatically, hence helping the support team in organising their workflow and improving their productivity.

  2. New flows asking for product improvement from users were also added, thereby creating a way to gather direct feedback from the customers.

Final Prototypes

Mobile prototype
Desktop prototype

Final Designs

Desktop version
Mobile version

Project Goal

Hearing back from the customers about the issues they are facing or any other feedback about the product is really important. The aim of this project was to enhance the customer feedback flow and reduce the time taken to respond to the customer feedback.

My Responsibilities

Gathered initial requirement from the product team.

  1. Analyzed the current feedback flow to find what needs to be improved.

  2. Created the first version of prototype, shared it with the stakeholders and improved upon it as per the feedback received from the stakeholders.

  3. Collaborated with the developers to ensure proper hand-off of the designs.

  4. Designed the same functionality for the mobile application as well.

Impact

  1. All complaints/suggestions now were getting categorised automatically, hence helping the support team in organising their workflow and improving their productivity.

  2. New flows asking for product improvement from users were also added, thereby creating a way to gather direct feedback from the customers.

Final Prototypes

Mobile prototype
Desktop prototype

Final Designs

Desktop version
Mobile version

Project Overview

After few months of working at Netradyne and getting inspired from other B2B products, we realized that few things are missing from our designs. For example: Empty states for different sections and feature introduction videos that briefly explain what a new feature does were missing. So, I decided to create empty states and feature introduction videos for new and important features that were being rolled out.

My Responsibilities

  1. Reviewed the entire web dashboard and mobile application to identify sections where empty state is required.

  2. Created different versions of empty states in a structured and consistent format and shared it with the product team to get their feedback.

  3. Collaborated with the newly hired visual designer to create new feature introduction videos.

Outcome

  • Figured out a structure for the empty state: While looking at other products and their empty states, I figured out a structure for the empty state:

    • Explain clearly what has happened (explain the current state).

    • Explain why it has happened.

    • Explain what needs to be done to get out of the empty state/achieve the desired state and provide a pathway for the same.

Empty States

Desktop version
Mobile version

Project Overview

After few months of working at Netradyne and getting inspired from other B2B products, we realized that few things are missing from our designs. For example: Empty states for different sections and feature introduction videos that briefly explain what a new feature does were missing. So, I decided to create empty states and feature introduction videos for new and important features that were being rolled out.

My Responsibilities

  1. Reviewed the entire web dashboard and mobile application to identify sections where empty state is required.

  2. Created different versions of empty states in a structured and consistent format and shared it with the product team to get their feedback.

  3. Collaborated with the newly hired visual designer to create new feature introduction videos.

Outcome

  • Figured out a structure for the empty state: While looking at other products and their empty states, I figured out a structure for the empty state:

    • Explain clearly what has happened (explain the current state).

    • Explain why it has happened.

    • Explain what needs to be done to get out of the empty state/achieve the desired state and provide a pathway for the same.

Empty States

Desktop version
Mobile version

Project Overview

After few months of working at Netradyne and getting inspired from other B2B products, we realized that few things are missing from our designs. For example: Empty states for different sections and feature introduction videos that briefly explain what a new feature does were missing. So, I decided to create empty states and feature introduction videos for new and important features that were being rolled out.

My Responsibilities

  1. Reviewed the entire web dashboard and mobile application to identify sections where empty state is required.

  2. Created different versions of empty states in a structured and consistent format and shared it with the product team to get their feedback.

  3. Collaborated with the newly hired visual designer to create new feature introduction videos.

Outcome

  • Figured out a structure for the empty state: While looking at other products and their empty states, I figured out a structure for the empty state:

    • Explain clearly what has happened (explain the current state).

    • Explain why it has happened.

    • Explain what needs to be done to get out of the empty state/achieve the desired state and provide a pathway for the same.

Empty States

Desktop version
Mobile version

Project Overview

After few months of working at Netradyne and getting inspired from other B2B products, we realized that few things are missing from our designs. For example: Empty states for different sections and feature introduction videos that briefly explain what a new feature does were missing. So, I decided to create empty states and feature introduction videos for new and important features that were being rolled out.

My Responsibilities

  1. Reviewed the entire web dashboard and mobile application to identify sections where empty state is required.

  2. Created different versions of empty states in a structured and consistent format and shared it with the product team to get their feedback.

  3. Collaborated with the newly hired visual designer to create new feature introduction videos.

Outcome

  • Figured out a structure for the empty state: While looking at other products and their empty states, I figured out a structure for the empty state:

    • Explain clearly what has happened (explain the current state).

    • Explain why it has happened.

    • Explain what needs to be done to get out of the empty state/achieve the desired state and provide a pathway for the same.

Empty States

Desktop version
Mobile version

Project Overview

Apart from handling the UX of multiple features for both web and mobile products, I was actively involved with the marketing team and the documentation team to enhance the help section and the website. I designed various illustrations, thumbnails for onboarding/training videos regarding the dashboard and also worked on the website design. Below are some of the designs:

Banner for a blog about how Netradyne is the right approach towards fleet management

Thumbnails for training videos in the help section of the dashboard.

Some other illustrations used in blogs and marketing brochures

Product page

Project Overview

Apart from handling the UX of multiple features for both web and mobile products, I was actively involved with the marketing team and the documentation team to enhance the help section and the website. I designed various illustrations, thumbnails for onboarding/training videos regarding the dashboard and also worked on the website design. Below are some of the designs:

Banner for a blog about how Netradyne is the right approach towards fleet management

Thumbnails for training videos in the help section of the dashboard.

Some other illustrations used in blogs and marketing brochures

Product page

Project Overview

Apart from handling the UX of multiple features for both web and mobile products, I was actively involved with the marketing team and the documentation team to enhance the help section and the website. I designed various illustrations, thumbnails for onboarding/training videos regarding the dashboard and also worked on the website design. Below are some of the designs:

Banner for a blog about how Netradyne is the right approach towards fleet management

Thumbnails for training videos in the help section of the dashboard.

Some other illustrations used in blogs and marketing brochures

Product page

Project Overview

Apart from handling the UX of multiple features for both web and mobile products, I was actively involved with the marketing team and the documentation team to enhance the help section and the website. I designed various illustrations, thumbnails for onboarding/training videos regarding the dashboard and also worked on the website design. Below are some of the designs:

Banner for a blog about how Netradyne is the right approach towards fleet management

Thumbnails for training videos in the help section of the dashboard.

Some other illustrations used in blogs and marketing brochures

Product page

Other projects

Other projects

Other projects

Other projects

Thanks for stopping by 😊

©2023 by Kartik Kataria