sparklandingtitle DONE.jpg

Project Scope: Jul - Aug 2021

Role: UX Research, UI Design, Usability Testing

The Problem:

During animation productions, projects often end up going over deadlines or the initial budget, causing stress around the whole pipeline and harming the business as well as the team. Oftentimes the planning around the production is mismanaged or too rigid, causing delays and pressure on the production team and business. Having poor communication leads to an animation team that has a hard time following deadlines and production goals.

Project Type: Personal

Tools: Photoshop, Figma, Miro, Principle

The goals:

  • Improve animation project management for both producers and production peers by presenting a customizable, interactive web based management tool

  • Offer an easier way for animators to give and receive feedback on assignments

  • Give more control to animators on their schedule and goals

  • Improve transparency on animation projects for all the production staff

Project Overview

 

Spark is a specialized team management app for the animation industry that focuses on transparency and clear communication between everyone in the studio. Giving the staff clear, achievable goals, Spark not only helps the production team to understand what to do and how to work as a group, it also benefits the producer giving them a straightforward overview of the project, and gives clients peace of mind on their projects whereabouts.

Kickoff

 

In this project, we took a goal-directed design approach that proved to be quite effective in our design efforts. We found qualitative research methods to be the most useful, consisting of a kickoff meeting, literature review, competitive analysis, stakeholder interviews, and most important our persona hypothesis construction. We started out by asking ourselves some initial key questions.

  • What is the product and who is the primary user?

  • What are their goals? Why will they use our product? 

  • What do our primary users need most? 

  • What are their frustrations?

  • Just how large of a scope do I want this project to be?

  • How will the business benefit from it? 

  • Who do we see as our biggest competitors? 

  • How do people interact with them? Are there any issues there?


 

Animador Digital

1. empathize

1.1 User Survey

 

I conducted surveys to better understand how the users approach their animation projects regarding organization, development, follow ups and communication with other peers. Staff from both pre-production, production and post-production were interviewed, so I could gather as much information as I could regarding all parts of animation productions. Over 20 participants answers were gathered.

Research Goals:

 

  • I want to identify common challenges people face when trying to produce an animation project.

  • I want to understand how people organize and scope their projects and how that affects the pipeline down the line.

Target participant characteristics:

  • Professionals working in animation productions

  • Including workers from several animation departments (Production, as well as pre and post)

  • Include participants with different backgrounds and abilities

1.2 Affinity Map

1.3 Insights

 

95% of the users attributed their projects going over deadlines to having more retakes than planned.

 

70% thought production misunderestimated the complexity of the project

3/5 users had at least half of their projects go over budget / deadlines

90% of interviewees pointed better communication as one of the main solutions for better productions

Pain Points

​​

  • Lack of communication and clear workflow

  • Rigid planning with no space for hiccups

  • Lack of production knowledge when assigning deadlines

1.4 Competitive Analysis

 

In order to construct a concise and solid foundation for Spark, I ventured out to see what the prominent project management applications were already doing and what user goals they were not reaching.  There's no animation specific app that already exists, so I used my research and survey answers to find what tools were being used in the professional world. I evaluated several features deemed vital from user surveys and identified which ones Spark could capitalize on to have a leg up over other applications. 

 

 

 

I found that only one of the five main competitors offered a modern UI with clean data visualization. None of them had clear and accessible deadlines available for the staff to see, understand and follow. The communication possibilities in all of the competition are bare and lack feedback possibilities, a feature that was mentioned as desirable by 90% of the interviewees. 

"A production rationally scheduled has a greater chance of success and, if it is completed earlier, that will look great to the client. It's a win-win."
"Have strong communication with everyone so there's no one confused about what's going on. Artists shouldn’t be left in the dark"
"If a production relies heavily on things going absolutely perfect then it's a production set up to fail"
2.1 Prioritization Plotting

 

Plotting a list of the possible features onto a graph helped narrow down what was crucial for delivering the mvp and would could be built upon further down the road. We wanted to make sure we  would address all the main pain points we found during our research.

2.2 Personas

 

After gathering the research, It is now time to define the problems in more clear context. So we created Personas to get more insights and to gain a fresh perspective on the problem space from the point of view of the users.

Sofia, 34, Producer

"I'm super organized, I'm the friend that has all the plans A, B and C ready for our night out."

Sofia is an animation producer who needs to find adaptable ways to plan her budgets and deadlines because her clients are constantly asking for retakes on their projects.

Sam, 26, Animator

"I love my job, but I also want to have a life. Balance is so important to me."

Sam is a busy animator who wants more transparency in their projects so they can better organize their schedules around it and avoid burn out.

