OVERVIEW
Client
Goanimate.com
Project team & my role
1 UX designer
2 developers
I constructed the user stories based on requirements. I experimented with different interaction rules and designed the most effective approach in our context. I also wrote the design specifications and followed up with developers.
Timeline
2 weeks UX design
2 weeks coding
BACKGROUND
GoAnimate, with over 5 million users around the world, is a B- to-B cloud-based software that enables people to create DIY professional animated videos within minutes. While I was staying in Goanimate, our technical team was rewriting the program in HTML5 to replace the old one written with FLASH. Therefore, it was a great chance for the design team to review the product with a fresh eye, fix usability issues that we have known for a long time but don’t have the resources to fix, and open the door for flexibility and creative possibilities while remaining easy-to-use.
The “rethinking cropping” project was born under such context.
ANATOMY
Scene: a scene is like a slide in ppt. A video in Goanimate is the sum of many scenes played one after another.
Template: a scene with a backdrop, characters, props, and text pre-populated for users.This saves users time to create a scene from scratch.
FEATURE REQUIREMENT
The project started with the request from our template designers who wanted to design templates like these:
As we didn’t have product manager role in the team, I was responsible for the whole spectrum of product development processes, from problem investigation to follow-up of implementations.
PROBLEM INVESTIGATION
Internal perspectives
As there were no more descriptions other than the two photos above, the first thing I need to do is to understand more about the rational behind this requirement. To do so, I arranged a 1-hour meeting with the designer who raised this request. In the meeting, I invited her to talk more about how she would like to use this feature. Summary of this meeting:
1. We need a way to hide the content outside a frame
2. The frame and the asset inside should move together (like a grouped object) when being dragged around.
3. The frame and the asset inside should move together
User perspectives
After discussing with our internal staff, I changed to think from the users’ perspective. As a user:
When I see templates like those above, I want to easily swap the dummy character(asset) so that I can put my customised character or image inside.
PROBLEM DEFINITION
With both my colleague’s and the users’ perspective in mind, I was in a good position to define the problem.
I first developed some key terms to describe the system for smoother communication:
Then I listed out the 6 main controls that the user could have:
1. Select (and swap) the asset
2. Select (and swap) the frame
3. Select the group
4. Move the asset (independent of the frame)
5. Move the frame (independent of the asset)
6. Move the group
Obviously not all of them are of equal importance. Prioritisation is needed here so that the mainstream users would not be overwhelmed. Prioritised functions should have better discoverability and require minimum operation efforts.
In this case, I prioritised “select (and swap) the asset” over “select (and swap) the frame” and “select the group” because the main use case was users selecting templates and swapping a few key elements within the template. In regard to dragging and moving, I prioritised “move the group” over “move the asset (independent of the frame)” and “move the frame(independent of the asset)” because the composition of the group was well-designed in the template so the need to move either the asset or the frame independent of each other was low compared to moving the group as a whole.
The problem seemed to be clearer now: users need an easy way to select the asset and move the group. They also need to be able to select the frame, select the group and move the asset and frame independently, but in a more hidden way.
With further analysis, I found that the problem could be thought as a combined feature consisting of “grouping” and “masking”:
With this in mind, we don’t have 3 separate features to develop. Instead, we have grouping and masking as the basic logics and framing can be thought of the result of combing the 2.
COMPETITIVE ANALYSIS
As grouping and masking are both common features in creative tools, I chose 2 tools to analyse their interaction rules- Canva and Adobe Suite. I chose Canva as their product positioning was similar to Goanimate- both of them aimed to provide an easy-to-use tool for the non-professionals. I chose Adobe Suite because it lied in the other end of the spectrum- it was designed for professionals and thus provided maximum control for users. Looking at both end of the spectrum helped me to develop a better idea of how I could better design under our context.
Final solution
(to be continued!)
