Appway Design System
A design system to build client onboarding screens
◎ How might we document best practices for building screens for client onboarding solutions, and offer reusable software components?
To reuse elements for solution projects, solution engineers of the Appway platform used to rely on a template. Since there was just one screen template available, many Customer solutions lacked orientation. In addition, recurring functional components were missing a semantic best practice example of how to be used. To promote best practices and offer a starting point for implementation, the design team created and maintained a design system package of templates, modules, and styles and their documentation.
The process started with analyzing customer solutions and identifying and then deriving the different screen types, and compounds, called "modules". We then defined solution patterns. I applied these patterns to the new demo solutions we were building (client onboarding) as a selling proposition. Once those solutions had been built, the templates and modules were abstracted into templates that could be configured and extended as needed. The parts were bundled as a package and offered for download. The usage was documented on a dedicated microsite.
The documentation was structured as follows:
- Patterns: conceptual solutions to recurring problems
- Screen types: templates for task-specific views
- Modules: compounds of screen components
- Screen components: atomic screen components
- Theming: styling capabilities
The design system helped solution engineers and business consultants in consulting and delivering customer projects. Within the company, it raised the awareness about design in general, by offering a tangible example.
I designed the parts together with the visual designer, devised the structure, wrote the content of the documentation after applying the concept to two showcase solutions that served as reference demos. I enjoyed curating and extending the system in a design ops fashion together with PM, UX engineer, and visual designers. ¶
- design.appway.com (documentation)
- Package download
- How to use the design system (video)