Client
BlueBolt (during CitizenDev)
Disciplines
UX Design Web Application
Timeline
1 month 01.2024 to 02.2024
Collaborator
Huy Tran Vu Nguyen
Deliverables
UI Design Prototypes
Tools
Figma FigJam
BlueBolt B2B & B2C Management System
A [UX] C-BLU
BlueBolt is a company that provides maintenance services for electronic devices. Its B2B platform (or B2B2B) is a customer portal for customers to manage their devices and make their requests for maintenance services from the enterprise. This project consists of two platforms: (1) B2B: manage units, revenues and expenditures, and employees of each area (2) CRM: book and manage services from the customer end
*Work shown is limited due to a non-disclosure agreement.
Client
BlueBolt (during CitizenDev)
Disciplines
UX Design Web Application
Timeline
1 month 01.2024 to 02.2024
Collaborator
Huy Tran Vu Nguyen
Deliverables
UI Design Prototypes
Tools
Figma FigJam
BlueBolt B2B & B2C Management System
A [UX] C-BLU
BlueBolt is a company that provides maintenance services for electronic devices. Its B2B platform (or B2B2B) is a customer portal for customers to manage their devices and make their requests for maintenance services from the enterprise. This project consists of two platforms: (1) B2B: manage units, revenues and expenditures, and employees of each area (2) CRM: book and manage services from the customer end
*Work shown is limited due to a non-disclosure agreement.
Client
BlueBolt (during CitizenDev)
Disciplines
UX Design Web Application
Timeline
1 month 01.2024 to 02.2024
Collaborator
Huy Tran Vu Nguyen
Deliverables
UI Design Prototypes
Tools
Figma FigJam
BlueBolt B2B & B2C Management System
A [UX] C-BLU
BlueBolt is a company that provides maintenance services for electronic devices. Its B2B platform (or B2B2B) is a customer portal for customers to manage their devices and make their requests for maintenance services from the enterprise. This project consists of two platforms: (1) B2B: manage units, revenues and expenditures, and employees of each area (2) CRM: book and manage services from the customer end
*Work shown is limited due to a non-disclosure agreement.
Introduction
Purposes
Another designer had been collaborating with BlueBolt prior to me joining CitizenDev.
However, after the initial platform development, two key issues surfaced:
The client reported that the UX was not user-friendly, particularly during the onboarding process. This indicated a need to improve the overall user journey and make the platform more intuitive.
The platform's design did not adhere to the standards established by CitizenDev's new library system. This created inconsistencies and potentially hindered collaboration between designers and developers.
To deliver an intuitive user experience by redesigning the platform and ensuring full compliance with CitizenDev's new library standards.
Introduction
Purposes
Another designer had been collaborating with BlueBolt prior to me joining CitizenDev.
However, after the initial platform development, two key issues surfaced:
The client reported that the UX was not user-friendly, particularly during the onboarding process. This indicated a need to improve the overall user journey and make the platform more intuitive.
The platform's design did not adhere to the standards established by CitizenDev's new library system. This created inconsistencies and potentially hindered collaboration between designers and developers.
To deliver an intuitive user experience by redesigning the platform and ensuring full compliance with CitizenDev's new library standards.
Introduction
Purposes
Another designer had been collaborating with BlueBolt prior to me joining CitizenDev.
However, after the initial platform development, two key issues surfaced:
The client reported that the UX was not user-friendly, particularly during the onboarding process. This indicated a need to improve the overall user journey and make the platform more intuitive.
The platform's design did not adhere to the standards established by CitizenDev's new library system. This created inconsistencies and potentially hindered collaboration between designers and developers.
To deliver an intuitive user experience by redesigning the platform and ensuring full compliance with CitizenDev's new library standards.
Challenges
The most significant hurdle I faced during this project was understanding the intricate user dynamics and multifaceted data flows inherent to BlueBolt's B2B2B platform. With six distinct user types, each possessing unique needs and expectations, deciphering which features to prioritize for each user group was particularly demanding.
The BlueBolt platform needs to be customized to meet the specific needs of:
B2B System Admin
B2B Region Leaders
B2B Users
Business Owners
Business Unit Admin, Region Admin
Business Users
To address this, I conducted multiple elicitation sessions, heuristic evaluations, and close collaboration with stakeholders (the clients and the developers team).
Challenges
The most significant hurdle I faced during this project was understanding the intricate user dynamics and multifaceted data flows inherent to BlueBolt's B2B2B platform. With six distinct user types, each possessing unique needs and expectations, deciphering which features to prioritize for each user group was particularly demanding.
The BlueBolt platform needs to be customized to meet the specific needs of:
B2B System Admin
B2B Region Leaders
B2B Users
Business Owners
Business Unit Admin, Region Admin
Business Users
To address this, I conducted multiple elicitation sessions, heuristic evaluations, and close collaboration with stakeholders (the clients and the developers team).
Challenges
The most significant hurdle I faced during this project was understanding the intricate user dynamics and multifaceted data flows inherent to BlueBolt's B2B2B platform. With six distinct user types, each possessing unique needs and expectations, deciphering which features to prioritize for each user group was particularly demanding.
The BlueBolt platform needs to be customized to meet the specific needs of:
B2B System Admin
B2B Region Leaders
B2B Users
Business Owners
Business Unit Admin, Region Admin
Business Users
To address this, I conducted multiple elicitation sessions, heuristic evaluations, and close collaboration with stakeholders (the clients and the developers team).
Discover
Elicitation
The elicitation session was important for this project, given that I wasn't the initial designer involved. It enabled me to gain valuable insights into the client's specific needs and expectations, as well as pinpoint areas from the previous design that required improvement.
Discover
Elicitation
The elicitation session was important for this project, given that I wasn't the initial designer involved. It enabled me to gain valuable insights into the client's specific needs and expectations, as well as pinpoint areas from the previous design that required improvement.
Discover
Elicitation
The elicitation session was important for this project, given that I wasn't the initial designer involved. It enabled me to gain valuable insights into the client's specific needs and expectations, as well as pinpoint areas from the previous design that required improvement.
I actively collaborate with the client, re-gather comprehensive insights about the platform, and re-translate these into a visual diagram. This diagram serves as a clear and concise representation of client requirements, avoiding misalignment with the development team.
I actively collaborate with the client, re-gather comprehensive insights about the platform, and re-translate these into a visual diagram. This diagram serves as a clear and concise representation of client requirements, avoiding misalignment with the development team.
I actively collaborate with the client, re-gather comprehensive insights about the platform, and re-translate these into a visual diagram. This diagram serves as a clear and concise representation of client requirements, avoiding misalignment with the development team.
Heuristic Evaluation
Before I started designing the platform, I needed to conduct a heuristic evaluation to better understand the gaps between users and the platform. The biggest challenges were the user flows and UI:
Heuristic Evaluation
Before I started designing the platform, I needed to conduct a heuristic evaluation to better understand the gaps between users and the platform. The biggest challenges were the user flows and UI:
Heuristic Evaluation
Before I started designing the platform, I needed to conduct a heuristic evaluation to better understand the gaps between users and the platform. The biggest challenges were the user flows and UI:
A primary example of confusing IA:
The following diagram illustrates the relationships between various databases. The 'Employees' database is a subset of 'Units.' Unfortunately, the prior design, which employed Tabs (often typically imply the same level of hierarchy), failed to convey this distinction clearly.
In short, the platform doesn't align with BlueBolt's actual workflow, failing to reflect its internal processes, as identified in the second heuristic evaluation point.
A primary example of confusing IA:
The following diagram illustrates the relationships between various databases. The 'Employees' database is a subset of 'Units.' Unfortunately, the prior design, which employed Tabs (often typically imply the same level of hierarchy), failed to convey this distinction clearly.
In short, the platform doesn't align with BlueBolt's actual workflow, failing to reflect its internal processes, as identified in the second heuristic evaluation point.
A primary example of confusing IA:
The following diagram illustrates the relationships between various databases. The 'Employees' database is a subset of 'Units.' Unfortunately, the prior design, which employed Tabs (often typically imply the same level of hierarchy), failed to convey this distinction clearly.
In short, the platform doesn't align with BlueBolt's actual workflow, failing to reflect its internal processes, as identified in the second heuristic evaluation point.
The primary issues were the user flows and interface.
Following the Heuristic Evaluation, I could validate that the primary issues were indeed related to flows and a confusing UI. Meaning, I had to revamp the user flows associated with user tasks, along with a redesign of the application's UI.
The primary issues were related to user flows and a confusing interface.
Following the Heuristic Evaluation, I could validate that the primary issues were indeed related to flows and a confusing UI. Meaning, I had to revamp the user flows associated with user tasks, along with a redesign of the application's UI.
The primary issues were related to user flows and a confusing interface.
Following the Heuristic Evaluation, I could validate that the primary issues were indeed related to flows and a confusing UI. Meaning, I had to revamp the user flows associated with user tasks, along with a redesign of the application's UI.
Define
Use Cases
While the use cases were predetermined by the client, we (me and our developers) streamlined the brief by focusing on how users would interact with the platform, again.
This process also allowed me to effectively divide tasks among the six distinct user types, ensuring that no user group was overlooked or underserved.
Define
Use Cases
While the use cases were predetermined by the client, we (me and our developers) streamlined the brief by focusing on how users would interact with the platform, again.
This process also allowed me to effectively divide tasks among the six distinct user types, ensuring that no user group was overlooked or underserved.
Define
Use Cases
While the use cases were predetermined by the client, we (me and our developers) streamlined the brief by focusing on how users would interact with the platform, again.
This process also allowed me to effectively divide tasks among the six distinct user types, ensuring that no user group was overlooked or underserved.
Sitemap
I designed the platform sitemap and presented it to the clients to guarantee the platform redesign is as consistent as possible with their requirements.
Sitemap
I designed the platform sitemap and presented it to the clients to guarantee the platform redesign is as consistent as possible with their requirements.
Sitemap
I designed the platform sitemap and presented it to the clients to guarantee the platform redesign is as consistent as possible with their requirements.
User Flows
User flows were created to ensure that no screens or use cases identified earlier were overlooked. For such large projects, where many flows are similar (like CRUD flows), I prioritized designing a flow specifically for the B2B System Admin. This is because this user has the capability to perform all tasks, including those of other users, making their flow the most comprehensive.
User Flows
User flows were created to ensure that no screens or use cases identified earlier were overlooked. For such large projects, where many flows are similar (like CRUD flows), I prioritized designing a flow specifically for the B2B System Admin. This is because this user has the capability to perform all tasks, including those of other users, making their flow the most comprehensive.
User Flows
User flows were created to ensure that no screens or use cases identified earlier were overlooked. For such large projects, where many flows are similar (like CRUD flows), I prioritized designing a flow specifically for the B2B System Admin. This is because this user has the capability to perform all tasks, including those of other users, making their flow the most comprehensive.
Design
Wireframes
During the heuristics evaluation, it was noted that the prior design lacked personality. To address this, during the wireframing phase, I placed significant emphasis on layout and how the information could be presented to evoke a sense of excitement during user interaction.
Design
Wireframes
During the heuristics evaluation, it was noted that the prior design lacked personality. To address this, during the wireframing phase, I placed significant emphasis on layout and how the information could be presented to evoke a sense of excitement during user interaction.
Design
Wireframes
During the heuristics evaluation, it was noted that the prior design lacked personality. To address this, during the wireframing phase, I placed significant emphasis on layout and how the information could be presented to evoke a sense of excitement during user interaction.
Hi-fi
BlueBolt's platform design drew inspiration from the IBM Carbon Design System, evident in its use of sharp corners, which subtly hinted at the company's presence in the hardware industry.
I also enhanced the user experience by incorporating best practices from industry leaders such as Google Drive (Unit Management) and Lark (Employees Management).
I chose not to use any corner radius in the UI design to align with the company's offering of hardware maintenance services. This clean, sharp aesthetic better reflects the precision and technical nature of their work.
Hi-fi
BlueBolt's platform design drew inspiration from the IBM Carbon Design System, evident in its use of sharp corners, which subtly hinted at the company's presence in the hardware industry.
I also enhanced the user experience by incorporating best practices from industry leaders such as Google Drive (Unit Management) and Lark (Employees Management).
I chose not to use any corner radius in the UI design to align with the company's offering of hardware maintenance services. This clean, sharp aesthetic better reflects the precision and technical nature of their work.
Hi-fi
BlueBolt's platform design drew inspiration from the IBM Carbon Design System, evident in its use of sharp corners, which subtly hinted at the company's presence in the hardware industry.
I also enhanced the user experience by incorporating best practices from industry leaders such as Google Drive (Unit Management) and Lark (Employees Management).
I chose not to use any corner radius in the UI design to align with the company's offering of hardware maintenance services. This clean, sharp aesthetic better reflects the precision and technical nature of their work.
Deliver
Handover
The transition to the development team was smooth because we'd already aligned platform concepts and flows during the Define phase. Figma's Dev Mode also helped in documenting specs and ensuring smooth communication with front-end developers.
Deliver
Handover
The transition to the development team was smooth because we'd already aligned platform concepts and flows during the Define phase. Figma's Dev Mode also helped in documenting specs and ensuring smooth communication with front-end developers.
Deliver
Handover
The transition to the development team was smooth because we'd already aligned platform concepts and flows during the Define phase. Figma's Dev Mode also helped in documenting specs and ensuring smooth communication with front-end developers.
Product Deck
To provide users, especially Business Owners and Business Users, with a comprehensive understanding of the product, a product deck was created at the client's request. The primary focus of this deck is to guide these specific users through the product's functionality and features, ensuring they can effectively utilize it to achieve their business objectives.
I, of course, applied the UI Kit style to the document, guaranteeing a consistent visual style across both the deck and the developed product.
Product Deck
To provide users, especially Business Owners and Business Users, with a comprehensive understanding of the product, a product deck was created at the client's request. The primary focus of this deck is to guide these specific users through the product's functionality and features, ensuring they can effectively utilize it to achieve their business objectives.
I, of course, applied the UI Kit style to the document, guaranteeing a consistent visual style across both the deck and the developed product.
Product Deck
To provide users, especially Business Owners and Business Users, with a comprehensive understanding of the product, a product deck was created at the client's request. The primary focus of this deck is to guide these specific users through the product's functionality and features, ensuring they can effectively utilize it to achieve their business objectives.
I, of course, applied the UI Kit style to the document, guaranteeing a consistent visual style across both the deck and the developed product.
Features
Quotations Management
Quotations Management is important to the platform as it's the final step in the process. End users utilize and pay for orders outlined in these quotations, which contain a list of services, so their accuracy is paramount.
During elicitation, I discovered the close link between the orders, services, and quotations creation flows. Ideally, services lists are created before quotations, aligning with the platform's intended progressive flow.
Features
Quotations Management
Quotations Management is important to the platform as it's the final step in the process. End users utilize and pay for orders outlined in these quotations, which contain a list of services, so their accuracy is paramount.
During elicitation, I discovered the close link between the orders, services, and quotations creation flows. Ideally, services lists are created before quotations, aligning with the platform's intended progressive flow.
Features
Quotations Management
Quotations Management is important to the platform as it's the final step in the process. End users utilize and pay for orders outlined in these quotations, which contain a list of services, so their accuracy is paramount.
During elicitation, I discovered the close link between the orders, services, and quotations creation flows. Ideally, services lists are created before quotations, aligning with the platform's intended progressive flow.
However, the design challenge arises when users might need to create quotations or orders first. Thus, the orders and quotations creation dialogs must accommodate both scenarios: before or after services list initiation.
However, the design challenge arises when users might need to create quotations or orders first. Thus, the orders and quotations creation dialogs must accommodate both scenarios: before or after services list initiation.
However, the design challenge arises when users might need to create quotations or orders first. Thus, the orders and quotations creation dialogs must accommodate both scenarios: before or after services list initiation.
When users create an order without a services list, they have the option to directly request the System Admin to add the necessary services. The platform intelligently saves the order as is, and then proactively updates the user through notifications once the requested services have been added by the System Admin.
When users create an order without a services list, they have the option to directly request the System Admin to add the necessary services. The platform intelligently saves the order as is, and then proactively updates the user through notifications once the requested services have been added by the System Admin.
When users create an order without a services list, they have the option to directly request the System Admin to add the necessary services. The platform intelligently saves the order as is, and then proactively updates the user through notifications once the requested services have been added by the System Admin.
I've streamlined the quotation and order creation process by merging the two previously separate workflows. The ability to add and edit quotations directly within the order creation flow, via a dropdown menu, eliminates the need to navigate away to a separate quotation management page.
I've streamlined the quotation and order creation process by merging the two previously separate workflows. The ability to add and edit quotations directly within the order creation flow, via a dropdown menu, eliminates the need to navigate away to a separate quotation management page.
I've streamlined the quotation and order creation process by merging the two previously separate workflows. The ability to add and edit quotations directly within the order creation flow, via a dropdown menu, eliminates the need to navigate away to a separate quotation management page.
Organization Management
Organization Management isn't necessarily a challenge, but it's a fascinating part of this project. Managing regions, units, and employees can often feel operational and repetitive. To enhance the user experience, I've explored dynamic layouts for these pages to make these processes more engaging and less monotonous.
Organization Management
Organization Management isn't necessarily a challenge, but it's a fascinating part of this project. Managing regions, units, and employees can often feel operational and repetitive. To enhance the user experience, I've explored dynamic layouts for these pages to make these processes more engaging and less monotonous.
Organization Management
Organization Management isn't necessarily a challenge, but it's a fascinating part of this project. Managing regions, units, and employees can often feel operational and repetitive. To enhance the user experience, I've explored dynamic layouts for these pages to make these processes more engaging and less monotonous.
These layouts were then sent to our clients for final approval. The following layouts are the selected organization management pages:
These layouts were then sent to our clients for final approval. The following layouts are the selected organization management pages:
These layouts were then sent to our clients for final approval. The following layouts are the selected organization management pages:
Onboarding
I've strategically employed bọth the Featured-based Onboarding and Onboarding Tasks List to effectively guide new users through their initial experience, mirroring the the platform's progressive structure and numerous tasks involved.
The onboarding flows have been tailored based on the user's specific role and interaction with the platform. For instance, a B2B System Admin will experience a more comprehensive onboarding journey due to the significantly greater volume of information they need to manage compared to other user types.
The onboarding process tackled the user flow issues highlighted in the Introduction
Onboarding
I've strategically employed bọth the Featured-based Onboarding and Onboarding Tasks List to effectively guide new users through their initial experience, mirroring the the platform's progressive structure and numerous tasks involved.
The onboarding flows have been tailored based on the user's specific role and interaction with the platform. For instance, a B2B System Admin will experience a more comprehensive onboarding journey due to the significantly greater volume of information they need to manage compared to other user types.
The onboarding process tackled the user flow issues highlighted in the Introduction
Onboarding
I've strategically employed bọth the Featured-based Onboarding and Onboarding Tasks List to effectively guide new users through their initial experience, mirroring the the platform's progressive structure and numerous tasks involved.
The onboarding flows have been tailored based on the user's specific role and interaction with the platform. For instance, a B2B System Admin will experience a more comprehensive onboarding journey due to the significantly greater volume of information they need to manage compared to other user types.
The onboarding process tackled the user flow issues highlighted in the Introduction
Initially, users are provided with a clear overview of the application's core functionalities. Following this introduction, the platform prompts them to input relevant information, including their organization's name, and guides them through the process of establishing their initial unit and associated services.
Initially, users are provided with a clear overview of the application's core functionalities. Following this introduction, the platform prompts them to input relevant information, including their organization's name, and guides them through the process of establishing their initial unit and associated services.
Initially, users are provided with a clear overview of the application's core functionalities. Following this introduction, the platform prompts them to input relevant information, including their organization's name, and guides them through the process of establishing their initial unit and associated services.
The information gathered above are important for the application's effective operation, as it establishes the foundational elements necessary to initiate product's core workflows.
Then, users are acquainted with the platform's interface, featuring a task list modal strategically positioned in the bottom right corner. This modal guides users to complete remaining tasks as they progress through the onboarding process.
The information gathered above are important for the application's effective operation, as it establishes the foundational elements necessary to initiate product's core workflows.
Then, users are acquainted with the platform's interface, featuring a task list modal strategically positioned in the bottom right corner. This modal guides users to complete remaining tasks as they progress through the onboarding process.
The information gathered above are important for the application's effective operation, as it establishes the foundational elements necessary to initiate product's core workflows.
Then, users are acquainted with the platform's interface, featuring a task list modal strategically positioned in the bottom right corner. This modal guides users to complete remaining tasks as they progress through the onboarding process.
Key Takeaways
Impacts
After handing over the redesigned platform to the clients, I received a lot of positive feedback, particularly from the BlueBolt team. The design gave their employees a fresh start and actually got them excited about using the product.
Key Takeaways
Impacts
After handing over the redesigned platform to the clients, I received a lot of positive feedback, particularly from the BlueBolt team. The design gave their employees a fresh start and actually got them excited about using the product.
Key Takeaways
Impacts
After handing over the redesigned platform to the clients, I received a lot of positive feedback, particularly from the BlueBolt team. The design gave their employees a fresh start and actually got them excited about using the product.
Lessons Learned
It was my first time tackling a lot of things, like designing an onboarding process for multiple types of users. I had to learn to put myself in different users' shoes in one platform to really understand what they needed and build something that would be truly useful to them.
I also realized the power of illustrations in UI design. They can really take a good product to the next level, making the experience more enjoyable for users and giving the whole thing a bit more personality. I actually decided to add them in during the heuristic evaluation phase, specifically because I wanted to inject some life into the platform.
Lessons Learned
It was my first time tackling a lot of things, like designing an onboarding process for multiple types of users. I had to learn to put myself in different users' shoes in one platform to really understand what they needed and build something that would be truly useful to them.
I also realized the power of illustrations in UI design. They can really take a good product to the next level, making the experience more enjoyable for users and giving the whole thing a bit more personality. I actually decided to add them in during the heuristic evaluation phase, specifically because I wanted to inject some life into the platform.
Lessons Learned
It was my first time tackling a lot of things, like designing an onboarding process for multiple types of users. I had to learn to put myself in different users' shoes in one platform to really understand what they needed and build something that would be truly useful to them.
I also realized the power of illustrations in UI design. They can really take a good product to the next level, making the experience more enjoyable for users and giving the whole thing a bit more personality. I actually decided to add them in during the heuristic evaluation phase, specifically because I wanted to inject some life into the platform.