Chani | UX Portfolio

< Back

Making an astrology app beginner-friendly

View Prototype

Client

My Role

Timeline

Team Stellium

Platform/Tools

Chani

Lead UI Designer

UX Researcher

iOS

Figma

Miro

Trello

3 week sprint

Kira Snook

Ashley Dager

Smell

First, a little background...

Chani Nicholas is a well known counseling astrologist for more than 20 years, guiding people to discover and live out their life's purpose through astrology. She defines her app, Chani, as a tool for self-discovery that uses the wisdom of stars with mindfulness and meditation to give users a personalized guide. Not only does it provide astrology information, but also weekly podcasts, workshops, journaling, and meditations that uses a traditional wellness hellenistic school of thought. Furthermore, the Chani app was built by survivors of human-trafficking and gender-based violence.

The challenge.

Our kickoff meeting with the Chani team revealed multiple challenges the app was currently facing, but one of our client's main concerns involved new users coming into the app with little background knowledge of Chani Nicholas or astrology. Since this app had a more traditional approach and was different from popular astrology, astrology-beginners or anyone new to the app did not understand most of the terminology used, along with all the free and premium content the app has to offer.

Our goal.

Test client's assumption, then educate and familiarize new users with the Chani brand and everything the app has to offer. Explore how we can make the app more usable for astrology beginners.

Discovery

Once we had our research goals outlines, we wanted to get a temperature check on the market and the Chani app's competitors. While completing this analysis we were able to get a grasp for who Chani is and were able to better bond with the Chani brand.

Classic

Collection

Now on Sale

We took a look at some meditation brands and compared their onboarding process to Chani's. We found that the paywall, the numbers of steps of the onboarding, and how users were guided through the app were the more important areas of focus. We learned that despite having a multi-page onboarding, not all apps provide their first-time users with a guide.

Classic

Collection

Now on Sale

When we compared our app to other astrology-focused apps like The Pattern and Co-star, it became evident that no competitor out there offers everything that the Chani app does, like the Whole House method, workshops, journaling, and Meditations.

This analysis gave us further direction on how to focus our research.

Current-State Usability Tests

To understand how users felt about the Chani app, we decided to seek out people with different levels of astrology knowledge (beginner to expert) and observe how they go through the onboarding process and have them explore the current app's functions to see if they understood certain terms and features.

But why seek testers with different astrology backgrounds?

Astro-beginners: To see how much of the content beginners are able to understand.
Astro-veterans: Vets know astrology and how to use it as a wellness tool, so we wanted to see if they would incorporate what Chani is offering into their wellness routine. We were also curious to see what these experts had to say about Chani's astrology content.

We also wanted testers from every generation i.e Millenials, Gen X, and Gen Z to track any trends or behaviors that may be important.

Affinity Mapping and Data Synthesis.

After conducting the usability tests, we decided to create an affinity map to synthesize the data we collected thus far and highlighted trends in our research. Below, you can see a condensed version of the affinity map which statistically displays how our testers felt about certain aspects of the app.

A lot of the content looked as if it was part of the free account when it was not. Users kept hitting paywall when clicking on any content. One tester said, “It seems like Im constantly hitting a locked door.”

Free content became a real theme in testing and users wanted to be able to sample content before purchasing.

When we asked users to locate "Transits", they were able to find it quickly but hit the paywall upon clicking the tab. They were unsure of what exactly "Transits" mean or why the icon for it was a clock. Since there was no description given before paywall, most users said they wouldn't pay for something they don't know much about.

Users found the onboarding to be standard, but preferred more flexibility and to be able to opt-out of entering their cell phone number or getting notifications.

On the birth-info page when entering birth-date or time, user can click on a description prompt about finding their birth time. Although users found this helpful, they wanted to know if they could skip entering their birth-info upon sign-up.

When beginner to intermediate - level testers saw their birth chart, they were confused on on how to read it or what the different symbols meant, even after reading the description prompt.

As expected, beginner users did not know most of the astrology terms used throughout the app, making it hard for them to understand the value of what the app has to offer.

Although users liked having all the information on Home and Birth Chart pages, it was overwhelming to see all of it at once and it was a lot of scrolling on one page.

In the end of the research synthesis, it really boiled down to astrology beginners not understanding most astrology terms and all testers wondering what they could receive past the paywall.

Building Empathy

In order to build empathy towards our users, we created a user persona that defines our Chani's target users in the most accurate way possible.

With this persona, we were able to nail down and define the problem we were going to solve for. This problem statement echoed the project goal that we set out to do in the beginning, which was to "educate and familiarize new users with the Chani brand and everything the app has to offer" and we were able to back it up with research. After finessing our problem statement, we finally started to consider how we might solve this problem.

"Beginner astrology enthusiasts need an informed introduction to the Chani app and astrology education that fosters an understanding of everything the app has to offer."

"HMW expand
the onboarding process to educate users about free content and

paid content?"

