User Centered Design Thinking • User Research • Heuristic Analysis • Personas • Empathy Maps • User Stories • Information Architecture • User Flows • Wireframes • Low-Fi Prototype • Branding & Identity Design • Usability Testing • User Interface Design • High-Fi Prototype
Design and launch a web-based Tarot deck, where each card is centered around an influential woman from modern times. For example, a user would draw “Frida Kahlo” instead of “Passion,” or “Missy Elliott” instead of “8 of Wands.” Encompass both feminism and spirituality, while also being light-hearted and approachable. Keep the content and messaging quirky, fun, and easy to digest. Prove the validity of the concept, then launch the minimum viable product (MVP). After launching the MVP, focus primarily on user acquisition and brand development.
Objective — Through qualitative and quantitative primary research, validate The Modern Woman’s Tarot as a viable digital product and identify two or three key features for a digital Tarot deck that would be most desired by the target market.
Process & Insights — First, I conducted a screener survey to get some initial insights, then I chose three respondents from the screener survey who fit the target market to interview in depth.
All three interviewees found women who disrupted a norm or prevailed despite adversity to be the most inspiring to them
All three interviewees felt frustrated about a woman’s place in society today
All three brought up the divide between men and women at one point during the interview and expressed a general frustration that women’s voices are not being heard
Reasons why the interviewees turn to spirituality:
During times of struggle
Major life events like marriage
Navigating human emotions
In place of Western drugs/medicine
To improve self esteem
When triggered by past trauma
When in need
On a daily basis/as a general lens through which to view life
Top things the interviewees like about their favorite decks:
Helpful guidebook with journaling questions/extras
Having the info right there on the card
All three interviewees would prefer a mobile app over a web app, though they all expressed that ultimately they prefer an analog deck so that they can feel/recycle the energy of the deck and have a more tactile experience
App feature ideas that naturally came out during the interviews:
Different ways to choose the card
Offering multiple layouts (single card, three card, etc.)
Tap to “flip” card over and reveal info on the back
Play peaceful, grounding music while app is open
Incorporate breathing exercises to help the user ground
Allow users to color in their own cards (creative experience)
Incorporate artificial intelligence (AI) to help the user understand what the reading means
Instead of a web application, create a mobile app
Instead of a structured Tarot deck, create an unstructured oracle deck and change name to The Modern Woman’s Oracle
Offer three different spreads, not just one
Build a marketing strategy centered around female empowerment, getting through struggle, building self-worth and bridging the gap between tactile and digital oracle cards — when you don't have a deck with you, “The Modern Woman's Oracle is the next best thing!”
Launch as a free mobile app with potential for in-app purchases down the line
View the full research document here.
Offer multiple spreads
Provide a sense of intention and grounding prior to a reading
Give users the ability to invoke their own energy into card selections
Provide clear, concise helper text with actionable input
Provide the ability to reflect on the reading later
Avoid overly pushing a physical deck purchase
View the full heuristic analysis here.
Include easy way for user to access “preferences” from readings area
Include an easy way to access “exercises/learn more” from readings area
View the full card sort document here.
There are 4 main sections to the MVP for The Modern Woman’s Oracle app: Readings, Your Deck, Settings, and Learning. I used draw.io to illustrate the user flows for each of these sections. Check out the detailed flows for each section:
WIREFRAMES & LOW FIDELITY PROTOTYPE
I first started by sketching screens with pencil and paper. Then, I used Balsamiq to digitize the wireframes. Next, I linked various screens within Balsamiq to create a low fidelity prototype. I tested the low-fi prototype with three potential users and implemented various changes listed in the Key Takeaways section below. Download this file to engage with the low fidelity prototype. The app includes tooltips that will appear on a user’s first interaction with certain areas of the app, so follow this flow to explore the optimal first-time user experience:
Single card spread
Three card spread
Five card spread
….then you’re free to do your thing!
Adjust flow of first-time-through tooltips
Adjust verbiage from “Inject your energy” on the shuffle screen to “What are you seeking?”
Add “Asking Questions” to “Learning” area
Change shuffle button from “Shuffle” to “Shuffle Deck”
Ditch modal pop-ups that take up the whole screen, opt for tooltips
Ditch upper nav and hamburger menu within actual reading
Group “Reset Password” and “Preferences,” add “Log Out” to “Settings”
Add tooltip to tell the user they can flip cards to reveal more info about the woman and that they can flip the card back
Creative thought: shuffling animation will be important, could be abstract — maybe the borders of the cards change colors?
Add ability for user to go between “Log In” and “Create Account” screens depending on account status
Allow user to reset after revealing the first card in multiple card spreads?
If a user is not logged in, when they click “Settings” in the slideout navigation, route them to “Create Account” screen
At any point, any screen with a back button should allow the user to go back to the previous screen
Branding & Identity Assets & Style Guide
Between two options, I wanted to determine which way would be more intuitive for scrolling between articles in “Learning” content, so I conducted some A/B Testing. B was the overwhelming favorite and as such, I modified the user interface to accommodate these results.
High Fidelity Prototype Testing with Actual Users
Here, my main goal was to identify any red flags and address them. Are there any obvious flaws in logic, non-intuitive calls to action, or unclear flows?
I used Zoom to conduct and record three virtual meetings. Each test subject was sent a link to a high fidelity InVision clickable prototype. I asked each test subject to open the InVision link, then share their screen so I could observe their actions with the prototype while recording them through Zoom. I walked them through 8 specific tasks to complete within the app, encouraging them to think out loud during the session.
Add introductory splash screen that shows the logo/tagline, notify users/help users understand that they are starting on “Readings” (step 1 in performing a reading)
Add a progress bar at the bottom of the introductory readings screens (Select a Spread, Ground & Center Part 1, and Ground & Center Part 2), making it clear to users that they are walking through a process to complete the reading
Add “on/off” text to Settings toggles
Consolidate “Ground and center” toggle into one in settings, allowing users to just turn it all on or all off (simplify for MVP)
Make the shuffling deck animation clickable to draw
Add back button and upper right menu inside the actual reading
Add tooltip to initial single card reading card result telling the user they can tap to flip the card for more info
Add text indicator in multiple-card spread readings about what each card placement represents in the spread (i.e. “action to avoid,” “the issue,” “action to take” text directly under each card in the spread)
Add “Explore your deck” button to Learning area that links to “Your Deck”
Remove list view option in “Your Deck” (unnecessary use of space)
Post MVP launch: Consider doing an initial swipe-through tutorial instead of using tooltips so the user has a good understanding of the app before engaging with anything
View the full usability testing document here.
USER INTERFACE DESIGN
HIGH FIDELITY PROTOTYPE
Please note: Due to logic constraints, the back buttons and close button in the upper right menu are not functional.
➪ Denver, Colorado