Close Menu

Freedom Mobile Site Redesign

Freedom Mobile requested a website redesign better suit their brand change, and create a more engaging experience for their customers.

Problem:

Google analytics shows the current user journey isn’t engaging, we can tell this by page drop offs.

How might we engage users with the content they’re looking for and convert them to committing to plans and phones?

Goal:

The client’s goal was to complete a website redesign to represent a recent brand change, and users to an eCommerce buying flow. It was important for me to present a guided and informative expierence to customers.

Solution:

You can find our first solution live at: https://www.freedommobile.ca/

old-solution-screenshot

Results:

After site launch, we found the average bounce rate dropped from 60% to 45%! We increased revenue and converted over $300K in sales. As well as helped over 40,000 users to find a store to complete purchases!

But… is this the best solution? I decided to kickstart another design process to find out.

My Process

For the secondary design process I chose to follow the 5 Planes of UX Methodology. I’ve used this methodology in the past when setting out to solve design problems that already have a desired outcome, such as an app or in this case a new shiny website!

01 Strategy:

  • Product Objectives
  • Success Metrics
  • User Research
  • User Needs
  • Personas
  • Empathy Maps

freedom-personas

I created two personas based off the data collected in the Strategy Plane. These personas are evolved from target demographics and the customers Freedom Mobile wants to help most.

The strategy team provided me with personas during project kick off. However the personas were marketing focused, and didn’t address the design problem. I created my own personas to ensure I understood who I was designing for and what their pinpoints were with the Freedom website. I conducted research with my friends and family to gain further insight into why they would look at Freedom’s Website, what their personal story was with cellphone providers, and where they needed my help. The personas acted as a north star for the entirety of the project, and aided me in my design process to design a human centric solution.

02 Scope:

  • Competitive Landscape + Analysis
  • Defining Requirements
  • Features + Functionality

IMG 1342

As a part of defining the requirements and features for this project I filtered user and company needs. The above photo shows the simple list I created in my notebook.

To understand what I was to design/not to design I set out to define requirements for this project. I created a list of requirements taken from my user research, suggested features from meetings with stakeholders, as well as gleaned inspiration from competitors. The list was very long and a reduced it to the three key features that the redesign must include. I did this by understanding the site objectives and putting the users needs first.

The 3 Key features are: 1. Something to curate plans and phones on their like pages. 2. Transparent costs. 3. Store locator.

03 Structure:

  • Content Strategy
  • Iterative Feature Concepts

concepts

Focusing on providing a solution to help users curate information, I used a variation of the the “Crazy 8’s” - Design thinking exercise. I imagined 18 concepts to proved a solution to explore deeper.

Who the time can to ideate concepts I decided to take part in a variation of the “crazy 8’s” exercise (a breadth of exploration exercise typical in Design Thinking methodology). The exercise enabled me to quickly sketch as many possible solutions. The challenge I was faced with was separating my ideas from the solution that existed live on the Freedom website. So I found this exercise to be so valuable to my process. I followed the exercise extensively to be sure I had two possible solutions to explore deeper.

04 Skeleton:

  • Prototypes
  • User Testing
  • Evolution of Personas
  • User Journey Maps
  • Wireframes

example-wireframe

Solution #1: An example from the wireframes I created of what a universal filter could look like on Freedom Mobile’s Plans Page. Page scrolling view.

After sketching out the concepts I landed on I learned that a “tab” like filter was the best solution to aid users in curating the information on Freedoms plans and phones pages. So I moved to pushing pixels and creating a wireframe in Sketch. I understand that its best to start with designing the smaller viewport first. However in designing the largest viewport first I completely struggled in shrinking the design into a smaller viewport. This was a good thing because it started another brainstorm on how to design this solution truly responsive. And in this brainstorm I evolved my initial concept into a what I think could be a stronger solution.

05 Surface:

  • Colour Palette
  • Typography
  • Iconography
  • High Fidelity Design Composition
A sample prototype of one solution to aid users in curating the types of phones and plans Freedom has.

Typically in the surface plane the Product Designer would move into solidifying solutions with High Fidelity design compositions. In this case I was working with a Visual Designer that would moved forward with the wireframes I had provided. The Visual Designer worked closely with another agency that provided strict brand style guidelines. In the secondary design process, time allowed me to create two prototypes in Principal to showcase my intention for functionality. Side note: For my wireframes, I founded that working in grey objects and Helvetica caused minimal distraction for the client.

The Solution:

At the end of the design process I had two solutions to share. Both equally meet the user needs, so the next step would be to pitch my solutions for the filter to the stakeholders and propose a round of user testing. User Testing could show how much information we can proved to the user, and what expierence they find more intuitive.

The core of each solution is a filer to live on the Plans and the Phone Pages on the Freedom Mobile website. From my research I learnt that users were not engaging with these pages because they could not find what they were looking, and didn’t understand what was the best deal for their needs. This filter allows for the user to curate the information provided on these pages.

Solution #1:

solution-one

There are boxes at the top of the page. The user can click on an option box, and their selections will show below.

Also on page load before selections are chosen/shown, there will be a sales section. My research showed that users shop for deals first online. While online users find this challenging because product’s prices aren’t transparent, and users aren’t sure if they are getting the best deal suited towards their needs. In displaying sales first we are catering to the “Value Seeker” persona trait. Once the selections are chosen/shown the sales section is pushed down to remain at the end of the selections.

As the user scrolls the page, the boxes get smaller and stick to the top of the screen. My intent with this interaction is to always give the user the option to switch categories.

Solution #2:

solution-two

This solution has the categories at the top of the page that behave like Solution#1. However all products in their categories live on one single page. The user can scroll the page to find what they are looking for, or they can interact with the filter at the top of the page.

If the user clicks on a category, the category box acts as a button and anchors the user to that section of the page. As the user scrolls the page the categories remain sticky at the top of the page, and an animation occurs highlighting the section the user is in as they scroll. This solution is truly responsive and works across all sizes of viewports. Understanding that minimal dev effort was a requirement due to time scope, I feel like this is a strong solution.

Future Considerations + Self Reflection:

Moving forward with this project I would love the opportunity to send my concepts into testing, and to explore the other features I learnt about from user research. I think I would start with the store locator first, as I learnt a lot of users start looking for deals and products online first and then go into the store to wrap up the purchase with a trained employee.

I’m happy I decided to kick start another design process on my own. I knew that it would be hard because I would be relying on friends and family to test with. But what I learnt from that is how to be very resourceful, and how to prioritize things that are the most important for users.

Press:

After site launch Freedom released some new plans that shook up the market. Big amounts of data for a lot less than what established telecoms have to offer. As a result we had over half a million users start a buying flow with the new redesign!

You can continue to read about this here:

- Financial Post

- Vancouver Sun

feature-final.png