UX UI Design / Mobile App Design / Branding 

Case Study
Clarity through Tarot

Clarity Through Tarot Homepage

PROJECT

CLARITY THROUGH TAROTTM PRODUCT DESIGN

Clarity through TarotTM is a passion project. I was first introduced to the Tarot in a Jungian psychology class while studying the Hero’s Journey. I learned how the Tarot could be a tool for self-awareness and personal development. I was hooked. 

Post class, I was quickly disappointed to learn that popular materials on the Tarot failed to satiate my growing affinity for interpreting the Tarot through archetypal stories.

I aspired to produce a product that felt accessible and provided profound, transcendent experiences through connection to the Tarot archetypes.

Below are the steps from ideation to sketches, wireframing to high-fidelity designs—the birth of this idea from conception to a digital prototype.

Roles

UI/UX Designer
UX Researcher
Brand Identity
Project Management

 

PRODUCT DESIGN PROCESS

Product Design Process
DISCOVER

The Hypothesis

Research Methods

Market Research

Competitive 
Analysis

User Surveys

User Interviews

DEFINE

Problem Statement

Project Goals

Affinity Map

Empathy Map

Personas

How Might We…

PROTOTYPE

User Stories

Information Architecture

User Journey

User Flow

Concept Sketches / Interactive Prototype

Usability Testing

Wireframes

DESIGN

Brand Platform

Mood boards

Brand Identity

Style Guide

Design System

Accessibility Audit

High Fidelity Design

Interactive Prototype

TEST

Usability Plan

Usability Tests / Iterative Design

Minimal Viable Product (1st edition)

DISCOVER

THE HYPOTHESIS

First-time tarot learners can feel intimated and overwhelmed by all the information in today’s instructional marketplace to understand and apply the Tarot as a self-development tool. I want to explore methods that support users’ goals in learning the Tarot with ease and comprehension.

RESEARCH METHODS

Research Methods
N

MARKET RESEARCH

Research Tarot Industry; Market Saturation; eLearning Statistics; Tarot Product Usage

N

COMPETITOR ANALYSIS

Design Implementation; Subject Focus

N

USER SURVEYS

Test Hypothesis; Identify Candidates for User Interviews

N

USER INTERVIEWS

Goals; Pain Points; Current Solution Satisfaction

MARKET RESEARCH

OBJECTIVE

Gather insights through industry research learning about delivery methods and market growth expectations

Market & Mobile Viability

Tarot Industry

Tarot is classified under the metaphysical services industry. That industry is estimated to be worth US$2.2 billion in 2018 with an expected growth of 1% a year for the next 5 years.

Internet Search

Researching ‘Tarot and Psychology’ in Google produces over 9 million results. These results would suggest that users are using the Tarot as a self-awareness tool.

New questions for analysis:

  • How do people who seek self-actualization feel about a Tarot mobile product?
  • Will they trust a mobile product to deliver clarity in their life?

eLearning

“According to the 2019 report from Shift Learning, “Mobile eLearners typically study for 40 minutes longer than students using a desktop or tablet.”
Source: https://elearningindustry.com/mobile-based-education-apps-transforming-industry

COMPETITIVE ANALYSIS

OBJECTIVE

Observe and evaluate the competitor landscape

In my competitive analysis, I reviewed other Tarot mobile products as well as meditation and self-care mobile products. I evaluated app ratings, reading styles, learning methods, sign up processes, and overall usability. I also conducted heuristic evaluations on 3 mobile products and learned what works and what doesn’t from a user perspective. 

Below are some of my findings:

Competitive Analysis

USER SURVEY

OBJECTIVE

Gather data about potential users for product concept; identify ideal candidates for user interviews

The User Survey focused on eight key areas:

User Survey Questions

Outcome

The majority of participants are highly interested in the Tarot (86% very to extremely interested), have been studying for 3-years or more (73% 3 or more years), and work with the Tarot for self-development and awareness (93% analytical readers).  This indicates an ideal user segment for the proposed product concept. Advertising the release of the launched product where I posted the survey makes for a smart marketing strategy. 

