IntellPro Redesign
When I was first hired at Unhedged (later IntellPro) I was tasked with the design/layout of all pages, components, and views on the site. As a start-up, the CEO provided the requirements for the various features we wanted to release, then I would sit down with the engineering team to design the layout, flow, and overall design. This worked well while our team used a waterfall method of development. As features and ideas came to fruition, we would design and develop simultaneously, then have our testers make sure the feature worked as intended. Once it worked, we would release to production and allow end users to test for us.
While in Beta, this is ok, and we made sure to let users know that the product was rapidly being developed, however, as our team size grew, we needed to adjust methodologies so that more processes, procedures, and testing was being done before release. In addition, our custom component library became difficult to manage, with many of the components depricated or broken. To help combat this issue, we decided to utilize the TailwindCSS class based design framework. This would hopefully help speed up production time, maintain consistency across components, and make component management much easier.
Below are a few examples of how the redesign looked between our inline styled components vs TailwindCSS custom components. Inline styled on top, TailwindCSS bottom.
Company Overview Component
Calendar Component
Note Component
User Profile Component
Conclusion
The result exceeded our expections, we were able to create an entire component library that we utilized on the project, which can be found here.