Project Overview
For the past year, I have been a part of Boston Harbor Consulting’s ongoing 3-phase project with Honeywell Building Solutions to redesign their CPQ process and system. We have successfully deployed global releases for two phases and are designing the solution for the third phase.
As the primary UI Designer on the project, I am tasked with visualizing business requirements from the client by transforming them into high-fidelity prototypes capable of demonstrating the system’s functionality and capability. My prototype serves not only as a tool for BHC’s business analysts to write/groom user stories and developers to model their code but also for management to propose potential solutions to the client.
As the primary UI Designer on the project, I am tasked with visualizing business requirements from the client by transforming them into high-fidelity prototypes capable of demonstrating the system’s functionality and capability. My prototype serves not only as a tool for BHC’s business analysts to write/groom user stories and developers to model their code but also for management to propose potential solutions to the client.
My Role
I work closely with the Solution Architect to design solutions that not only fulfill the client’s requests but are capable of being built within the limitations of CPQ. My prototypes showcase the full extent of Figma’s capabilities with advanced prototyping features, nested component properties, variants, and instances, dynamic full-page auto-layouts, navigational dropdowns, color & test styles, variables, and more.
With prototypes as bulky as this, file health is very important to ensure that workflow is not affected day to day when receiving new tasks or when designing on a call with other people. I make sure to keep naming conventions and layering patterns the same throughout to maximize the efficiency and readability of layers.
Design System
Building from the ground up using the atomic design methodology, I have created a comprehensive design system for the project. With a system in place, I can easily edit, swap, and build upon existing elements quickly and efficiently. Overhaul changes affecting every screen can be made in minutes rather than hours.
Advanced Components
Serving a myriad of purposes, taking the time to build out a well-developed component library is essential for running a smooth prototype. With well-made components, a prototype can have smoothly animated interactions, easily editable elements, and variable-ready interactions.
Style Guide
With an established style guide in place, utilizing the power of variables to create a highly dynamic prototype capable of switching between light and dark mode helps our team fully realize the capabilities of the system. Additionally, the early design portion of a phase can yield ambitious new concepts built within the confines of the design system, allowing for efficient discussions to determine whether a solution is feasible or not.
Light Mode
Dark Mode
Takeaways
Working as the preliminary UI Designer on a large-scale project has been an informative experience for my career. I have learned that not only do I deeply enjoy the process and practice of UX/UI, but I excel at it as well. By continuing to develop my skills and knowledge, I hope to become the best designer I can be and offer my service to a company I support.
Try out the prototype for yourself or download the project file.
https://www.figma.com/proto/5ugGafplCPALxr8BZh5MoG/%5BHBS---PHASE-3%5D-CPQ-by-BHC?page-id=0%3A1&type=design&node-id=9459-67125&viewport=6211%2C4737%2C0.5&t=qkNFrQaK6weBke4B-1&scaling=min-zoom&starting-point-node-id=9459%3A67125&show-proto-sidebar=1&mode=design
Try out the prototype for yourself or download the project file.
https://www.figma.com/proto/5ugGafplCPALxr8BZh5MoG/%5BHBS---PHASE-3%5D-CPQ-by-BHC?page-id=0%3A1&type=design&node-id=9459-67125&viewport=6211%2C4737%2C0.5&t=qkNFrQaK6weBke4B-1&scaling=min-zoom&starting-point-node-id=9459%3A67125&show-proto-sidebar=1&mode=design
Bonus
Unrelated to my work with Honeywell, I spearheaded redesigning Boston Harbor Consulting's outdated sailboat logo created by the founder in 2009. With Adobe Illustrator and proportionate ellipticals using the golden ratio, I created an abstract representation of a set of sails filled by a gust of wind to represent the stalwart qualities of the company. Building upon the original, literal logo, the new icon features a sense of direction and speed akin to the company's relentless pursuit of perfection. The logo appears on all the company's social pages and presentation material to create a modernized, recognizable brand.
