The Problem

Mysteri mobile wanted us to create a buy flow that they could use to develop an online shopping experience for users.

How might we create a buy flow that is easy to use and transparent about information usage?

Context

Mysteri mobile is a small company offering cell phones, accessories and affordable plans to Canadians on the east coast. Mysteri is very popular amongst young professions and those looking for discount cell phone plans. Currently, Mysteri’s online infrastructure only supports browsing phones and plans, but not purchasing them. Mysteri mobile felt that they were at a competitive disadvantage when it came to getting their product to their target audience. Young professionals using Mysteri mobile were found to have a significant preference (65%) for online shopping for cell phones and plans in a small study among Mysteri mobile users.

The Solution

  • I wanted to explore a progressive disclosure process for taking users through the buy flow
  • Progressive disclosure allows us to take the user through each step of the process without overwhelming them
  • I included an indicator at the top of each page so users would know how far along they are in the process, giving them a sense that they are nearing the end of the flow, and respecting their time
  • Often, the credit check process is shrouded in secrecy, but we wanted to let users know what was going on, whether they were approved or not, and what their options were if they weren’t
  • Getting a phone plan in Canada usually involves a credit check, but many carriers don’t fully disclose this to the user, and provide little reasoning as to why some users with more credit scores aren’t eligible for plans
  • We wanted our users to feel empowered and build trust—not only do we fully disclose how we check their credit, we gave users an option to preemptitively disclose the state of their credit so we could show them just the offers the qualified for
  • It was important to make. sure the credit check occurred before the user entered address information, so as to not mislead the user and create a sense of distrust or futility

The Key Screens

The first screen: Arriving in the buy flow:

The user is able to see their order summary. They also have the option to state whether they have good or bad credit right away, so they can get a sense of what they are eligible for as early as possible. Often, other mobile providers leave this step till the end or don’t disclose that it affects eligibility.

Review Shopping Cart Screen

The third screen: Let’s get you started:

We list out the documentation the user is going to need to go through this process (eg. credit card, ID etc,)

Let's get you started screen

The sixth screen: Credit approval:

We check the user’s credit (if they haven’t given us an idea of it on the first screen) and approve it at this point, before the user gets too far in the flow. We want to avoid the user going through the whole flow before realizing they are not eligible. We want to surface their options as early as possible.

Credit approval screen

The seventh and eighth screen: Credit result:

We let the user know whether their credit score qualifies or disqualifies them from the offer. We offer alternative phone plans if the user is not eligible.

Low credit score screen
Approved credit screen

The Process

User Interviews

We conducted several user interviews with both users who are current Mysteri users, and users who had cellphone plans with other companies. Using the information we gathered, we were able to create personas and empathy maps to better help us understand  the kind of users we were designing for, and what their experiences around purchasing cellphones and cellphone plans online are.

User Persona
Empathy Map
User Persona
Empathy Map


Stakeholder Interviews

I conducted extensive interviews with stakeholders to get a sense of what information was needed practically and legally for this flow.

I also had to consult the legal team about certain aspects of this flow as telecommunications is  a highly regulated industry in Canada.

Requirements were by far the most important aspect of this process:

  • Canadian telecommunications requirements
  • Credit check agency regulations
  • ID checks to prevent fraud
  • Credit score

Keeping all these requirements in mind made this flow process more complex, and it involved quite a bit of back and forth with the business development team, but together we were able to create a truly comprehensive buy flow for Mysteri Mobile.

Strategic Vision for the Buy Flow

As part of the stakeholder interview process, we had our key stakeholders participate in an affinity mapping exercise to outline the main goals/strategic vision for this new buy flow we  were creating.

Mapping out  the strategic vision for this helped us prioritize which features we wanted to include and stay on track with the brand goals.

Affinity Mapping

Takeaways

When dealing with such a highly regulated field, legal requirements should be the starting point, and stakeholder interviews are important to give UX designers a full view of the scope of the design.

Strategy was a large component of this project, a lot of investigative work and requirements gathering was left to the UX designers on this project.

Cultivating a deep knowledge of the requirements was instrumental in being able to write concise, clear and effective UX copy for users. The writing was definitely as much of a design element as the UX design to make this complex process easy and enjoyable.

Interviewing users helped us really understand what part of the process of ordering a phone/phone plan users enjoyed and users disliked, so we could build a product that worked towards alleviating pain points.

Get in touch

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.