Frightfully Fun UX/UI with a Purposefully Designed Online Web Store and Usability Study
UX/UI Design | Web Design | Wireframing | Prototyping | Case Study | User Surveys & Data | UX Metrics
UX/UI & Website Design | 2023
INTRODUCTION
Tell-Tale Hearth
Tell-Tale Hearth is a concept brand and online shop imagined to explore how thoughtful UX/UI design can create a rich and immersive e‑commerce experience. The brand celebrates Dark Victorian, Medieval, Gothic, and Halloween decor for those who find beauty in the moody and macabre year-round. I wanted the digital experience to feel like stepping into an elegant old parlor lit by candlelight, where each product has its own story to tell, yet the interface remains intuitive and accessible for modern shoppers.
To bring this vision to life, I developed a detailed design brief, brand direction, and site structure rooted in research and usability testing. My process included defining the target audience, creating user flows, building wireframes, and prototyping interactions that balanced atmosphere with function. The result is an e-commerce concept that blends gothic charm with clear, purposeful design, showing how visual storytelling can elevate even the darkest aesthetic into something timeless and user-centered.
ROLE
LEAD WEB DESIGNER, UX/UI DESIGNER, BRAND DESIGNER
TIMELINE
2023: 8-10 WEEKS
TOOLS
ADOBE XD, PHOTOSHOP, ILLUSTRATOR
INDEPENDENT PROJECT, SCHOOL PROJECT
TEAM
DELIVERABLES
DESIGN BRIEF, RESEARCH FINDINGS, WIREFRAMES, HIGH-FIDELITY MOCKUPS, INTERACTIVE PROTOTYPE, DECIDE REPORT, USABILITY STUDY
WEBSITES
OVERVIEW
What is Tell-Tale Hearth?
At its heart, Tell-Tale Hearth is a concept for an e-commerce platform designed to bring the charm of a Gothic boutique into the digital space. The project explores how an online store can embody the personality of a niche retail brand, blending rich visual storytelling with practical usability. The goal was to create an experience that feels immersive and atmospheric, yet intuitive for shoppers who value both mood and function.
This project explored how strong visual storytelling and deliberate UX design choices can coexist within a single experience. Every element, from typography and color palette to navigation and interaction, was developed to evoke a sense of mystery and sophistication without losing clarity or usability. It was an opportunity to apply design theory and research methods through a complete UX/UI process—defining the problem, identifying user needs, building wireframes, and creating prototypes. Throughout each stage, I focused on how tone, hierarchy, and interaction could express the brand’s character while keeping the experience seamless and user-centered.
Ultimately, Tell-Tale Hearth demonstrates how thoughtful UX/UI design can transform a highly stylized brand into a seamless and engaging digital experience. It became an exploration of how UX principles can elevate storytelling, blending dark, romantic visuals with accessible and purposeful design choices. The result is an online experience that feels immersive and distinct yet approachable, proving that even the darkest themes can be made elegant through intentional design.
PROBLEM
A boutique brand expanding its reach beyond its physical store and create a meaningful online experience.
Tell-Tale Hearth had built a loyal customer base through its brick-and-mortar store in Salem, Massachusetts. The shop’s appeal came from its carefully curated collection of dark, Victorian-inspired home decor and its rich in-person atmosphere. However, the lack of an online presence limited its reach. Many potential customers across the country loved the style but had no way to experience the store without traveling. The challenge was to translate the feeling of visiting the shop into a digital format that could engage, inspire, and convert visitors online.
THE BRIEF
“How can we create an online experience that captures the personality and atmosphere of the Tell-Tale Hearth brick and mortar store while providing a seamless and accessible shopping experience for customers everywhere?”
The business goal was to extend the success of the physical location into the e-commerce space while preserving the brand’s sense of identity. The new website needed to function as more than just an online store, it needed to tell a story. Competing against seasonal retailers and large marketplaces like Amazon, Tell-Tale Hearth would differentiate itself through immersive design, year-round availability, and exceptional customer service that reflected its boutique roots.
This project set out to solve a clear design problem: how to build a user experience that feels both personal and scalable. The process began with defining the audience, which included homeowners, designers, and enthusiasts drawn to Gothic and Victorian aesthetics, and understanding their motivations. By focusing on emotional connection and usability, the goal was to make every visit to the site feel like stepping into the store itself, no matter where the user was.
DISCOVER & DEFINE
Establishing clear goals for direction and clarity
At the start of the project, I outlined specific goals to guide both the creative and technical direction of Tell-Tale Hearth. Defining what success looked like early helped ground the process in both user and business needs. My intent was to design an experience that captured the allure of a Gothic boutique while ensuring that functionality and usability remained at the forefront.
-
Before beginning any visual work, I reviewed the project brief and clarified deliverables, milestones, and timelines. This ensured a shared understanding of priorities and allowed room for thoughtful exploration within defined boundaries.
-
I identified the target audience as users who appreciate dark, romantic aesthetics and high-quality artisan goods. The goal was to create a shopping experience that resonated emotionally while staying clear and accessible.
-
The early phase focused on defining how the aesthetic tone and user experience could complement one another. By balancing art direction and usability, the project aimed to create an experience that was both beautiful and easy to navigate.
Gaining insights through research and analysis
Research guided many of my design decisions. I explored similar e-commerce sites and lifestyle brands to understand how others balanced atmosphere and usability. Although there were few direct comparisons, I found inspiration in platforms that used strong storytelling and immersive visuals to draw users in while maintaining straightforward navigation.
-
I studied design patterns used in boutique and niche retail websites, focusing on layout, imagery, and interactive elements. Many effective examples relied on subtle motion, minimal navigation layers, and immersive photography to establish mood without overwhelming users.
-
Some sites leaned heavily on aesthetic impact at the cost of usability. I found that excessive animation or dark contrast ratios often hindered readability. These insights helped me refine my approach to ensure visual richness without sacrificing clarity.
-
The analysis confirmed that successful e-commerce design thrives on balance. A strong brand identity, supported by intuitive user flows and clean interfaces, creates a more engaging experience. These findings shaped the foundation for the design decisions that followed.
DESIGN & PROTOTYPING
Building structure through design exploration
With a clear direction set from the research phase, I moved into designing the wireframes that would define the structure and flow of the Tell-Tale Hearth online experience. My goal was to translate the brand’s tone and personality into a functional layout that supported a seamless user journey.
The wireframes became a blueprint for how storytelling and usability would come together, allowing me to visualize the experience and refine how users would browse, discover, and interact with products.
I started with low-fidelity wireframes to focus purely on structure, navigation, and hierarchy before layering in visual design. Each layout decision supported the user’s path through the site, guiding them naturally from homepage to product selection and checkout. Building out these flows helped identify potential friction points early, making it easier to adjust interactions and maintain clarity.
Once the wireframes felt solid, I advanced to mid- and high-fidelity designs. This stage allowed me to explore how type, imagery, and spacing could reinforce the brand’s atmospheric quality. I incorporated feedback along the way to strengthen hierarchy and ensure that even with a rich visual style, the site remained intuitive and efficient to use.
Bringing the experience to life through prototyping
With the structure in place, I built a high-fidelity prototype to simulate user interactions and test the overall flow.
The prototype demonstrated how users would move through the site, explore product details, and complete purchases while maintaining the tone and visual integrity of the brand.
INTERACTIVE NAVIGATION FLOW
The prototype included a responsive navigation system with layered menus that gave users easy access to categories without losing their sense of place.PRODUCT EXPLORATION
Product pages featured subtle hover states and microinteractions to invite engagement and mimic the feeling of browsing in a boutique setting.STREAMLINED CHECKOUT PROCESS
The checkout sequence was designed with minimal friction, using progressive disclosure to maintain focus and reduce cognitive load.GUIDED DISCOVERY
The overall layout encouraged organic exploration, connecting users with related products through a journey that felt natural and engaging.
BUILD & REFINE
Translating design into a functional and adaptable experience
With the design direction established, the next phase focused on how the visual and interactive elements could translate into a real-world environment. My goal was to ensure that the layout, hierarchy, and interactions could function seamlessly when brought into code.
I began refining the design to better align with responsive best practices, accessibility standards, and modular structure. Each component was considered not just for its look, but for how it would behave and scale across devices and screen sizes.
-
The layout was built around reusable sections that could easily be adapted for future pages or campaigns. This approach ensured consistency while allowing flexibility for content updates or seasonal promotions.
-
I paid close attention to spacing, typography, and contrast to maintain readability across breakpoints. Interactive elements like buttons and links were designed with clear states and adequate touch targets for both desktop and mobile use.
-
Wireframes and high-fidelity mockups were annotated with specifications for spacing, font styles, and interaction notes to guide development. This made the transition from design to build more efficient and ensured that key details were preserved throughout implementation.
From static layouts to structured interaction
Once the design was fully mapped out, I organized each visual element into clear, modular components that could be easily integrated into an HTML and CSS framework. This phase was about transforming a conceptual design into a living system, one that could support future refinement and usability testing without losing its visual integrity.
Even with these refinements in place, there was always room to push the designs further.
ITERATION
Learning from Users to Refine the Experience
Once the prototype was complete, I conducted a user study to understand how people interacted with the site and to identify where improvements could be made. The goal was to see whether the flow of browsing, selecting, and checking out products felt intuitive and enjoyable. I also wanted to learn if the brand’s visual tone and interactions resonated with users who shop for seasonal home decor throughout the year.
Participants included frequent online shoppers who visit large retail websites as well as those who enjoy shopping in person at craft and home stores. By observing their behaviors and gathering feedback, I gained insight into how real customers navigate an e-commerce experience and where they expect certain visual or interactive cues to appear.
Secondary goals of this user testing included whether the website prototype behaved in a similar manner to other e-commerce websites and how it measured up to these other sites.
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:
Initial Takeaways: Looking at the website, finding the navigation and search, finding interesting products.
Shopping the Products: Shopping for a specific product and making a purchase.
Adding Products to the Cart: Following up with selecting an item and adding it to the cart by looking at the shopping cart.
Checking Out: Finalizing the purchase and returning to the home page.
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.
The feedback reinforced the importance of familiarity in design. Users appreciated the clean navigation and found it easy to locate products, but they also wanted reassurance that they could trust the brand. Comments about wanting the site to be “real” and wishing they could buy the items right away confirmed that the concept resonated emotionally.
From these insights, I refined several details to strengthen usability and brand cohesion. I adjusted hierarchy within the checkout process to create a smoother flow, refined button placement for better accessibility, and ensured visual consistency between product pages and supporting content. Each adjustment brought the prototype closer to a true, seamless shopping experience that reflected the vision of a boutique-style e-commerce brand.
FINAL DESIGN
The final design brought everything together into a cohesive and polished experience.
The insights gathered from the user study shaped the final direction of the website. I refined layouts, adjusted spacing, and streamlined the overall flow to make navigation feel more intuitive. Each page was designed to guide users naturally from browsing to checkout while maintaining the brand’s sense of atmosphere and intrigue.
Typography, color, and imagery worked together to capture the spirit of Tell-Tale Hearth. The result is a balanced experience that feels immersive yet practical, blending aesthetic richness with clear functionality.
The final prototype reflects the evolution of the concept from an early wireframe into a fully realized experience. Interactive elements like hover states, layered navigation, and clear visual hierarchy helped create a shopping flow that feels both elegant and efficient.
The finished design feels complete and grounded. Every choice supports the brand’s goal of creating an inviting, year-round destination for decor that celebrates the charm of the uncanny.
A. 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. I wanted users to feel immediately drawn into the atmosphere without losing clarity or orientation. The layered navigation bar, hero carousel, and featured product grid were all designed to feel immersive while remaining easy to explore.
I focused on visual hierarchy and flow. The typography established tone and pacing, while subtle hover effects and transitions gave users a sense of refinement and continuity throughout the journey. The challenge was balancing dark, moody visuals with enough breathing room to keep everything approachable.
I designed the navigation to follow a clear, familiar structure similar to well-established retail sites like Pottery Barn and Target. It relied on a clean top navigation with intuitive categories that made browsing straightforward and predictable for users. While the final prototype didn’t feature advanced transitions or mega-menus, its simplicity helped maintain clarity and ease of use. If I revisit this project in Figma, exploring a refined approach with layered or expandable menus could be an interesting next step to improve discoverability and hierarchy.
This section of the site became the anchor for the entire user experience. It captured the brand’s world while setting the tone for usability and trust early in the journey.
B. FINAL DESIGN / LANDING PAGES, PRODUCT PAGES, AND DETAIL VIEWS
Translating atmosphere into a tactile shopping experience
We introduced the Shop the Look feature to highlight curated product pairings and seasonal collections. These were primarily showcased on the homepage and key landing pages to drive engagement and exploration. Each look linked to its own detailed product page that outlined all the featured items, serving as a bridge between campaign storytelling and direct purchasing.
The product pages were designed to feel like curated exhibits. Each product image was given generous space, paired with supporting details that encouraged exploration. Users could interact with zoom and hover features to inspect textures and finishes, reinforcing a sense of craftsmanship and care.
Typography and spacing were key to establishing rhythm and readability. The palette shifted slightly lighter on these pages to make the text more legible against product photography while maintaining the overall aesthetic of subdued luxury. To make shopping effortless, I introduced a feature called Shop the Look. With one click, visitors could add every item within a styled scene to their cart. This gave users a simple way to recreate an entire aesthetic without having to hunt for each piece individually. It transformed browsing into an intuitive experience that encouraged discovery and immediate engagement.
I paid close attention to hierarchy between essential details such as; product name, price, availability, and “Add to Cart” action. The design minimized distractions to keep users focused on completing their purchase without friction.
This portion of the design felt like a conversation between brand and user. It combined emotional storytelling with practical usability, allowing the brand’s tone to carry through every interaction.
C. FINAL DESIGN / CHECKOUT AND CONFIRMATION FLOW
Simplifying the final steps while maintaining trust and consistency
The checkout process was designed with clarity and ease in mind. I wanted users to feel confident as they completed their purchase, so I prioritized transparency in layout and feedback. Progress indicators, clear input fields, and subtle confirmation states helped reinforce trust.
The design carried over the same aesthetic values from the rest of the site. Dark backgrounds, soft highlights, and consistent typography ensured that the checkout felt like part of the same cohesive experience rather than a utilitarian afterthought.
Each stage of checkout was refined to reduce friction. Payment details, shipping info, and final confirmation were presented one step at a time, giving users focus without cognitive overload.
The result was a process that felt seamless and intentional. It reinforced the brand’s reliability and elegance while closing the user’s journey with confidence, trust, and satisfaction.
OUTCOME
A rewarding exploration in designing for simplicity and intent
This project pushed me to think holistically about how design choices influence user behavior. Every decision, from layout to interaction flow, was shaped by the goal of making the shopping experience feel seamless and natural. The “Shop the Look” feature became the heart of that vision, turning inspiration into effortless action. I walked away with a deeper appreciation for how clarity and simplicity can elevate both design and usability.
REFLECTION
Revisiting a project that shaped my UX perspective
These projects reminded me how design evolves through partnership. Each one required adapting to different goals, audiences, and platforms while maintaining a unified brand experience. Balancing creative flexibility with consistency pushed me to think critically about hierarchy, accessibility, and how design choices impact the story being told.
COLLABORATION SHARPENS CLARITY
Working closely with marketing, product, and content teams taught me how clear communication early on saves time and leads to stronger creative decisions.ADAPTABILITY IS ESSENTIAL
Working closely with marketing, product, and content teams taught me how clear communication early on saves time and leads to stronger creative decisions.CONSISTENCY CREATES TRUST
Moving between HubSpot and WordPress systems required adjusting both design and technical approaches to fit each project’s structure without compromising quality.
These experiences deepened my understanding of how structure, clarity, and collaboration shape meaningful design. Each project refined how I approach complex problems and balance creativity with practicality. I came away with a stronger sense of confidence in my process and a clearer perspective on how thoughtful design can connect people with ideas that matter.