HARIMAU

— Motion Design, UX

HARIMAU is a self-initiated project that's targetted at creatives who are looking for relevant motion design or animated references to help communicate their concepts.

What started as a frustration among many of my peers began to look more and more like a common phenomenon. Here's a take at a possible solution and hopefully, eventually, a smoother process to collecting references.

Initial Problem Discovery

Sound familiar?

Creatives need relevant references but they either don't know where to find them and/or don't know what to search for. What we would call 'Posterize Time' they would say drop frame or stop motion style. That understanding helps go a long way with getting search results, but we can't nor should we expect the rest of the industry to know slightly technical After Effects....effects?

If they don't know how to search or what to search for, they'll get results that aren't inline with their concepts and that snowballs into a presentation that requires a lot imagination from the client.

The Problem

Creatives struggle to find relevant animation reference to sell their concepts to their client.

Research

I did an initial round of research which led me to a whitepaper around search intent.The core insight pulled out of it was the relationship between the words used to search and the expected result. You could certainly drive several assumptions and examples in real-life from that. Getting your food order wrong, taking a cab and it stops are the wrong place or asking questions but getting unrelated answers.

It drives down to intent;
A user is specifically looking to find information relating to the keyword(s) they have used.

Whitepaper
Utilizing Search Intent in Topic Ontology-based User Profile for Web Mining
Queensland University of Technology, QLD 4000, Australia

User Interviews

I then conducted interviews with 11 of my peers and ex-colleagues whom represent the target audience about the situation and their experience with finding references.

Several questions I asked:
"When was the last time you had to search for reference?"
"Have you ever outsourced the searching? and what were the results?"
"What was your process of doing so?"
"What was the most difficult part of that process? Why?"
"Were there times where you got exactly what you were looking for? 

This returned very interesting responses that supported and gave a deeper understanding to their expectations and frustrations.

Several lines I pulled out were;
"I want to find really specific results"
"I  sometimes don't know what keywords to use to search"
"I don't want to waste time watching the whole video to not find what I need"
"Thumbnails either hide or sell the wrong thing in the video"
"It's a time sink to download, editing and then exporting the relevant clip"
"I get too many results then I need to dig deeper and usually waste time going down the wrong rabbit hole"

Insights

From the user interviews conducted, I collected and categorized their responses into 3 main buckets.

#1 Domain Knowledge

Creatives use vague and loose words to describe what they're looking for, often resulting in search results that stray from their intent.

#2 Time Constraints

Creative feel they waste time when they have to watch a 2 minute video just to find 3 seconds that is relevant to their need. Often times having to watch multiple videos that don't result in anything useful.

#3 Elevated Results

Sometimes they hit the jackpot on their search on the first try, intentional or otherwise. This let's them continue the momentum and move into the next stage of their work.

Persona

Jonathan

29 / Art Director / 7 years Work Experience

Common Behaviour
- Googling for motion design reference
- Downloading, editing and exporting clips
- Takes the clips to create sizzles or presentations as part of a bigger pitch

Challenges
- Doesn't know the right terms to search for
- Takes too long to find relevant references
- Too much guesswork. Thumbnails to videos might not be accurate to the content.

The Design Brief

How might we simplify the search process for creatives when looking for animated references?

Design Concept Solutions

One of the considerations that led to this was how this could fit into the creative's workflow.
This meant it had to be accessible at any point of their day. Be it at home, on the long train ride or at the office.
From there, a chatbot or a website seemed like natural solutions.

Chatbot

- Conversational
- Easier integration to workflow / work environment
- But could make the user feel less in control

Website

- Easy to understand / No new patterns to learn
- Browsing a library
- But user could feel overwhelmed by options

Critical User Journey

With the persona defined, crafting the CUJ then anchored and streamlined the experience. Allowing for some pretty neat explorations and discoveries.

Wireframes, mockups and a decision

Designing the user flow then felt more intuitive. I explored both concepts, chatbot and website, taking them to a certain point before I dropped the website.

As I spent time designing, the interaction of a chatbot for this use case became more natural a solution. It almost mentally functions like your 'colleague' in this scenario. The magic would be in how the chatbot would take your keywords and return something in line with the intent of the search. Maybe artificial intelligence would be a big boost here.

Motion Design

I enjoy this part of the process the most (also it's my livelihood lol). Exploring how items and objects would move is ridiculously fun. I entered the animation process by first making sure the elements flow in a manner that doesn't confuse the user. Then adding in a layer of response by tiny bumps when the user clicks on a button or a slight tilt when grabbing an item. 

Full Sequence A

In this version of the solution, I explored how Harimau would return 3 results based off the user's keywords. Ideally it should come off as a 'curated' search result. If the first set of clips are close to what the user wants, an option to '+1' to one of the clips would then return another set of 3, which are visually similar. 

Full Sequence B

I explored another solution in the way of a drawer to the side of the chat. Offering 6 clips instead of 3 and deleting the ones that aren't relevant. The mental model of 'discarding' vs 'adding' might be interesting to examine further. I kept the animations straightforward to communicate the actions clearer to the user, considering that it happens over content.

Parsing Text 01

One of the challenges was to communicate that Harimau understands the messages sent by the user and can pull out the appropriate keywords, within the context of the message. I started out with the idea of a line parsing through the text and bolding the keywords but it looked way too 80s. That associated animation would affect the impression of a smart chatbot.

Parsing Text 02

In the next iteration I tried having the keywords pop up under the message. This does serve the purpose of having the user know it's message is being read and understood while providing feedback that it'll search for clips related to those keywords.

Parsing Text 03

While what I had served it's purpose, it still lacked a somewhat analog equivalent for the user to pull from. Taking a note...from note taking, people tend to underline or highlight keywords when studying or looking through documents. If the animation could portray Harimau in that 'more human' perspective, it would further show itself as a low-friction experience. Harimau is your go-to colleague for references, not some AI you have to re-write your prompts to get working.

Loading Animation

An opportunity for something a little more fun here. I went with the Harimau itself on the 'hunt' for the clips. It was an appropriate scenario to tie back to the user intent for the search.

One version of the loading animation was to go with a kinda tongue-in-cheek execution. Harimau's paw literally is collecting references. While kinda funny it wasn't super 'on brand' and I decided against it.

Another solutiton was to have Harimau looking around, to sell the idea that it's on the lookout for clips. It came off as too passive instead.

In the third iteration, Harimau leaping from bush to bush on the hunt. It felt purposeful as compared to the previous two, plus the movement was more satisfying as well with it taking a bigger motion on screen.

Dark Mode

I did a test for a 'dark mode' to make sure that the animations were still legible, considering the blacks used on the Harimau.

Reflections + Takeaways

Overall it was a fun exercise in what is deemed to be a common issue faced by many creatives. If I had more time I would spend it on;

1) Deepen understanding of how we search and how we process and communicate shorthands to explain things we don't know the words for.

2) Creating an information architecture around what exists in animation. Might be useful to coin terms similar to how live action does. This could help to foster a common language that would inform the user in the future.

3) Exploring how to present results that would be more beneficial to the end user.

A takeway from the project would be to have a stronger emphasis on the foundations of the process. I felt at times I strayed in favour of an 'interesting' interaction and skipping steps to get to the mograph. I guess this is how you end up with polishing a turd lol.

On a side note, I'm slowly building a MVP version of Harimau on wordpress to build a reference library for myself. It's far from done but hopefully(after 1000 entries?) it would prove useful to others as well.