ONLINE SERVICES &
THE CO-OPERATORS REBRAND
2021 - 2022
My role
Design lead
Design system lead
Activities
Design coordination, design coaching, mentorship, Agile design sprint plans, design system founding, pattern workshops, new process documentation, communication planning
Platform
Web, Responsive web
Context
Co-operators is a key trusted brand in Canada for home and auto insurance (P&C), with a history spanning back to 1945. The biggest entities in the co-operative group of companies operate under the Co-operators branding and represent the majority of the marketing presence and recognition across the country.
However, the internal pillars had limited communication and the digital arm of the company had not been thriving. A new major project began to revamp the brand and refresh the image of the company.
UX leaders identified an opportunity with the rebrand to improve digital projects internally. Executives were won over and a design system build was tied into the scope to make future work more efficient. All that was left was coordinating all the moving pieces in time and still delivering the new experiences to users who trust the Co-operators.
Long story short
Old OLS landing page
New OLS landing page
Project focus
​Online Services (OLS), the Co-operators member portal, would be a primary focus for the first launch of the branding and first launch of the Oak design system.​
Business goals
-
Establishing new design system, launching first wave of OLS work using Oak components and token
-
Completing and launching the rebranded:
-
OLS member landing page
-
OLS Replace a vehicle application flow
-
OLS Add a driver application flow
-
User goals
-
Maintaining the ability to edit policy details online through OLS
-
Simplifying the complex and long OLS application flows
-
Trusting the Co-operators to handle their claims and affairs despite a rebranded image
The new oak leaf logo element inspired the Oak system name
Process: A three-way partnership
The internal digital teams at Co-operators were small and there was a significant amount of work needed beyond their available time. Two sets of contracted resources were brought in to support both the new digital brand roll-out (Deloitte) and to plug in some key design system support (XDS).
​
-
Deloitte would work on visuals, iconography, and some limited feature user flows in OLS
-
XDS would provide a white-label design system structure and contribute to some development
-
Co-operators UX would need to provide direction and coordination, customization of system tokens/components, and designs for landing pages and complex feature flows in OLS
​
When I joined as the lead designer for Co-operators, I coordinated design and relationships with both external partnerships plus the internal Co-operators UX team. I helped establish, organize, and name the new design system, Oak, then I shifted to lead product design for OLS and put Oak to work.
The relationship arrangement between partners for the Oak design system
Key obstacles & resolutions
Coordinating timelines
The new brand rolling out meant all three groups working (Co-operators, XDS, Deloitte) needed to synchronize certain stages of work. Each had a different pace of work and different needs at the token or component level from the new design system.
​
-
A coordinated schedule for when certain components would be available was mapped out and who could consume them when
-
Designers relying on the available elements were able to move forward in their work knowing what to prioritize
-
Anything that needed to move quicker was hand-built and flagged for the second release of Oak to rope in properly
Adapting white label standards
Working with an external systems partner meant a wealth of documentation and standards that didn’t quite feel like Co-operators. They needed a lot of guidance on the new branding values, what the Co-operators design philosophies and patterns would be, and Figma library customizations to draw from to modify their base components.
​​
-
Component audits and pattern standard workshops gave all three partners design answers at critical junctions
-
Regular updates to XDS kept everyone aligned and unblocked
-
Flexible partners helped adapt to Co-operators’ look and feel, and kept the essence of our brand intact
Coaching in low UX maturity
Co-operators had a decent voice from digital strategists who had a long history in the company but early user input is quite different than practical execution for UX work. It was not familiar territory for any product teams to operate with designers who were invested in improving the partnerships and process.
The internal design team also included five other designers will less experience flexing their UX voices.
​
-
Leading by example for design delivery in product work for OLS
-
Collecting the team for workshops and encouraging ownership of important decisions for team standards
-
Educating Agile team managers on UX value, creating double-track sprint plans, and adopting new processes
​
Old Co-operators homepage
New Co-operators homepage
Old OLS policies list
New OLS policies list
Story highlight
Grafting and growing Oak
TL;DR
-
I audited and identified key component needs
-
I guided our designers through how to effectively build Figma libraries
-
I built schedules for us to complete component updates
-
I steered them through IA changes, applying proper styles, and component updates
The build of the Oak design system was unique because it was actively being consumed and put to use while we were still defining the Co-operators theme. This meant that in some cases, Deloitte and Co-operators designers were waiting for components, tokens, and styles sprint by sprint to complete the work they needed.
​
Oak needed guidance and leadership from the internal design team to actually get itself operational. I audited and identified key component needs from Co-operators product teams and from Deloitte as they began tackling some initial OLS features. I guided our designers through how to effectively build Figma libraries and accommodate the tools/plugins XDS needed us to interface with and I built schedules for us to complete component updates. The Oak wiki-site also needed some direction and review. XDS provided a white label website and I steered them through IA changes, applying proper styles, and our component updates from the new Co-operators brand.
Co-operators team themed and customized this white label XDS wiki-site
Content card Figma library variants
Story highlight
Rooting team standards
TL;DR
-
I collected the design team and facilitated 9 key UX pattern workshops
-
I coached the other designers to successfully run workshops
There were no UX standards or patterns defined anywhere for Co-operators to keep everyone in-sync with each other. This was especially important while three teams were attempting to work simultaneously in the same look-and-feel. XDS had provided the basic building blocks for the design system but the internal team still needed to decide how to arrange them.
​I collected the design team and facilitated 9 key UX pattern workshops to agree on how we wanted the new brand to feel through our UX standards. I aligned everyone on structural pieces like Content Blocks and Table Data, interaction behaviour for Accordions/Expandables, and form design essentials like Radios, Check, and validation. With my session format as a template, I coached the other designers to successfully run workshops as well which aligned us on several other pattern and team decisions.
UX pattern workshops to align UX and all partners
Story highlight
Design leadership
TL;DR
-
I led the execution for UX in the active Co-operators product teams
-
I coached our designers how to use form design best practices
-
I was able to guide designers how to effectively use system components
As Oak became stable enough for the first version support I was able to mentor and transfer my system management responsibilities to another designer to carry that torch forward. Instead, I needed to shift focus and I led the execution for UX in the active Co-operators product teams. When I hopped over, OLS teams were preparing to work through some of the core features of the member portal: adding or replacing a driver for an existing auto policy, and replacing a vehicle for an existing policy.
These priority OLS features relied heavily on member form input and legal policy verification — areas I had years of experience with. I coached our designers how to use form design best practices to question field requirements, tell users about upcoming document needs, improve progress transparency, merge multiple acknowledgements and inputs, and overall simplify the steps users would need to complete the process. Using the knowledge from Oak, I was also able to guide designers how to effectively use system components to build their screens for the various user flows.
Old add a driver experience
New add a driver experience
Story highlight
Agile & process leadership
TL;DR
-
Product was not experienced with embedded design resources
-
I took the opportunity to help influence and educate the PM and Dev leads
-
I established a double-track sprint process
-
​I introduced Figma branching procedures
-
Improved file publishing transparency
-
Helped teams distinguish between working files and frozen product files
The Co-operators product team was using a modified Agile Kanban format as their project structure to work through the OLS member features. Unfortunately, product was not experienced with embedded design resources and how that played with development needs and sprints. OLS was to be the first main project that was built using Oak so there was also some uncertainty about not having design material packaged and ready much in advance of dev sprints.
I took the opportunity to help influence and educate the PM and Dev leads on how UX could support them through Kanban, and ultimately I established a double-track sprint process. It used the existing two week sprint cadence and layered on a continuous UX discovery and delivery process so we could have materials prepared and ready.
This also meant complex planning was needed for the designers I was leading and how to document their work effectively. I introduced Figma branching procedures and worked with them to map out guides for how to share their work with product and developers inline with these regular sprint schedules. We refined this process as the projects began and improved file publishing transparency for partners and stakeholders to see when and why work was modified. I also helped the teams distinguish between working files and frozen product files, and how to integrate the right links in JIRA tickets and Confluence documentation.
Figma branching and publishing process
Outputs & outcomes
The partnership with Deloitte was winding down since the main branding push had been launched for the summer of 2022, and XDS was only engaged for maintenance and to slowly hand over the keys to Oak. My career took me elsewhere for the end of 2022 but the skilled-up Co-operators team would continue to evaluate and rebuild features for OLS for many months, with roadmaps planned through Q2 of 2023. What was originally layered, complicated, and uncertain about the 3-prong partnership was eventually wrangled and productive, as Co-operators announced their new branding and soft launched the OLS dashboards and features to almost a million Canadian members.
I was able to empower a team of designers, make positive change in project transparency and UX education, integrate design successfully in Agile structures, lead the beginning of a new design system, and set up UX with key standards to build on.
Key impacts
-
Oak, a new design system
-
OLS dashboard and key features all successfully launched on time with Oak and new branding
-
Replace a vehicle flow clearly surfacing important blocker moments for needed user data, alleviating call centre support and improving completed self-serve sessions
-
Add a driver flow total input fields reduced and important help text added, improving time to complete and user comprehension
-
Co-operators component libraries and workflow processes in Figma established
-
13 key UX patterns decided and documented, to be reflected in Oak wiki-site
Release schedules and engagement plans -
Ongoing UX relationship & partnership with Product in Agile sprint processes
​
New OLS replace a vehicle flow designed with Oak
