Uplifting Telstra's Design System
Project overview
During my time at Telstra, one of my main streams of work was auditing and uplifting the Telstra.com design system. The main reason for uplifting the design system was to ensure that Telstra.com was accessible (AA) and that the pages and journeys were consistent with one another, ensuring a coherent user experience.
Role
As a UX/UI designer in the Renovators team, I was responsible for uplifting our Lego components to enhance usability and accessibility. I created, maintained, and socialised the Design System Sketch file and I also worked with another designer on the Telstra.com Digital Playbook.
Brief
Uplift all Lego components used across Telstra.com to align with accessibility guidelines and enhance the user experience. The components should not only serve our customers better but also the designers working on Telstra.com.
Project summary
Initially, I performed some discovery work to assess which components were of the highest priority to uplift. I then assessed each component for accessibility and usability flaws and consulted with designers to understand what they needed from the components.
Once components had gone through design and accessibility critique sessions, they were finalised and published in the Design System along with documentation around usage rules.
The previous design system
I conducted a heuristic analysis which helped me to decide on where to focus my attention first.
3 main takeaways from the heuristic analysis:
No clear hierarchy between components meaning pages didn't look and feel coherent.
No clear typography scale which hindered page structure.
Components that were meant to stand out lost their impact due to them having no clear differentiating features.
Based on this analysis I initially focused on the Page Header, Promo Box, and Content Box components. These components were the most heavily used across Telstra.com and tackling them first informed the designs of components lower in the hierarchy.
This is an example of an old page where the hierarchy of information could be improved.
There were many typefaces and image sizes which meant that components weren't aligning as they should.
Establishing new rules
We set out clear guidelines and rules to help designers choose the components that would work best with the context of their pages.
I created and maintained a Design system sketch file that housed all of the variations of a component as well as guidelines and usage rules relating to each component. This library was also available as a plugin making it really easy for designers to pull from.
All of the usage rules were also available in our Digital Playbook. This was really beneficial as all Telstra employees had access to the playbook so any team member could refer to it and understand the design rationale behind all decisions made.
The growing list of components on Telstra.com!
It's also worth noting that before components were put into the Design System and Digital Playbook they went through various rounds of design and accessibility feedback sessions.
UXing the Design System
Because this Design System Sketch file would be used by all designers working on Telstra.com, it was important that any designer could jump into the file and understand how to use it. I made use of instructional pages, emojis, naming conventions and particularly Smart Layout to help ensure designers could easily use and benefit from the Design System.
These welcome boards were aimed to help onboard new starters and inform designers how to use smart Layout effectively.
I provided clear guidelines around how to use Smart Layout and also shared some little hacks that I learned along the way.
I used Smart Layout to set up the components in Sketch which took into consideration all spacing rules and all potential scenarios. This was extremely beneficial for designers as they could simply drag and drop the component they wanted into their sketch file, remove any elements they didn’t need, add their necessary content and they would have a pixel-perfect component. It also helped designers to use the components as intended, ensuring consistency across the site.
Outcome
I thoroughly enjoyed this project and I really pushed my UI skills, learned a lot about accessibility as well as documentation and communicating designs at an enterprise level.
The Designer's feedback was extremely positive. They explained that the Design System saves them so much time and helps them to focus on their pages as a whole, where their attention needs to be.
This stream of work fed into another stream of work I was involved in which was the redesign of the Telstra.com Home Page. This redesign made use of all of the uplifted components and earned our team a company design award. I was extremely proud to be part of this project and seeing my designs on the Telstra homepage.