I expected to validate my hypothesis that the Tarot is challenging to learn and was surprised to discover that 40% find it neither hard nor easy. I explored the rationale for this result in the User Interviews. 

Since this product focuses on the RWS system, learning that 40% of the survey respondents do not use the RWS system influenced the user interview candidate qualification process. 

Survey Response Chart

USER INTERVIEWS

OBJECTIVE

  • Discern users goals for learning the Tarot
  • Understand the barriers to learning the Tarot
  • Gather study techniques / methods used to learn the Tarot

I conducted user interviews via Zoom with three groups. With the beginners (little to no experience) and intermediates (working with the Tarot for a few years), I sought to learn about what brings them to the Tarot and keeps them engaged in learning the Tarot. With the advanced (teachers of the Tarot),  I explored the Tarot user experience from the teacher lens.

Findings from these three groups helped to drive the product features that will be explored in the Define stage.

DISCOVER SUMMARY

All of the aforementioned Discover data set me up to move successfully into the Define stage.

DEFINE

PROBLEM STATEMENT

The Tarot can be a highly effective personal transformation tool when explored through the lens of mythological story and Jungian archetypes. Two primary barriers to entry prevent seekers from using the Tarot for this purpose:

  • The perception that the Tarot is complex, overwhelming, and confusing (as confirmed in User Interviews);
  • Its association as a prediction tool or fortune-telling tool. 

A product delivered through mobile technology would break down these barriers and allow seekers to experience the Tarot as a personal transformation tool.

PROJECT GOALS

N

INTRODUCE

Introduce a wider audience to the Rider-Waite-Smith (RWS) Tarot with a focus on Jungian archetypal images

N

FUN

Create an interactive, educational, enjoyable, accessible, and easy to learn system

N

INSIGHTS

Provide a format that supports users to reach clarity around an intention

N

TRANSFORM

Cultivate an opportunity for life-changing experiences that awaken users to a more satisfying life

AFFINITY MAP

OBJECTIVE

Sort through the user interviews, grouping common themes based on their natural relationships, for review and analysis

UX User Survey Questions

Outcome

Out of all the possible themes that emerged from this Affinity Map, I chose to focus on four that would have the greatest impact on the efficacy of this product, given the project’s goals:

  • Learning Difficulty
  • Stresses
  • Learning Methods
  • Tarot Uses 

EMPTAHY MAP

OBJECTIVE

Sort through the user interviews, grouping how the user thinks and feels, and what the user does, says or hears from others about the Tarot

UX User Survey Questions

Outcome

The most surprising pain point from this Empathy Map was to learn that the intermediate users find the Tarot a lonely endeavor and yearn for a community that shares their viewpoints and common language around the Tarot.

PERSONAS

OBJECTIVE

From the user interviews, define Personas that represent the principal user types that may use this product

The Hero / The Fool

“When I started on my spiritual path, I felt like I needed the guidebook because I didn’t rely on my intuition.”

The Hero, also known as The Fool in the Tarot, is passionate about personal empowerment. More than likely they have sought out other techniques for self-improvement and awareness. They have engaged very to little to no engagement with the Tarot for a few reasons: don’t know where to begin, time investment to understand the Tarot, and/or basic misconceptions about the Tarot (memorizing 78 cards, fortune-telling). Yet, there has also been a curiosity about the Tarot.

UX User Survey Questions

The Seeker / The High Priestess

“The book was really frustrating for me because the LWB (little white booklet) is basically a list of keywords and not really anything else. That is not the way that I retain information. For me, it’s all about the story.”

The Seeker has a thirst for wisdom and truth. They revel in connecting to their higher self, freeing themselves from outmoded beliefs and releasing negative thought patterns. They are intuitive thinkers and read often, hence why I also associate them with The High Priestess archetype. They seek to deepen their practice and delve further into the stories of the archetypes; their qualities, messages, light and shadow attributes, etc. 

UX User Survey Questions

