Telco – development of a code frameworkBuilding a framework to streamline multinational market sites for a global telco
Continuing our successful partnership, we teamed up once again with this world-leading telecommunications giant to collaborate on, design and build a new international web framework.
We created a comprehensive style guide and set of common standards and patterns supported by front end assets that would be integrated and used across the telco’s 23 operating countries.
How we did it
The objective was to work as part of a wider UX and visual design team to build a single, translatable and fully functioning framework that could be easily understood and adopted by markets reaching every corner of the world.
This meant taking the concepts and elements we had created in an earlier incarnation and reimagining them completely – a sea change rather than a next stage. We were also charged with incorporating the telco’s latest design and brand thinking so its markets could build on and develop new modules that would drive brand consistency internationally.
In particular we wanted to create comprehensive documentation that included our front end technical approach and coding standards, guidance on where changes can and should be made (and where they shouldn’t!), and our approach to accessibility, performance and SEO. All of this alongside a working prototype that accurately demoed key user journeys with APIs to provide real data and a real user experience.
Without doubt the biggest challenge we faced in rolling out the framework was the global aspect, not only of the product we were building but also the approach needed to make it effective. For this single framework to function effectively and on brand, every standard we adopted and technical decision we made needed to make sense in (and to) all 23 international markets.
Collaboratively, we then had to make sure each market understood how it worked and was equipped to engage with the full scope of what we were building so they could transition to the new framework smoothly.
What we did
We broke the project into two main themes – the first providing feature development to align with the telco Group design, the second collaborating with the markets to provide these features using a technical stack that every market could access and use irrespective of their back end. We worked very closely through fortnightly calls with the markets to form the technical stack and agree the right approaches.
Having already created an earlier version of the framework, we started by looking at opportunities to enhance certain key aspects of it. This included everything from enabling each market to independently customise and extend key modules local to their websites and allow them to contribute back bug fixes iteratively, to providing a much wider range of support documentation.
Assessment complete, we set about building the framework proper and creating a living breathing prototype. In the previous version of the framework we’d provided a component library of super templates so the markets could extract and use what they needed, but by providing an interactive prototype we could dramatically enhance their experience with real user journeys they could see and test.
Using agile methodologies we constantly assessed the project direction throughout its two-year lifecycle, which was vital so our development team could amend and adapt our approaches as we better understood what the markets wanted. As we were part of a wider team, their UX and design was always growing and being iterated on, so it was really important for us to keep this agile mentality.
We continued to support this development through fortnightly community workshops with the markets – a great opportunity for them to raise any issues or areas they wanted us to delve deeper into. Where needed, we also conducted one-to-one workshops to better onboard markets, gather feedback and describe new features.
Features concerning not only the framework but that would also assist with market adoption. Examples include our developer toolset that enables markets to pick out core components from the prototype inclusive of the build tools they need to compile their output into static assets. Or our localisation workflow that minimises the number of conflicts they encounter when creating market specific content and moving through the various releases available.
We’ve also taken this deep collaboration to the next logical step. On a recent two-day onsite workshop with the Hungarian market, we spent one day taking the team through technical details and functions and the second day in a hands-on workshop getting them set up, delving into the code and building modules.
What we delivered
- A living, breathing prototype that does much more than demo static specifications, wireframes and visual design
- A backend-agnostic framework that works with any stack, anywhere
- Editable components and structured group modules with guidance on where changes can, should and shouldn’t be made
- Our accessibility, SEO and performance approaches and documentation
- One to one overviews with 12 markets
- Community calls with 21 of 23 markets
- On site two-day workshops with two markets
The big wins
- Direct collaboration – with markets to consider the technical approaches and standards that they can all use
- Transparency – gives markets access to all source code and assets so they can see and resolve conflicts and enhance modules independently
- Market tooling – the static component extractor and ability to localise every market is a great asset for getting them set up and running
- Market conversion – some key markets who were previously against using code from the telco’s Group division have made a u-turn and are now 100% onboard. A testament to the code quality and support