ROLE

INTERACTION AND MOTION DESIGNER

Project Overview

Help to create Innovative, intelligence, meaningful, insightful, delightful interactions for the new Samsung Galaxy S8 Mobile.

Design the best in class Human interactions, focusing on building from google material designs with the aim to be better than both google and apple.

Creating interactive animation's to help guide the user flow through the product aided by the user's cognitive load. With simple, clean and effective learned behaviours.
My Contributions

Creating interactive animation's to help guide the user flow through the product aided by the user's cognitive load. With simple, clean and effective learned behaviours.
‍
Prototyping motion and interactions of the user's touch points. Getting the prototypes out to users so we can quickly identify issues and areas to focus on. iterating fast was vital with a very short deadline we could not effort to wast time or effort.

Working with developers to iterative rapidly to produces perfect interactions at a fast paces.
THE PROJECT GOAL

"Beat Apple in Sales and be the best Android phone in the market"

The Challenges

The biggest challenge was the time frame - we had just over a month to finishes all the interactions for the release date.
‍
Aiming for perfection - this is something i try to expire to-do every day but with this project we had to be ruthless in our design and decisions and challenge everything. Trying to do this with the time frame was hard.
‍
Sign off - all the interactions need to be signed off by both US and Korea. they didn't always agree.
‍
Prototyping - i've made many prototypes but with the time frame and the fact that none of the interaction where not of the box it took time to build them. In the end i used after effects as it was quicker and more flexible.
The Team

The team was made up of two UI designers, one of which was more focused on iconography and the other interface design and a interaction designer (me). As the interaction touched all department there where multiple teams of developers (15-20 in each team), producers(product owners) and stakeholders for different aspects of the product.

We worked with an agile methodology and was imported to fail fast, not hard. The pace of work was fast, and the bar was set very high. I had to create sketches of the motion flows quickly and prototype them in after effects/principle so we could test with users.  At the end of the day, we would aim to test at least three interaction with users and some time multiple iterations on the same day depending on the learnings.

GALAXY S8

The Galaxy S8 pushes boundaries and overcomes limits
to create a single, unified design that is more straightforward
and concise than any other tool that has ever been held in our
hands. All experiences come into unison through the Galaxy S8,
helping users advance toward discovering a new meaning
of their daily lives.

Let's take a closer look.

Motion Principles

Getting started, I had to understand where and what needed work quickly. I Working closely with Designer and Developers to make sure we are all aligned and get the best outcome. Then produced quick sketches of the motion flows to test with users for feedback.

Informative

Motion shows spatial and hierarchical relationships between elements, which actions are available, and what will happen if an action is taken.

Focused

Motion focuses attention on what's important without creating unnecessary distraction.

Expressive

Motion celebrates moments in user journeys, adds character to common interactions, and expresses a brand’s personality and style.

GETTING STARTED

Getting started, i had to understand where the what needed work quickly. I worked closely with Designers and developers to make sure we where all aligned to get the best outcome. the produced quick sketches of the motion flow to test with users for feedback. the aim was to get into a rhythm of iterating fast and getting the balance of intergrating some of the elements that we know where good to go.

CALLS

Making a call should be a simple and low cognitive task for a user. Users should be able to multitask between creating calls and/or searching there contacts.

Call someone always feels a bit of a broken experience. we wanted to come up with an interaction flow where the user can easily transition from contracts to call a new user. It need to be seamless and playful meaning we wanted it to feel nice to interact with and not break the users context

Interactions (motion)

Iterations

This Animation showed the icons transiting from New Call icon (same as hide) to a dialer call icon. A lot of user found it odd that the New call icon and hide icon looked the same but the hide button moves in when the transition from New call to the call button.

Iterations

When testing the user felt that the animation worked well. Looking at the user reaction to the animation they liked an more importantly the played with the animation. they like the motion between the hide and call icons
TESTING
This is the final demo of all the animations together
We tested daily with users around the office (but not related to the project) due to the fact that the interaction need to work for all demographics

USER CONTACT

How can we make finding a contact easier, better,  quicker and more intuitive that the rest of the mobile market?

We identified contacts as somewhere were we could make an impacted in the market. We looked at iPhone and Google products and came up with a flow that would improve the users experience and at the same time be better in the market