Outcome

Personifying users in this way, kept them top of mind and allowed me to ask them for guidance through an active imagination technique (Jungian psychology tool) when creating the product’s design and features.

‘HOW MIGHT WE’ QUESTIONS

OBJECTIVE

Brainstorm solutions to solving users’ pain points

 

From understanding the users, I created the following ‘how might we’ questions as a way to seed ideation for the Prototype stage in the Product Design Process.

UX User Survey Questions

DEFINE SUMMARY

In the Define stage, I clarified who this product would be for, what their current pain points are, and why they would use this product to solve their current pain points. Next up is the Prototype stage that is the initial attempt to solve the users’ pain points.

PROTOTYPE

USER STORIES

OBJECTIVE

Understand the tasks a user wants to accomplish with the product

UX User Survey Questions

Outcome

This step was essential to organizing and prioritizing the features that would show up in the MVP (minimal viable product).

INFORMATION ARCHITECTURE

OBJECTIVE

Create a high-level sitemap based on the priorities in the User Stories

UX User Survey Questions

USER JOURNEY

OBJECTIVE

Take a single scenario and plan out the series of steps in which a user will interact with the product

User Journey Map

Outcome

User Journeys are essential to ensure steps are not missed in the User Flow.

 

USER FLOW

OBJECTIVE

Highlight all the paths a user takes to all complete tasks

UX User Survey Questions

Outcome

A User flow was key to sketching out the first iteration of product design and highlighted the composition of each screen.

CONCEPT SKETCHES / 1ST INTERACTIVE PROTOTYPE

I hand-sketched a prototype of the product. Then using Marvel, I combined the screens into a lo-fidelity clickable prototype for the first usability tests.

Usability Key Findings

  • Name of the App.  ‘Tarot Coaching System’ became ‘Clarity through TarotTM
  • Renamed Buttons.  Add ‘Save’ to a few of the buttons
  • Reworked the Iconography 
  • Added “Review Your Session” to the Big Takeaway Screen
  • Re-labeled Sections to better describe the content of that section

WIREFRAMES

OBJECTIVE

User test the flow and features before spending too much time on design

UX User Survey Questions

Outcome

In wireframe format, I was able to see the majority of the user interface (UI) components needed for high fidelity design.

In usability testing, three main iterations became evident:

Iteration 01

Action buttons on Session Review Screen were moved to the top for easier access

Iteration 02

Editing Notes Screen was redesigned to accommodate the larger card, requested by users

Iteration 03

Filters were re-imagined due to confusion between sort & filter functions

PROTOTYPE SUMMARY

In Discover, I tested the viability of the product concept. In Define, I tested the product features. At the end of Prototype, I have working solution for the product. 

DESIGN

BRAND PLATFORM

OBJECTIVE

Assemble the Product’s Persona to create a Brand

What Clarity through TarotTM Represents

Symbology, story, and attribution of meaning are key aspects of the Tarot. You will see these aspects at the forefront of this product’s look and feel.

Users expressed during user interviews that the Tarot is a tool they could use to better understand themselves and bring forth unconscious thoughts and beliefs into their conscious mind so from colors to typography, from spacing to ease of use; Clarity through TarotTM brand is the bridge of the unknown to the known.

Given my experience learning the Tarot, I wanted this brand to feel inclusive and inviting so that if you didn’t know anything about the Tarot, a user would feel welcomed and a part of the Tarot Community.

Product Name

The product name was refined during usability tests. The initial working title was Tarot Coaching System. However, the participants in the usability tests interpreted that name as a Tarot Course where they would be getting coached on how to read the Tarot. A user suggested renaming the product to Clarity through TarotTM.

I then tested that name in subsequent usability tests and it landed accurately with the purpose of the product.

Projects Goals

Project goals remain the same. They are relisted below for continuity.

  • INTRODUCE: Acquaint a wider audience to the Rider-Waite-Smith (RWS) Tarot with a focus on Jungian archetypal images
  • FUN: Create an interactive, educational, enjoyable, accessible, and easy to learn product
  • INSIGHTS: Provide a format that supports users to reach clarity around an intention; without having to know the Tarot
  • TRANSFORM: Cultivate an opportunity for life-changing experiences that awaken users to a more satisfying life

