Frightfully Fun UX/UI with a Purposefully Designed Online Web Store and Usability Study

UX/UI & Website Design | 2023

OVERVIEW

Tell-Tale Hearth — From Brick & Mortar to Online & Immersive

Tell-Tale Hearth is a concept brand and online shop created to explore how UX and UI design can support a richly atmospheric e-commerce experience without sacrificing usability. The brand centers on Dark Victorian, Medieval, Gothic, and Halloween decor for customers who appreciate this aesthetic year-round. The goal was to translate the feeling of a highly curated boutique into a digital space that feels immersive, intentional, and easy to navigate.

I approached this project by defining a clear vision, audience, and structure before moving into design. The experience was shaped through user flows, wireframes, and interactive prototypes that balanced mood with clarity. Every design decision focused on how visual storytelling, hierarchy, and interaction could work together to guide users naturally through browsing and purchasing.

Ultimately, Tell-Tale Hearth became an exploration of how thoughtful UX design can elevate a highly stylized brand into a functional and engaging online experience. The final concept blends atmosphere with practicality, showing how even dramatic aesthetics can feel approachable, intuitive, and purposeful when grounded in strong design fundamentals.

ROLE

LEAD WEB DESIGNER, UX/UI DESIGNER, BRAND DESIGNER

TIMELINE

2023: 8-10 WEEKS

TOOLS

ADOBE XD, PHOTOSHOP, ILLUSTRATOR

TEAM

INDEPENDENT PROJECT, SCHOOL PROJECT

DESIGN BRIEF, RESEARCH FINDINGS, WIREFRAMES, HIGH-FIDELITY MOCKUPS, INTERACTIVE PROTOTYPE, DECIDE REPORT, USABILITY STUDY

DELIVERABLES

WEBSITES

VIEW THE TELL TALE HEARTH PROTOTYPE →

CREATIVE DIRECTION

Designing a digital extension of a highly atmospheric retail experience

Tell-Tale Hearth had built a loyal following through its brick and mortar store in Salem, Massachusetts. The appeal came from a carefully curated collection of dark, Victorian-inspired decor and the immersive atmosphere of the space itself. Without a robust online experience, that connection was limited to those who could visit in person. The challenge was translating that sense of place into a digital environment that felt just as intentional and engaging.

From the beginning, I approached this project as both a brand translation and a usability challenge. The goal was not simply to sell products online, but to create an experience that preserved the store’s personality while supporting clarity, trust, and ease of use. Every decision needed to respect the emotional pull of the brand while remaining practical and scalable.

THE BRIEF

“How can Tell-Tale Hearth’s atmosphere and personality translate into an intuitive, accessible online shopping experience?”

With this direction in place, I defined clear creative and functional goals before moving into design. I focused on understanding the audience, their motivations, and how they typically navigate and shop online. This included homeowners, designers, and enthusiasts drawn to Gothic and Victorian aesthetics who value quality, storytelling, and ease of use.

I also studied comparable retail and lifestyle sites to identify patterns that worked well and areas where usability often broke down. While many sites succeeded visually, some relied too heavily on mood at the expense of clarity. These insights reinforced the importance of balance. The design needed to feel immersive without becoming cumbersome, and expressive without sacrificing legibility or navigation.

This foundation shaped every design decision that followed. By aligning visual tone with proven e-commerce patterns, the project established a clear path forward that honored the brand while meeting user expectations.

WIREFRAMES

PROTOTYPES

PRODUCTION + DESIGN

Translating direction into structure, interaction, and flow

With a clear creative direction established, I moved into production by defining the structure and flow of the Tell-Tale Hearth experience. This phase focused on translating the brand’s tone into layouts that felt familiar to e-commerce users while still supporting a rich, atmospheric presentation. My goal was to create an experience that guided users naturally from discovery through checkout without introducing friction.

I began with wireframes to focus on hierarchy, navigation, and page flow before introducing visual detail. This allowed me to evaluate how users would browse, explore products, and move through the site, while identifying potential pain points early. Once the structure felt solid, I advanced into high-fidelity designs that balanced clarity with visual depth.

The visual identity and brand system developed for Tell-Tale Hearth informed many of these decisions and is explored in more detail in a separate case study. View the Branding Case Study.

Design foundations and production considerations

Layouts were designed to follow proven e-commerce patterns, using a clear top navigation and predictable page structures. This ensured usability remained familiar while allowing the visual design to carry the brand’s personality.
Design decisions were grounded in how users typically shop online. I focused on clear category paths, readable product information, and intuitive calls to action that reduced decision fatigue.
Dark, moody visuals were paired with strong contrast, generous spacing, and consistent hierarchy to maintain legibility and ease of use throughout the experience.
High-fidelity designs were organized into modular components, making them easier to translate into a structured HTML and CSS framework while preserving consistency across pages.

PRODUCTION + DESIGN | PROTOTYPE PATH

Bringing the experience to life through prototyping

With the layouts and visual direction in place, I created a high-fidelity prototype to test interactions and overall flow. The prototype simulated the complete shopping experience, from homepage discovery through product exploration and checkout, allowing me to evaluate pacing, clarity, and usability.

Key interactions were designed to support ease and confidence throughout the journey. Navigation remained straightforward and predictable, product pages encouraged exploration through subtle interaction cues, and the checkout flow was intentionally streamlined to reduce cognitive load. The overall layout supported guided discovery, helping users move organically between curated collections and individual products without feeling overwhelmed.

This prototype became the foundation for validation and refinement, setting the stage for user testing and iteration in the next phase.

ITERATION

Learning from users to strengthen clarity and trust

