UI/UX Case Study
MellowMind
Find your calm.
Meditation APP UI / Animation .
June 12 - Jul 11, 2024 | Jess Cope
Context
This is a project I completed as part of CareerFoundry’s UI animation specialisation course. I didn’t have much experience with Adobe After Effects when I started this project, so I’m proud of how much I learned along the way.
Introducing MellowMind, an on-demand guided meditation app.
Storyboarding
UI Motion
2D & 3D Animation
Logo Animation
Wireframing
The Brief
To design and animate the user interfaces of a meditation app.
Identify core brand values for the meditation app.
Create the branding for the app.
Design 3 to 5 high-fidelity app screens.
Develop storyboards for user interface animations.
Apply UI animation in Adobe After Effects.
Prepare files for stakeholder presentation and handoff.
Mid-fidelity wireframes provided by CareerFoundry
These mid-fidelity screens were provided in the brief for me to design my app from. I made a few UX changes that I’ll go over later in the process.
Where Did I Start?
In order to meet the brief I first needed to build a brand for my meditation app.
It needed to reflect the relaxing act of meditation and the expectations the user would have for pre-existing apps with this function.
After conducting competitive research, I settled on a calming colour palette, simple, flat design and slow, grounding animations.
Core Brand Values
Tranquil
Comforting
Calm
Designing the High-fidelity Wireframes
Using my tool of choice, Figma, I recreated the mid-fidelity wireframes image supplied in the brief. I then built and improved upon the screens, adding the new branding and making minor changes I felt would improve the user experience.
Collapse arrow icon added so user can find their way back, as tab bar not on this page.
15 second skip player control icons changed to 10 as more common and therefore more recognisable/ understandable to users.
Divider added to for definition between primary and secondary player options. The animation will also reflect this through parenting.
Profile icon change to profile picture to add personalization to the app.
Storyboarding
The next stage was storyboarding, which I had not done in this context before.
Using a template supplied by my course I was able to ideate the motion I wanted to apply to my screens, before committing to hours in After Effects.
Once I had gathered feedback (from my course mentor and externally) I updated my original storyboards, and proceeded to the animation stage.
-
When the app loads in and the user sees the home screen for the first time I wanted to make it clear, through staging, that the meditation session cards relate to each other but can be interacted with individually. So I had them all come in using the opacity property but with a 20ms staggered delay between them.
-
It was imperative I got the transitions between screens right, so the user could keep orientation, and not feel lost when using the app.
There needed to be a clear connection between screens and how the user can navigate between them, which is why adding a collapse arrow icon and a downwards exit motion to the player screen was so important to me.
Using Expressions
When I originally storyboarded this part of the player screen, I had not learned about AE expressions and how I could use these to speed up my animation process.
In the end I applied a Wiggle expression to make the shapes look like they are floating. I wanted the animation to be calming for the user, and therefore applied a low freq for slower motion. I applied the wiggle expression to both the position and rotation properties, and used null objects with slider effects to control multiple shapes at once, and keyframe when the expression should start and end.
The Challenge of 3D Animation
Part of the brief was to include 3D animation of some form to my app. I originally planned to make the pause/ play icon morph 3D, but decided against using it in my app as it doesn’t fit the visual aesthetic or the brand values, as the app is more of a flat design and the 3D icon is too dramatic for a calming meditation app. Therefore, I reverted back to the 2D icon as not to take away from the user experience.
Stakeholder Feedback
This is the 2nd iteration of the icon storyboard as I received the feedback; “I think I need more steps to understand how one changes to the other.”
3D Animation, the Solution
To fulfil the brief, I instead applied the 3D animation to the transition between the ‘home’ and ‘my library’ screens, which was previously just a simple movie in/out transition. The 3D flip adds more depth, and helps to translate to users they are moving away from one screen and going to one just “on the other side” helping to keep orientation and improve the clarity of the UI.
I managed to only use 2 keyframes to achieve this animation, by linking the layers to one parent layer.
Parallel Lighting
I added parallel lighting to create more depth to the animation, not just on the tab bar transition but, when the card opens it helps to show the user that the meditation player is overlayed and collapsible.
Another objective was to design and animate a logo to act as a pre-loader when a user opens the app.
I decided to create a reveal, morphing and storytelling style logo animation:
Reveal - The app name and strapline enter the screen letter by letter.
Morphing & Storytelling - the sound wave morphs to someone meditating, letting the viewer know that this app has audio meditation sessions.
Logo Animation
“It’s not that clear that those are ‘m’s in the logo. Perhaps make the ‘m’s in MellowMind the purple and blue too.”
User Feedback
“I want to suggest giving a feather feeling to the borders of your logo animation, it is suddenly cut now, so it is not in the direction of the core values of the app. If it is slowly fading away, it would be much more of a match.”
Mentor Feedback
Project Reflection
-
The storyboarding stage worked really well for ideation and feedback/ testing. It allowed my designs and ideas to quickly evolve without spending hours making those same changes in After Effects. Also learning how to use null objects to control multiple layers, with minimum keyframes, was a huge time saver. And I really enjoyed learning how to optimize my time in After Effects through shortcuts, expressions and plugins.
-
As this was my first time ever working in Adobe After Effects and adding motion to my UI designs, there is a lot I would probably do differently next time, as I continue to learn.
For example, I’m not completely happy with the way the 3D transition turned out. I think this will improve as I continue to work with lighting. And I also feel my timing will improve with time, as currently the Logo animation feels a little too long as a pre-loader.
-
I think in a future iteration, it would be cool to animate different mobile gestures, such as swiping from the ‘home’ to ‘saved’ screens and scrolling through the meditation session cards on the ‘home’ screen.
It would also be nice to demonstrate more icon animations, such as when a user saves a meditation session by tapping the heart, what that would look like. Or when the search icon is tapped, would the text field slide out from the icon?
Let's Connect!
Drop me a message with some details about who you are and what I can do for you, and I'll get back to you soon.