EVOLVE: DESIGN FRAMEWORK

Creative Direction | UI Team Lead | UX/UI Design | Agile

Enterprise software, originally designed by engineers with a suite of over 20 applications built and used company-wide, most of which were client facing, had a huge problem. The user experience was jarring, modules weren’t responsive, design assets varied from application to application and often times in the same application, in the same module. All being built by multiple agile teams from the US to Europe working in silos releasing new features monthly, with no official guidance, central location to grab design assets or central repository for developers to find existing code. There were hours wasted on both sides recreating designs and rewriting code for existing components. There was no standard that existed.

Evolve_Header-1.jpg
 

EVOLVE Design Framework was aptly named to encourage product owners, stakeholders, developers and designers to take part in a company wide overhaul for the enterprise software that’s being used internally, externally for engineers and business owners. It was important to have all teams plan for the implementation of the framework. In order for the framework to be successful and to improve on the current system, we needed everyone to get involved.

 

Team leads were brought together from UX/UI, Dev & QA to assemble a team that would collaborate, audit the current system, create standards, optimize, refactor code, reduce design /tech debt and tech bloat. This team was assigned to produce a live design system for both dev, designers and qa, with downloadable assets, live interactive code snippets, with documentation on guides and best practices.

Principles@2x.png
 
 

 We built the framework based in four core principles. User Experience is of the utmost importance, each team has a vision of what the customers need, but there wasn’t any consistency from one app to another. Once all teams had the framework implemented, we could then begin to evolve the system into a unified product .

 
01_style.png
 
02_Components.png
 
03_DataViz.png
 
 

 We conducted an audit of all CSS, design styles, icon sets, components, modules and charts used for data visualization within the platform. From there as a team we developed a consolidated, consistent, compliant library of assets, using industry standards, wrote documentation for best practices, dev notes of all styles, responsive components and modules. Pages for the site were designed in XD, which became the standard prototyping application for the UX & UI teams. This Framework went live helping to speed up workflows on all teams. For transparency, release notes go out to communicate whenever updates are made and versioned. This allowed for engineers from other subsidiaries to rapidly build apps and new features, which could later be submitted to the Framework Team to be included in a future release.

 
Framework.PNG
Next
Next

AR Tech Training