Adobe Animate
MAX 2019 RELEASE
Animate CC is an animation and multi-media authoring software primarily used to create graphics for TV, cartoons, websites, games, etc.
CONTRIBUTION
Property panel : UI Header bar : UX + UI (end to end)
OBJECTIVE
To completely modernise the interface and optimise workflows primarily for novice users, while retaining familiarity and power for advanced users.
OLD INTERFACE
The Animate CC redesign
NEW INTERFACE
REDESIGNED
Workflow 1.0: Header bar
The first step was to align the header bar pattern to that of the CC system, to bring visual consistency across all flagship apps within CC. We then identified all the workflows we wanted to include in the header, like search, quick export, etc. and tried to interpret how these workflows could be customised as per our need, for animators.
Previewing docs on hover
Smart search
The search feature is especially under-utilised in the CC system and our aim was to focus on beginners and how we could make the search function assistive to them.
Before searching, the top hits would include 6 quick access tiles:
2 recent, 2 common, 1 last opened file, and 1 help tab for pros.
2 shape creation, 1 text creation, 3 tutorials, for novices.
Quick share
Our novice focus group consisting of fresh graduates, meme creators and other experimental artists enjoys publishing artwork directly on to social media platforms (like Youtube, etc.), so we decided to invest our efforts towards building an export experience which automatically adapts movies in accordance with platform recommendations.
(This is only for quick export, and not for creating movies by stitching scenes, which is an altogether different workflow.)
Workspaces
Animate’s usage by a number of versatile animators makes workspaces very customisable- authors like to set up personal workspaces according to their workflows. An interesting feature request was that of exporting and sharing workspaces, which especially helps animation professors and other serious animators share their libraries and workspaces with other co-authors or students.
REDESIGNED
Workflow 2.0: A contextual property panel
One of the potential risks of changing the architecture of the PI was the challenge of “muscle memory”- our advanced animators would be habituated to a certain workflow. At the same time, the tool selection and pre-creation property configuration (like setting fill color before drawing shape) within Animate was really not intuitive, especially for beginners. Hence, the design team had to take the precarious decision of introducing pre-creation workflows without impacting the muscle memory of advanced authors.
NEW FEATURE
An animation scene typically zooms and pans its view, shifting objects in and out of the stage to create depth- in this context, having a large scrap area is especially beneficial. Pro animators tend to use multiple monitors and draw on their primary device, with panels situated on other monitors, but novice authors cannot usually afford multiple monitors.
Workflow 3.0: Full screen experience
Our aim was to simulate a kind of multi-monitor experience using the full screen feature, where authors can turn on and off panels according to which part of their workflow they are in.
For example, authors can turn off all panels except the timeline while working on timings of their movie, versus having the tool and property inspector panels on, while drawing and manipulating shapes.
