Meditate • Sleep • Breath • Shop

Designing a new shopping experience for Calm and more

In this case study, I will dive into my design process from the very beginning and explore new ideas for a new shopping experience to expand the product line, increase subscription signups and enhance the users experience.  

Calm Story

Before I jump into any design work, I needed to learn a few things about Calm so I know what we stand for and what we are trying to achieve.

Calm Business Objectives

Learning about your users is important but learning about your stakeholders or the people you work closely with is just as important if not more sometimes. It helps clarify the teams expectations as far as design is concerned and address early on any gaps. It also helps me know exactly what I should be focusing-on. This is separate from the product and I see this as such a crucial part of working with teams and helps us communicate better. Which I think is really important.  

Calm Users & Customers

Who are they and what are they like?

Understanding behaviors and patterns helps us develop a deep understanding about who you are speaking to. It also highlights the real problems and opens-up new opportunities to make Calm more successful by discovering similar patterns, trends, needs/wants, behaviors and turn that data into solutions. I also see realize most startups overlook this process and it can be such an important piece of the design process, for all of the design considerations throughout the project.


What did we learn from our users today and how can we bring that data into our product? This also helps us from making the same mistakes.

62% of our users are athletic
Its clear theres potential there and we can start looking into adding a feature to increase engagement in that area and/or sell more active products in our Calm store and expand our product line.  
80% like oils and do yogo
We could look into selling our own yogo mats Fragrance, oils and incense is hot item right now26% Use medication supplements We can suggest/or recommend in our app, natural herbs and teas to those users and learn their preferences.

62% of our users are athletic

  • Its clear theres potential there and we can start looking into adding a feature to increase engagement in that area and/or sell more active products in our Calm store and expand our product line.  

80% enjoy oils and do yoga

  • We could look into selling our own yoga mats
  • Fragrance, oils and incense is hot item right now

26% Use medication supplements

  • We can suggest/or recommend in our app, natural herbs and teas to those users and learn their preferences.

Calm Personality

Describe in 3 words how you want people to feel when they use Calm? (one of my favorite questions)

This is an internal exercise to help me and the team understand who we are and what we’re doing. It also helps us align our vision and values with the company and brings interesting answers from team. Some answers are expected and you learn a lot. The general point of this and why I like to do this is; it keeps us more engaged and it gets the juices flowing! Happy teams, create better products and result in growth. It is also really simple and super effective. 😃

Calm User Flows

Consider what comes next (or prior). Learn and adapt different scenarios. Keep it simple.

Sketching the idea on paper (or whiteboard) is important and helps me quickly iterate improvements on the fly. It also helps me understand our current behavior on the app and lets us know how we can implement new features without breaking the current flow and helps prevent redundant conversations(this should be updated regularly). The goal here is to explore ideas based on the existing flow of the app so we can see from a high level where our users are going, from begging to end, and so we can make subtle and seamless changes without the users noticing(like a ninja🥋). I iterate quickly so I can share it with the team and explore more options. Sketch, print, post, iterate, repeat. 📝

Calm Wireframes

Keep it lightweight.

After exploring a few concepts on paper or whiteboard. I think about the alternative scenarios that could happen. In this case, I noticed we only have one main screen. The rest are treated as pop-up pages with an easy 'X' icon on the top right for quick accessibility to the home page. With that in mind, I kept that same behavior/experience. Remember, the goal here was not to redesign the app from the ground-up, the objective is to increase the experience and add something so powerful without the users noticing significant change. Otherwise, we could risk our reputation as an awesome product and hurt our business. Of course there are exceptions but in this situation and from my own experience, its something I always consider.  

Assumption: Users love the current flow, and prefer jumping in and out of 'rooms'.  This is good but over time, as the product line grows, we have to consider changing or separating the shopping experience so it doesn't take them away from the core experience and completes with the Calm shopping experience or it feels like another online store. There are so many ways this can go wrong and this might be more of a long term problem but its something to consider. My solution or suggestion is, to have a store or shopping experience entirely separate. We can add the button live in the profile page but it will redirect them to our mobile friendly web app instead and they can quickly opt back in after they're done shopping. I have many ideas and thoughts about this but we can come back to this. 😃

Meanwhile, after few discussions later with the team, I consolidate, make a few refinements based on the business requirements and start prototyping.

Calm Refinements

Now that things were starting to take shape, I want to take the time to perfect the flow, so that I get a sense for the edge cases that I would need to consider in order to create a seamless end-to-end user experience. Looking at this from a birds eye view helps me see all the gaps and inconsistencies.

This part is tricky and can get incredibly messy behind the scenes because you start to make so many changes in addition to the wireframes but its helpful to spot all the large or small changes I've made from the initial ideation phase.

  1. 1. Product Image [primary view]
    Easy carousel navigation
  2. 2. Dropdown Menu
    Quickly brows different categories within the same page.
  3. 3. Purchase Button [CTA]
    Fixed positioned and easy to access
  1. 4. Description
    Scroll up to view more without leaving the page and forces user to interact/commit
  2. 5. Add Items
  • 6. Recommendations from friends/family
    Assuming customers want this feature, we can add personalized data so users are more inclined to make mores purchases and increase sales.

Calm Shopping Experience

After multiple iterations, we narrowed down the last two options and decided Version A was the best option based on consistency and alignment with the companies vision.

Version A (chosen)
Version B

Final Improvements/ thoughts

I thoroughly enjoyed working on this development and I feel like there is-- a lot of potential to expand the product line and explore more possibilities around the shopping experience. I'm also really happy with the end result and simplicity of the check out process I came up with.

It's always interesting designing a product off of such little information, but I feel the journey always leads to interesting discoveries along the way.

In my eyes a great product is never finished. Design in its entirety is an iterative process that requires collaboration and exploration in order to reach a decision.

And with that being said even after writing this case study, I've already thought of a handful of improvements that could be made in order to make the product and its user experience even better.

Incorporating push notifications to let users know when new products are available.
Talk to customers and explore the website shopping experience versus native.
Partner with meditation groups and learn what products they use the most. This is also a great opportunity to expand our brand and increase subscriptions.
Send personalized 'moods' based on their history.
Sync meditation sessions. See locally or globally how many people are meditating and join. (I personally would love this)