Interactions (motion)
Developed
Finding a contact can take time and get a little annoying scrolling forever.

We created a quick-finder interaction that user can find a contact quicker and easier then before.
After testing multiple variants of interactions with users we signed off the interaction for the Development team to start creating.

Above is a test/UAT video on a real device final demo of all the animations together

APP NAVIGATION

How can we make change App in less touches but yet not break the users context of where they have come from and going to.

Switching apps has always been a tricky thing to do. We came up with a much more comfortable and quicker way to navigate through the user's app's. Here are some iterations.

Navigation is the act of moving between screens of an app to complete tasks. It’s enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances.

‍

Interactions (motion)
Developed
Switching apps has always been a tricky thing to do. We came up with a much more comfortable and quicker way to navigate through the user's app's. Here are some iterations.
The development teams followed my specs (Easing) for creating the animation/Interactions, but it was great to sit with them a tweak the easing and timing of the interactions.

APP MANAGMENT

How can we make change App in less touches but yet not break the users context of where they have come from and going to.

Grouping Apps is important to a user, we looked into how we could make it simple and easy to great custom groups. The idea was to make it very quick to create, so all the user need to do is drag to apps together to automatically create a group. the user can then add a name and a color if needed.

Interactions

The motion needed to be fluid and feel like it was opening up to reveal more without losing the users context of where they where are how to get back.If you look at the motion of the Transitions the motion is always anchored to the point of interaction. so from a cognitive load stand the user knows that where the action is from and know what will happen next. its reinforcing the interaction.



















‍

App interactions

Removing and moving Apps is a common task for users, its where a lot of user get confused, frustrated or lost with some interaction flows. We tried lots of variants to see what the user felt right and was the easiest to do.

Interactions

Editing Interaction

This is an example of the animation for when the user has actioned edit mode
Moving Apps

An extension to the animation before, this interaction is when a user wishes to move the apps around on the grid. its the same interaction but the user can move the icon instead


‍

Interactions

Ease Function Animation

Spec's:Motion:  
Expo ease in/out.
‍
CSS transitions:
all 200ms (easeInOutExpo)
The motion needed to be fluid and feel like it was opening up to reveal more without losing the users context of where they where are how to get back.If you look at the motion of the Transitions the motion is always anchored to the point of interaction. so from a cognitive load stand the user knows that where the action is from and know what will happen next. its reinforcing the interaction.

Messaging

Samsung did a lot of research about the cognitive load of messaging notification of different Apps. The user where confused by the messages appearing looking the same. So we created different animations, sounds and visuals for different kind of messages.

‍

MENU BRACKDOWN

Closings Interaction

Closing an application will return the user to the menu, the Application returns to the position where the app icon is stored. This Animation conveys that the Application is closed and back to the original state.The animation helps with a user cognitive load, this means the user will remember where the application is stored due to the motion.

Menu Transitions

This is my favorite Interaction animation, Dragging the menu up for the bottom is not a new interaction, but for a psychological view, the way the user interacts is clean which helps purveys a quality product. The home screen scales back and fads out when the user swipes up, and the menu moves up and fads in. This interaction can be quick or slow depending on the users choice.

Press interaction

It's a very Small detail animation but its all in the details. When the user selects an application the icon pushes in a little bit in, this gives the user the feedback/context they need to understand they have selected it.

TOOLS

Rapid prototyping

The After effects Design flow

I use to plug-in's to called Flow and Squall, Flow helps create custom easing, so when I create easing I like I can save it and use multiple times. Squall is a great tool, it turns my animations into the code. So all I have to do is show the developers the code and they know what I'm after.

AWARDS:

Samsung Galaxy S8 wins Phone of the Year 2017

World Congress (MWC) Shanghai

best smartphone of 2017.

EE Pocket-lint award 2017.

TAKAWAYS

I'll be honest. I look back from where started with this project we came along way in a very short time. We had to push for perfection and learn quickly from users. I enjoyed the challenge.Producers were critical to this project; they help with giving us space to work, which meant fewer meetings so we could get on with the project. We did have daily reviews/feedback session of the prototypes so that we could iterate quickly
‍
I've been using After effects, and this is the first time I've prototyped entirely using it. It gave me the flexibility to build out interaction rather than trying to break a prototyping tool to make the interaction. It was also quicker to iterate and test.