O2E Brands Franchise Partner Page Redesign — A Case Study

Role: In-house Digital Designer | Skills: UX/UI Design, Visual Design, Wire-framing, Prototyping, User Testing

In 2018 I was creative lead on redesigning and updating the Franchise pages on the brand websites. I worked with multiple teams to update three of O2E Brands’ Franchise Development pages: WOW 1 DAY PAINTING, You Move Me and Shack Shine.

My role involved competitor analysis, research, interviews, meeting with stakeholders, testing, and design. By balancing content, business values and implementing best user experience design practices, these pages increased conversion and improved candidate quality at O2E Brands.

THE DESIGN PROBLEM

At O2E Brands they take ordinary home services like moving, painting and house-detailing and turn them into exceptional experiences. They offer franchise business ownership opportunities in the home services industry — a model that has helped hundreds of ambitious, hard working people realize their dream of business ownership. O2E Brands has built the world’s largest junk removal company, scaled up, and now have multiple home services brands — franchise development is their foundation.

Inconsistencies in User Experience — I received feedback that the online experience of our franchise pages did not reflect the experience of the community at O2E Brands. I wanted these websites to share our culture; the feeling of coming into the office and meeting the approachable and knowledgeable people that would be supporting franchise partners every day. I wanted these sites to capture the enthusiasm of our daily huddle. My goal was to create a consistent look for these companies that highlighted their individual strengths, while still showing a connection between them as a family of O2E Brands.

Time to Update — I was asked to update these pages to match our current brand standards. For example, we had recently completed photoshoots that focused more on business ownership and on-site interaction with customers, rather than our previously used stock imagery of painters against photo studio back-drops. I wanted to consider inclusivity and accessibility for all users. I wanted to correct some of the inconsistencies on the sites such as the occasionally confusing navigation on both desktop and mobile. I wanted to attract a younger demographic of potential business owners by designing for mobile and including more video content.

Increase Conversion — At the time of this project there were over 200 Franchise Partners throughout North America and Australia. O2E Brands was committed to doubling in size in order to bring businesses to more markets and to WOW (pun-intended) more customers. Conversion was steady but stagnated — I wanted to increase it. The goal was to make it easy for potential candidates to get in touch with the Franchise Development Team. I also wanted to be able to create assets on these pages that could be seamlessly linked to and shared through our social media channels and paid advertising.

Candidate Quality — The Franchise Development Team wanted the experience of these sites to be informative and comprehensive so that it was clear to potential candidates whether or not they would be a good fit for O2E Brands. We have all heard horror stories about questionable contractors that don't deliver on their promises — the goal here was to find people ready to change that by turning these ordinary trades into exceptional customer experiences. In order to find these people, the team asked that these pages look cohesive, inviting, and reflective of O2E Brands’ values.

THE CHALLENGE

Franchise Partners are at the core of everything at O2E Brands and finding the right people was important. This project had a lot of stakeholders and moving parts — it required detailed discussion and coordination before any design work could begin. This was truly a collaborative effort between many people on different teams and is a good example of the evolving user-centric design work that we did at O2E Brands. We faced some challenges that we confronted early on:

Timeline — O2E Brands has multiple brands and the Web Development Team has their time allotted according to the budget of each brand — some brands had more resources and time than others.

Multiple Stakeholders — There were many requests from different people on multiple teams. Some teams pushed for A/B testing while others prioritized getting the new sites up ASAP — everyone had different priorities and demands.

Implementation — Although O2E Brands is the umbrella company for the three brands that I was working with, each brand had their own specific needs. They also had different developers and platforms.

THE PROCESS

We coordinated weekly review meetings that brought as many different stakeholders into the room as possible — team members from the Web Development, Franchise Development, Creative & Content, Analytics, SEO and even the occasional visitor from Leadership dropped in. All were welcomed — here they were able to get a clear understanding of what I was working on early in the process and freely share their feedback.

COMPETITORS & RESEARCH

I looked at a lot of franchising websites. O2E Brands’ companies have been mentioned on the Entrepreneur Franchise 500 Ranking and it is considered the industry standard — I poured over the list. I presented standout examples in early design reviews to advocate for design patterns and to get a feel for what stakeholders wanted. At these meetings we had a dedicated amount of time to gather input and feedback on sketches and early iterations. I did not work on polished deliverables at this stage, instead I focused on getting early feedback and reviewing multiple iterations that we could thoroughly validate.

