Choose the user journey

Keyboard Shortcuts

A user journey is the route we'll take through the app, getting from Point A to Point B. Andy Needham, motion graphics artist and animation director discusses the user journey using the sketches we created previously, allowing us to focus on what we need to animate and what interactions will motivate the user journey.

- [Voiceover] If like me, you use afitness tracking app regularly.You'll be familiar with the concepts ofcounting steps, monitoring heart rate,distance traveled, calories burned,floor climbed, tracking weight, sleep,water intake, calories consumed, and more.These apps are pretty fully featured.It would be beyond the scope of this courseto design that many screens,so it's important to choose a user journey.A user journey is route through the appthat a typical user would take.So let's look at our sketches and choose some key screens.

So what we've got here, what we're looking atis some more sketches that I've doneand I've kept them fairly still.We are going to see how we would get fromone point to another.So let's just reveal our layers here,and I've got this layer called Journey,and if I click the eye, we can see some interactions.So these arrows I'm thinking we're going toswipe to begin with.So we're going to swipe across,which will reveal more tiles,and we can see a bit more about the heart rate,the distance and things like that.

And maybe we'd swipe back to get to here,to the steps again,then we would tap on steps,and this would reveal the next screen,and we would be able to scroll this screenand see what steps we have in detail.What we've been doing through the past week and so forth.Then we would tap on our friends icon in this footer hereand then we can see our friends who we have in the app.And that's just a typical way ofgetting from one point to the other.And now we have a rough idea of what our animation will be,we can focus on designing just the screens we needto get our point across.

Resume Transcript Auto-Scroll

Author

Updated

5/17/2018

Released

6/6/2016

Most apps follow the same interface design principles—principles defined in the iOS, Android, and Windows Phone specifications. Prototyping your interface with tools like Illustrator and After Effects can ensure your app meets platform guidelines and help you resolve usability issues before going through a lengthy development cycle.

In this course, Andy Needham shows how to create an app interface from scratch using Adobe Illustrator, and then take the finished design into After Effects for animation. This is a start-to-finish project, going from concept sketches to the final product (an animated GIF). The prototype will showcase the navigation and interactive aspects of the app interface and can be used for marketing or gathering client and user feedback.