Brand Personality

Clarity through TarotTM is meant to be a fun, inspirational, enjoyable, and an easy to access Tarot mobile product that goes beyond learning the tarot or memorizing the cards. It’s about applying the Tarot to create personal transformation.

Clarity through TarotTM is meant to be stimulating, engaging, and consciously awakening. Users should be able to experience aha moments, moments of clarity, and insight; moments that generate a deep self-understanding where personal patterns are broken and new beliefs are conceived.

Clarity through TarotTM should be a place where perception is challenged and rebirthed to see a refreshed way of being. Clarity through TarotTM is designed to be that self-development tool that pulls the unconscious to the conscious for users to activate breakthroughs.

Brand Attributes

  • Keywords: Clarity, Enjoyable, Engaging, Inspirational, Easy to Access, Transformational
  • Usability Tests Feedback: lighthearted, refreshing

MOOD BOARD

OBJECTIVE

Gather visuals that align with the Brand Platform & connect with the potential audience

Color & Emotion Exploration

I used the following keywords and phrases to locate images, photographs, and colors that represented the Clarity through TarotTM personality:

Inviting; Authentic; Modern; Open & Honest; Active, yet subtle; Alive, yet at ease; Invoke Warmth; Foster Inspiration

BRAND IDENTITY

OBJECTIVES

Create a look that:

  • Upholds the Product Personality
  • Connects with the Users
  • Uniquely identifies the product

Color Palette

 “Coral symbolizes life, restores harmony, and increases warmth. It represents the ability to fill ourselves with light and life, expand without ego, to trust our community, to embrace togetherness and oneness to build something beautiful and bigger than ourselves.”

I couldn’t have found a more appropriate color to represent the brand personality of this product.

Typography

There were two characteristics I wanted in the logo typography:

  • Eclectic San Serif: A traditional Sans Serif or Serif font would be too formal. I wanted a San Serif that subtly resembled handwriting without being handwriting for the welcoming feel. (Pompiere)
  • Compact: A long product name required a readable compact font. (Pompiere, Big Shoulders Display)

Symbols & Symbol Psychology

True to the Tarot as a symbolic language, I began by gathering symbols that embodied the keywords in the brand personality. 

The Brand Story

  • When the first ring of the rainbow hits, truth is what we seek. It is the darkest part of the rainbow, the part where the truth lies, in our unconscious.
  • As the second ring appears, knowledge is born. We’ve accepted the quest and through each new question, we are learning.
  • As the third ring appears, wonder is activated. Wonder is a state of emotion that promotes creative awareness allowing intuition the freedom to serve you best in perceiving something unexpected. Wonder is linked with curiosity and the drive behind intellectual exploration.
  • Now let’s stop there. What else do you see? Do you see a corridor? A tunnel? Layers? Do you see how we were first at the surface but now we are diving deeper into the unconscious? With each ring, this logo invites you to go deeper.
  • The sun rising, showing that we are close but not yet there. There is no way to get to the sun.
  • The moon is hidden in the sun because they are united. True individuation comes from the two aligning as one. The moon moves to its own position as we explore the regions of the shadow; the illusions that block our truth.
  • The mountains rise symbolizing the depths we must visit and the peaks we must climb to reach a conscious awakening of what we seek.
  • The path is lowered by the sun, lighting the way to true Clarity! The golden rod. (hence goldenrod as the color)

It is from here that the logo is born. The invitation presented to us from the layered rainbow leads us to the clarity we seek.

STYLE GUIDE

OBJECTIVE

Create a reference document that combines all brand elements to review during design

DESIGN SYSTEM

OBJECTIVE

Create a reference document that combines all UI guidelines and components to review during designing

The Design System was developed in Figma and used to make all Figma components for faster design.

