Tools used: After Effects, Sketch, Illustrator, and Procreate
Objective:
The primary objective of this case study was to design and animate the user interfaces of a meditation app.
Requirements included:
● Identify core brand values for the app.
● Design 3-5 high-fidelity app screens (including color schemes and typography inspired by brand values).
● Develop storyboards for user interface animations.
● Apply animation to the high-fidelity app screens based on the storyboards.
● Prepare files for stakeholder presentation and handoff.
Final User Interface Animations with Preloader
Demographics:
The target users for the meditation app are young people who're having issues with stress and want to find smart solutions to use at home and/or at work. They are from 25 to 40 years old and avid smartphone users.
Brand Core Values:
Peaceful, enlightening, light-hearted
Context:
Kasper is having a stressful day at work. At lunch, he takes five minutes to reset. He visits the App Store. He downloads the meditation app and is immediately welcomed by the peace-inducing colors and the gentle animation of the preloader. As the home screen appears, a list of meditations is presented with a gently staged animation that includes a fading in from lesser to greater opacity, sequenced top-down and left-right. Each meditation selection is accompanied by cartoon-style graphics with serene, smiling faces.
When Kasper taps on his choice, his selected meditation scales up and slowly arcs into its fullscreen position. The fullscreen graphic then begins a subtle animation loop, defining the character and mood of the selected meditation. Once again, the colors and graphics are light-hearted and the characters are smiling (whenever appropriate).
Kasper can also view recently played and favorite meditations. These lists are presented as graphics that enter the screen with similar pleasant staging as the home screen.
