The source code for this blog is available on GitHub.

Rudzainy Rahman.

Building DXC Bionix Design System: A Retrospective

Cover Image for Building DXC Bionix Design System: A Retrospective
rudzainy
rudzainy
Posted underCase StudyDigital TechnologyUI/UX

Summary

Our team was tasked with designing UI and UX for DXC Bionix Commercialization effort. After gathering and studying stakeholders’ requirements, the team decided to develop a new design system using InVision Design System Manager (DSM) to align with efforts from other teams for building screens and prototypes quickly during later development and production phases.


Background

I was working in a 4 + 1 members team (we got one team member seconded from another team during later phases of the exercise) where the UX goal is to provide a unified user experience across all components of the DXC Bionix Commercialisation effort. Every team member participated in every step of the design system development process which includes (but not limited to) research, analyse, wire-framing, building and animating design components using Sketch and InVision Design System Manager (DSM).

An important requirement is a set of user experience must be documented and aligned as a standard. Each user interaction should be aligned to a user experience and the variations of user experiences should be limited.


DXC Bionix has a brand guidelines for marketing but does not include UI guidelines for applications.


The interaction (task) accomplished by the experience.


Related experiences which would branch from this experience.


The capabilities providing that experience.


The dependencies of the experience on the capability.

When capturing a user experience the following items was identified:

Goals

Develop a design system to utilise component based design – need to build fast and iterate quickly during development and production phase.

Non-Goals

To have a comprehensive list of components – the project just started, we will build more components as needed in the future.

Re-invent the wheel – embrace open source and build on top of existing industry knowledge and best practices.


Proposed Solution

InVision Design System Manager

Risks


Design conflicts with DXC Bionix brand guidelines as it does not include UI guidelines for building computer softwares.


InVision DSM was relatively new at the time, however it’s the most comprehensive compared to other solutions.

Highlighted Milestones


Having direct access to PM and other stakeholders – quickly come to an agreement on scope and deliverables.


Running mini Design Sprints and utilising tools such as Trello and Freehand to prioritise design and deliverables.


Early discussions with our engineering team resulted in synchronised component-based development between both teams.

Open Questions


How future-proof and maintainable is this solution?


Is it okay to use hacks when designing components?


Outcome

What we liked

Synchronous design system

it is easier and faster to produce screens using reusable components. having it integrated into the ui design process helps a lot.

We are able to add actual symbols and components we work with inside of Sketch directly to the Design System. There is no disconnect between the reference design and symbol we use to design. This is a so convenient and a huge timesaver! Prior to this, we were maintaining a paper document and uploading images with spec overlays. Every once in a while, updating a component required significant effort, sometimes leading to disconnects between the reference Design System and design symbols.

Easy to maintain and evolve

This really ties into the first point. The fact that every component update is just a click away really encourages a change in not just the way we work, but the way we think. We run a dual-track agile product design practice. Design is able to evolve existing experiences before the next round of development comes in. We are able to test out hypothesis and deploy learnings quicker.

Applying layer styles

Applying layer styles using DSM—by selecting desired element, then clicking the corresponding style in DSM is pretty handy compared to using the microscopic colour palette in Sketch.

Troubles we had

Local layer styling

Colours are not linked in the DSM library, it just applies appearance locally. If we need to make a global colour change, it becomes a laborious task. Same goes for text styles.

Importing

When pulling a symbol from DSM to Sketch, multiple colours are being imported, even colours that should not have any trace to the current DS. No idea where it is being used. This extends to all symbols, not just colours. We seem to have overrides left and right.

Text style organisation

Need a way to better organise text styles – maybe a way to have sub-levels for text styles. At least change the default “The quick brown fox…” text in DSM web to the text style name (like how it is in DSM Sketch plugin)

The case of the missing font files

Font files uploaded to DSM web keeps disappearing

Updating symbols

Downloading a component (symbol) from DSM, manipulating it to create a new component and then uploading the new component to DSM seems to take a long time.

Intermittent upload bug

It sometimes fails to upload and ends up pulling all manner of symbols into the sketch document, making the document really bloated and impacting performance.

Mismatched colours

Colours property of some elements — such as icons, in exported mockups (either with Craft or Sketch native) is mismatched. Need to detach symbols in order for it to correctly render on InVision.

Multiple nested levels for better organisation

Multiple nested levels would be welcome addition, but not a deal breaker.

Our workarounds

🥳 Sketch libraries, FTW!

We moved our workflow to sketch libraries, and use DSM as a reference point for developers.

We are currently using Google drive to host our library files. Sketch Cloud has syncing issues, needing to restart or re-add libraries almost every time there is an update.


Showcase

https://dxcraas.invisionapp.com/dsm/dxc-apa/dxc-bionix?version=5bcda38e152dd5001a44ed15

Design Principles

Informed and Evolving

UserHuman needs are in flux. Through informed design decisions backed up by research whenever possible, design should evolve to reflect how real people use the system.

Purposeful Elegance

Bionix should look and feel like a world-class experience. Every aesthetic design decision – from colour to visualisations should be elegantly designed with purpose.

Consistent Interactions

All design components should be part of a cohesive unit that fosters contextual, predictable experiences.

Simplified Complexity

Do the hard work to mask and reduce the complexity for the user. Empower the user through direct and effortless experiences.

Most collaborators can’t see space, a primary reason it’s so arbitrarily applied. But now we’ve got a system: a limited number of concepts, each offering a limited range of options.

– Nathan Curtis

TaggedBrandingUIUX


More Stories

Cover Image for Hoojah

Hoojah

Project Hoojah [link] Responsibilities Design & build Technology Stack HTML, SCSS, Ruby on Rails, ReactJS Year 2013-Present Note Hoojah is an online poll & debating site. It’s a pet project that I have been working on since 2013. People can go to the platform, create polls and vote for other polls. They can also engage...

rudzainy
rudzainy
Cover Image for The Master Plan to Get My Finances Under Control

The Master Plan to Get My Finances Under Control

How many of these situations can you relate to personally? After paying all my fixed monthly expenses (eg. rent, bills, loans), I would just have enough for me to get by until the next payday. When something unexpected came along that requires immediate cash payment (eg. flat car battery,  ad-hoc travel plans, getting sold into...

rudzainy
rudzainy