ACCESSIBILITY AUDIT

OBJECTIVE

Ensure Accessibility Compliance

Accessibility Audit was completed on the first version of high-fidelity product design. These screens were further modified in usability testing.

HIGH FIDELITY DESIGN

OBJECTIVES

Create Final Stage Product for Usability Testing

Aesthetics were united with wireframes to ensure design continuity and prepare the product for user testing.

INTERACTIVE PROTOTYPE

OBJECTIVE

Link all design screens for interactivity

Initial Prototype

The initial prototype is completed in Figma and used for the first round in usability tests. Please note that not everything is linked as this is a working graphic prototype. You must first create an account to access the homepage. Click on the screen to see blue boxes that will highlight what is clickable on the prototype. If you get lost, press R to restart. 

DESIGN SUMMARY

In the Design Stage, the Brand Platform and Identity were created, aesthetics were merged with the wireframe, the design system was built, and accessibility standards were addressed culminating in an interactive initial prototype to be used in the Test Stage.

TEST

USABILITY PLAN

OBJECTIVE

Prepare for and provide a professional and organized usability test

Plan Highlights

Ideal participant characteristics were clarified and participants were recruited through my network. A testing script with an introduction, scene scenario, 9 tasks, and wrap-up questions was employed.

Five top-level items were tested:

  1. Product Red Routes
  2. Observe paths users take to complete tasks
  3. Validate the Information Architecture
  4. Discern Cognitive Load of the design
  5. User comprehension of product and its primary purpose

USABILITY TESTS

OBJECTIVE
  • Record common user issues and iterate design for next usability test

  • Validate Product

Usability Test Results

Round One: 5 test sessions with 8-10 tasks completed per session

Critical Items requiring Iteration:

  1. Onboarding & Introduction to Tarot Session Guides were not valued as presented
  2. ‘Create Account’ button was not easily located
  3. Terminology in the Learn section was confusing

Round Two: 5 test sessions with 8-10 tasks completed per session

New issues came to light in the Learn and Play sections as well as with the sign-in button.

MINIMAL VIABLE PRODUCT (MVP)

Below I walk you through the main features for the Clarity through TarotTM MVP. 

OnBoarding

FEATURE

A quick tutorial on the features within the Clarity through TarotTM product. Quick tips can be skipped if desired. Quick tips can also be accessed through the Help Guide inside the product.

Programming Considerations:
Anticipate if they are a new user or a returning user. Show the appropriate screen for either sign-in or create an account. 

Future Considerations:
Add a focused PLAY tutorial screen that explains further the PLAY section.

Tarot Session

FEATURE

Tarot Session is a coaching-based feature that uses the Tarot archetypes to ask questions to the user. The user inputs an intention at the beginning of the session to focus the Tarot Session. For MVP, the limit is 11 cards per session. However, the user can close the session after 1 card, if desired.

Suppose a question doesn’t resonate with a user, no problem! The user skips the card and the product will choose the next Tarot archetype/card to display, at random. After the user answers the question, they have three options:

  • Save & Continue: Advances user to the next Tarot archetype/card.
  • Save & Pause: Pauses the Tarot Session to access later, saving their answers and cards for later retrieval and Session continuation, if desired.
  • Save & Close: Closes the Tarot Session. A Takeaway question will appear, which they can skip if desired. After closing the session, a user can review it but will be unable to edit it.

If the user wants more information on the Tarot Archetype while in the session, they can click on the card image to view the archetype’s information.

Future Considerations:

  • Add thought bubbles above buttons to help users choose a call to action (CTA).
  • Redesign the “Press & Hold” interface tip.

*This video demonstrates a user pausing their Tarot Session for later retrieval.* 

Learn Section Filter & Search

FEATURE

The Learn Section displays all 78 cards from the Rider-Waite-Smith (RWS) Tarot deck. Due to the number of cards, an easy filter navigation was created for quick access to particular cards in the varied suits.

Also included was a search option.

ABOUT THE DECK

