Role: As a Product Designer, I have contributed to starting up this project within a cross-functional team of software engineers and developers. My role was leading the design migration, design and produce the UI components
and help the engineers to uplift the developer’s skills and way of working.
This project became the ‘design operational model’ for the BT Loop design system.
Problem Statement & Definition
As a team of designers and engineers, we would provide consistent and user-friendly platforms to the Agents in the BT Group contact centre that enable them to resolve customers issues in a much as the quickest and easiest way.
Main Issues at High Level
• consume.com as the whole product is not consistent, it means to complete an end to end task takes longer than it should be this effect designers, engineers and advisors.
• The Framework is out of date (Angular JS)
• Solution Design and Software Developers do have a shared understanding of the problems - but the product design team has up until now tried to abstract itself from the technical knowledge
• There is not strong communication between designers and advisors/users
Hypothesis, Opportunities & Solutions
• An updated framework (Angular) + sharing tools (Figma, Storybook, Confluence)
• A design system / a service system
• Build a components / Modules library based on a common Grid and agreed breakpoint according to the advisors’ equipments
• Set a design methodology / Design thinking process enable to research, de- sign the products with the users, (co-design session, workshop...)test, iterate.
• Within Order.com we changed the way we work, instead of working independently, as designers and engineers we decided to join the force and enjoy the issue, address them and challenge the business when is necessary.
The Atomic Design System
A design system is a collection of reusable components guided by clear standards that can be assembled to build any numbers of applications. Atomic design is a methodology for creating design systems. In Atomic Design Systems, there are five distinct levels: Atoms, Molecules, Organisms, Templates and Pages.
Benefits to have a design system
• Building consistent products based on the core values and principles.
• Speed the work, increase velocity and time of production/delivery. Leave more time for researching and ideation and make optimisation more efficient. There- fore, allow ‘us’ to focus more on solving a real problem.
• Increase the collaboration across all teams and the rest of the business to build a holistic journey. Easily share knowledge and up skills ourself.
• Test and developing the work faster enable us to pair with users and iterating the product ‘on the go’ and reduce the amount of task in the backlog.
Benefits to adopt Atomic design system
• Based on the concept and the practice of Reusable components
• it will be easier to migrate to new technologies framework or rebrand entire platforms
• When new developers come to the project, they will be able to look at the code and track how it works and which way is the easiest.
This, will shorten the learning curve of entering into a new project
• Increase in quality and efficiency, by reducing code and back-end complexity enables to track the issues much quicker
•Optimised skill distribution by allowing teams to focus more on the overall user experience or the creation of new products versus production
The Approach / The Migration Planning
Start from testing a small piece first, and then expand and go broader.
Define Framework and inventory tools
At this stage, we had different conversations about how to approach it. We started to focus on team members’ capabilities and make sure all parties share a common ground.
Then we set tools inventory according to also to business request and decisions:
• Framework: Angular
•Design tools: Figma
•Developers tools: Story Book
•Documentation platform: Confluence
•External Presentation: Powerpoint
Finally, we share how these tools work all across the team to make everyone aware and able to contribute inward actively.
The high level plan migration into Angular
1. Order list
2. Cancel & Replace... and other 3. order.com
4.Consumer.com
Test of Atomic Design System on Order list page
Using the Order list page of order.com define, test and validate the Atomic De- sign System before to move to entire products then all consumer.com
Consumer.com Orders pageThe Workshop
I have facilitated a workshop where Product designers and engineers spend two days workshop in the London office and define agreement on the Design System.
Output
Clarity and definition on:
• Framework: Understanding restrictions and capabilities from both sides • Define the actions plan by setting clear project milestones
• Common agreement on working process and tools involved
How
1st day:
Components inventory
•Divided the entire page components by Atoms Molecules, Organism, Tem- plates, Pages
•Naming convention
•Story book / Figma file structure
2nd day:
The grid
We spent an entire day to analysing the devices and equipments used by the advisors and set the grid and the breakpoints accordingly.
The Outcome
Products designers and engineers spend a weeks testing the grid and Figma collaboration function considering consumer.com as container of wide range of data
The Grid
The 12 grid columns is set, test and approved by all parties ready to share with the rest of the product designers in consumer.com
The Library Components
The responsive components for order list page test and approved by all parties. They are build in Angular ready to go live soon. The Atomic components are stored in storybook and ready to re-use The library components will be uplift as we go with more components. In order to align
The demo April 2020
For two months developers uplift their skills on how to develop in Angular8 and how test and demo
• New Framework on consumer.com
In order to test and validate the new framework from a technical perspective developers create the switch to view the application in Angular8+. Developers are able now to see developed page In Angular8+ on the browser.
• The order list page
Developers develops the first page based on re-usable components in Angular8+ according to the product design specification designed and shared with Figma. It is also a responsive design based on breakpoints defined during the workshop.
The Storybook
The components are stored in storybook a tools that enable developers to re-use module. It helps to keep the design consistency and reduce cost and time of development
The components in Storybook
The components are stored in storybook a tools that enable developers to re-use them
• How we see components in storybook
• Storybook and Figma
Storybooks reflect Figma file, they both share the same structure, file organisation and naming convention for each components
