Kiewit Design System
Adoption-focused project management with time and technology constraints
UI/UX Consulting within an Enterprise
Every UI/UX Consulting engagement takes shape in unique ways. This particular engagement allowed Heath an opportunity to apply his extensive experience in project management.
Clarifying project constraints and success criteria was the first order of business. Heath worked closely with the enterprise to bring these areas into focus. Existing processes and tool sets were audited. Project stakeholders required clear role definition and workflows. Heath acted as a bridge between those developing the design system and those in management positions to ensure schedules and work were clearly understood and followed.
Design system adoption was the target from the beginning. This meant enterprise education was a priority. Numerous weekly meeting were held where the merits of the design system and its approach could be evangelized to software development product team leaders. Software developers were frequently consulted, as their involvement would be key for the long-term success of the initiative.
Sprint Planning
Every sprint was broken down into four phases. Tasks were delegated to UI/UX team members as well as software developers. Clear sprint workflows were created and refined as graphics team members could reference if they were uncertain about what was expected from them.
Design System Currency
To evangelize the value of the design system Heath created a practical set of terms and visuals that related how the design system would act like currency. The enterprise was familiar with technical debt, however the concepts of design and knowledge debt were uncommon. The value proposition of the design system to the enterprise would become more clear by framing it as a practical means to pay off design, technical, and knowledge debt.
Introducing Atomic Design
A new UI/UX team manager was recruited mid-stream through the project. He often referred to Atomic Design by Brad Frost. This turned out to be an excellent way to easily relate the complexity of the design system initiative. Visuals were created and added to the project knowledge base. Atomic design became an easy way to refer to the stage of development the design initiative project was presently at.
Product Management with Azure DevOps
Widespread adoption of a Design System would require the UI/UX team work within the enterprise's existing software development life cycle and product management toolchain. Azure DevOps was adopted as the standard way the UI/UX team would manage their work.
Ant Design System as the Foundation
A variety of constraints lead the enterprise to select Ant Design as the starting place for their design system. Ant Design had a robust React library available with excellent documentation. A complete Ant Design Figma library was available to license. Ant Design also followed a variety of well-understood conventions that would be simpler for the enterprise product teams to adopt.
Atomic Design System in Figma
Many design tools were carefully reviewed in depth before the enterprise settled on Figma. The determining factors included:
Excellent remote collaboration tools
Powerful design features
Complete work-flow options
Pricing & Licensing
Centralized Documentation in ZeroHeight
Keeping documentation up-to-date and accessible would be vital for the ultimate success of the design system initiative. ZeroHeight was selected for both its robust organization tools and its clean integration with Figma and StoryBook, allowing for seamless documentation updates.
Code Documentation in StoryBook
Software development teams required top-notch code documentation and examples. StoryBook offered an excellent set of tools for both formatting code and providing realtime renderings of user interface components. Support for knobs also would allow developers to dial in interface aesthetics and functionality depending on their product requirements.
Prototyping with Axure
User Experience research was a major part of the Software Development Life Cycle. Axure was leveraged throughout the enterprise to capture interactive user feedback and to validate and refine concepts. A 1:1:1 workflow was setup to map prototype components in Axure with Figma and React.
Coded Components & Layouts in React
User interface performance was a high priority for the enterprise. Modern coding conventions were being proactively implemented across product teams. A technical team was organized to review coded design system components. A clear approval process was established to ensure the enterprise coding and security standards were upheld.
Iconography with Font Awesome
The wide spectrum of both internally and externally facing applications required a comprehensive set of icons to support all the available software features. Font Awesome was licensed as their extensive and very high-quality icon library was most inline with the enterprise needs.