Managing a team to build a new design system for a huge tech-led website refresh.
As a Senior Design Consultant, I joined 50+ multidisciplinary team members on a huge tech-led website refresh for Vodafone, one of the top 3 telecommunications providers in Australia.
Problem
The Vodafone team asked us to take the current state components and uplift them with the new branding from Vodafone UK's design system, using InVision’s Design System Brand Manager.
Responsibilities
I was responsible for overseeing and building out Vodafone Australia’s new design system. I ensured that new or revised components were added in every sprint, while also delivering new features.
As our design manager worked part-time, I managed a team of three designers for 2 days per week. This involved:
- Leading scope planning
- Delegating workload and reviewing designs
- Mentoring our graduate designer
- Facilitating weekly showcases of in-flight designs
- Leading regular QA reviews
- Acting as the main point of contact for design with Business Analysts, Front-End Developers, the Adobe Experience Manager (AEM) team, Vlocity team and key Vodafone stakeholders
Challenges
Some of the UK components had limited functionality or a less ideal interface compared to what we needed to achieve. Where appropriate, we broke these to create unique AU components.
We came prepared with best practice research when presenting these new solutions in stakeholder design reviews.
Areas of the website where I made a significant design contribution were:
- Device listing page
- Cart flow
- Checkout flow
The device listing cards are a prime example of improving upon the original UK component. A product listing page can be overwhelming, so I designed an information hierarchy where the most important details can be scanned at a glance in the right order.
I curated a set of icons to easily distinguish between four “gift” categories. Special offer cards were designed to stand out in the list with a bold pop of colour and a flipped layout.
The cart and checkout flows incorporated many components, including several variations of forms. The checkout flow was particularly complex with several steps: Delivery, ID & Credit Check and Review & Order. Different checkout flows were designed to accommodate different use cases, such as purchasing NBN with or without a modem, or post-paid vs pre-paid products.
The project was run using an Agile Waterfall methodology, and paired with an intense pace of delivery, it made it difficult to collaborate effectively with each of the teams. We frequently pushed for better collaboration and to get involved in user testing and design jams wherever possible.
Technical constraints were our biggest roadblock. Vlocity presented many restrictions, even for some of the simplest interactions. Ongoing communication with the Vlocity, AEM and Front-End teams was critical to ensure we understood the options available to us and where we could push these limitations.
Key learnings
- I genuinely enjoyed managing my design team, especially our graduate designer. Witnessing their gradual improvement and growing confidence over the course of the project was really fulfilling.
- I learnt how to think outside of the box and push boundaries within a seemingly rigid and prescriptive framework.
- It was a fantastic opportunity to work with a variety of disciplines, personalities and client stakeholders. Ongoing communication and relationship building was key to enjoying the journey and delivering a successful outcome as a team.
Result
I supported the delivery teams in the coordination and presentation of the first Executive Showcase by explaining the purchase journey from the perspective of a new customer. This was a critical milestone for the project in securing approval for further phases of work.
Deliverables included:
- 60+ components
- 20+ templates
- 20+ user journeys
We also handed over extensive design system documentation with key design decisions, UI specs, global and usage rules, motion and image guidelines, and more.