Modern OM, Redesign Case Study

Kayla Campbell
UX Station
Published in
9 min readJan 7, 2019

--

Modern OM was Established in 2015, Modern OM is a lifestyle brand that uses color to infuse the seven chakra-based intentions into its products. Recently the company has made the decision to make community based classes and events their main selling point.

Preface

Modern OM already has a website through Shopify where their users are able to purchase merchandise as well as tickets to classes and events. Modern OM has seen relative success since its establishment in 2015. However, since making the transition from a product to a service based business model the business owners have noticed some problems with the user flow through their platform. They have noticed an increase abandoned carts, and users complaining about accessing event information.

My goal is to investigate these concerns and understand why Modern OM is experiencing this.

Scope

Modern OM has expressed that they are looking to develop an app for their users and a website refresh. Since this work will be done over a two-week sprint I will focus on reworking the website since the product already exists.

Preliminary research

I was looking to understand Modern OM’s position in the Miami spiritual Atmosphere. So I did some market research to better understand their current positioning. In Miami, there is one other main meditation studio that directly competes with Modern OM, they were established in 2017 with the intention to give people an open space to practice meditation. They offer a variety of classes and events for their users, they also offer an application for their users to access via their mobile device.

There are other companies that indirectly compete with Modern OM’s Business model such as Green monkey (they do meditation through yoga, and is the founder's old company), and Skanda Yoga Studio. I also compared Headspace because of its accessibility and popularity. While they offer a convenient model, the fact that they are a completely digital platform they do not encourage a community atmosphere.

Lean UX Canvas made on Real Time Board

After filling out the lean UX canvas I was left questioning, What are the user’s goals when using the Modern OM website? How do they learn about Modern OM? What is the main point of contact with Modern OM?

With this tool, I was able to draft a hypothesis and some success/ failure metrics to set the overall goal for this redesign based on the business problems.

User Research

Before testing Modern OM’s website, I was able to attend one of their events. I met with four users and one employee named Chris.

while gathering data from users the general consensus was that they enjoyed what Modern OM offered, however some things I noticed were:

– Some of the users interviewed did not know that Modern OM has a website.

–The main point of contact with users and Modern OM is Instagram.

– Many people find that the event details are too vague and people are constantly asking for clarification on the location and time of the event.

– Modern OM is looking to grow their membership while simultaneously keep their classes and events intimate.

After looking over the data from the event, I understood that Modern OM is adamant about upholding a community culture that encourages people to connect through group activities.

Unbiased Users

I decided to interview three users outside of the Modern OM circle to get data that hasn’t already been influenced by Modern OM. I collected data from three people who would fit Modern OM’s target audience.

After organizing the data from the unbiased users I understood that despite strong differences between both groups there were also strong correlations between the two. Here are some interesting quotes I collected.

Overall users reported that meditation makes them feel good and helps them deal with stress and anxiety. Similarly, many users reported that meditation helps them be a better person in their professional and personal lives.

The Existing Website

I wanted to get a sense of the users' workflow when signing up for an event. To gather this data I did some testing with a user who has not come into contact with Modern OM (so the results will be unbiased). I tasked her with booking a free event through their site via mobile. I asked her to do this on her phone because “In 2018,52.2 percent of all website traffic worldwide was generated through mobile phones, up from 50.3 percent in the previous year.” Here’s a graph that illustrates this.

<a href=”https://www.statista.com/statistics/241462/global-mobile-phone-website-traffic-share/" rel=”nofollow”><img src=”https://www.statista.com/graphic/1/241462/global-mobile-phone-website-traffic-share.jpg" alt=”Statistic: Percentage of all global web pages served to mobile phones from 2009 to 2018 | Statista” style=”width: 100%; height: auto !important; max-width:1000px;-ms-interpolation-mode: bicubic;”/></a><br />Find more statistics at <a href=”https://www.statista.com" rel=”nofollow”>Statista</a>

Modern OM Moblie landing page

I asked her to describe her thoughts out loud as she completed the task. Upon arriving on the landing page, the user immediately expressed her confusion at the unlabeled icons, as she scrolled she then questioned why she was only seeing merchandise to purchase and not events. Unable to find the content she was looking for she scrolled back up to the top of the screen. She stated that none of the icons looked like event icons she selected the hamburger menu.

From here she questioned the need for various menu items for buying jewelry, then clicked on Meditation Programs. She then clicked on “Full Meditation and Workshop Schedule” because it seems closest to what she was looking to do. This brought her to the list page. The user explained that the list feature was a bit overwhelming to look at.

The user explained that the list feature was a bit overwhelming to look at. (however, there is a filtering option on the left where she could’ve organized the events to suit her).

She selected an event for the coming Friday and followed the Shopify checkout process. I asked her to recall the date time location of the event she selected, which she was able to do without any issue.

After completing the booking process I asked the user to check her e-mail to see what the confirmation would look like. When looking for the email in her inbox she was unable to find an email labeled Modern OM, that is because the confirmation email was sent under the founder's name. When she opened it, this is what she saw.

The confirmation email did not reinforce any information that would be relevant to the user. I asked her again to recall the information about the event and this time she stumbled a bit in recalling, but was able to correctly recall the date time and location.

After 6 hours, I asked my user to recall the details of the event she signed up for. All she could recall was that the event was on a Friday, and guessed at all the other times. She had to search between the modern OM website and Google maps to find out the exact location and time. She had to click 15 times to get the information she needed.

Affinity Map

After transcribing all of the data from the users that I collected I organized them based on habits, motivations, and pains. This is where I drafted some questions for myself.

How might we statements

This is just one more way I fully immerse myself in the mindset of the user’s needs and ideate based on that principle.

While ideating possible features I considered Impact versus effort and what was realistic to execute in the allotted time I had.

My minimum viable product would be…

– Clear Event Signups

– Event Notifications

– Shopify Purchasing Process

– Community Focused Homepage

Why these features?

I am choosing to focus on these features because if we refer back to the success metrics and the established business structure. Modern OM uses Shopify to do all its’ transactions, so making sure that we create a product that they are able to implement is imperative to the success of this sprint. Also, as demonstrated with the booking test the user needs clear event sign-ups and notifications that inform them of the nature of these events. I’m including Community focused homepage because, when the user arrives at the landing page it feels out of place to see merchandise as opposed to content about events and their membership program.

Persona

Theresa represents the fears, pains, desires, and motivations of Modern OM’s target audience. She is a person who isn't super serious about meditation but is willing to give it a try to help improve her life.

Creating this persona once again grounds me as the designer(as well as stakeholders) in the circular process of empathizing with my user to create a product based on their needs and desires and not my (or anyone else’s) assumptions.

Information architecture

Everything in yellow refers to E-commerce, everything in blue is event/community based

Because of time restraints, I will be focusing on simplifying the booking/checkout process. The user flow will consist of 6 screens.

Low-fidelity prototype

Mid-fidelity Prototype

UI

while making the high fidelity prototype I wanted to understand how similar companies executed similar website structures. Here’s what I found:

  • Calendar views are an easier way to consume information.
  • Having a clear and concise layout makes the cognitive load easier for the user.
  • Having pop-up reminders with the option to add an event to your phones native calendar system adds an extra layer of convenience.

Visual Language

Moodboard

The mood board gave me a starting point to build the general look and feel of the product. This also gave me the premise to establish some brand attributes.

Natural

Community

Spiritual

Once I established the brand attributes I surveyed some users to validate that the visual style of the mood board was desirable and matched the established brand attributes. I repeated this for my style tile to make sure I didn't veer off track.

Accordion Animation

Next Steps and Conclusions

Using various tools such as the lean UX canvas, user persona, and ‘How Might We’ ideation help to ground me in the user and focus on the task at hand. I often found myself feeling like I should include features I assumed the user would find interesting. With help from my colleagues, I was able to come back to the task at hand without getting too feature crazy.

Because UX/UI design is an iterative process some next steps I would like to work on are.

– Validating my success and failure metrics

– Remake the Entire Home page so it best reflects the business mantra

– Create a comment feature within the event page similar to Meetup so users can communicate with another.

Thank you!

--

--