Create a Design system for 2imagine Brand Portal & online editor in Adobe XD
2imagine cloud solution for collaborating on Adobe InDesign documents using a standard browser. The current version was released in 2018.
The initial UI design was developed in Sketch. With the COVID lockdown, the full development process needed to be reviewed and adapted. Online co-creation and collaboration are key requirements.
UX research among clients led to several insights. The UI needed to be modified.
Also, the ideal time to develop a new design system. 2imagine is an Adobe Solution Partner and choosing for Adobe XD seems logic.
Due to the constant development cycle, following agile scrum, the UI and UX had become complex. The onboarding of new customers was, therefore, more difficult and resource-consuming.
PROCESS
The initial version of the 2imagine application was developed in Sketch. Developers could download the components via the application Sympli.io
UX research between a selection of (key) customers was scheduled. Online (recorded) sessions of users, with Teams, provided some valuable insights.
I developed some prototypes (high fidelity). These were tested and resulted in a new modified UI.
At the same time, a new design system was developed. 2imagine has a constant development and release cycle. This results in a large solution with a large number of screens and configuration possibilities. Time to review each screen and user interaction.
The new 2imagine Design System is in Adobe XD. The additional advantage is Adobe XD reduces the need for multiple solutions when reviewing and handing off the final UI design.
“The primary benefit of the design system is the ability to create interfaces quickly by utilizing UI components and elements. Teams can continue to use the same elements over and over, reducing development time and risking unintended inconsistency.”
OUTCOME
- new UI interface design for the key modules
- new design system in Adobe XD
The following parts are developed in the design system are:
- a UI Kit / pattern library
- the brand guidelines and principles
- guidance for the components
