Projects
Blueprint Editor
An empowering tool that allows admins to implement and onboard clients without engineering resources.
Projects
Blueprint Editor
An empowering tool that allows admins to implement and onboard clients without engineering resources.
Projects
Blueprint Editor
An empowering tool that allows admins to implement and onboard clients without engineering resources.
Projects
Blueprint Editor
An empowering tool that allows admins to implement and onboard clients without engineering resources.
year
2023
timeframe
4 weeks
tool
Figma
category
New Feature
Blueprint Editor is a new tool that enables Customer Operation users to set up the appropriate blueprint for clients - making setting up new client instance simple and without engineering resource.
Problem
The beta version of Blueprint Editor was accessible by 3 selected Customer Operation teams and it was developed without any designers' input. Users have reported a few usability problems:
creating blueprints
editing blueprints
viewing error messages
Goal
Since this project involves a lot of data restructuring, it would be taking a few quarters to complete. In its phase 1, the design goal(s) is not to redesign or introduce new functionalities. Rather, it is to improve the UX of:
error handling
node configuration
blueprint configuration
My Role
Another designer colleague took an initial stab at the design work, so I picked up where things were left out and was tasked to ensure there is a baseline of usability moving forward, particularly in:
creating a blueprint
configuring a node
Understand
As a designer who is reviewing the initial mock ups, there were definitely opportunities to shape a better user experience:
How do users name or rename a blueprint?
How do users navigate to different blueprints?
How can we provide feedback to users?
(For designers) how can we create a holistic design that is both scalable and consistent to our design patterns?
Solution
Naming Blueprint
Current flow requires multiple clicks for users to name any blueprints.
User creates a new blueprint
User clicks more actions
User clicks blueprint settings
User names blueprint
User saves the changes
Enhanced user flow moves the naming step earlier to reduce the number of clicks to a desired outcome.
User creates a new blueprint
User names blueprint
User saves the change.
UX/UI Changes
In addition to improve the user flow, the UI was also updated - allowing users to better distinguish and scan through the available nodes through creating with more white space.
Node configurations were also modified. That said, this was an unforeseen design problem due to the limitation of the existing data table and blueprints' complex data structure.
To prepare for this particular challenge, I chose the node with the most complex data structure to study. Along with a full audit of the current data tables in the design system, I decided to design a better tabular experience and ensuring that users won't be too overwhelmed by all the input fields.
(Unfortunately, I was unable to save a copy of the audit due to being laid off)
Results
Despite the design efforts that were put into the project, my company had to go through company restructure due to the economic factors so I was not able to witness the outcomes of the implementation.
That said, I was told that internal stakeholders were stoked about seeing the changes especially the customer operation team as they are the ones who are primarily setting up the blueprints for each client instance.
Takeaways
I learned that a PM with technical and the proper business knowledge is very important. Fortunately, the PM for the project was previously on the customer operation team, so it made identifying the right data input from users an easier process especially when it comes to setting up the blueprint for clients.
While me and the design team always knew that data tables have been tricky to implement, the specific use case for blueprint was never considered. With the complex data input blueprints require, I had to go through a thinking/analytical exercise about how the existing data table is designed and implemented while ensuring its usability to our users.
year
2023
timeframe
4 weeks
tool
Figma
category
New Feature
Blueprint Editor is a new tool that enables Customer Operation users to set up the appropriate blueprint for clients - making setting up new client instance simple and without engineering resource.
Problem
The beta version of Blueprint Editor was accessible by 3 selected Customer Operation teams and it was developed without any designers' input. Users have reported a few usability problems:
creating blueprints
editing blueprints
viewing error messages
Goal
Since this project involves a lot of data restructuring, it would be taking a few quarters to complete. In its phase 1, the design goal(s) is not to redesign or introduce new functionalities. Rather, it is to improve the UX of:
error handling
node configuration
blueprint configuration
My Role
Another designer colleague took an initial stab at the design work, so I picked up where things were left out and was tasked to ensure there is a baseline of usability moving forward, particularly in:
creating a blueprint
configuring a node
Understand
As a designer who is reviewing the initial mock ups, there were definitely opportunities to shape a better user experience:
How do users name or rename a blueprint?
How do users navigate to different blueprints?
How can we provide feedback to users?
(For designers) how can we create a holistic design that is both scalable and consistent to our design patterns?
Solution
Naming Blueprint
Current flow requires multiple clicks for users to name any blueprints.
User creates a new blueprint
User clicks more actions
User clicks blueprint settings
User names blueprint
User saves the changes
Enhanced user flow moves the naming step earlier to reduce the number of clicks to a desired outcome.
User creates a new blueprint
User names blueprint
User saves the change.
UX/UI Changes
In addition to improve the user flow, the UI was also updated - allowing users to better distinguish and scan through the available nodes through creating with more white space.
Node configurations were also modified. That said, this was an unforeseen design problem due to the limitation of the existing data table and blueprints' complex data structure.
To prepare for this particular challenge, I chose the node with the most complex data structure to study. Along with a full audit of the current data tables in the design system, I decided to design a better tabular experience and ensuring that users won't be too overwhelmed by all the input fields.
(Unfortunately, I was unable to save a copy of the audit due to being laid off)
Results
Despite the design efforts that were put into the project, my company had to go through company restructure due to the economic factors so I was not able to witness the outcomes of the implementation.
That said, I was told that internal stakeholders were stoked about seeing the changes especially the customer operation team as they are the ones who are primarily setting up the blueprints for each client instance.
Takeaways
I learned that a PM with technical and the proper business knowledge is very important. Fortunately, the PM for the project was previously on the customer operation team, so it made identifying the right data input from users an easier process especially when it comes to setting up the blueprint for clients.
While me and the design team always knew that data tables have been tricky to implement, the specific use case for blueprint was never considered. With the complex data input blueprints require, I had to go through a thinking/analytical exercise about how the existing data table is designed and implemented while ensuring its usability to our users.
year
2023
timeframe
4 weeks
tool
Figma
category
New Feature
Blueprint Editor is a new tool that enables Customer Operation users to set up the appropriate blueprint for clients - making setting up new client instance simple and without engineering resource.
Problem
The beta version of Blueprint Editor was accessible by 3 selected Customer Operation teams and it was developed without any designers' input. Users have reported a few usability problems:
creating blueprints
editing blueprints
viewing error messages
Goal
Since this project involves a lot of data restructuring, it would be taking a few quarters to complete. In its phase 1, the design goal(s) is not to redesign or introduce new functionalities. Rather, it is to improve the UX of:
error handling
node configuration
blueprint configuration
My Role
Another designer colleague took an initial stab at the design work, so I picked up where things were left out and was tasked to ensure there is a baseline of usability moving forward, particularly in:
creating a blueprint
configuring a node
Understand
As a designer who is reviewing the initial mock ups, there were definitely opportunities to shape a better user experience:
How do users name or rename a blueprint?
How do users navigate to different blueprints?
How can we provide feedback to users?
(For designers) how can we create a holistic design that is both scalable and consistent to our design patterns?
Solution
Naming Blueprint
Current flow requires multiple clicks for users to name any blueprints.
User creates a new blueprint
User clicks more actions
User clicks blueprint settings
User names blueprint
User saves the changes
Enhanced user flow moves the naming step earlier to reduce the number of clicks to a desired outcome.
User creates a new blueprint
User names blueprint
User saves the change.
UX/UI Changes
In addition to improve the user flow, the UI was also updated - allowing users to better distinguish and scan through the available nodes through creating with more white space.
Node configurations were also modified. That said, this was an unforeseen design problem due to the limitation of the existing data table and blueprints' complex data structure.
To prepare for this particular challenge, I chose the node with the most complex data structure to study. Along with a full audit of the current data tables in the design system, I decided to design a better tabular experience and ensuring that users won't be too overwhelmed by all the input fields.
(Unfortunately, I was unable to save a copy of the audit due to being laid off)
Results
Despite the design efforts that were put into the project, my company had to go through company restructure due to the economic factors so I was not able to witness the outcomes of the implementation.
That said, I was told that internal stakeholders were stoked about seeing the changes especially the customer operation team as they are the ones who are primarily setting up the blueprints for each client instance.
Takeaways
I learned that a PM with technical and the proper business knowledge is very important. Fortunately, the PM for the project was previously on the customer operation team, so it made identifying the right data input from users an easier process especially when it comes to setting up the blueprint for clients.
While me and the design team always knew that data tables have been tricky to implement, the specific use case for blueprint was never considered. With the complex data input blueprints require, I had to go through a thinking/analytical exercise about how the existing data table is designed and implemented while ensuring its usability to our users.
year
2023
timeframe
4 weeks
tool
Figma
category
New Feature
Blueprint Editor is a new tool that enables Customer Operation users to set up the appropriate blueprint for clients - making setting up new client instance simple and without engineering resource.
Problem
The beta version of Blueprint Editor was accessible by 3 selected Customer Operation teams and it was developed without any designers' input. Users have reported a few usability problems:
creating blueprints
editing blueprints
viewing error messages
Goal
Since this project involves a lot of data restructuring, it would be taking a few quarters to complete. In its phase 1, the design goal(s) is not to redesign or introduce new functionalities. Rather, it is to improve the UX of:
error handling
node configuration
blueprint configuration
My Role
Another designer colleague took an initial stab at the design work, so I picked up where things were left out and was tasked to ensure there is a baseline of usability moving forward, particularly in:
creating a blueprint
configuring a node
Understand
As a designer who is reviewing the initial mock ups, there were definitely opportunities to shape a better user experience:
How do users name or rename a blueprint?
How do users navigate to different blueprints?
How can we provide feedback to users?
(For designers) how can we create a holistic design that is both scalable and consistent to our design patterns?
Solution
Naming Blueprint
Current flow requires multiple clicks for users to name any blueprints.
User creates a new blueprint
User clicks more actions
User clicks blueprint settings
User names blueprint
User saves the changes
Enhanced user flow moves the naming step earlier to reduce the number of clicks to a desired outcome.
User creates a new blueprint
User names blueprint
User saves the change.
UX/UI Changes
In addition to improve the user flow, the UI was also updated - allowing users to better distinguish and scan through the available nodes through creating with more white space.
Node configurations were also modified. That said, this was an unforeseen design problem due to the limitation of the existing data table and blueprints' complex data structure.
To prepare for this particular challenge, I chose the node with the most complex data structure to study. Along with a full audit of the current data tables in the design system, I decided to design a better tabular experience and ensuring that users won't be too overwhelmed by all the input fields.
(Unfortunately, I was unable to save a copy of the audit due to being laid off)
Results
Despite the design efforts that were put into the project, my company had to go through company restructure due to the economic factors so I was not able to witness the outcomes of the implementation.
That said, I was told that internal stakeholders were stoked about seeing the changes especially the customer operation team as they are the ones who are primarily setting up the blueprints for each client instance.
Takeaways
I learned that a PM with technical and the proper business knowledge is very important. Fortunately, the PM for the project was previously on the customer operation team, so it made identifying the right data input from users an easier process especially when it comes to setting up the blueprint for clients.
While me and the design team always knew that data tables have been tricky to implement, the specific use case for blueprint was never considered. With the complex data input blueprints require, I had to go through a thinking/analytical exercise about how the existing data table is designed and implemented while ensuring its usability to our users.