Cute-girl-playing-with-a-tablet-computador

2. define

3. ideate

3.1 How Might We?

 

Trying to understand what the app should focus on and what path to follow, I used the HMW method:

  • Have transparency between Production staff and artists? 

    • Having clear and accessible goals guidelines for the whole team

    • Possibility for everyone to see where the production stands on a daily basis

    • Have a accessible burnout / group and individual expectations graph available

  • Have adaptability to changes mid-production?

    • Add option to edit asset status, which will update the deadline

  • Create realistic deadlines?

    • Have more experiences staff adding difficulty to scenes, giving more time to more difficult scenes

    • Have feedback on the amount of scenes assigned to each artist

3.2 The Points System

 

One of the main problems I found with assigning scenes for animators was the discrepancy between expectation from producers and the reality of how long scenes would take to be done. Just assigning a number of seconds to animate per day doesn't quite work: sometimes short scenes have very complicated movements to be animated, taking longer than say, a long, static scene. 

 

Talking directly to a few producers during my research, one of them introduced me to their point system:  they would have the lead animator or animation director (someone with good animation knowledge) assign difficulty status to each scene, the more difficult the scene, the more points that scene would grant. After multiplying that difficulty number by the length of a scene, you would have the total points it would give the animator. At the end of each day, that number of points was added to the total of the project, allowing the team to have a better understanding of the overall progress and goal guidelines they had to follow. I decided to use that system in my project.

Flowchart.jpg

4. build

4.1 Lofi Wireframes & Flow

 

Thinking through the preliminary flow and basic functions, I made sure to only keep what was completely necessary at first, thinking we could have add-ons in the future, and what in those areas needed improvement. There was a lot of my time into this step to make sure I had the finishing touches on the underlying UX before moving onto the visuals.

press to zoom

press to zoom

press to zoom
1/2
4.1 Logo Design

 

As the Animation Industry is very creative and youthful, I was able to bring my whimsical style to the max, having fun with colors and curves to keep the playfulness of the industry. It was important to me to have a "mascot"idea to it, being able to animate it in several ways, marrying the brand to the concept of an animation specific app. 

sketchesicon.jpg
logoschanging.jpg
Mãos do homem no teclado

5. test

5.2 Insights and Iterations

 

Through an unmoderated test, the participants were able to perform all tasks without a problem. After talking to more producers to get their opinion and a  couple of different tries with the design, I modified the "Project Management" page slight to better accommodate all the information it needed in a clean and clear way. 

5.3 Final Designs
Mobile and Web 

 

Having both web and mobile based versions allow the user to have quick access to information they need, no matter the time or location they are. You can work with your web based app always open in the background, or just have your phone with you for a quick glimpse of what's next in your to do list. 

Friendly UI

 

I wanted to make sure the UI would be friendly and clean, while also providing the big amount of information necessary for the daily work life of an animator and producer. That was achieved by using white and gray as the main colors, while using spare pops of colors to bring attention to different actions and making sure to use negative space wisely.

Light & Dark

 

It's well-knows that bright white screens can cause strain to the eyes, so there's the option to have both a light and a dark version of the app depending on your preferences. 

sparklightdarkmob.png

As a fun little note, in the dark mode Spark, the character, wears sunglasses on the logo.

sparkdarklight.png
Starting Your Workday

 

Welcoming the user to the app, we have Spark, the little amorphous character that makes the logo for the app watching over you. He's used to bring personality and a little fun to the experience while also connecting the brand to the end user, as you can animate him in several different ways and styles. 

Easy and Always Available Info

 

Once you log in, you can see all the information that you need right on the landing page. With a simple white and gray UI using pops of colors, everything is laid out in a way that is easy to process and not overwhelming. I wanted to make sure the design would be friendly and laid back, but still display all the information necessary for the work day. I opted to have notes and longer texts like briefings in pop up's, so to not overwhelm the screen. 

5.4 Style Guide

styleguidespark.jpg
finaldesignex.jpg
5.5 Takeways / what's next

 

During the years of my animation career, on every studio I have worked for, I've heard people complain and ask for a better way to communicate and plan their work. Spark helps the connection between producers and animators, also opening doors for illustrators, riggers, you name it. I believe the animation industry would greatly benefit from such an app, and I wish I had something like that when I was a young animator struggling to figure out what was next on my ever changing schedule. I would love to develop the project further, creating more pages to each specific niche of the industry and test the prototype on a real professional setting to get more insights. 

. reach out on

logoforothermedias_insta.png
logoforothermedias_linkedin.png