TELUS Product pages

My involvement in the process & design of the ever-evolving Telus product page

My Role

For this project I lead the redesign, user experience and evolution of the product pages – named project Herman

Customer Insights & Ideation

Paired with a great squad consisting of a product owner, design intern, scrum master, QA tester and 2 developers , I mapped the user experience concept with features that address customer behaviors and buying motivations.

Experience Strategy & Vision

I strategically created frameworks and prototypes to share the vision and design principles. We used usertesting.com to gain insights about the new design to validate any idea we had about the new flow.

Planning & Scope Definition

After getting a clear idea about the product, the Product owner, Scrum master and myself worked with the developers to help breakdown the design in small workable stories for development.

Oversight & Coordination

Through collaborative sketch sessions with Modern Golf managers, we brought their brand vision to life while keeping customer motivation in mind.

Design Execution & Validation

This project started with a mapping session, card sorting for page content. I started the design in the mobile view and then constructed journeys, wireframes, prototypes and design specs.

Leadership

I designed up and presented works to gain buy‐in from managers, directors and other design team members throughout the project lifecycle. Working closely mentoring my intern we shared ideas on the final visual design.


White board session


The Challenge

The many moving pieces and prices

This project had many moving pieces and a lot of complexity to worry out. We needed to make buying a phone with multiple price points, storage sizes, plan options and customer types simple.

KEY PERFORMANCE INDICATORS

Success for this project was measured by the amount out new customer we were able to funnel into the commerce flow. Followed by the increase of interaction with the module and reduction of bounce rate.

The focus

For start of this project we focused on the pricing lockup, allowing customers to seamlessly configure their phone.

Customer flow


Detailed Design

This is … HERMAN

Explore the images below to see the latest design of the product page.


The Framework

SETTING THE DESIGN DIRECTION

Through a top-down approach to define the overall structure of the experience, I sketched and storyboarded ideas about the arrangement of user interface. Starting broad helped our vision to evolve into something tangible.

Sprint 0

THE BASELINE

The original product page price lock up, customers said was confusing and didn’t support multi price points. Analytics uncovered that customers where not identify who they were, nor did they read any of the copy.


Sprint 1

Progressive reveal

We favoured to show each section in small bite sized chunks to allow the customer to focus on the task at hand and read the content of the page. This proved to work in usertesting, but when it live however not enough customers didn’t interact with lock-up. Those who did, entered the commerce flow and completed the flow.

View the prototype

final large view screen

Small view - Default state

final large view screen

Small view - Colour selection

final large view screen

Small view - Customer type

final large view screen

Small view - Price selection

final large view screen

Large view - Final state


Sprint 2

Fast follow

A week later we released a fix, after digging into the analytics from the first iteration and we made the interactive element look more like buttons, we believed that if the elements looked more like buttons customers had more of an affinity to click them. This proved to be correct.

Following this iteration the business launched their new plan and price point. The page preformed well, unfortunately the new plan and price were available in-store only. So this increased out bounce rate and drove more traffic to the find a store page.


Sprint 3

The billboard

Receiving feedback from our internal partners, we need to pivot and quickly iterate to be able to show prices on page load. This concept ran in a A/B test against the Quick fix. The results of the test show very little change only with an increased bounce rate. We hypothesized that the customers saw the prices they wanted and then either got all the information they needed, or knew where their closest store was.


Sprint 4

All out in the open

Hot off the heals of the billboard, not being the most elegant design. We wanted to take the learning from the progressive reveal model of the original iteration, but show the multiple price points on page load. Allowing the customer to focus on the more complex action. This also allowed up to decouple the customer selection and move it to the end of the flow. From our research we favoured drop downs for elements with multiple selections like colour and storage size.

customer flow

Customer flow


Sprint 5

Always have a plan

The new layout merged design and business goals. It had the lowest of the bounce rates, less people exiting to the find a store page and better equipped customers into our commerce flow. Which allowed us to move forward to the next iteration of allowing customers to pick or configure a plan when the pick their phone.

View the prototype

WANT TO WORK WITH ME

Download my resume