"HMW do a

better job of communicating the app's features while elevating users' astrology knowledge?

"HMW find a way to showcase the app as an astrology and wellness tool?"

Solutions, solutions, solutions

We moved into the ideation stage and brainstormed many ideas by sketching them out. By the end of our brainstorming for each of our users' pain points, these were some of the key solutions we were going to integrate into the Chani app to solve for astrology education and text readability.

Add a tour guide to help user understand what the app has to offer.
Place a "Star Guide" all over the app to give users a quick definition of astrology terms or features.
Turn each section within a tab into a dropdown that holds the text so user is able to hide and display text on command.
Soften the paywall by giving users a preview of paid content before asking them to upgrade.
- This would also differentiate what's free and what's premium without surprising them with the paywall.

We took our synthesis and our sketched solutions and implemented our ideas into mid-fidelity wireframes.

Onboarding: Create Account

Tour Guide

Home

Birth Chart

Transits

Meditation

Paywall

Proposed -State Usability Tests

After designing our wireframes, it was time to validate the changes that we made to the Chani app and see what our users think.

Confused top star guide as a logo

Most of the users were confused by the placement of the Star Guide at the top left. It was placed next to the page heading, so users questioned if it was a logo instead of a helper.

On the right, we iterated the design by moving the Star Guide on the right, so the placement would remain consistent with the other ones.

Unclear morning meditation is a sample

On the Meditation page, users thought that the morning meditation sample is a full video rather than a preview. They also didn't quite get the variety of meditation content this premium

We iterated the design by making it clear that the video is a sample, and added another sample to give users better insight into the premium content.

Users looked for upgrade info in the Hamburger Menu

Lastly, when we asked all users where they would look for information about free and premium content, 100% of users clicked the hamburger menu

In the high-fidelity wireframes, we added an "Upgrade" button for info on free and premium features.

High Fidelity Prototype

Onboarding

Create Account

Added Chani logo and tag line to bring in brand identity and foster user's trust
A progress bar to ensure user that onboarding is a quick process
Extended onboarding process where each page presents one form.

Email Validation

Eliminated "cell phone number" text field
- 20% users didn't understand need to enter their cell phone and preferred email.
A page for email validation for authentication purposes.
- Users understood why they were asked to verify their email.

Birth Info

Introduced the "Star Guide" feature, placed throughout app
- "Time of Birth" text field includes this feature since 50% beginners didn't know their birth time or why this info was crucial.

Tour Guide

56% of users were unclear on what to expect when they enter the app
- Part of the research goal was to familiarize users about the app
Created an optional tour where first time users can get acquainted with everything the app has to offer.
Tour gives an explanation of the primary navigation and a brief overview of each page and introduced what a Star Guide is.

Home Page

44% of users felt the information on home page was overwhelming.
- We turned Astroweather and Current Sky sections into dropdowns
66% of users did not know what astroweather meant.
- The Star Guidr created a place for Chani to offer a deeper explanation
We designed the birth chart in a similar layout.

Paywall

We iterated possible solutions to differentiate the free and premium account.
- Included a way for users to sample some premium content to entice conversion in a less abrupt manner.
Transits and Meditation can now offer a small sample of content
We used a screen to block out paid content
- Created the "Upgrade" call-to-action that leads to a description of premium features.

Interactive Prototype

Final Usability Testing Results

100% of users felt the onboarding process was simple and clear.
100% of users knew exactly what was happening during the new user tour.
Users were able to scroll through the content with ease. There were no comments about being overwhelmed with information.
80% of users commented that the Star Guide was helpful and/or intuitive. They clicked the icon and received definitions which is what they expected to see.
100% of users understood there is content beyond a paywall with the option to sample a bit of this content. There was no discomfort or confusion with being invited to upgrade.

"Seeing the locked items makes it clear what's free and what I have to pay for"

"I like that I can see the backdrop of the tab in the different tour screens"

"The Star Guide feature is super helpful! I'd use it all the time."

"I like that you can see what content you'll get if you upgrade - it's a

good way to entice

me to upgrade."

Client's Feedback

Clients felt that everything we suggested could be developed in the new solution across both iOS and Android platforms. They felt our Star Guide idea "really hit the mark" on delivering a potential solution for beginner education and gave another place for Chani to interject their brand voice. The tour guide was something our clients wanted to have, and were happy with how we designed it; easy-to-navigate and on-brand.

The Chani team was pleased that we delivered beyond the initial challenge in the short timeframe we were given, and that we called attention to things they hadn't yet explored. In conclusion, our findings helped our clients empathize with the user and they believed our solutions will not only help beginners, but even astro-buffs.

Next Steps

Iterating the Workshops page. Users felt this page was not in-sync with the rest of the app. There was a confusion about the layout and if there was sample content.

A/B testing a "Home" button or adding the Chani logo to the hamburger menu page. 50% of users commented that they felt they should be able to navigate to the home page from this location.