Accessories Financing UI for TELUS
Project Overview
The task was to design a new user interface that allows TELUS Digital customers to finance smartphone accessories online, in addition to payments upfront. This interface must display customer financing limits, recognize existing accessory contracts, recognize phones in-cart and device renewals, multi and single sub account information, and more.
Tools: Figma, Miro, Google Meet , Google Docs
Design System: TELUS Universal Design System
The new user interface had to allow users to select between the pay upfront and financing options, and multiple options were explored in the wireframing stage. Designs were inspired by modern trends in the competitor landscape as well as existing TELUS component designs that existed in other digital journeys on the site.
Design (Figma)
Wireframes
Ideation (Miro)
Interaction Logic
The logic of this new interface was tightly restricted by what the backend business logic would allow. Hours were spent designing and iterating the user flow, to account for all of the happy path and edge case scenarios that a user might encounter. Efforts were made to reduce clicks and user cognitive load since concepts such as credit checks, contract-tying, and financing limits are tough to absorb as a customer. In some cases, we actually had to restrict user freedom in order to provide a more user-friendly experience and the lowest price per month for customers.
Moderated Usability Testing
Research
The mobile end-to-end journey was put through multiple rounds of user testing during the design process. It was crucial that the new interface was tested with real people. The feedback on content and design provided was key in the evolution and simplification of the final product.
Testing Environment: Remote, shared screen through Google Meet, recording of the session, with audio
Participants: Mix of Telus and Non-Telus customers, mix of age ranges, income, industries (excl. telecom)
Format: Figma prototype tests on a mobile device
Key findings summary
Motivations
Users described the new flow as a straightforward process
Most users understood that a change in term length matched the time remaining on their contract
Users understood they needed to purchase a phone in order to finance an accessory
Pain-points
Users were confused about how $500 financing limit was determined
Users found the ‘Due today’ amount confusing in the cart
Users were unclear that they had to consent to pay off their existing contract term
Design (Figma)
Final Designs - Product Page
As you can see below, the final designs included the use of ‘radio cards,’ from the UDS component library, to show the different payment options a user can select. The bottom financing card is also paird with a ‘dynamic financing box’ that allows users to select financing specific options and can surface related errors and warnings as well.
Dynamic Financing Box
The ‘dyanmic financing box’ had many states that needed to be documented in the design for a multitude of user scenarios. In the below examples, you can see a few of the many states (both happy path and edge cases) this dynamic box can have, while a user is financing accessories in the new design.
Documenting Designs for Devs
Design (Figma)
First section: This section communicates to the devs the exact user scenario in which the below component states would have to appear. In this example, the user has authenticated (logged in), has multiple subscribers on their account, and currently has no add-a-line device in their cart. In this case, the user also has an existing accessories financing contract.
Second section: If the financing component state required any kind of warning or success message, this is where I inserted the correct notification to be displayed on the product page. In this example, we serve a warning served, as our user already has an existing contract agreement and must pay off this one first before proceeding with their new financing term.
Third section: The third section shows the correct design and copy of the dynamic financing box component that corresponds with the given scenario listed in the first section. In this example, we see the user is provided with a list of options on how to proceed forward, and a consent check-box in the bottom section. Please note that all component states were provided in responsive screen sizes to devs.
Fourth section: Much like the second section, this one shows possible error messages that would appear for different states. In this example, we see an error served if the user does not check the consent box in the dynamic box component. The user is not allowed to proceed with their new contract without doing so.
Layout and spacing specifications
Figma pages were created to document the new layout changes for devs. These documentation pages included the positioning of components, exact pixel spacing specifications, annotations about functionality, tabbing order, and other accessibility annotations.
Business
Stakeholder Walkthroughs
Multiple stakeholder walkthroughs were conducted throughout this project. It was my task to drive prototype walkthroughs and explain all design changes and reasoning, in collaboration with other team members who worked on the project. In this video, you will see me explain some of our edge case flows. You will also see me hand off to other content and design practitioners, as this was a collaborative end-to-end experience.
Business
Impacts on the Business
Big RGU Driver
Bringing financing capabilities to the TELUS digital experience was a huge win in terms of RGU and online sales generation. No longer did customers have to go into stores physically if they wished to finance expensive accessories over time.
In just the first 3 months after launch, we saw a total of 728 AF Orders for TELUS Consumers, with a 29% conversion rate for cart start to finish, boding well for the new online experience.
Scalable Design Pattern
TELUS is developing a new subscription-based product called SOD (subscription on demand), and the groundwork I laid with Accessories Financing is now being leveraged by designers working on this new project.
I conducted a walkthrough and workshop for Sr. Designers working on the SOD project, teaching them how to effectively design and document a financing interface for TELUS web.
Improved User Experience
The new financing interface is an improved digital journey for users who wish to finance a device online, and the dynamic box provides real-time feedback and information about credit balances remaining, existing contracts, and paired contracts.
This new design has had very little Voice of the Customer (VOC) complaints and has been working as intended to provide an interactive experience for TELUS customers.
Greater Collaboration at TELUS
Designing the A.F experience unlocked new ways of working between creatives in the company. I had to collaborate with designers, content strategists, and product owners from various teams, to ensure the end-to-end flow of this new journey was seamless.
The relationships developed along the way were vital to the growth of collaboration in the organization and promoted a less siloed approach to design at TELUS.