At this point I was able to create simple wireframes, often drawn from the white-boarding that we did during our weekly review. I then reviewed these wireframes with the web developers to get their feedback and to see if what I proposed could be implemented within our timeline. We used Adobe XD as everyone on both the Creative and Web Development teams had access to Adobe Creative Cloud, therefore streamlining collaboration. For organization tools we used Atlassian to coordinate — Jira for the Web Development Team and Trello for design work.

USER TESTING

Once the main ideas were distilled into wireframes and approved by the Web Development Team, I put a simple prototype together using Adobe XD. This prototype was used as a visual discussion guide for testing with a selected group of established Franchise Partners and members of the marketing team who were not working on this project. Testing was conducted by email and we shared both mobile and desktop prototypes for review. User feedback was highly encouraged and essential to this project. I gave the following directions:

Usability Testing Scope

• Make your way through the WOW 1 DAY PAINTING Start a Franchise section

Scenario

• You are a prospective Franchise Partner. Read through the information on the Start a Franchise section and submit your information to learn more.

Insights from user testing showed:

• users wanted less text to read through, especially on mobile

• there were multiple requests to have the financial information more prominent/easy to find — existing Franchise Partners mentioned how important this was to them in choosing a franchise

• the call to action needed to stand out more — it got lost as the text occasionally overwhelmed the purpose of the page

THE OUTCOME

• Users wanted less text to read through — there is a lot of information on these pages. I wanted to keep it simple and make it engaging, but not overwhelming. I shortened the length of the pages, divided the content into clear subsections and interspersed text with graphics.

• There were multiple requests to have the financial section be more prominent so I made a section titled ‘Investment’ so that prospective candidates looking for this information could find it quickly.

• I implemented orange CTA buttons to draw the users’ eye and make the CTA stand out. I made sure to include them on the sticky nav bar and at the bottom of each page so that users could not miss it.

DESKTOP FINAL

• Consistency between sites was important — I kept hierarchy clear and used the same familiar navigation conventions for each brand including a sticky navigation bar, page arrows indicating previous and next pages, and a request form on the bottom of every page.

• We used concise content and copy that created a narrative. I used this narrative as a guide for the information architecture of the sites — presenting them in a way that progressively told the story of the O2E Brands community.

• I placed videos where they corresponded to the copy and content on the page.

• I used real Franchise Partner testimonials to engage candidates and tried to move away from using stock imagery, instead focusing on images that depicted diverse leadership and inclusive business ownership. These testimonials had imagery that translated to use for ads or social media posts.

• I eliminated any customer focused information such as the ‘Schedule a Free Estimate’ and ‘Call Us Today’ sections of the footer. I wanted to make sure all information on the pages was relevant to our users; potential Franchise Partner candidates.

MOBILE FINAL

Another goal of this project was to focus on improving the mobile experience. The new mobile design has a high degree of associated familiarity — I researched common mobile UI patterns and designed one using a simple mobile navigation pattern. I implemented a sticky nav here as well to maintain consistency with the desktop site and to display clear mobile navigation.

Contact Form

• In the old version contact information was contained within a paragraph. In the redesign all mobile pages have the sticky navigation at the top and a field form at the bottom — no matter where you are on the sites, there is always a visible CTA button. Once you’ve entered your information there is a confirmation page informing you that someone from the Franchise Development Team would be in contact with you within 24 business hours.

• I also got rid of the yellow underlining — it was not consistent with brand standards.

LEARNINGS

Our analytics team was able to see a positive increase in site conversion within weeks. The Franchise Development team had their desired business outcomes implemented and felt that the changes improved candidate quality. Each member of our team got a big shout-out from Leadership at the above-mentioned O2E Brands huddle!

While the redesign addressed all of the stakeholders’ requested business needs, I do wish we had been able to do more thorough, unbiased user testing. As mentioned, we tested these designs with existing franchise partners and members of our teams who had not been involved with this process. All of the people that tested the prototypes were familiar with O2E Brands — I think that testing with people who had no or little knowledge of O2E Brands would have been beneficial and could have provided us with further honest insights. During our wrap up meeting for this project I suggested that a user testing service should be factored into project budgets going forward.

I would have also liked to do more thorough user testing in regards to accessibility and inclusivity. We acknowledged some accessibility issues by running these websites through the standard colour-blindness tests, but I wonder how we could further appeal to users and potential candidates who are differently abled. The majority of O2E Brands’ existing Franchise Partners are white males; while we considered this by including more BIPOC in our photography, I still think more work could be done to invite more diverse candidates.

However, even with room for improvement I look back on this project with gratitude — what I enjoy about user experience design is the opportunity to constantly evolve the work and make it better by designing in response to peoples’ needs. I was able to apply my design thinking and execution skills throughout the entire process and to collaborate with my team to design and build websites that I feel proud of.