M.ORANGE

The fictional name of the project (NDA). 

Collaboration

I have worked as a sole designer and collaborating with two analysts, three engineers, one QA, and a product manager.

Role in the project

— prepare the strategy of the redesign;
— pulling together requirements and goal setting; 
— technical evaluations with engineers;
— sketching design mockups, iterations, and host design critiques;
— handoff designs with guiding documentation.

Problem statement

The mobile version was outdated and had not been updated for many years.
According to our research at that point company lost many users and money on the mobile version.

Goal

Our goal was to rework the mobile and TV experience from scratch.

Actions

Planning process. Arrange meetings to bring the team on the same page. Identify user's and business needs interviewing, developers, business managers, and support.

Design process

1. Appointing meeting with the team and gathering consideration constrains, propositions, and opportunities.
2. Make a shared understanding of the product's problems and planning the ways toward a solution.

3. Disassemble the whole existing design and highlight inconsistencies.
4. Exploring analytics gathered from the existing product.

5. Analysis of similar popular products (not direct competitive) that solved similar problems that we had.
6. We are grouping and prioritizing the key problem areas of users and the company.
7. Suggesting several ways to solve the problem, ranging them by the complexity and effort.
8. Quickly and cheap sketching solutions and make a low-fi storyboarding for feedback.
9. Designing the new experience.

New experience

m.orange_TV


Would it be nice to replace the dull system notifications with thematic and cute replicas of the brightest movie characters and heroes? It is not so expensive for the product, and it would help increase retention.

The mobile experience won't be the center for the product but plays a vital role: you can comfortably surfing on it in novelties, trailers, new series, and pick what to watch for the evening.

series_page_tv
video_page_setting
video_page_player
favorites_empty
home_tv

Updated checkout process

One of the most significant problems was a minimal amount of subscriptions from mobile devices,
part of the problem was the length of the process itself, and the other part was the number of fields required to fill in.

The process was not fast, besides there were data requirements from payment processors, such as the postal code. But in the end, we arranged to remove this field from the payment page.

As a result, we have had two working versions of the design of the payment for a subscription. In a/b testing, both showed excellent results (basically, I think the old buying process was just terrible) one + 15% and second give + 25% conversion.

Old behavioral flow

Buy the subscription

register

1 step
Onboarding
on the service

decision

2 step
Deciding to buy
the subscription

options

3 step
She is choosing the subscription plan

checkout

4 step
Checkout 
page

Actual behavioral flow

Buy the subscription easy

register

1 step
Onboarding
on the service

decision

2 step
Deciding to buy
the subscription

checkout_new

3 step
He is choosing the subscription plan and pay

payment_with_tariffs-1
payment_with_tariffs_process_filling-1
payment_with_tariffs_success-1
dark_payment_with_tariffs
dark_payment_with_tariffs_filled
dark_payment_with_tariffs_fail

Outcomes

After successfully integration new design the statistic has shown enormous superiority in favor of mobile devices (of course,
we are supporting all types of devices). It was the most significant product update in 6 years. This project had a great impact on my approach to work.

JAN. 2020 

25 million visitors

25%

Increased checkout conversion

64%

Mobile version

Get in touch! cup@licor.design

Bxl-Twitter
Bxl-Instagram
Bxl-Linkedin
Bxl-Dribbble