Case Study
Case Study
Bringing 100 Years of Mystical Tradition Into a Modern Digital Experience
Bringing 100 Years of Mystical Tradition Into a Modern Digital Experience
Bringing 100 Years of Mystical Tradition Into a Modern Digital Experience
Redesigning an E-Commerce Brand Experience
Redesigning an E-Commerce Brand Experience
Project Summary
Project Summary
Tools
Learn More
Tools
Learn More
Tools
Learn More
Role
Learn More
Role
Learn More
Role
Learn More
Client
Learn More
Client
Learn More
Client
Learn More
Duration
Learn More
Duration
Learn More
Duration
Learn More
UX/UI Designer, Information Architecture, Branding, Design System, Prototyping, Testing
UX/UI Designer, Information Architecture, Branding, Design System, Prototyping, Testing
The Occult Bookstore
The Occult Bookstore
Figma, FigJam, Adobe Photoshop, Notion, Slack
Figma, FigJam, Adobe Photoshop, Notion, Slack
2+ months
2+ months
When I first discovered The Occult Bookstore, I was intrigued by its heritage: one of the oldest historic metaphysical shops based in the country, offering a curated selection of spiritual tools such as tarot cards, crystals, sacred texts, incense, and ritual items since 1918. Unlike e-commerce giants, they bring value to their customers through hand-picked inventory, personal service, and trust. And while its in-store experience evokes a sense of mystique and community, the existing digital experience felt dated, cluttered and hard to use failing to deliver that same feeling to online shoppers. The Occult Bookstore’s online presence needed a UX overhaul.
Customers struggled to find products and lacked the item-level details, like visuals, reviews, artist stories and how to use products, that build trust and confidence online. For a shop built on personal connection, the digital experience wasn’t keeping up.
That’s where I came in. As the Product Designer, I led branding, UX, UI, and systems design to align business goals (honoring lineage, expanding reach, driving e-commerce growth) with user needs (clarity, usability, trust, delight). My challenge was to bring the in-store magic online, building a modern e-commerce platform that delivered an intuitive, trustworthy, and positive digital shopping experience to their customers.
When I first discovered The Occult Bookstore, I was intrigued by its heritage: one of the oldest historic metaphysical shops based in the country, offering a curated selection of spiritual tools such as tarot cards, crystals, sacred texts, incense, and ritual items since 1918. Unlike e-commerce giants, they bring value to their customers through hand-picked inventory, personal service, and trust. And while its in-store experience evokes a sense of mystique and community, the existing digital experience felt dated, cluttered and hard to use failing to deliver that same feeling to online shoppers. The Occult Bookstore’s online presence needed a UX overhaul.
Customers struggled to find products and lacked the item-level details, like visuals, reviews, artist stories and how to use products, that build trust and confidence online. For a shop built on personal connection, the digital experience wasn’t keeping up.
That’s where I came in. As the Product Designer, I led branding, UX, UI, and systems design to align business goals (honoring lineage, expanding reach, driving e-commerce growth) with user needs (clarity, usability, trust, delight). My challenge was to bring the in-store magic online, building a modern e-commerce platform that delivered an intuitive, trustworthy, and positive digital shopping experience to their customers.
The Challenge
The Challenge
The existing e-commerce site lacked consistency and usability with unclear navigation, confusing checkout flows, and fragmented branding which reduced credibility and trust with their online shoppers.
The existing e-commerce site lacked consistency and usability with unclear navigation, confusing checkout flows, and fragmented branding which reduced credibility and trust with their online shoppers.
Cluttered layouts and confusing navigation and labels - users couldn't find products easily.
A lack of clear product information and visuals; pages lacked visuals, reviews, and trust signals.
Long checkout flows that discouraged modern shoppers.
Design and accessibility issues that conflicted with their role as a trusted, inclusive community resource.
The Opportunity
The Opportunity
Create a more modern, appealing e-commerce experience while preserving the small-shop authenticity. Redesign the digital experience with a focus on making the site easier to navigate, more visually engaging, and better aligned with the needs of modern spiritual shoppers through improved usability, clearer structure, and refined design.
Create a more modern, appealing e-commerce experience while preserving the small-shop authenticity. Redesign the digital experience with a focus on making the site easier to navigate, more visually engaging, and better aligned with the needs of modern spiritual shoppers through improved usability, clearer structure, and refined design.
Key Objectives
Simplify navigation so products are easy to find.
Provide rich visuals and clear product details.
Ensure checkout is seamless and fast.
Build trust through transparency (reviews, artist bios, store info).
The Design Process
The Design Process
This case study outlines the full design process, from research to final prototype, and highlights how strategic UX design can help even the most niche, tradition-rich businesses thrive in the digital space. The scope included conducting evaluative research, usability testing, and competitive analysis to identify key experience issues. From these insights, a refined navigation system, enhanced visual design, and high-fidelity wireframes were developed, followed by a usability-tested prototype.
This case study outlines the full design process, from research to final prototype, and highlights how strategic UX design can help even the most niche, tradition-rich businesses thrive in the digital space. The scope included conducting evaluative research, usability testing, and competitive analysis to identify key experience issues. From these insights, a refined navigation system, enhanced visual design, and high-fidelity wireframes were developed, followed by a usability-tested prototype.
DISCOVER
Product research
Learn More
Product research
Learn More
Competitive analysis
Learn More
Competitive analysis
Learn More
User interviews
Learn More
User interviews
Learn More
Heuristic evaluation
Learn More
Heuristic evaluation
Learn More
Card sort
Learn More
Card sort
Learn More
DEFINE
User personas
Learn More
User personas
Learn More
Sitemap
Learn More
Sitemap
Learn More
Journey mapping
Learn More
Journey mapping
Learn More
User flows
Learn More
User flows
Learn More
Affinity map
Learn More
Affinity map
Learn More
Problem statement
Learn More
Problem statement
Learn More
DESIGN
Sketches
Learn More
Sketches
Learn More
Ideation
Learn More
Ideation
Learn More
High-fidelity design
Learn More
High-fidelity design
Learn More
Mid-fidelity design
Learn More
Mid-fidelity design
Learn More
Usability testing
Learn More
Usability testing
Learn More
Iterative design
Learn More
Iterative design
Learn More
Prototyping
Learn More
Prototyping
Learn More
Wireframes
Learn More
Wireframes
Learn More
DELIVER
Next Steps
Learn More
Next Steps
Learn More
Presentation
Learn More
Presentation
Learn More
Recommendations
Learn More
Recommendations
Learn More
Reflection
Learn More
Reflection
Learn More
DISCOVER
DEFINE
DESIGN
DELIVER
Product research
Competitive analysis
User interviews
Heuristic evaluation
Affinity map
Card sort
User flow
Journey map
User persona
Sitemap
Problem statement
Wireframes
Sketches
Hi-fidelity design
Prototyping
Usability testing
Recommendations
Presentation
Next Steps
Research
Learn More
Research
Learn More
Research
Learn More
Eyes Wide Open
Eyes Wide Open
Getting a new perspective on user trust and clarity
Getting a new perspective on user trust and clarity
I started by conducting six user interviews to understand the shopping behaviors and motivations of potential customers and individuals passionate about spirituality and metaphysics. These users also performed usability tests of the current website to uncover pain points with the current shopping experience. Patterns emerged: people were curious, but also skeptical. They needed visuals, clear navigation, and faster checkout options like Apple Pay.
I started by conducting six user interviews to understand the shopping behaviors and motivations of potential customers and individuals passionate about spirituality and metaphysics. These users also performed usability tests of the current website to uncover pain points with the current shopping experience. Patterns emerged: people were curious, but also skeptical. They needed visuals, clear navigation, and faster checkout options like Apple Pay.
“I need clear, easy-to-use navigation when shopping online. I just want to find what I’m looking for quickly.”
“I need clear, easy-to-use navigation when shopping online. I just want to find what I’m looking for quickly.”
"I want to see more pictures with more concise, easy-to-read text. I don’t like when it’s a struggle to try and read something because of the colors used."
"I want to see more pictures with more concise, easy-to-read text. I don’t like when it’s a struggle to try and read something because of the colors used."
"I want to see store details and a picture of the inside of the shop on the website because sometimes I prefer to go into the shop and peruse."
"I want to see store details and a picture of the inside of the shop on the website because sometimes I prefer to go into the shop and peruse."
"I like when I can see reviews and more higher-level info about product upfront as I’m browsing."
"I like when I can see reviews and more higher-level info about product upfront as I’m browsing."
Key insights
Key insights
More Images, Less Clutter
Users scroll for store credibility, skim for product visuals and want to be able to view products multiple ways.
More Details
Unclear store information and lack of product details (images, reviews, size info) caused hesitation.
Efficient Checkout
Users valued efficiency - express checkout like Apple Pay and clear product comparisons were must-haves.
Better Browsing Experience
Users wanted clear navigation and an easy way to find the products they are looking for but the structure felt cryptic.
More Images, Less Clutter
More Images, Less Clutter
Users scroll for store credibility, skim for product visuals and want to be able to view products multiple ways.
Users scroll for store credibility, skim for product visuals and want to be able to view products multiple ways.
More Details
More Details
Unclear store information and lack of product details (images, reviews, size info) caused hesitation.
Unclear store information and lack of product details (images, reviews, size info) caused hesitation.
Efficient Checkout
Efficient Checkout
Users valued efficiency - express checkout like Apple Pay and clear product comparisons were must-haves.
Users valued efficiency - express checkout like Apple Pay and clear product comparisons were must-haves.
Better Browsing Experience
Better Browsing Experience
Users wanted clear navigation and an easy way to find the products they are looking for but the structure felt cryptic.
Users wanted clear navigation and an easy way to find the products they are looking for but the structure felt cryptic.
Synthesis
Learn More
Synthesis
Learn More
Synthesis
Learn More
Heuristic Evaluation
Heuristic Evaluation
Uncovering Where the Magic Failed
Uncovering Where the Magic Failed
To better understand the usability challenges of the current web shopping experience, I conducted a heuristic evaluation that showed gaps in navigation, accessibility, and content clarity that were preventing users from confidently browsing and purchasing products. This revealed issues causing user frustration such as poor color contrast, inconsistent navigation patterns, and insufficient product details - key insights that would directly inform design decisions that prioritized clarity, accessibility, and trust-building throughout the redesign.
To better understand the usability challenges of the current web shopping experience, I conducted a heuristic evaluation that showed gaps in navigation, accessibility, and content clarity that were preventing users from confidently browsing and purchasing products. This revealed issues causing user frustration such as poor color contrast, inconsistent navigation patterns, and insufficient product details - key insights that would directly inform design decisions that prioritized clarity, accessibility, and trust-building throughout the redesign.
Flexibility, Efficiency of Use, and Error Prevention
Flexibility, Efficiency of Use, and Error Prevention
Confusing quantity displays (e.g., bundles of sage sticks not explained).
No guidance if items are unavailable or out-of-stock.
No FAQs or clear product-use information.
No hover quick-view on product listings.
Confusing quantity displays (e.g., bundles of sage sticks not explained).
No guidance if items are unavailable or out-of-stock.
No FAQs or clear product-use information.
No hover quick-view on product listings.
Accessibility Compliance
Accessibility Compliance
Inconsistent color palette and poor color contrast failing to meet WCAG AA and AAA contrast guidelines were significantly impacting readability, especially for users with visual impairments, reducing overall usability and accessibility.
Inconsistent color palette and poor color contrast failing to meet WCAG AA and AAA contrast guidelines were significantly impacting readability, especially for users with visual impairments, reducing overall usability and accessibility.
Consistency & Recognition
Consistency & Recognition
Poor product categorization forcing users to recall where items might be listed.
Inconsistent product descriptions.
Alignment issues across pages.
Lack of cohesive color system.
Poor product categorization forcing users to recall where items might be listed.
Inconsistent product descriptions.
Alignment issues across pages.
Lack of cohesive color system.
Aesthetic and Minimalist Design
Aesthetic and Minimalist Design
Visual clutter, too much text, donation CTAs dominate space.
Poor contrast text on dark theme makes it harder to focus on content.
Visual clutter, too much text, donation CTAs dominate space.
Poor contrast text on dark theme makes it harder to focus on content.
What This Meant for The Business
What This Meant for The Business
The site was unintentionally creating barriers to both discovery and purchase. Curious first-time visitors weren’t finding the inspiration or trust signals they needed, while returning shoppers struggled to quickly locate specific products. This gap risked lost sales and weakened the brand’s promise of being a trusted spiritual resource.
The site was unintentionally creating barriers to both discovery and purchase. Curious first-time visitors weren’t finding the inspiration or trust signals they needed, while returning shoppers struggled to quickly locate specific products. This gap risked lost sales and weakened the brand’s promise of being a trusted spiritual resource.
Define
Learn More
Define
Learn More
Revealing What Was Hidden
Uncovering two distinct user journeys
Affinity mapping helped me give form to the unseen patterns of customers’ needs and the different behaviors, motivations, and goals that might lead them to The Occult Bookstore.
Behaviors
Users browse before buying, rely on reviews and photos, skim text-heavy pages, and prefer quick-pay options.
Motivations
Community validation, curiosity, and the aesthetic and spiritual appeal of products drive engagement.
Needs
Store information and visuals, product details at a glance, multiple visuals, and concise messaging.
Frustrations
Cluttered layouts, poor navigation, intrusive donation prompts, and friction in checkout break trust.
Goals
Learn more about metaphysical practices, find unique gifts, and create engaging social or personal experiences.
While every visitor came with their own intent, two clear personas with distinct journeys emerged: those exploring the mysteries for the first time, and those who arrive with purpose.
The Spiritual Gifter
Emily is looking for meaningful, beautiful gifts, she values smooth navigation, quick checkout, and product stories such as artist or author details. Long checkout processes and uninspiring product pages get in her way.
The Curious Explorer
Sarah is eager to learn about metaphysical practices, she needs clear product details, reviews, and multiple visuals to guide her journey. Clutter and vague information leave her frustrated.
The Spiritual Gifter
Emily is looking for meaningful, beautiful gifts, she values smooth navigation, quick checkout, and product stories such as artist or author details. Long checkout processes and uninspiring product pages get in her way.
The Curious Explorer
Sarah is eager to learn about metaphysical practices, she needs clear product details, reviews, and multiple visuals to guide her journey. Clutter and vague information leave her frustrated.
What This Meant for The Occult Bookstore
The key insights shaped a simple vision - to bring clarity and trust to a mystical shopping experience.
Curious explorers like Sarah wanted knowledge, visuals, and resources.
Gift givers like Emily wanted an easy, beautiful way to find meaningful items.
Synthesis
Learn More
Synthesis
Learn More
Competitor Analysis
Checking out the competition
I audited three key competitors: Raven’s Wing, Alchemy Arts/Hexe Haus, and Cross Crow Books. The results showed that competitors had modern design patterns like filters, product details, and high-quality visuals, but also had gaps like lack of reviews and inconsistent checkout.
What Competitors Did Well
Modern navigation, product categorization, some filtering, shop imagery for trust-building.
Where They Had Gaps
Inconsistent product detail pages, lack of reviews, clunky checkout, confusing branding.
What This Meant for The Occult Bookstore
Competitors may guide users smoothly, but they often lack enchantment with thin product stories and clunky checkouts breaking the spell. The Occult Bookstore already carries a century of mystique and credibility, a legacy most rivals can’t conjure up. By weaving together compelling product narratives, effortless checkout, and clear flows, the brand could transform its existing trust into something more powerful: an online experience as captivating and enduring as its history, and one that competitors can’t touch.
Define
Learn More
Define
Learn More
Giving Structure to the Sacred
Creating an IA compass for the curious and a straight path for the intentional
When I first evaluated the Occult Bookstore’s site, one issue became clear: the navigation didn’t reflect how people actually shop, and research had uncovered two primary paths:
Gifters who are shopping with intention, looking to quickly find books, tarot decks, or meaningful items to give.
Explorers who are browsing by themes like spirituality or astrology, eager to learn and discover.
But in the site's current state, products were buried under disjointed links like “Alchemist Lineage” and “Spiritual Integration Counseling.” While these spoke to the store’s identity, they made discoverability difficult and left both explorers and gifters feeling lost.
Old Navigation
Areas for Improvement:
jargon-heavy
jargon-heavy
inconsistent
inconsistent
hides key shopping flows
hides key shopping flows
To support both journeys, I used insights from affinity mapping, card sorting, and personas to create a clear, user-centered information architecture:
Shop by Product - Books, Tarot, Tools (Emily’s gift-focused path)
Shop by Interest - Spirituality, Astrology, Metaphysics (Sarah’s exploration path)
Services - Gift Cards, Consultations
About - Our Shop, Our Story, Donations
The result was a scalable, cohesive sitemap that aligned with the store’s diverse offerings while giving users a straightforward way to explore or shop with purpose. This was the backbone of the new navigation that became the heart of the redesign, transforming the site into a digital altar: mystical in essence, yet grounded in clarity and ease of use.
New Sitemap Information Architecture
What This Meant for The Occult Bookstore
By restructuring the site’s information architecture into clear, user-centered categories, the bookstore could finally deliver on its promise as both a retail hub and a cultural space. Products were surfaced instead of buried, making them easier to find and purchase. For the business, this meant fewer lost sales due to confusion, stronger alignment between the digital experience and the physical store’s identity, and a scalable foundation that could support future growth in both products and services.
New Navigation
The Result
A scalable, cohesive sitemap that aligned with the store’s diverse offerings while giving users a straightforward way to explore or shop with purpose.
The backbone of the new navigation that became the heart of the redesign, transforming the site into a digital altar: mystical in essence, yet grounded in clarity and ease of use.
Define
Learn More
Define
Learn More
Mapping the Path Forward
Simplifying every step so the magic stays in the experience, not the struggle
To ensure the navigation and IA truly supported both personas, I mapped out the end-to-end flow of a logged-in user browsing and purchasing an item. This flow demonstrates two critical paths:
Gifters can shop by product or take a more direct route, moving quickly from homepage to product details and checkout.
Explorers can shop by interest (e.g., “Divination”) and gradually narrow into categories like books, tarot, or prints before adding to cart.
The redesigned flow emphasizes clarity and flexibility, reducing friction at key moments like cart management and checkout. Features like quick-add, artist/author details, and streamlined QuickPay options were introduced to match user behaviors uncovered in research: scrolling to discover, relying on visuals and reviews, and preferring fast checkout methods.
Task Flow: Emily buys a gift
What This Meant for The Occult Bookstore
The task flow aligned product discovery with user goals, ensuring the mystical browsing experience felt inspiring while making purchase actions simple, intuitive, and convenient.
Synthesis
Learn More
Synthesis
Learn More
Competitor Analysis
Competitor Analysis
Checking out the competition
Checking out the Competition
I audited three key competitors: Raven’s Wing, Alchemy Arts/Hexe Haus, and Cross Crow Books. The results showed that competitors had modern design patterns like filters, product details, and high-quality visuals, but also had gaps like lack of reviews and inconsistent checkout.
I audited three key competitors: Raven’s Wing, Alchemy Arts/Hexe Haus, and Cross Crow Books. The results showed that competitors had modern design patterns like filters, product details, and high-quality visuals, but also had gaps like lack of reviews and inconsistent checkout.
What Competitors Did Well
What Competitors Did Well
Modern navigation, product categorization, some filtering, shop imagery for trust-building.
Modern navigation, product categorization, some filtering, shop imagery for trust-building.
Where They Had Gaps
Where They Had Gaps
Inconsistent product detail pages, lack of reviews, clunky checkout, confusing branding.
Inconsistent product detail pages, lack of reviews, clunky checkout, confusing branding.
What This Meant for The Business
What This Meant for The Business
Competitors may guide users smoothly, but they often lack enchantment with thin product stories and clunky checkouts breaking the spell. The Occult Bookstore already carries a century of mystique and credibility, a legacy most rivals can’t conjure up. By weaving together compelling product narratives, effortless checkout, and clear flows, the brand could transform its existing trust into something more powerful: an online experience as captivating and enduring as its history, and one that competitors can’t touch.
Competitors may guide users smoothly, but they often lack enchantment with thin product stories and clunky checkouts breaking the spell. The Occult Bookstore already carries a century of mystique and credibility, a legacy most rivals can’t conjure up. By weaving together compelling product narratives, effortless checkout, and clear flows, the brand could transform its existing trust into something more powerful: an online experience as captivating and enduring as its history, and one that competitors can’t touch.
Define
Learn More
Define
Learn More
Revealing What Was Hidden
Revealing What Was Hidden
Uncovering two distinct user journeys
Uncovering two distinct user journeys
Affinity mapping helped me give form to the unseen patterns of customers’ needs and the different behaviors, motivations, and goals that might lead them to The Occult Bookstore.
Affinity mapping helped me give form to the unseen patterns of customers’ needs and the different behaviors, motivations, and goals that might lead them to The Occult Bookstore.
Behaviors
Behaviors
Users browse before buying, rely on reviews and photos, skim text-heavy pages, and prefer quick-pay options.
Users browse before buying, rely on reviews and photos, skim text-heavy pages, and prefer quick-pay options.
Motivations
Motivations
Community validation, curiosity, and the aesthetic and spiritual appeal of products drive engagement.
Community validation, curiosity, and the aesthetic and spiritual appeal of products drive engagement.
Needs
Needs
Store information and visuals, product details at a glance, multiple visuals, and concise messaging.
Store information and visuals, product details at a glance, multiple visuals, and concise messaging.
Frustrations
Frustrations
Cluttered layouts, poor navigation, intrusive donation prompts, and friction in checkout break trust.
Cluttered layouts, poor navigation, intrusive donation prompts, and friction in checkout break trust.
Goals
Goals
Learn more about metaphysical practices, find unique gifts, and create engaging social or personal experiences.
Learn more about metaphysical practices, find unique gifts, and create engaging social or personal experiences.
While every visitor came with their own intent, two clear personas with distinct journeys emerged: those exploring the mysteries for the first time, and those who arrive with purpose.
While every visitor came with their own intent, two clear personas with distinct journeys emerged: those exploring the mysteries for the first time, and those who arrive with purpose.
The Spiritual Gifter
Emily is looking for meaningful, beautiful gifts, she values smooth navigation, quick checkout, and product stories such as artist or author details. Long checkout processes and uninspiring product pages get in her way.
The Curious Explorer
Sarah is eager to learn about metaphysical practices, she needs clear product details, reviews, and multiple visuals to guide her journey. Clutter and vague information leave her frustrated.
The Spiritual Gifter
Emily is looking for meaningful, beautiful gifts, she values smooth navigation, quick checkout, and product stories such as artist or author details. Long checkout processes and uninspiring product pages get in her way.
The Curious Explorer
Sarah is eager to learn about metaphysical practices, she needs clear product details, reviews, and multiple visuals to guide her journey. Clutter and vague information leave her frustrated.
What This Meant for The Business
What This Meant for The Business
The key insights shaped a simple vision - to bring clarity and trust to a mystical shopping experience.
Curious explorers like Sarah wanted knowledge, visuals, and resources.
Gift givers like Emily wanted an easy, beautiful way to find meaningful items.
The key insights shaped a simple vision - to bring clarity and trust to a mystical shopping experience.
Curious explorers like Sarah wanted knowledge, visuals, and resources.
Gift givers like Emily wanted an easy, beautiful way to find meaningful items.
Define
Learn More
Define
Learn More
Giving Structure to the Sacred
Giving Structure to the Sacred
Creating an IA compass for the curious and a straight path for the intentional
Creating an IA compass for the curious and a straight path for the intentional
When I first evaluated the Occult Bookstore’s site, one issue became clear: the navigation didn’t reflect how people actually shop, and research had uncovered two primary paths:
When I first evaluated the Occult Bookstore’s site, one issue became clear: the navigation didn’t reflect how people actually shop, and research had uncovered two primary paths:
Gifters who are shopping with intention, looking to quickly find books, tarot decks, or meaningful items to give.
Gifters who are shopping with intention, looking to quickly find books, tarot decks, or meaningful items to give.
Explorers who are browsing by themes like spirituality or astrology, eager to learn and discover.
Explorers who are browsing by themes like spirituality or astrology, eager to learn and discover.
But in the site's current state, products were buried under disjointed links like “Alchemist Lineage” and “Spiritual Integration Counseling.” While these spoke to the store’s identity, they made discoverability difficult and left both explorers and gifters feeling lost.
But in the site's current state, products were buried under disjointed links like “Alchemist Lineage” and “Spiritual Integration Counseling.” While these spoke to the store’s identity, they made discoverability difficult and left both explorers and gifters feeling lost.
Old Navigation
Old Navigation
Areas for Improvement:
Areas for Improvement:
jargon-heavy
jargon-heavy
inconsistent
inconsistent
hides key shopping flows
hides key shopping flows
To support both journeys, I used insights from affinity mapping, card sorting, and personas to create a clear, user-centered information architecture:
Shop by Product - Books, Tarot, Tools (Emily’s gift-focused path)
Shop by Interest - Spirituality, Astrology, Metaphysics (Sarah’s exploration path)
Services - Gift Cards, Consultations
About - Our Shop, Our Story, Donations
The result was a scalable, cohesive sitemap that aligned with the store’s diverse offerings while giving users a straightforward way to explore or shop with purpose. This was the backbone of the new navigation that became the heart of the redesign, transforming the site into a digital altar: mystical in essence, yet grounded in clarity and ease of use.
To support both journeys, I used insights from affinity mapping, card sorting, and personas to create a clear, user-centered information architecture:
Shop by Product - Books, Tarot, Tools (Emily’s gift-focused path)
Shop by Interest - Spirituality, Astrology, Metaphysics (Sarah’s exploration path)
Services - Gift Cards, Consultations
About - Our Shop, Our Story, Donations
The result was a scalable, cohesive sitemap that aligned with the store’s diverse offerings while giving users a straightforward way to explore or shop with purpose. This was the backbone of the new navigation that became the heart of the redesign, transforming the site into a digital altar: mystical in essence, yet grounded in clarity and ease of use.
New Sitemap Information Architecture
New Sitemap Information Architecture
What This Meant for the Business
What This Meant for the Business
By restructuring the site’s information architecture into clear, user-centered categories, the bookstore could finally deliver on its promise as both a retail hub and a cultural space. Products were surfaced instead of buried, making them easier to find and purchase. For the business, this meant fewer lost sales due to confusion, stronger alignment between the digital experience and the physical store’s identity, and a scalable foundation that could support future growth in both products and services.
By restructuring the site’s information architecture into clear, user-centered categories, the bookstore could finally deliver on its promise as both a retail hub and a cultural space. Products were surfaced instead of buried, making them easier to find and purchase. For the business, this meant fewer lost sales due to confusion, stronger alignment between the digital experience and the physical store’s identity, and a scalable foundation that could support future growth in both products and services.
New Navigation
New Navigation
The Result
The Result
A scalable, cohesive sitemap that aligned with the store’s diverse offerings while giving users a straightforward way to explore or shop with purpose.
The backbone of the new navigation that became the heart of the redesign, transforming the site into a digital altar: mystical in essence, yet grounded in clarity and ease of use.
A scalable, cohesive sitemap that aligned with the store’s diverse offerings while giving users a straightforward way to explore or shop with purpose.
The backbone of the new navigation that became the heart of the redesign, transforming the site into a digital altar: mystical in essence, yet grounded in clarity and ease of use.
Define
Learn More
Define
Learn More
Mapping the Path Forward
Mapping the Path Forward
Simplifying every step so the magic stays in the experience, not the struggle
Simplifying every step so the magic stays in the experience, not the struggle
To ensure the navigation and IA truly supported both personas, I mapped out the end-to-end flow of a logged-in user browsing and purchasing an item. This flow demonstrates two critical paths:
To ensure the navigation and IA truly supported both personas, I mapped out the end-to-end flow of a logged-in user browsing and purchasing an item. This flow demonstrates two critical paths:
Gifters can shop by product or take a more direct route, moving quickly from homepage to product details and checkout.
Gifters can shop by product or take a more direct route, moving quickly from homepage to product details and checkout.
Explorers can shop by interest (e.g., “Divination”) and gradually narrow into categories like books, tarot, or prints before adding to cart.
Explorers can shop by interest (e.g., “Divination”) and gradually narrow into categories like books, tarot, or prints before adding to cart.
The redesigned flow emphasizes clarity and flexibility, reducing friction at key moments like cart management and checkout. Features like quick-add, artist/author details, and streamlined QuickPay options were introduced to match user behaviors uncovered in research: scrolling to discover, relying on visuals and reviews, and preferring fast checkout methods.
The redesigned flow emphasizes clarity and flexibility, reducing friction at key moments like cart management and checkout. Features like quick-add, artist/author details, and streamlined QuickPay options were introduced to match user behaviors uncovered in research: scrolling to discover, relying on visuals and reviews, and preferring fast checkout methods.
Task Flow: Emily buys a gift
Task Flow: Emily buys a gift
What This Meant for the Business
The task flow aligned product discovery with user goals, ensuring the mystical browsing experience felt inspiring while making purchase actions simple, intuitive, and convenient.
The task flow aligned product discovery with user goals, ensuring the mystical browsing experience felt inspiring while making purchase actions simple, intuitive, and convenient.
Design
Learn More
Design
Learn More
Design
Learn More
From Paths to Pages
From Paths to Pages
Translating task flows into pages that map the essential journeys of users
Translating task flows into pages that map the essential journeys of users
With the task flow defined, the next step was translating it into layouts that supported real user needs. I set clear design goals to guide this phase and through sketches and wireframes, I tested how these principles played out across key pages:
Homepage featuring products, the store’s mission, and photography to ground the experience in authenticity.
Product Listing Pages (PLPs) with filters, sorting, and quick-view hover states to speed discovery.
Product Detail Pages (PDPs) with multiple images, reviews, artist bios, and usage guides to build purchase confidence.
Checkout redesigned with clean flows and quick-pay options to reduce friction.
These low-fidelity explorations allowed for rapid iteration and validation, ensuring the structure aligned with how users naturally browse, evaluate, and purchase before committing to polished designs.
With the task flow defined, the next step was translating it into layouts that supported real user needs. I set clear design goals to guide this phase and through sketches and wireframes, I tested how these principles played out across key pages:
Homepage featuring products, the store’s mission, and photography to ground the experience in authenticity.
Product Listing Pages (PLPs) with filters, sorting, and quick-view hover states to speed discovery.
Product Detail Pages (PDPs) with multiple images, reviews, artist bios, and usage guides to build purchase confidence.
Checkout redesigned with clean flows and quick-pay options to reduce friction.
These low-fidelity explorations allowed for rapid iteration and validation, ensuring the structure aligned with how users naturally browse, evaluate, and purchase before committing to polished designs.
Goals
Goals
Simplify navigation so products are easy to find.
Simplify navigation so products are easy to find.
Build trust through transparency (reviews, artist bios, store info).
Build trust through transparency (reviews, artist bios, store info).
Provide rich visuals and clear product details.
Provide rich visuals and clear product details.
Ensure checkout is seamless and fast.
Ensure checkout is seamless and fast.
Low-fidelity Wireframes
Low-fidelity Wireframes
Home Page
Product Listing Page
Product Description Page
Checkout Pages
Design
Learn More
Design
Learn More
Breathing Life into the Framework
High-fidelity Prototype
Wireframes established the structure, but the high-fidelity prototype really transformed it into a usable, trustworthy experience that felt true to The Occult Bookstore’s mystical identity.
Old Homepage
Old Homepage
NEW Homepage
NEW Homepage
Design
Learn More
Design
Learn More
Breathing Life into the Framework
Breathing Life into the Framework
High-fidelity Prototype
Wireframes established the structure, but the high-fidelity prototype really transformed it into a usable, trustworthy experience that felt true to The Occult Bookstore’s mystical identity.
Wireframes established the structure, but the high-fidelity prototype really transformed it into a usable, trustworthy experience that felt true to The Occult Bookstore’s mystical identity.
Old Homepage
Old Homepage
Learn More
NEW Homepage
NEW Homepage
Design
Learn More
Design
Learn More
Design
Learn More
Illuminating the Dark
Illuminating the Dark
A Color System for Mysticism and Clarity
A Color System for Mysticism and Clarity
The final solution included a scalable color system anchored in layered surfaces, subtle borders, accessible text hierarchies, brand-driven accents, The foundation for this was a dark mode palette to preserve the brand's mystique, gold and violet accents for moments of energy, WCAG-compliant colors for accessibility-friendly text, and soft, low-contrast dividers providing structure without clutter. To keep this system organized for practical application and support scalability, I created Figma tokens that followed a standardized, developer-friendly naming convention, i.e. -color/surface/bg.default.
The final solution included a scalable color system anchored in layered surfaces, subtle borders, accessible text hierarchies, brand-driven accents, The foundation for this was a dark mode palette to preserve the brand's mystique, gold and violet accents for moments of energy, WCAG-compliant colors for accessibility-friendly text, and soft, low-contrast dividers providing structure without clutter. To keep this system organized for practical application and support scalability, I created Figma tokens that followed a standardized, developer-friendly naming convention, i.e. -color/surface/bg.default.
Accessible
Accessible
All text/background pairs tested for and passed AA contrast compliance.
All text/background pairs tested for and passed AA contrast compliance.
Consistent
Consistent
Warm Golds and Cool Violets used for accents in core navigation, UI effects and CTAs.
Warm Golds and Cool Violets used for accents in core navigation, UI effects and CTAs.
Developer-friendly
Developer-friendly
Clear, functional naming conventions making tokens reusable & scalable in design systems.
Clear, functional naming conventions making tokens reusable & scalable in design systems.
Color System
Color System
Surfaces/Backgrounds
Surfaces/Backgrounds
A tonal ramp of dark neutrals created depth, hierarchy, and separation between sections and let product imagery shine while keeping the brand’s immersive mood.
A tonal ramp of dark neutrals created depth, hierarchy, and separation between sections and let product imagery shine while keeping the brand’s immersive mood.
Text Content
Text Content
A warm off-white for readability, supported by secondary tones and clear states for error, success, and disabled. Designed for legibility and AA contrast.
A warm off-white for readability, supported by secondary tones and clear states for error, success, and disabled. Designed for legibility and AA contrast.
Warm Gold Accents
Warm Gold Accents
Used in navigation, CTAs, and hovers. These tones reference alchemy and sacred metals, signaling value and trust.
Used in navigation, CTAs, and hovers. These tones reference alchemy and sacred metals, signaling value and trust.
Cool Violet Accents
Cool Violet Accents
Used for hover glows, secondary highlights, and product categories like tarot. Violet evokes mysticism, intuition, and spiritual depth.
Used for hover glows, secondary highlights, and product categories like tarot. Violet evokes mysticism, intuition, and spiritual depth.
What This Meant for the Business
What This Meant for the Business
This system turned brand colors into a functional design language that helped customers read with ease, recognize interactive elements, and feel immersed in the store’s mystical essence. It also gave developers a reusable token set for faster, more consistent implementation.
This system turned brand colors into a functional design language that helped customers read with ease, recognize interactive elements, and feel immersed in the store’s mystical essence. It also gave developers a reusable token set for faster, more consistent implementation.
Design
Learn More
Design
Learn More
Design
Learn More
Confidence at a Glance
Confidence at a Glance
Helping users explore products with context, visuals, and guidance.
Helping users explore products with context, visuals, and guidance.
Research showed that shoppers wanted clarity, confidence, and efficiency at the very first point of contact, and the original product cards left users guessing with small imagery and minimal information. This stripped-down design slowed discovery and left customers without the confidence or context they needed to make decisions, and for a store with such diverse offerings, a single one-size-fits-all card wasn’t enough.
To solve this, I created a two-tier product card system that delivers the right details at the right time:
Standard Product Cards for general products (sage, crystals, ritual tools) that:
highlight “Ways to Use” so users can imagine practical applications.
support efficiency for quick browsing.
Special Product Cards for artist/author-led products (tarot decks, prints, books) that:
display artist/author bios and customer reviews.
add credibility and context for higher-value items.
build emotional connection sby celebrating the product’s story.
Research showed that shoppers wanted clarity, confidence, and efficiency at the very first point of contact, and the original product cards left users guessing with small imagery and minimal information. This stripped-down design slowed discovery and left customers without the confidence or context they needed to make decisions, and for a store with such diverse offerings, a single one-size-fits-all card wasn’t enough.
To solve this, I created a two-tier product card system that delivers the right details at the right time:
Standard Product Cards for general products (sage, crystals, ritual tools) that:
highlight “Ways to Use” so users can imagine practical applications.
support efficiency for quick browsing.
Special Product Cards for artist/author-led products (tarot decks, prints, books) that:
display artist/author bios and customer reviews.
add credibility and context for higher-value items.
build emotional connection sby celebrating the product’s story.
Old Product Cards
Old Product Cards
Areas for Improvement:
Areas for Improvement:
Small, inconsistent thumbnails
Small, inconsistent thumbnails
Small, inconsistent thumbnails
no interactivity
no interactivity
no call to action buttons
no call to action buttons
no trust-building information like customer reviews
no trust-building information like customer reviews
minimal information (product name + price)st-building information like customer reviews
minimal information (product name + price)st-building information like customer reviews
no differentiation between product types
no differentiation between product types
no interactivity
no interactivity
no trust-building information like customer reviews
no trust-building information like customer reviews
minimal information (product name + price)
minimal information (product name + price)
no call to action buttons
no call to action buttons
no differentiation between product types
no differentiation between product types
Both card types share:
Larger, consistent visuals
Hover states for interactivity
Variable text fields for flexible data display
Scalability: built to sync with Google Sheets, enabling quick generation of cards and supporting future design handoffs.
Both card types share:
Larger, consistent visuals
Hover states for interactivity
Variable text fields for flexible data display
Scalability: built to sync with Google Sheets, enabling quick generation of cards and supporting future design handoffs.
Special Product Card
Special Product Card
Default
Learn More
Default
Learn More
Default
Learn More
Hover
Learn More
Hover
Learn More
Hover
Learn More
Standard Product Card
Standard Product Card
Default
Learn More
Default
Learn More
Default
Learn More
Hover
Learn More
Hover
Learn More
Hover
Learn More
What it Means for Users
What it Means for Users
By surfacing key details at the card level, everyday shoppers like Emily don’t have to dig through product pages just to decide if an item feels right for them, and inspiration explorers, like Sarah, can quickly understand more about the product to help them make the decision of investigating it further on the details page.
By surfacing key details at the card level, everyday shoppers like Emily don’t have to dig through product pages just to decide if an item feels right for them, and inspiration explorers, like Sarah, can quickly understand more about the product to help them make the decision of investigating it further on the details page.
The Curious Explorer
The Curious Explorer
Motivated by story and context. these users want to know who created a deck or how to use a talisman. Special product cards create trust and emotional connections that speak to their need for item-level storytelling and discovery so they feel guided, not sold to.
Motivated by story and context. these users want to know who created a deck or how to use a talisman. Special product cards create trust and emotional connections that speak to their need for item-level storytelling and discovery so they feel guided, not sold to.
The Spiritual Gifter
The Spiritual Gifter
These users are often shopping with intent (“I need incense,” “I want this book”), so extra info is optional, not mandatory. Standard cards fulfill their need for an intuitive experience that allows for fast scanning, clear structure, and less cognitive load so shopping stays quick and efficient.
These users are often shopping with intent (“I need incense,” “I want this book”), so extra info is optional, not mandatory. Standard cards fulfill their need for an intuitive experience that allows for fast scanning, clear structure, and less cognitive load so shopping stays quick and efficient.
Efficiency
Efficiency
Efficiency
Browsers wanted predictable, scannable layouts.
Browsers wanted predictable, scannable layouts.
Confidence
Confidence
Confidence
Many users wouldn’t buy without visuals, reviews, or creator context.
Many users wouldn’t buy without visuals, reviews, or creator context.
Differentiation
Differentiation
Differentiation
Users valued understanding whether a product was a tool, a gift, or a work of art.
Users valued understanding whether a product was a tool, a gift, or a work of art.
What This Meant for the Business
What This Meant for the Business
The Occult Bookstore sells everything from everyday incense to rare artifacts, so treating all products the same undersells the uniqueness of special items. For the business, these cards became more than just UI, they became a scalable, adaptable framework for showcasing unique offerings that address user needs. This gives the business flexibility with a new system that reduces friction, highlights value, and ensures every product, from sage to tarot decks, can be presented in a way that builds trust and inspires purchase.
The Occult Bookstore sells everything from everyday incense to rare artifacts, so treating all products the same undersells the uniqueness of special items. For the business, these cards became more than just UI, they became a scalable, adaptable framework for showcasing unique offerings that address user needs. This gives the business flexibility with a new system that reduces friction, highlights value, and ensures every product, from sage to tarot decks, can be presented in a way that builds trust and inspires purchase.
Results
Learn More
Results
Learn More
Results
Learn More
Impact & Looking Ahead
Impact & Looking Ahead
Usability Testing Results and Next Steps
Usability Testing Results and Next Steps
Usability testing confirmed that the redesign solved major frustrations and had measurable and qualitative impact:
23% decrease in time to find and purchase a product.
Users described the experience as “clear,” “easy to navigate,” and “visually appealing.”
The bookstore could finally showcase its mystical personality without sacrificing usability.
Navigation felt intuitive and aligned with user mental models.
Clearer product cards with hover previews helped users browse efficiently.
Reviews, artist bios, and multiple photos built confidence in purchases.
Checkout was faster, less cluttered, and more trustworthy.
Usability testing confirmed that the redesign solved major frustrations and had measurable and qualitative impact:
23% decrease in time to find and purchase a product.
Users described the experience as “clear,” “easy to navigate,” and “visually appealing.”
The bookstore could finally showcase its mystical personality without sacrificing usability.
Navigation felt intuitive and aligned with user mental models.
Clearer product cards with hover previews helped users browse efficiently.
Reviews, artist bios, and multiple photos built confidence in purchases.
Checkout was faster, less cluttered, and more trustworthy.
For the Business
For the Business
The redesign preserves the store’s lineage by embedding their symbols, history, and values into the UI while also making the mystical accessible. Just as the Occult Bookstore curates rare and sacred items, the design curates a clear, trustworthy, and immersive digital journey.
The redesign preserves the store’s lineage by embedding their symbols, history, and values into the UI while also making the mystical accessible. Just as the Occult Bookstore curates rare and sacred items, the design curates a clear, trustworthy, and immersive digital journey.
For Users
For Users
Seekers, gifters, and explorers now find what they need quickly, with transparency, usability, and trust intact. Reviews, visuals, and intuitive flows empower them to explore confidently a credible, digital storefront that finally reflects the beauty and legacy of its physical counterpart.
Seekers, gifters, and explorers now find what they need quickly, with transparency, usability, and trust intact. Reviews, visuals, and intuitive flows empower them to explore confidently a credible, digital storefront that finally reflects the beauty and legacy of its physical counterpart.
Next Steps
Next Steps
While the redesign set a strong foundation, next steps include:
While the redesign set a strong foundation, next steps include:
Light mode option for accessibility.
Light mode option for accessibility.
Adapting for mobile.
Adapting for mobile.
Expanding search functionality with smarter filters and suggestions.
Expanding search functionality with smarter filters and suggestions.
Expanded content for product storytelling (videos, guides, tutorials).
Expanded content for product storytelling (videos, guides, tutorials).
Highlighting in-store pickup and product availability for hybrid shoppers.
Highlighting in-store pickup and product availability for hybrid shoppers.
Adding gift options.
Adding gift options.
Reflection
Learn More
Reflection
Learn More
Lessons from Beyond the Screen
This project wasn’t just about designing a cleaner interface, it was about translating a unique in-store experience into a digital journey. By listening deeply to users, aligning on brand values, and building a cohesive design system, we transformed confusion into clarity, helping The Occult Bookstore thrive in both the mystical and modern worlds.
This project reminded me that great design is about more than just UI polish. It’s about listening deeply, finding the gaps between brand and user experience, and creating systems that honor both.
By grounding my work in research and storytelling, I helped transform The Occult Bookstore into not just a place to shop, but a place to learn, explore, and connect.
This project wasn’t just about designing a cleaner interface, it was about translating a unique in-store experience into a digital journey. By listening deeply to users, aligning on brand values, and building a cohesive design system, we transformed confusion into clarity, helping The Occult Bookstore thrive in both the mystical and modern worlds.
This project reminded me that great design is about more than just UI polish. It’s about listening deeply, finding the gaps between brand and user experience, and creating systems that honor both.
By grounding my work in research and storytelling, I helped transform The Occult Bookstore into not just a place to shop, but a place to learn, explore, and connect.
Next Case Study
Next Case Study
Simplifying Symplifica
Transforming legal complexity into an intuitive mobile experience with user-centered design. How research, wireframing, and iterative testing is helping Colombian families manage domestic workers with legal clarity and ease.
Reflection
Learn More
Lessons from Beyond the Screen
This project wasn’t just about designing a cleaner interface, it was about translating a unique in-store experience into a digital journey. By listening deeply to users, aligning on brand values, and building a cohesive design system, we transformed confusion into clarity, helping The Occult Bookstore thrive in both the mystical and modern worlds.
This project reminded me that great design is about more than just UI polish. It’s about listening deeply, finding the gaps between brand and user experience, and creating systems that honor both.
By grounding my work in research and storytelling, I helped transform The Occult Bookstore into not just a place to shop, but a place to learn, explore, and connect.
This project wasn’t just about designing a cleaner interface, it was about translating a unique in-store experience into a digital journey. By listening deeply to users, aligning on brand values, and building a cohesive design system, we transformed confusion into clarity, helping The Occult Bookstore thrive in both the mystical and modern worlds.
This project reminded me that great design is about more than just UI polish. It’s about listening deeply, finding the gaps between brand and user experience, and creating systems that honor both.
By grounding my work in research and storytelling, I helped transform The Occult Bookstore into not just a place to shop, but a place to learn, explore, and connect.
Next Case Study
Simplifying Symplifica
Transforming legal complexity into an intuitive mobile experience with user-centered design. How research, wireframing, and iterative testing is helping Colombian families manage domestic workers with legal clarity and ease.
Next Case Study
Next Case Study
Simplifying Symplifica
Transforming legal complexity into an intuitive mobile experience with user-centered design. How research, wireframing, and iterative testing is helping Colombian families manage domestic workers with legal clarity and ease.