Johnson Controls
Professional Context
UI/UX Design
Introduction
Since FY16 Solution Navigator has been building capability for North America customers resulting in 85,000 Users and influencing $3.5B+in sales with expansions into global markets. Ending FY21, the Navigator Portal supports over $7.1B of Global Products revenue.
I've been working on Selection Navigator platform which is a major part of Solution Navigator. This project helps to pick and configure selectors in a very fast, accessible and easy way. It drives to evolve the platform into a UX which is user friendly, functional and visually appealing. It is mostly used by estimators (direct/ indirect) channel to create quotes and bid on projects for the different end users.
From March 2021 - present, I'm working as UX Designer with the JCI team mostly on this effort.
Design Tools
Miro Board, Sketch, Figma, Invision, Axure DevOps
01
Understanding the Context
Solution Navigator as a platform previously only served North America. However, in order to scale globally, consolidating each regions unique tool was a must. This runs across EODB (Ease of doing Business) train.
Selection Navigator platform was called Selection tools before from which estimators used to configure products and also bid on it. Somone realized that it is smart to build the two platforms together. This runs across SelNav train.
My role as a UX designer runs across both the trains but majorily my focus is on SelNav platform.
02
Understanding the problem
03
We mapped out the current way of how the configuration of selectors is done and also how estimators create a project and later bid on it. We found some pain points:
-
For configuring the selector, the users have to go through lots of unnecessary steps where the user might get lost
-
Massive load time for each page to show-up
-
Too cumbersome to navigate and often cost companies work
-
SelNav requires users to create a project in order to get pricing on equipment. This adds an unnecessary step in the replacement workflow. Since the replacement process is much less formal than that of new construction, there isn't a need to create a project for each quote request
-
Only one estimator can work on a project which slows down turnaround time on quotes
Current SelNav site map
.jpg)
04
Webflow, legacy tool site map
05
Insights from Site Maps
After mapping out how currently the user flow for Air Distribution Products is, how it is in the legacy tools like Web select, Edge, and also looking at the competitors like Greenheck, we came across some opportunities. We concluded as a team that the user should get the option of the project list and selectors upfront. Also, allow the users to create simple replacements quote requests without having to create a new project.
06
Exploring Ideas for Air Distribution User flow & Project List Dashboard
After mapping out all the info for the new userflow for the Air Side Terminal Products, we started producing low fidelity wireframes. Working through lot of iterations, we saw some patterns emerging out. It will start with the Solution Navigator homepage leading them to project list page where the estimators can toggle between Project List view and Selectors.
Selectors page will have a filter and different brand categories which leads them to the configuration process or helps them jump on to the Project List dashboard. Some of the data were constant throughout and therefore decided that it needs a container which can be collapsed. The userflow will have a tracker which helps estimators to know where they are in the process. This decreases cognitive load and helps make the process better. At the end of the process, it takes them back to the project list page where they'll be able to see the saved the project.
07
Mid-Fidelity Wireframes
In this stage, we started focussing on Information Architecture, User Interface Design, and technical aspects. With our ideation, we started to observe the efficiency of the user flow. We switched placeholder information with the real content to get a clear idea of what our real design would look like to the users and for the stakeholder's feedback as they can relate with real information more. Content areas were then polished until screens had clear direction and each area lead the user to the correct destination. We observed that the vertical space needs to be decreased to reduce scrolling and it needs to be designed according to the design system and development environment.
08
Note
09
The layout and elements of the ASC user flow are designed as per the salesforce lightning components so it was critical that we merged brand standards with it.
High-Fidelity Wireframes and prototype
After reaching approval from stakeholders, we started to design high-fidelity prototypes which would be further passed on to the development team in the coming months after a few further iterations. The iterations are done in an agile fashion. Please reach out to me if you're interested to see the interaction design between the high-fidelity screens.
Unit Design
Collapse On view
Collapse Off view
Fixed Nav Bar
Unit Design - Rating Results
Collapse On view
Fixed Nav Bar
Collapse Off view
Configure
Collapse On view
Collapse Off view
Fixed Nav Bar
10
High-Fidelity prototype - Project List Dashboard
This is still in the early stages of design. Currently, the work is going on the design of the toolbars. There are going to be multiple stakeholders feedback review in the up-coming PI planning.
Option A
Option B
