COLLAGE

PURPOSE

To prepare for the sunsetting of Flash at the end of 2020, PicMonkey launched it’s web app on a new platform in 2017. One of the big product initiatives was looking into migrating users from the old platform to the new platform.

Target user:

Old PicMonkey Collage users who have not migrated to new platform.

Why build Collage?

  • Migration effort: 46% of users who are using Old PicMonkey have used Collage.

  • Customer feedback: Customers continued to request Collage tool in the new platform that Old PicMonkey offered.

  • Google search result performance: “Collage” term ranks highest in impressions. Collage landing page ranks third in impressions.

  • Product Improvement: Integrate Collage with the Editor, allowing for more powerful edits.

MY ROLE

  • Lead UX design and research efforts

  • Partnered closely with Product Manager on defining MVP

  • Collaborated with Dev team

  • Partnered with UX writer

  • Helped QA team with bug bashing

  • Post release monitoring

PROCESS

INSPIRATION

We closely examined the Old PicMonkey Collage tool to understand what users loved about it and also to learn how can we improve this beloved tool. We took a look at competitor tools, both web and mobile, and we were interested in making a differentiating product since the market is saturated in free collage/layout tools. Collage was a standalone tool in Old PicMonkey but we were decided to integrate it in our design/photo editing Editor tool to stand out from competitors.

We also took a look at use cases, we looked at designs that our users were creating in the old tool as well has current design trends.

Collage tool in Old PicMonkey

IDEATION

After gathering initial data, we came up with a list of interactions we want to support for MVP. i.e. resizing a cell, adding a cell, filling a cell, deleting a cell, etc.

Improvements we would make from Old PicMonkey:

  • Flexible cell resizing

  • Flexible Layouts - Old PicMonkey would change the canvas dimension if you selected a new layout. New PicMonkey adjusts layout in the canvas sized you defined.

  • More content types supported - Image, color fill were the only supported content types in Old PicMonkey. New PicMonkey supports image, color fill, video, and. GIF in collage cells.

EXECUTION

Using PicMonkey Design System, I was able to mock up prototypes that demonstrated flows. This project was launched, designed, developed during the 2020 quarantine and we had to get creative on collaborating without a whiteboard. I created a lot gifs to demonstrate how some of these interactions would work as well as providing a detailed documentation for the dev team. The product manager and I involved the dev team early on during design phase and met weekly, sometimes multiple times a week. This helped with figuring out technical feasibility, working through edge cases, and when the design dev handoff happened, the dev team was able to jump in with minimal questions. I also partnered with the UX researcher a few times during the design phase to understand user expectations and to see if the direction I was heading matched users’ mental models. Collage UX Research findings

Dev Handoff

Example documentation provided to Dev team:

I also prototyped most interactions so dev team could visually see what was intended. Prototypes were exported as GIFs and added to hand off documentation.

Gifs were provided to demonstrate interaction and to support documentation. These gifs played a crucial role while working remotely.

DESIGNS

Old PicMonkey - Resizes whole column when resizing cells

New PicMonkey - Flexible cell resizing

Old PicMonkey - canvas size resizes as layout is changed

New PicMonkey - Layout fits to defined canvas size.

CONCLUSION

After initial launch, we measured:

  • Look at analytics to see adoption rate of the new collage tool - we saw a 42% growth in Collage since launch.

  • Usability and successful collage creations by watching FullStory and monitoring customer feedback from support and social channels.

  • Google search result conversion: Impression-to-click ratio for “Collage” search term and collage landing page performance, conversion down funnel

From the measurements, we fast followed with resolving usability issues seen from FullStory and customer feedback. We are continuing to monitor usability issues, measuring adoption and exploring improvements.

LEARNINGS

  1. Working remotely is difficult, especially for a visual tool like Collage but it can be done with communication and creative collaboration techniques.

  2. Early dev involvement meant better alignment and development efficiency.

  3. Don’t stress about edge cases, focus on the happy and majority path that users will take.