The Alter

Responsive Site for Chicago Wellness Initative

Role

Tools

Duration

Date of Project

Lead Product Designer, Information Architect
Figma, Whimsical, Miro, Usability Hub
4 Weeks (80 Hours Total)
November 2020

Healing from a distance, together

Since the COVID-19 outbreak, there is a high increase in anxiety, stress, and depression among global populations. We’ve had to seriously adapt our routines and daily lives for the safety of ourselves and each other. But how are you doing, really? Studies show that since the start of the pandemic, higher needs for self care has caused a rapid spike in people seeking meditation services.

When the pandemic hit, my client felt a need to expand their online presence beyond social media and into a responsive website.

the alter

is a spiritual and social wellness initiative in Chicago that curates events around mindfulness and community healing

At the beginning of this project, The Alter’s website was used to only highlight sponsors and their mission; all marketing, news updates, and sales were done through Eventbrite and Instagram.

With The Alter expanding beyond pop-up events and opening their own studio space, their website and brand needed to represent The Alter as an established business that appeals to both sponsors and Chicago community members.

COVID-19 has caused a rapid spike in

stress, anxiety & depression

especially among Millennials and GenZers

Understanding the “mindful” market

Because of social distancing and shelter-in-place leading people to live a more sedentary lifestyle, higher needs for self care have caused a rapid spike in people seeking meditation services, most popularly through self-guided apps. Gen Z and millenials are the most common to use meditation apps because of reportedly higher levels of stress and anxiety among the two generations.

Local competitors focus on sponsors

Almost all local competitors strictly catered their websites to gaining sponsors - not to their clients.

All direct competitors received almost all of their website traffic through social media. All competitors transitioned to virtual-only classes due to the 2020 COVID-19 lockdown, meaning people have more resources than ever to create a fitness, meditation, and wellness routine.

*Specifics of competitor analysis not shown due to confidentiality

Identifying user pain points

I interviewed five millennial women who all have different wellness practices and religious/spiritual beliefs. In addition to millennials being my client's target audience, my secondary research also justified that there were major pain points for this demographic due to heightened levels anxiety and stress since the COVID-19 outbreak.

Community and personal wellbeing go hand-in-hand

All participants stressed community support as a major key to feeling steady in their wellness practice. All claimed they knew they needed to prioritize their self-care routine, but felt either unmotivated or insecure about doing it by themselves. While all women had tried a virtual class since the start of the pandemic, 4 out of 5 would not do it again because they felt an overall social disconnect and also anxiety from not knowing what to expect beforehand.

Meet Jen: The Mindful Millennial

Jen wants a steady practice, mindful tools and an encouraging network she can lean on especially during these hard times.

But how can Jen get the care that she needs when her anxiety about the pandemic keeps her in the house?

Jen's typical day in a pandemic

This storyboard narrates Jen's daily thought process in relation to adapting to COVID-19 restrictions, as well as her processing new needs and desires since adapting to her new routine.

Jen experiences a push-and-pull towards wanting her "old life" back, while also knowing she doesn't feel comfortable socializing in public the way she used to. This leaves her with several ups and downs throughout her day, unsure of how to balance her emotions when everything seems to be out of her control.

Jen needs in-person wellness events that are safe to attend because she wants to connect with others and take care of her wellbeing

How might we help users get the care and community they need?

Based on interviews and secondary research, it was clear that the site needed to fully embody the welcoming feeling that a social wellness event like The Alter's could bring someone. The joy of feeling more connected with oneself doesn’t start when attending an Alter event - it starts right when entering the site. To accomplish this feeling, there were three major factors: a simplified rebranding, transparent business mission, and highly organized content.

Defining user and client intersections

Through the diagram below, I identified that in order to achieve user satisfaction, the content on The Alter’s website required intentional placement; text required transparency, images a sense of fluidity and ease. The Alter’s brand needed to communicate the warmth of their community values to initiate a trusting relationship with users.

Organizing content is key

On sticky notes I listed each event by The Alter in the last two years plus future projects my client enclosed during our kickoff meeting.

Here is an example of how four events by The Alter compare and contrast with one another:

By breaking down each event, I identified that while workshops and classes all take place at The Alter’s studio, they vary in cost and time commitment. This also goes for Running Group and the Crystal Workshop: both are remote, but running is a free community-led event, while The Shudio event is a one-time private event in collaboration with a local business.

By highlighting key logistics of almost 50 events, I created four categories to neatly organize all current and future events:

Navigation: keep it simple

And straight-forward, too!

I structureds tasks flows off of testing out the most imporatnt aspects based on my research: easily registering for an event and quick access to safety information. For registration, I created three task flows because there are multiple ways to get to the event page (home page, navigation menu, information page).

Collaborating on a fresh look

My client is an avid creator of mood boards. To begin the rebranding process, I asked my client to forward me boards that she found most aligned with her vision of The Alter.

After reviewing 8-10 mood boards, I identified patterns of organic shapes with bold text; a balance of vibrancy and calming images. I then merged the pins that I felt most accurately resembled the warm and charismatic energy of The Alter.

A tribute to the old logo

During a brand brainstorming session with my client, we settled on the goal that the updated brand needed to resemble the already existing color palette and use of organic shapes:

Final Style Tile

Building trust through design

My intention for the homepage was to create an introductory narrative to The Alter’s unique experiences. I carefully incorporated organic shapes into each page to mirror the fluidity of The Alter’s events.

After sketching, I created a digital version of the decided wireframe, which intends to harmonize more with recurring users while also providing informational excerpts of The Alter and buttons to the four event categories.

Bringing it all to life

I incorporated organic shapes and lines to breathe movement onto each screen. The site has minimal use of  The Alter's branding colors, allowing the images of events and the space to take center stage.

Prioritizing interactive UI features

The UI Kit includes features on the site for both desktop, tablet, and mobile use. All interactive features include a breakdown of each variant as the user is selecting or hovering over them.

Prototype

View on Figma

User testing findings

The total number of participants was 5, aging in range of 27 - 39. Each participant was giventwo tasks based on the initial user flows. Every participant was able to complete the tasks within thirty seconds or less.

First impressions of the brand

An online 10-second test was conducted through UsabilityHub to gain a better understanding ofpeople’s first impressionso of The Alter’s homepage. 8 participants were given 10 seconds to view the homepage and then answer two follow up questions.

Moving the safety policy to the footer

While all participants were able to complete tasks fairly quickly, when asked about the ease of finding the safety policy under the “About” page, 80% of participants said their first instinct was to check the footer after not seeing a banner at the top of the homepage.

Taking this into consideration, I revised the site to have the COVID-19 safety policy link at the footer, available on each screen. Since a banner at the top of the homepage is typically an indicator of temporary news, such as a sale or shipping updates, the footer is a more permanent placement for the link.

Here's what I learned:

One of my favorite parts about the design process is dissecting and simplifying mounds of content to its bare bones. It was a joy to work closely with this Chicago-based initiative whose mission I also care deeply about. My client gave me free range and I appreciate her trust in me as a creative thinker.

It was so fulfilling to to not only work on a project with such creative freedom and collaborative harmony, but that also support a client whose initative manifests joy, love, and community.