Proving that digital development doesn’t have to be linear. Through collaborative, one team working Gravity 9 have simultaneously developed a Design System and the applications that draw from it accelerating the realisation of their client’s digital ambitions.
Talk of digital transformation is everywhere, and now more than ever organisations are progressing their digital dreams. However, when organisations hire large digital teams or bring in agencies, throwing millions of pounds, dollars, (insert relevant currency here) at the problem, the process can be moderate and the solution not always effective. At Gravity 9 our team of expert developers and system architects, are quietly creating intelligent, beautiful digital systems, much like those developed by Facebook, but in a fraction of the time.
So how simple is it to rapidly productionise beautiful neoteric customer-centric systems?
Taking a current example project, this Gravity 9 client had a desire to become a disruptor within their market place. They wanted to move beyond a basic website offering or simple app in a way that fit their existing capabilities but enable easy future development. While envisioning the User Experience (UX) and User Interface (UI) would ordinarily be completed by an agency before handing over to the development team, Gravity 9 work differently. One single team of creative customer experience designers and highly skilled developers work together, from conception, to realise the project and Design System in unison. There is no handover, the procedure is seamless and evolved, bringing consistency and rigidity, not only to the process, but to the solution itself.
Ideation Process
Understanding. This is the first step on the journey, a true understanding of the stakeholders and the end users’ needs, wants and evolutionary requirements is crucial. The current user experience is broken down, the aspirations and goals of the stakeholders exposed to ultimately define the problem and begin the ideation process.
Michal Skowronek, Senior Front-End Consultant and Andy Newman, Experience Director guided the client along the journey path, testing the rationale, detailing user flows to develop, a comprehensive, library of components that can be assembled together to create multiple applications.
The creation of a Design System brings with it many technical challenges. One of which was the need to create a library of components while simultaneously building an application utilising these very components. Using InVision DSM and Storybook to craft a single source of truth, for design and programming, Michal and Andy enabled a rapid, efficient workflow with both front end development and experience design teams working as one with the client. The result is the creation of a sophisticated Design System from which vehicles such as the website, mobile app and future capabilities will draw from.
The Build Principles
Accessibility within the solution for the web product teams, regardless of whether they were creating static web pages or complex front-end applications was a key requirement for the client. As such, Michal created a solution that could be used, not only within the technological stack focused on the React framework but also in pure HTML and other frameworks.
At the core of the Design System is a low-level CSS Framework, a set of automatically generated utility-centric classes, providing building blocks for any static web project inside the organisation. The solution is built in three layers. The bottom layer comprising the design tokens stored as SCSS and CSS variables; these are then overlaid with the centrally held detailed UI and store design information such as colours, fonts and spaces. This data is directly translated as rules and principles which draw from the UI design tool. The final, top layer consists of the presentational UI components within the CSS framework which control the look and feel. This framework then uses React to implement complex logic and provide a rich experience.
This logical division allowed Michal to approach the challenges in a flexible and creative way. The layers are adaptable enough to meet the varying need of the different development teams, while the Utility-first CSS framework enables components to be built directly within the client application and then subsequently incorporated into the system design allowing even greater flexibility than with Tailwind.
A Functional, Evolutionary Solution
The building of this foundation eliminates duplicate code and provides transparency. The resulting library forms a base of reusable components that ensure consistency and accessibility while the use of micro frontend architecture enables future development of the self-contained applications utilising the pre-built components within the Design System.
A continuous communication loop between the client, UX design and development meant the approach was defined and efficient. The result is a suite of components, accessible to both designers and developers which they can extract and weave into beautiful, highly functional solutions.
Through skilled curation of these components Michal is accelerating the creation of new applications for the client, cultivating their business vision and customer experience at pace.
“We have delivered brought structure and alignment to all their current and future digital development which can now move forward rapidly at scale. The system has been designed for the client’s in-house team and based around how they want to use it.” says Skowronek.
Talk to Gravity 9 to learn more about how to accelerate your organsiations digital journey gravity9.co