Enhance collage-making experience with intuitive scrap-resizing interactions and feature

Timeframe

7 weeks (Research + 2 sprints)

Role

UX Design, Feature Owner

Team

Morning, Chris, YY, Yoloung

Outcome

Final deliverables went 100% live

Tool

Sketch, Framer

0/8 Introduction

PicCollage explores innovative ways to help people get inspired, be creative, and share memories by making it fun and simple to decorate photos, create greeting cards, and make highlight videos.

The project is my work as an intern at PicCollage. The final deliverables went 100% live for our 16 million monthly active users. It aims to solve two long-time pain points of users and increase our north star metric——a higher collage-completion rate.

1/8 Research Insights

Feedbacks from company's weekly user interviews, surveys, user tickets, and user funnel data highlighted an opportunity for bettering the scrap manipulating on the digital canvas.

34% returning users complaint about not being able to resize or select the right scraps.

Text scraps are the most common scrap that users are having trouble with because they often are relatively smaller.

Resize are one of the top 3 features that users would adjust for text.
‍
‍

2/8 Interview Highlights

Extracted qualitative insights from users that participated in weekly interviews.

"I'm not sure what I hit, but the text scrap became minuscule, it's so tiny that I can barely fix it."
‍

Design Opportunity

Redesign minimum scrap size and the touch areas around scraps.
‍

"Is there a controller somewhere so I don't have to pinch every time?....Because pinching never works!"

Design Opportunity

Other than the basic gestures, provide a resizing feature to help users achieve their goals (recover from errors).

"I don’t know how to change size to get the text in one line.”

‍

Design Opportunity

Redesign the features users use to manipulate scraps to have a clearer division.
‍

3/8 Final Design I: Gesture Design

Differentiates functions through separating their triggers (gestures/handle), and changed consequently more hidden feature to CTA color.

Before

After

4/8 Final Design II: Touch Area Design

Took care of corner cases by redefining rules based on different scrap sizes

Based on users' feedbacks about accidentally pinching scraps too small, I conducted internal usability tests and designed new minimum scrap sizes and touch area rules to avoid putting users in the situation that is hard to recover from.

Sticker Scrap

Text Scrap

5/8 Text Resizer Ideation

Explored three versions of text controller that helps users recover from error.

Even though pinching is a more intuitive solution for users, it can be unstable especially for a smaller scrap like text, so I decided to add a secondary solution that support users in resizing text scraps. Here we explored a few controller designs that create different styles of interaction.

6/8 Usability Testing for Text Resizer

Users played with early prototypes built with Framer that mimic the three interaction styles.

Because each designs has its constraints and strengths, we prototyped each of them to find out which one best addresses users' goal.

Single Buttons

Slider

Scroller

User Thoughts

❤️

Helpful and easy to understand

"Seeing the feedbacks directly on canvas when I pressed the buttons is enough"

All

8/10 satisfactory, task complete

User Thoughts

❤️

Adjusted the size more seamlessly

🙁

Sizes are limiting because there must be a max and min sizes on each side of the slider

All

5/10 satisfactory, task complete

User Thoughts

❤️

Adjusted size smoothly without any size limits

🙁

Took a while for them to know how to approach it, the buttons on the side help understand

All

8/10 satisfactory, task complete

7/9 Final Design III: Text Resizer Design

Testing results show that single buttons is a more suitable design, for all 7 users understood the purpose immediately, weren't limit to the min/max size, and successfully resized text size and text width with it.

8/9 Influences

Rolled out by 20% for the first month, and went 100% live.

43% of all users

and

55% of new users

that encounter the new text controller use it to control text size.

User funnel data from Amplitude

Release notes

9/9 Takeaways

What I learned from the project as a junior UX designer.

Designing for the skateboard version

When we are introducing a new feature, we could be advocating too much on the fancy version of the our own designs, but what users have to say is also important. Making an earliest testable, usable, and lovable design can sometimes benefit us in the long run.
‍

Seeing what the future holds
‍

Each changes we made will be taken into consideration for related future endeavors when designing for an app that is going to last. I realized that other than meeting user needs, it's always best to spare sometime to think about how the direction would be shifted because of the new feature.

Making sense of what the other functions have to say

As I was interviewing internal users from different functions, I learned that they all have different definitions and understandings of the feature and its naming. It is necessary to bridge between and prioritize different opinions.
‍
‍

All Logitech Maternity Care Companion PicCollage CookJam