UX UI Design / Mobile App Design / Branding
Clarity through Tarot
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.
PRODUCT DESIGN PROCESS
How Might We…
Concept Sketches / Interactive Prototype
High Fidelity Design
Usability Tests / Iterative Design
Minimal Viable Product (1st edition)
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 Tarot Industry; Market Saturation; eLearning Statistics; Tarot Product Usage
Design Implementation; Subject Focus
Test Hypothesis; Identify Candidates for User Interviews
Gather insights through industry research learning about delivery methods and market growth expectations
Market & Mobile Viability
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.
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?
“According to the 2019 report from Shift Learning, “Mobile eLearners typically study for 40 minutes longer than students using a desktop or tablet.”
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:
Gather data about potential users for product concept; identify ideal candidates for user interviews
The User Survey focused on eight key areas:
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.
- 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.
All of the aforementioned Discover data set me up to move successfully into the Define stage.
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.
Introduce a wider audience to the Rider-Waite-Smith (RWS) Tarot with a focus on Jungian archetypal images
Create an interactive, educational, enjoyable, accessible, and easy to learn system
Provide a format that supports users to reach clarity around an intention
Cultivate an opportunity for life-changing experiences that awaken users to a more satisfying life
Sort through the user interviews, grouping common themes based on their natural relationships, for review and analysis
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
- Learning Methods
- Tarot Uses
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
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.
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.
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.
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
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.
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.
Understand the tasks a user wants to accomplish with the product
This step was essential to organizing and prioritizing the features that would show up in the MVP (minimal viable product).
Create a high-level sitemap based on the priorities in the User Stories
Take a single scenario and plan out the series of steps in which a user will interact with the product
User Journeys are essential to ensure steps are not missed in the User Flow.
Highlight all the paths a user takes to all complete tasks
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
User test the flow and features before spending too much time on design
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:
Action buttons on Session Review Screen were moved to the top for easier access
Editing Notes Screen was redesigned to accommodate the larger card, requested by users
Filters were re-imagined due to confusion between sort & filter functions
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.
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.
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.
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
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.
- Keywords: Clarity, Enjoyable, Engaging, Inspirational, Easy to Access, Transformational
- Usability Tests Feedback: lighthearted, refreshing
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
Create a look that:
- Upholds the Product Personality
- Connects with the Users
- Uniquely identifies the product
“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.
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.
Create a reference document that combines all UI guidelines and components to review during designing
Ensure Accessibility Compliance
HIGH FIDELITY DESIGN
Create Final Stage Product for Usability Testing
Link all design screens for interactivity
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.
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.
Prepare for and provide a professional and organized usability test
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:
- Product Red Routes
- Observe paths users take to complete tasks
- Validate the Information Architecture
- Discern Cognitive Load of the design
- User comprehension of product and its primary purpose
Record common user issues and iterate design for next usability test
Usability Test Results
Round One: 5 test sessions with 8-10 tasks completed per session
Critical Items requiring Iteration:
- Onboarding & Introduction to Tarot Session Guides were not valued as presented
- ‘Create Account’ button was not easily located
- 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.
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.
Anticipate if they are a new user or a returning user. Show the appropriate screen for either sign-in or create an account.
Add a focused PLAY tutorial screen that explains further the PLAY section.
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.
- 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
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
Hiding the Card allows the user to gain valuable screen real estate for reading the Tarot archetype/card’s information.
- 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
Keeping with the Art Gallery/Museum brand ambiance, the navigation was made to feel like directional signs to the next art piece.
Fun Animation between cards – for fun, I animated a transition to spark creative ideas.
Add, Edit, & Delete Notes
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.
Include a way to recover a deleted note
View Previous Tarot Sessions
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.
Streamline access to previous sessions
SESSION MENU ITEM
SUMMARIES & PAUSED BUTTON
Review a Paused Tarot Session > Resume Session > Close Session
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
This video demonstrates the ability to close a Tarot Session within the review state.
- 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
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.
- Tutorial for first-time users
- Add Animation within Quiz
An area where users can quickly locate information on common questions.
Add Search Functionality
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.