TaroT
TaroT is a mobile app that offers AI-Generated Tarot readings. The app was designed and developed by myself and two close friends, to gain the experience of bringing a digital app to market. It is currently in Beta as we continue to enhance the UI, improve accessibility, and build on existing features.
Tools
Figma / Figjam
Slack, Trello
ChatGPT, Relume
Adobe Illustrator
team
1 UX/UI Designer (myself)
2 Developers
my role
UX/UI Design
UX Research & Usability Testing
Information Architecture
Wireframing & Prototyping
Timeline
Ongoing project (~6 months)
Currently in Beta
01
Problem
Digital platforms increasingly shape how individuals seek guidance, improve mental/physical health, and achieve personal goals (e.g. exercise apps, dieting tools, and sleep aids). However, traditional methods of accessing spiritual guidance or self-reflection, such as Tarot readings, often require cumbersome decks or in-person consultations, limiting accessibility and convenience.
02
Solution
Our aim with TaroT was clear: to create a user-friendly digital platform that delivers personalized Tarot readings anytime, anywhere. By harnessing the power of Artificial Intelligence, we aimed to bridge the divide between deep personal introspection and modern convenience.
Take a gander at the final prototype!
Business Impact
According to Verified Market Research, the global Tarot Cards market is expected to reach 1.589 billion USD by 2030. As the stigma behind mental health services and seeking personal guidance has faded, people have developed a keen interest in different avenues for self-reflection, both novel and traditional. There is a clear demand for products/services that offer the ability to meditate on one's own behavioral patterns, and they continue to expand beyond physical interactions and into digital tools.
03
Research
Methods
User Interviews
Survey
User Personas
Competitive Analysis
objectives
Identify potential user personas
Figure out how to simulate the experience of a physical Tarot reading
Identify any expected features
Highlight users' feelings regarding AI and its integration into a self-reflective practice.
Interviews
I conducted several interviews to get a range of user personas, to understand the wants/needs of those personas when interacting with the Tarot interface, and to hone in on a navigational structure for the app.
Findings
Two user personas
Those who are experienced with physical Tarot readings, but don't use a digital platform for the practice.
Those who aren't well-versed in Tarot, but who use other forms of self-reflection (e.g. cognitive behavioral therapy, meditation, journaling)
Users want customizability for more personalized readings
Variation in the types of readings available
Customizable card decks
Ability to respond directly to a reading.
Users prefer a simple, minimalist interface
Survey
Understanding the target audience was a major priority, so I created an online survey and shared it to folks who fit our two primary user personas.
Findings
Some users are hesitant about AI. We'd need to find ways to make the app feel approachable and as trustworthy as the experience of a human-to-human reading.
Digital apps for self-reflection and health/wellness have become increasingly common. So, our branding would need to promote a similar goal of well-being and nourishment for the soul.
Peronas
Based on findings from our user interviews and surveys, we created 2 personas to better define our audience. The goal was to use these personas whenever we found ourselves experiencing "tunnel vision," or relying too heavily on our own perspectives/biases as the project developed. They helped to clarify the core needs, motivations, and frustrations of our users.
04
Ideation
Journey Map
As we gathered information from our research, we began to piece together a user journey map using Figjam for each main page of the app. The user journey would serve us in a few ways:
Used as scaffolding when building out low-fi wireframes
Helped guide front-end development
Illuminated the "happy path" of getting a tarot reading, as well as potential pain points and edge cases.
Identified unnecessary pages in the Tutorial flow, to be simplified for a quicker onboarding process
Sketches
As we continued to gather insights from our research, I began to sketch out a series of low-fidelity wireframes. I wanted to get a feel for what the primary pages of the interface might look like, and how global and local navigation would function. As the project progressed, I gradually added to these sketches to incorporate new features. Some sketches were used to get a general sense of a full screen, whereas others were used to experiment with smaller, more detailed interactions.
Key Insights:
Ideated on structures for global and local navigation
Fleshed out interfaces for Reading Flow, Archive, Cards page, and Settings options
05
Design
Low-fi Mockups
Once initial sketches were drawn out, we needed to get a fuller picture of the prototype, and begin to explore options for what the UI could look like. We started with some very low-fidelity wireframes to get a general structure for the Home page, the Reading flow, the Card Library, and the Archive of past readings. These initial wireframes allowed us to further explore the following:
Main menu structure for Global Navigation
Full flow for getting a Tarot Reading
Layout for Card Library
Potential pain points and/or edge cases
UI Design
I decided to start building out a style guide early on, applying the rule of 4 for all design assets. This was to ensure that as the project grew, we had a set resource for color palettes (in light and dark modes), text sizes and typefaces, global/local navigation layouts, button options, and spacing. This would help with scalability; our UI elements would be consistent as the app expanded in scope.
06
Test & Iterate
While applying the style guide to our wireframes, I began to build out a fully-functional, high-fidelity prototype in Figma. At the same time, we started recruiting subjects for some usability tests who fit our criteria. We did 3 usability tests in the first round and 3 after iterating on the issues that we identified.
Issue 01: Reading Flow & Navigation
Users unaware they could draw a card by tapping it, and tap again for more card details.
Nav bar required unnecessary tap to open.
Unbalanced visual hierarchy.
Solution:
Clear label for Readings (by date).
Tooltips on how to advance reading and find card details.
Persistent Nav Bar across all screens.
Issue 02: Card library layout
Excessive horizontal scrolling to find card details.
Unclear card labels
Solution:
Toggle for Image View vs. List View
Horizontal tabs to organize by suit
Two card span with shorter vertical scroll.
Issue 03: Reading Flow & Navigation
Users wanted the ability to select from multiple different Tarot spreads for more personalized readings.
Also wanted a way to interact with the app after a reading.
Solution:
Added flow for Spread Selection for each reading
Added text input field to reading synopsis, for private journal response to a reading
07
Next Steps
This app is currently in Beta as our developers continue to flesh out the UI, squash bugs, and as we collectively explore additional features for the app.
01 - Onboarding tutorial
I am currently working on an onboarding flow for the app, which includes the app download process and an introductory tutorial. This process, so far, has involved some custom vector/icon designs— I'm having fun with it!
02 - New Feature: "Tarot wrapped"
We are exploring ideas for a new app feature, a year-in-review summary of one's Tarot readings and their personal growth throughout, sort of like Spotify Wrapped.
03 - beta testing
Once our Beta version is a little more fleshed out, we'd like to get some extra usability tests in. We want to make sure we haven't missed any user needs since we began our most recent set of iterations.
04 - launch!
We're hoping to launch in the app store by end of Summer 2024.