Implementing a cross-device functionality

Implementing a cross-device functionality

Implementing a cross-device functionality

B2C

Desktop + Mobile

UI

User tests

ROLE

Product Designer

YEAR

2024

SCOPE

Delivery

TOOLS

Figma, Jira, Testapic

🔎 About Cheerz

Created in 2012, Cheerz is now one of the most popular photo printing service in France. Their mission ? Make people smile thanks to fun and innovative products and a fluid user experience online. I had the opportunity to work for Cheerz during a 6 months mission.

+ 4 million users

of the app

+10 products shipped every minute

👩🏻‍💻 About my role

When I joined Cheerz, the discovery phase was already completed on this project. Therefore, I was involved in the Delivery phase, which included: prototyping on Figma, analyzing user tests, following the implementation of the solution with the developers and testing the new functionality with the QA team before release.

ROADMAP

Using Design Thinking to come up with solutions

Finding inspiration to build an intuitive solution

Finding inspiration to build an intuitive solution

For this project, I was involved only in the Delivery phase, as the opportunity had been defined beforehand by the Product team as well as the Client Service team : users request a cross-device functionality, to be able to upload photos from their phones while creating a photo album on their computer.

Prototyping

to make ideas

come to life

User tests

to gather feedbacks

and improve the solution

Iteration

to improve the first prototype

Development and testing

to technically implement the new feature

Webdevelopment

and QA testing

to implement the new feature technically

  1. Prototyping

to make our ideas come to life

  1. Development and testing

to implement the new feature on the website and the app

  1. User tests

to gather feedback

  1. Iteration

to improve the first prototype

THE PROBLEM

How can we create a cross-device functionality on Cheerz's website and app ?

OBJECTIVES

👍

Easy to use

Make users' experience

fluid and easy

⭐️

Convenience

Make it easier for users to create their product

🥰

User satisfaction

Improve users' experience on Cheerz's website and app

BENCHMARK

Finding inspiration to build an intuitive solution

Finding inspiration to build an intuitive solution

Finding inspiration to build an

intuitive solution

MonAlbumPhoto

—> Cross-device from desktop to mobile, using a QR code and a discreet tutorial in 3 steps to guide their users.

Pixum

—> Also a cross-device from desktop to mobile, using a QR code and a more visible tutorial in 3 steps to guide their users.

PROTOTYPING

Create a new experience starting with an MVP to test

Using Cheerz's existing design system, we developed a MVP to conduct user tests and validate the idea before iterating and offering a more developed UI with more advanced features.

FEATURES

Based on our benchmark, we decided that the simplest way to link the computer to the phone is to use a QR Code, that the users can simply scan to open a landing page on their phone to upload their pictures.

A tutorial in 3 steps to onboard users to this new functionnality

The most important thing when implementing a new feature is to guide users. By displaying this simple tutorial, we hope that the user journey will be frictionless.

A QR Code to scan and create a bridge between devices

Easy to implement, the QR Code is also a tool users are familiar with. This is why we decided to use this simple solution to enable users to upload pictures from their phones, to their desktop project.

A simple landing page on mobile to upload pictures

We decided to make the mobile landing page as simple as possible to make the user journey as fluid and easy as possible. They'll only have to clic on the unique CTA to upload their pictures.

USER TESTS

Collecting feedbacks to reduce risk and iterate

Collecting feedbacks to reduce risk

and iterate

Collecting feedbacks to reduce risk and iterate

🗓 Methodology

To test our new features and collect feedback, we conducted user tests on profiles belonging to Cheerz's target group. We could access the recording of their session and hear their feedbacks. We also made them complete a questionnaire to test our hypothesis.

Unmoderated tests

5 testers

30 minutes

via Testapic

👤 Profiles

Virginie

45 yo

Caroline

44 yo

Hélène

34 yo

Elodie

28 yo

Melina

23 yo

User 1

30 yo

User 2

60 yo

User 5

32 yo

User 3

27 yo

User 4

29 yo

✅ What worked

5/5 understood well the tutorial and found this new functionality very useful

The tutorial in 3 steps was well understood and all of our testers found this new feature intuitive to use. They also spontaneously mentioned it was a very practical feature as they take most of their pictures with their phones but prefer to create their album on desktop.

"It's really easy to use, I found it instinctive and since people have most their pictures on their phones I think it will be often used. "

"I really liked it: it's quick and simple, it's not long to fill in like it can sometimes be on some ticket selling websites."

- Hélène

5/5 scanned the QR-Code and managed to do all the steps on their phone to upload their pictures

All of the users understood the first step was to scan the QR Code and they all found it easy to select their pictures and wait until they are uploaded.

"It's really simple, I just have to select the pictures I want and they're quickly uploaded."

"I really liked it: it's quick and simple, it's not long to fill in like it can sometimes be on some ticket selling websites."

- Virginie

5/5 understood easily they had to click on the CTA "Display my pictures" on Desktop once their pictures were uploaded

Once pictures were uploaded on the phone, users had to come back to desktop and click on a CTA to display their pictures. This test confirmed that this step was clear and that the CTA was visible. All the users understood this step and successfully displayed their picture.

"My picture are displayed very easily on my computer, I just had to click on the button. I found the process very simple and intuitive. "

"I really liked it: it's quick and simple, it's not long to fill in like it can sometimes be on some ticket selling websites."

- Caroline

🛠 What we reworked

2/5 had trouble re-uploading new pictures from their phone

The tests revealed that not all users understood they had to scan the QR Code again in order to do a second batch of upload. Some of them spontaneously looked for a solution on their phone instead.

"I didn't understand where to re-upload picture, I felt blocked when I looked at the screen on my phone."

"I really liked it: it's quick and simple, it's not long to fill in like it can sometimes be on some ticket selling websites."

- Caroline

—> What we changed : we changed the final mobile screen to add a CTA "Un autre transfert ?" that could enable users to upload pictures again.

Prototype V2 :

Prototype V2 :

Only 3/5 fully understood the interest of the "Copy link" CTA under the QR Code

Under the QR Code, we added added a link that could be copied and pasted in case of a technical problem with the scanning of the QR Code; but also to encourage users to share the link with their friends and family members, to co-create an album together.

"I'm not sure I understand the interest of this link, maybe it's for people who don't have a QR code scanning app."

"I really liked it: it's quick and simple, it's not long to fill in like it can sometimes be on some ticket selling websites."

- Virginie

—> What we changed : we designed a tab called "Family and Friends" to make it clearer to users that the link could be shared to gather pictures and co-create the photo album.

FINAL PROTOTYPE

Using users feedback to improve our solution

Using users feedback to improve our solution

Using users feedback to improve our solution

NEXT STEPS

Here are the next steps in the implementation of this new feature on Cheerz's website :

🔄

Iteration

We will improve the MVP thanks to the results of the user tests.

🧑‍💻

Development

The developer team will work to implement the full solution in Cheerz's ecosystem.

🧪

QA

The QA team will conduct technical tests to ensure that the solution is functional.

Making sure our files are well organized for a future team to use.

IMPACT

A few weeks after the launch of this feature, we got the first results of usability :

40%

of users used this new feature

44%

used it to create photo albums

CONTACT

Héloïse Barrand-Pinto

Product Designer