Illustrator Pamela Colman Smith drew the cards from academic and mystic A E Waite’s instructions. The deck was originally published by the Rider Company. Clarity through TarotTM uses the illustrations from the 1909 Pamela A version with the Rose-n-Lilies back.

Tarot Archetype / Card – Hide Card

FEATURE

Hiding the Card allows the user to gain valuable screen real estate for reading the Tarot archetype/card’s information.

Future Considerations:

  • Allow users to add their own description below the Archetypal Story.
  • Allow users to customize the Key Ideas, adding keywords or key phrases for a more personalized experience.

Navigation Between Cards

FEATURE

Keeping with the Art Gallery/Museum brand ambiance, the navigation was made to feel like directional signs to the next art piece.

Future Considerations:
Fun Animation between cards – for fun, I animated a transition to spark creative ideas.

Add, Edit, & Delete Notes

FEATURE

One of the goals for Clarity through TarotTM was to allow the user to capture personal experiences with the archetypes. The Notes Section gives the user an opportunity to record their own thoughts about the Tarot Archetypes or any insights that arise from the study of the Tarot Archetype.

Once a note is added and assigned a creation date, it can be edited or deleted. All edited notes include an edit date tag. Once a note is deleted it is removed from the product. These features give the user full control over their personal notes area.

Future Considerations:
Include a way to recover a deleted note

ADD NOTE

EDIT NOTE

DELETE NOTE

View Previous Tarot Sessions

FEATURE

Reviewing and reflecting on past sessions is essential for continual self-growth. Clarity through TarotTM offers two options for a user to review a previous Tarot Session.

One option is to use the Sessions menu item inside the Tarot Archetype to display all past Tarot Sessions for which that Tarot Archetype was present. 

Another option is to use the Summaries or Paused buttons to locate the previous completed and paused Tarot Sessions.

Future Considerations:
Streamline access to previous sessions

SESSION MENU ITEM

SUMMARIES & PAUSED BUTTON

Review a Paused Tarot Session > Resume Session > Close Session

FEATURE

One of the features built into Clarity through TarotTM is an option to resume a paused session and return to the session on the next card. This video demonstrates how to review a paused session, resume it, and close the session. 

Review a Paused Tarot Session > Close Session

FEATURE

This video demonstrates the ability to close a Tarot Session within the review state.

Future Considerations:

  • Link each card title in the review session to the Tarot Archetype/Card (as a popover)
  • Allow the Big Takeaway to be editable or allow closed sessions to have the ability to add more notes to the bottom of the session
  • Add a “clarity” icon as another layer to signify BIG Insights; OR
  • Add a star feature allowing the users to rate their insight around the Tarot Session (1 star = little insight, 5 star = Big Breakthrough)

Test Your Tarot Knowledge

FEATURE

The Play section was included to help the user integrate the archetypes into memory through a quick little quiz. No grading. Cheating encouraged. It’s a fun way for the user to know if they are learning.

Future Considerations:

  • Tutorial for first-time users
  • Add Animation within Quiz

Animation Idea:

Help Guide

FEATURE

An area where users can quickly locate information on common questions.

Future Considerations:
Add Search Functionality

Account

FEATURE

An area that allows the user to modify their personal information, logout, and other standard profile features.

NEXT STEPS – Closing Thoughts and Reflections

To realize this product, my next step is to work with a product developer and professional Tarot copywriter. I have entertained the idea of crowdfunding the expenses to see this product into the marketplace in 2021.

All in a Day’s Work

The Clarity through TarotTM product was my passion project from December 2019 until August 2020. At the beginning of the project I was The Fool Tarot Archetype, naive and hopeful; midway through I was The Hanged One, with a new found perspective on the work it takes to build a mobile product. By the end, I became The World, enlightened and humbled by each step along the way.

I am eternally grateful to my supporters from design mentors to copywriters, from usability testers to friends and family volunteers in early-stage development.

The Tarot is a complicated set of personal investigations and instructions leading to new insights; a sacred path for pursuing transformation."

~ Sandra A. Thomson ~