Once the prototype was complete, I conducted a user study to understand how people interacted with the experience and where refinements could improve clarity and confidence. The primary focus was evaluating the flow from browsing through checkout, as well as how users responded to the site’s visual tone and overall cohesion.

Participants included frequent online shoppers who use large retail platforms alongside those who regularly shop in physical home and craft stores. Observing their behavior revealed how closely the experience aligned with familiar e-commerce patterns and where users expected additional reassurance or feedback.

Secondary insights focused on how the prototype compared to established retail experiences. This helped validate that the structure and navigation felt familiar while still supporting a distinctive brand presence.

User Study/Research & DECIDE Evaluation Details

The study evaluated how users explored and completed tasks within the Tell-Tale Hearth prototype. I focused on navigation clarity, product discovery, and checkout flow. For this study, I conducted a 30-45 minute test to evaluate the user experience of the Tell Tale Hearth website. This included a couple questions with interaction, navigating within the website, pain points, reasons for use, and competitive analysis.
Timed online tasks and a follow-up survey were used to capture both behavioral and reflective feedback.
Participants ranged from 20 to 50 years old and included shoppers who browse sites like Target, Amazon, and Spirit Halloween, as well as those who frequent home decor and craft stores such as Michaels Crafts, Hobby Lobby, Target, and Jo-Anns.
Participant profiles included the following relevant information with the following factors:
- Online shoppers who frequently visit sites like Amazon.com, Target.com, and SpiritHalloween.com.
- Users who visit brick-and-mortar stores like Michaels Crafts, Hobby Lobby, Home Depot, and Target.
- Age and Demographics: Adults from 20 – 50 years old, shoppers who look for home decor online or in person, folks who enjoy the Halloween holidays.
- Reasons behind using the website: Restrict test participants to people wanting to purchase home decor online. Those who like to shop online and would enjoy a niche type of decor.
- Recruitment: I recruited participants through Facebook groups, friends and family, and company slack channels. Each participant is offered a $5 Starbucks Gift Card for their time and attention.
Scenario Visualization:
Participants will be asked to imagine the following while taking the test/survey: You’re looking for an easy way to shop for Halloween decor that is available all year round. You are also looking for this type of decor but don’t necessarily want the poor quality that tends to be available from stores like Spirit Halloween. You want the quality to be closer to Target and Pottery Barn but have an easy and quick way to find what you want.
Users were asked to find specific decor items, add them to their cart, and complete a checkout. These tasks revealed how they approached navigation, product filtering, and shopping flow.

Test Tasks:
Tasks will measure how well new users navigate and interact within the website. This will include the following:
1. Initial Takeaways: Looking at the website, finding the navigation and search, finding interesting products.
2. Shopping the Products: Shopping for a specific product and making a purchase.
3. Adding Products to the Cart: Following up with selecting an item and adding it to the cart by looking at the shopping cart.
4. Checking Out: Finalizing the purchase and returning to the home page.
5. Final takeaways and thoughts on the website’s interaction.
Participants used their own desktop or laptop devices to access the interactive Adobe XD prototype.
I recruited participants through Facebook groups, professional networks, and word of mouth, offering a small gift card as a thank-you for their time.
Some highlights from this survey included some users wishing the website was real because they lamented that this sort of decor was difficult to find at different times of the year.

VIEW THE DECIDE PDF →

VIEW THE FINAL UX REPORT PDF →

ITERATION | USER STUDY & RESEARCH

The feedback reinforced the importance of familiarity and trust. Users found the navigation intuitive and the shopping experience easy to follow. Several participants commented that they wished the site were live and expressed interest in purchasing the products, which confirmed that the concept resonated both emotionally and functionally.

Based on these insights, I refined key elements of the design. Adjustments included improving hierarchy within the checkout flow, refining button placement for accessibility, and strengthening visual consistency across pages. These changes helped create a more confident and seamless experience that aligned with the original vision of a boutique-style e-commerce brand.

FINAL DESIGN OVERVIEW

The final design brought everything together into a cohesive and polished experience

Insights from the user study informed the final refinements to layout, spacing, and flow. I streamlined navigation and page structure to guide users naturally from browsing to checkout while preserving the brand’s atmosphere and sense of intrigue.

Typography, color, and imagery worked together to support both mood and clarity. The result is an experience that feels immersive without becoming overwhelming, balancing visual richness with clear and functional design choices.

The final prototype represents the full evolution of the concept, from early wireframes to a complete e-commerce experience. Clear hierarchy, subtle interaction cues, and consistent patterns created a shopping flow that feels intuitive, confident, and cohesive across the site.

FINAL DESIGN | HOMEPAGE AND NAVIGATION FLOW

Building a welcoming entry point with a clear sense of direction

The homepage served as the introduction to Tell-Tale Hearth’s identity. The goal was to draw users into the atmosphere immediately while maintaining clarity and orientation. Featured collections, supporting imagery, and a structured layout worked together to establish tone without overwhelming the experience.

Visual hierarchy played a key role in guiding attention. Typography set the rhythm of the page, while spacing and layout created moments of focus and rest. Balancing dark, moody visuals with ample breathing room helped ensure the design felt inviting rather than heavy.

FINAL DESIGN | HOMEPAGE AND NAVIGATION FLOW | HEADER

The navigation followed a familiar and trusted e-commerce structure similar to sites like Pottery Barn and Target. A clean top navigation with clearly labeled categories made browsing predictable and efficient. The decision to avoid mega-menus or complex interactions was intentional, prioritizing clarity and ease of use over novelty.

This combination of atmosphere and familiarity anchored the entire experience. The homepage established trust early, setting expectations for how users would explore the site and reinforcing confidence as they moved deeper into the shopping flow.