Overview

Cactus is a mobile, social design tool for artists, anime fans, video gamers, and creatives. It allows users to create their own profile page and design it anyway they want. I built and designed the canvas tool interface from scratch and worked with two engineers to develop it. One of the most exciting parts about this project was the design challenges that came with building a design tool for mobile. There were many explorations, research, and testings done to make this successful. Below I will go through some of the main design challenges I faced, the requirements and constraints, technical considerations, my solutions, and the results.

Goals

Design a mobile design tool that allows people to creatively express themselves. 

Objectives

  1. Create a unique but easy to use canvas tool interface that was familiar, fun, and enjoyable.

  2. Design the experience to let them fully express themselves both visually, contextually, and through music.

  3. Build a community that was safe for teens and young adults 

Design challenges

  • Mobile constraints for creativity 

  • Balancing freedom to design anything you want with cohesion and understanding (templated guide for first page)  

  • Music integration and API limitations

Requirements & constraints

  • Canvas size (aka the mobile viewport) 

  • Prioritization due to resource and budget (a/b testing, usability studies, iterations, prototyping)

How it works

  1. Users can edit and customize their profile anyway they want.

  2. Users have 3 pages they can design (GIFs, stickers, images, music, text, color, etc.)

  3. Resize, pinch, rotate, or layout elements anywhere on the canvas

Designing the tool

Mobile constraints for creativity

My first challenge was determining the structure and layout of the canvas. Mobile viewports are small and limited compared to a desktop view which allows for a larger canvas size and more content to fit onto the screen at once. The goal was to design a canvas that was familiar, but also gave them the room to freely express themselves. I researched 10 different design tools and tested the top 3 most common layouts with 20 people.

Results from user testing

Infinite canvas:

Advantages

Canvas is infinite, allowing users to zoom in and out to create more white space for elements.

Disadvantages

With infinite possibilities, users get overwhelmed and it has the adverse effect. Pinching and zooming in to see content is tedious.

Vertical scrolling canvas:

Advantages

Fixed horizontal constraint, but vertical scrolling allows for a familiar user experience and more content to be creative.

Disadvantages

Certain sections + content on the canvas are not in view in the beginning, and depending on the amount of elements on the canvas the vertical length can be very long.

Single-page fixed canvas:

Advantages

All elements fit into the screen and is viewable.

Disadvantages

Content is limited, users felt underwhelmed with no ability to expand their canvas or add more elements.

Solution -> Single-fixed canvas but multiple pages

Balancing freedom to design anything you want with cohesion and understanding through A/B testing

The next challenge was understanding how much freedom vs. guidance the user needed to create and design their pages. Should the canvas be entirely blank, allowing for ultimate freedom or should they have components that allow for easy customization and design? And what level of guidance was needed to balance that creative expression with understanding?


I conducted A/B tests with two different formats, with the goal of understanding how much (and where) users needed help to design their pages:


  1. Blank canvas

  2. Templated canvas

Solution -> 1st page templated, 2nd and 3rd page are blank but with prompts for guidance. Through testing I learned the balance of giving them enough guidance, but still allowing room for creativity. I designed it so that the first page is templated with built-in info components, which allowed a good starting point and cohesion in terms of how all the 1st pages were laid out, and then the 2nd and 3rd page were left blank, but contained prompts to guide the user in terms of how they wanted to design the theme of that page.

Music integration and API limitations

Another challenge was implementing music into the canvas. I wanted to create a visual distinction between the squared components below that would bring forth the music element on the page, but API's had certain brand guidelines and restrictions that we had to work around.

I worked with the engineers to implement the music API so users could add a song to their page and researched and tested two different music APIs to understand the technical limitations and offer the best solution for the users.

Solving for the low API rate limit: I discovered by reading through their technical documentation that there was no rule against having multiple API keys, so I proposed to our engineers that Deezer API would be the better option as we could bypass the lower rate limit with multiple API keys but still get the flexibility to customize how we designed the component in the app.

Results

  1. 100 beta testers -> 20K beta testers in 2 months after beta launch (all organic WOM)

  2. 90% positive ratings

  3. Fun + unique experience for a social art board