All works
SmarTone’s design system
SmarTone’s design system
Building a design system for scalability
November 2018 - March 2019 | Design system | Process optimization
Background of the project
My team, Digital and e-Commerce Division, has been working with multiple internal and external parties in handling different web and app projects. There is a need for a design system so that:
- Design consistency could be maintained across all websites under SmarTone
- Time could be saved in the design process by enabling quick duplication of design components
- Time could be saved in the development process by allowing code replication
- Miscommunication during handoffs could be reduced especially when working with external agencies
Seeing these needs, I was assigned to lead the initiative to build a design system for SmarTone’s website.
About SmarTone
Who did I work for?
SmarTone is a leading telecommunications company in Hong Kong. SmarTone offers mobile tariff plans, home broadband, landlines and other related services. I was hired as Senior UX designer by SmarTone from 2018 to 2020, focusing on improving the conversion rates of SmarTone’s online store as well as online service subscription.
My role in this project
Project lead
I was the project lead assigned to plan and execute the project. I was responsible for research, drafting the design guidelines, collecting feedbacks from designers and developers and overseeing the development and adoption of the design system.
How did I approch?
I started by studying how other companies made their design systems.
What design systems had been studied?
A total of 8 design systems were studied.
bulb’s Solar Design System
bulb's Solar Design System is one of the most comparable design systems for SmarTone in terms of size and application. I particularly appreaciated that it attached their research tips and findings on their design guidelines and components.
Atlassian Design System
Atlassian Design System is a very resourceful design system that covers guideline for content creation such as voices for the copy and marketing guideline. I wished we could have someone like this.
IBM’s Carbon Design (online store)
IBM's Carbon Design was constantly referred in my design process as it featured a tab to help users to understand how a component could be used in different scenarios.
I made a list of items to be covered in the design system,
and recorded their applications throughout the whole SmarTone’s website.
Patterns which were likely to be reused remained on the list for evaluation.
Some patterns took different forms on different pages.
The above two date pickers were used in different subscription flows. The lack of a design system had made designs appear differently on the same website.
To understand why the designs looked as they were, I tracked down the design ownership and talked to the designers.
What if the design rationale could not be traced?
The rationale of some designs could not be traced especially in the occasions that the design owners did not work in SmarTone anymore. In those occasions, I would instead refer to studies by Barmard Institute to evaluate their benefits in helping users to complete the use cases.
Modification or elimination might be applied if the design pattern deviated from the goals of task completion.
Duplicated design patterns were eliminated unless they served a different purpose or occasion.
When would design patterns not be eliminated?
For different purposes
Example: Expanders
This expander was designed for expanding details for a service.
This expander was for a table so users could expand to compare different products or services.
The latter required a full width layout so that the content could be kept for comparison.
For different occasions
Example: Date pickers
Date picker with a calendar.
Date picker with a tab selector.
Both date pickers served for the same purpose - selecting a date. However, their use of contexts were different. The first one offered a wider range of dates while the latter one offered just 4 dates. By adopting the tab selector, users would be less confused about the availability of dates.
After 3 months of going through these processes, the design system was finally out.
Which tools did I use?
Photo credit: Invision
SmarTone’s design system was planned to be built by our internal development team after the mock up had been finished with Sketch. However, we later switched to Invision’s Design System Manger as it was easy to learn and use with Sketch. And most importantly, it required much less development effort.
Early design of SmarTone’s design system made with Sketch
The outcome
SmarTone’s design system was launched for design team’s use in March 2019.
It covered...
Colours.
Typography.
Including how the scaling would affect the typography and ...
where the different font styles should be used.
Icons.
Which gave a clear guideline to visual designers on how to make them look consistent and clear.
Components.
With the design rationale and contexts explained if available.
What’s next?
After active promotion by a coaching session, all UX and UI designers in my team had their Sketch App linked to SmarTone’s Design Library. To keep the design library up-to-date, constant review sessions should be set up to review the guidelines.
In 2020, the design library started being shared to external agencies so that they could refer to when designing for SmarTone.
An important next step for the design library is that the development team could start importing the built codes so that the development team could simply reuse the components for fast development.
What could have been done better?
More collaboration.
Due to the tight work schedule, not much time had been allocated for discussion or collaboration when some of the design patterns were found undesirable. So a lot of the decisions made to change the design were solely made by me and my manager based on the research findings and past documentation. More colloboration should have been encouraged to increase the team’s engagement with the design system.
Due to the tight work schedule, not much time had been allocated for discussion or collaboration when some of the design patterns were found undesirable. So a lot of the decisions made to change the design were solely made by me and my manager based on the research findings and past documentation. More colloboration should have been encouraged to increase the team’s engagement with the design system.
Remark
SmarTone’s design system was not open for public. If you are interested in knowing about it, feel free to contact me for a walkthrough.
