User Teams Frontend Styling
At PipelineDeals the product development process goes like this:
Product team scopes and writes the requirements for a new feature and the product designers then take those requirements and turn them into designs.
Once all design deliverables are finished the engineering team takes over and builds out all the functionality of the feature. The UI is left in varying degrees of a basic HTML format. When they have finished building out the backend and all functionality is complete they hand it back to the product designers.
At this point the product designer who designed the project comes in to apply all styling for the frontend. They are responsible for creating a production-ready UI.
User Teams
The User Teams project was a complete overhaul of our visibility settings. Previously, visibility settings were handled at an account-wide level. This update would allow accounts to set visibility based on teams. As part of this new team structure, I designed a new tab for our users page called the ‘Org Chart’. This tab would allow admins to easily create, view and organize their team structure within PipelineDeals.
This was a challenging project to design and even more challenging to code on the frontend. The first few images show the multiple iterations the org chart went through before getting to the product we have in production today. From the org chart admins are able to expand/collapse sections of the org tree, view and edit entire teams and view and edit individual users.
Next was the process of creating a new team. A new team involves 3 main steps: 1) Team name and hierarchy on the org chart 2) Users on the team and 3) Visibility settings. I decided that this should be broken down into steps. This made the process easier to digest for the user. Since a team name is the only required piece I also wanted the user to be able to complete that step and be able to jump to the final ‘Team’ page without having to go through all of the other steps. That is why there is a ‘Create team and view team summary’ link at the bottom of each step. The visibility settings are one of the most difficult to understand pieces of our application and for this reason it was very important make that process very clear to the user. I iterated upon those designs many times before deciding upon what is in production today.
This was a very challenging and rewarding feature to work on and I am very pleased with how the designs make it easy to digest team structure and visibility settings across an account.
