Hilma
Mobile-native meditation app
Attend to your senses. Attend to your spirit.
How can a meditation app bring us back in touch with our senses?
The Challenge
The future is here, and… it involves a whole lot of screens. As we become more and more dependent on computers, tablets, and phones for nearly every walk of life, many users are facing screen burnout but lack habits that can help them disconnect and unwind. Is it possible for an app to help users find their way back to the world of the physical senses, and to find peace and presence through it?
The Solution
Hilma takes inspiration from Hilma af Klint, the 19th century Swedish painter who sought spiritual truth through abstraction in painting. Her work, which predates like-minded artists such as Kandinsky, went largely unrecognized for a long period before finally gaining widespread attention in recent years. Through a library of guided meditations that focus users on the five senses—sight, sound, touch, smell, and taste—Hilma will continue in the tradition of seeking peace and presence of mind through the vessel of the physical.
The Approach
This project began with a brief competitive analysis before diving into brand value development and visual guidelines. High fidelity wireframes were generated, then a storyboard was drawn to plan conceptual animation. Finally, screens were animated in After Effects to share with potential users, stakeholders, and investors.
Step 1: Competitive Analysis
Two competing meditation apps were analyzed to evaluate aesthetic design, functionality, and the overlap of brand values and visuals. These insights were used to develop a brand value statement and visual guidelines to set Hilma apart in a competitive marketplace.
Analysis: Headspace
• The visual style is abstract and friendly. Animations are full screen, have plenty of breathing room, and move slowly enough to produce a sense of calm without moving so slowly that the user becomes impatient. Each meditation’s screen uses slowly changing abstract animations to create a sense of organic movement and change. However, while the animations and visuals aid the meditation, the user can close their eyes and focus on the audio without missing anything central to the effectiveness of the meditation.
• Transitions between screens are primarily simple swipes, rather than overly complicated animations.
Analysis: Calm
• The loading screen fades into view with a calming nature scene and the peaceful sounds of chirping crickets, which immediately help me to slow down and relax.
• The home screen showcases a looping animation of a peaceful scene, and the theme color of the app is a deep, calming purple.
• When I click on the Discover button, I am brought to a screen which allows me to find meditations by time or by category (stress, personal growth, mindfulness, etc). I would like to incorporate time-based filters in my app, as well as categorical filters based on which sense the user would like to focus on as a way of bringing them into the present.
Step 2: Defining Hilma’s Brand
Collecting Visual Inspiration
With a solid grasp of competing apps’ value statements and visual branding, it was time to find inspiration for the look and feel that would set Hilma apart and convey it’s unique values to users at a glance. I collected images of Hilma af Klint’s moving and meditative paintings, along with the work of artists such as Wassily Kandisnky and Joan Miro, all of whom investigated the metaphysical through the physical. Not to mention great color palettes and geometry that I could use as the basis for my own designs!
Describing The User Experience
Hilma’s unique brand value was defined in three key words to guide UX and visual decisions: Contemplation, Presence, and Tranquility. Finally, a conceptual user story was developed to better understand the experience a user should have when using Hilma:
After a long day of work, Sarah is having trouble putting thoughts about meetings and deadlines away for the evening, and needs help re-centering herself so she can calm down and fall asleep. As she opens Hilma, a loading screen appears with slowly morphing abstractions that cause her to slow down and observe the subtle changes in color and form. The forms resolve into the home screen, and various options for guide meditations fade into view, each focused on a different sense. She sets the timer to five minutes and selects a meditation called “Envisioning Presence.” A chime rings and the screen fades to deep purple, then to shifting abstract shapes as a voice walks her through a meditation in which she is guided to observe the physical world around her as a series of concrete forms, colors, and shapes without naming the objects themselves. After five minutes, the chime rings again to signal the end of the meditation. Sarah feels centered, calm, and ready for bed.
Image credits, clockwise: Hilma af Klint, The Swan No. 17, 1915; Wassily Kandinsky, Figurines At The Great Gate, 1928; Wassily Kandinsky, Seven Circles, 1926; Hilma Af Klint, Group IX/UW; The dove No. 2, 1915; Hilma Af Klint, The Ten Largest No. 3 - Youth, 1907.
Step 3: Building Hilma’s Hero Screens
With aesthetic direction defined and core values in place, it was time to build out a series of wireframes representing Hilma’s key screens. High-fidelity wireframes were generated for Hilma’s preloader, main menu, library, and play screens.
Step 4: Conceptual Storyboarding
In preparation for conceptual animation, I sketched a series of storyboards to describe screen transitions and micro-interactions, a sample of which is shown below. Storyboards were refined and annotated based on peer feedback before moving onto the animation phase.
Step 5: Conceptual Animation
Finally, Hilma’s wireframes were imported to Adobe XD, where conceptual animation was executed. The final animation, shown below, will act as a tool to gather user feedback and to build buy-in with potential stakeholders and investors.
Ꝏ The Future of Hilma
Hilma offers a solution to users’ desire to refocus on the tangible world outside of Zoom screens and is well-situated to enter the market. Next steps would include prototype testing and collecting guided meditations to begin building the app’s library.