Diamond
Luxe Co.
Diamond Luxe Co. is a Shopify-based e-commerce store focused on luxury-themed clothing and accessories targeted at crypto and fintech enthusiasts. The goal was to create a high-end shopping experience with a strong brand identity and seamless purchasing process.
Diamond Luxe Co. is a Shopify-based e-commerce store focused on luxury-themed clothing and accessories targeted at crypto and fintech enthusiasts. The goal was to create a high-end shopping experience with a strong brand identity and seamless purchasing process.
E-commerce
My Role
My Role
UX/UI Designer, Brand Strategist, Web Developer
UX/UI Designer, Brand Strategist, Web Developer
Project Dates
Project Dates
Date 2024 / Early 2025
Date 2024 / Early 2025
Diamond Luxe Co. (E-commerce UX/UI Case Study)
Diamond Luxe Co.
(E-commerce UX/UI Case Study)
Diamond Luxe Co. (E-commerce UX/UI Case Study)
Luxury Crypto Streetwear: A Shopify Store Built for High-End Investors & Traders
Luxury Crypto Streetwear: A Shopify Store
Built for High-End Investors & Traders
What I Did:
Designed & developed a Shopify e-commerce store specializing in luxury crypto-themed apparel.
Created a cohesive brand identity to appeal to high-net-worth individuals and crypto enthusiasts.
Focused on UX/UI improvements, conversion optimization, and a seamless shopping experience.
Integrated Print-on-Demand solutions to streamline operations.
What I Did:
Designed & developed a Shopify e-commerce store specializing in luxury crypto-themed apparel.
Created a cohesive brand identity to appeal to high-net-worth individuals and crypto enthusiasts.
Focused on UX/UI improvements, conversion optimization, and a seamless shopping experience.
Integrated Print-on-Demand solutions to streamline operations.
The Problem
Crypto enthusiasts and fintech professionals often struggle to find high-quality, stylish, and luxury-themed apparel that represents their interests. Many existing crypto-related fashion brands offer low-quality designs or lack a premium feel, making it difficult for consumers to express their financial and tech-savvy lifestyles through fashion. Additionally, high shipping costs are a frequent pain point, discouraging potential buyers. Another challenge is that while some customers seek a sleek, high-end aesthetic, others appreciate fun and playful designs that still maintain a premium look.
Crypto enthusiasts and fintech professionals often struggle to find high-quality, stylish, and luxury-themed apparel that represents their interests. Many existing crypto-related fashion brands offer low-quality designs or lack a premium feel, making it difficult for consumers to express their financial and tech-savvy lifestyles through fashion. Additionally, high shipping costs are a frequent pain point, discouraging potential buyers. Another challenge is that while some customers seek a sleek, high-end aesthetic, others appreciate fun and playful designs that still maintain a premium look.
The Solution
Developed a visually compelling Shopify storefront using a clean and modern aesthetic. Integrated well-structured product categories, compelling product descriptions, and strategic use of lifestyle imagery to enhance the shopping experience. To remove a common pain point, the store offers free shipping on all products, making purchasing easier and more attractive to customers. Additionally, Diamond Luxe Co. balances luxury with a bit of fun flair, offering a mix of sleek, stylish crypto-inspired apparel and lighthearted, engaging designs that reflect the culture’s playful side.
Developed a visually compelling Shopify storefront using a clean and modern aesthetic. Integrated well-structured product categories, compelling product descriptions, and strategic use of lifestyle imagery to enhance the shopping experience. To remove a common pain point, the store offers free shipping on all products, making purchasing easier and more attractive to customers. Additionally, Diamond Luxe Co. balances luxury with a bit of fun flair, offering a mix of sleek, stylish crypto-inspired apparel and lighthearted, engaging designs that reflect the culture’s playful side.
Tools / Skills Used:
🛠 Shopify | UX/UI Design | Figma | Photoshop | Adobe Illustrator | E-commerce Optimization
🔗 Live Project: Diamond Luxe Co.
———— Want to Learn More About the Project? ————
———— Want to Learn More About the Project? ————
———— Want to Learn More About the Project? ————
Mood Board, Crafting a Vision: The Aesthetic of Crypto Luxury
Mood Board, Crafting a Vision:
The Aesthetic of Crypto Luxury
Our mood board serves as the foundation for Diamond Luxe Co.’s brand identity, blending crypto culture with high-end fashion. The visuals capture an aspirational lifestyle—where digital assets meet luxury, exclusivity, and innovation. From sleek black and gold tones to modern fashion aesthetics, every element conveys a sense of sophistication and status.
Our mood board serves as the foundation for Diamond Luxe Co.’s brand identity, blending crypto culture with high-end fashion. The visuals capture an aspirational lifestyle—where digital assets meet luxury, exclusivity, and innovation. From sleek black and gold tones to modern fashion aesthetics, every element conveys a sense of sophistication and status.
By studying crypto enthusiasts, fashion trends, and luxury branding, we curated a refined color palette and visual direction that resonates with both investors and trendsetters. This ensures that our designs feel timeless, premium, and seamlessly integrated into the world of digital wealth and high-end fashion.
By studying crypto enthusiasts, fashion trends, and luxury branding, we curated a refined color palette and visual direction that resonates with both investors and trendsetters. This ensures that our designs feel timeless, premium, and seamlessly integrated into the world of digital wealth and high-end fashion.
Tools: Midjourney, Adobe Photoshop, Figma
Tools: Midjourney, Adobe Photoshop, Figma
To capture the right look and tone, I drew inspiration from top crypto and fintech websites in the U.S., including Coinbase, Kraken, Gemini, and Binance US. I focused on clean, modern UI patterns and branding that felt futuristic yet trustworthy — the kind of style today’s crypto audience already connects with.
To capture the right look and tone, I drew inspiration from top crypto and fintech websites in the U.S., including Coinbase, Kraken, Gemini, and Binance US. I focused on clean, modern UI patterns and branding that felt futuristic yet trustworthy — the kind of style today’s crypto audience already connects with.
User Survey: Quantitative Research – Consumer Preferences in Crypto Fashion
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
User Survey: Quantitative Research – Consumer Preferences in Crypto Fashion
Through our consumer survey, we gathered key insights into shopping behaviors, pricing preferences, and frustrations within the crypto fashion industry. Using Salesforce Tableau Public, we visualized the data to reveal that the majority of respondents prefer shopping both online and in-store, with a preferred price range of $60-$100. However, common frustrations include limited payment options, lack of premium quality, and minimal size inclusivity. These findings provide a data-driven foundation to refine product offerings, improve shopping experiences, and develop a brand that resonates with the crypto fashion community.
Through our consumer survey, we gathered key insights into shopping behaviors, pricing preferences, and frustrations within the crypto fashion industry. Using Salesforce Tableau Public, we visualized the data to reveal that the majority of respondents prefer shopping both online and in-store, with a preferred price range of $60-$100. However, common frustrations include limited payment options, lack of premium quality, and minimal size inclusivity. These findings provide a data-driven foundation to refine product offerings, improve shopping experiences, and develop a brand that resonates with the crypto fashion community.
Tools: Salesforce Tableau Public, Google Forms, Microsoft Excel, Figma
Tools: Salesforce Tableau Public, Google Forms, Microsoft Excel, Figma
I ran a quantitative user survey to dig into how people really feel about crypto fashion — what they’re buying, how much they’re willing to spend, and what’s frustrating them. The goal was to challenge assumptions, uncover real needs, and use that data to guide smarter design decisions.
I ran a quantitative user survey to dig into how people really feel about crypto fashion — what they’re buying, how much they’re willing to spend, and what’s frustrating them. The goal was to challenge assumptions, uncover real needs, and use that data to guide smarter design decisions.
Affinity Map: Synthesizing User Insights
Affinity Map:
Synthesizing User Insights
Organizing qualitative survey responses into key patterns of user behavior, pain points, and innovation opportunities.
Organizing qualitative survey responses into key patterns of user behavior, pain points, and innovation opportunities.
To better understand consumer attitudes toward crypto fashion, we conducted user interviews and organized feedback into an Affinity Diagram. This process helped us uncover key themes, including shopping behaviors, frustrations, user suggestions, and differentiation opportunities. By categorizing insights, we identified clear pain points—such as a lack of premium options, size inclusivity concerns, and clunky payment experiences—as well as opportunities for innovation, like seamless checkout, influencer collaborations, and luxury branding. These findings will guide our design and strategic decisions to enhance the crypto fashion experience.
To better understand consumer attitudes toward crypto fashion, we conducted user interviews and organized feedback into an Affinity Diagram. This process helped us uncover key themes, including shopping behaviors, frustrations, user suggestions, and differentiation opportunities. By categorizing insights, we identified clear pain points—such as a lack of premium options, size inclusivity concerns, and clunky payment experiences—as well as opportunities for innovation, like seamless checkout, influencer collaborations, and luxury branding. These findings will guide our design and strategic decisions to enhance the crypto fashion experience.
Affinity Map Themes - Crypto Fashion: Pain Points & Opportunities
Affinity Map Themes - Crypto Fashion:
Pain Points & Opportunities
Understanding Consumer Needs, Frustrations, and Opportunities
Understanding Consumer Needs, Frustrations, and Opportunities
After categorizing individual responses through our Affinity Mapping process, we identified key themes that reflect user frustrations, needs, and opportunities in the crypto fashion space. This thematic breakdown helped us move from raw data to actionable insights. By grouping patterns into four key areas—Shopping Preferences, Frustrations, Opportunities, and Unique Selling Points—we created a foundation for design decisions that address user pain points while highlighting areas for innovation and differentiation.
After categorizing individual responses through our Affinity Mapping process, we identified key themes that reflect user frustrations, needs, and opportunities in the crypto fashion space. This thematic breakdown helped us move from raw data to actionable insights. By grouping patterns into four key areas—Shopping Preferences, Frustrations, Opportunities, and Unique Selling Points—we created a foundation for design decisions that address user pain points while highlighting areas for innovation and differentiation.
Tools: Figma, FigJam, Microsoft Excel
Tools: Figma, FigJam, Microsoft Excel
I started by sorting all the raw survey responses in Excel to spot patterns and common themes. From there, I moved everything into FigJam and Figma to visually map things out and make sense of it all. This process helped me organize the chaos, highlight user frustrations, and surface opportunities that could actually shape the product experience.
I started by sorting all the raw survey responses in Excel to spot patterns and common themes. From there, I moved everything into FigJam and Figma to visually map things out and make sense of it all. This process helped me organize the chaos, highlight user frustrations, and surface opportunities that could actually shape the product experience.
User Personas: Understanding Our Crypto Fashion Audience
User Personas:
Understanding Our Crypto Fashion Audience
To better connect with our audience, I created detailed user personas based on survey data and industry research. These personas represent the core mindsets driving crypto fashion shoppers — from high-risk investors to design-savvy early adopters. Each profile helped me stay focused on real user needs, from payment preferences to style expectations, while making sure the brand stays aligned with what matters most to them.
To better connect with our audience, I created detailed user personas based on survey data and industry research. These personas represent the core mindsets driving crypto fashion shoppers — from high-risk investors to design-savvy early adopters. Each profile helped me stay focused on real user needs, from payment preferences to style expectations, while making sure the brand stays aligned with what matters most to them.
Tools: Google Forms, Google Docs, Figma, FigJam, Adobe Photoshop, Adobe Illustrator
Tools: Google Forms, Google Docs, Figma, FigJam, Adobe Photoshop, Adobe Illustrator
I used Google Surveys to collect initial user data, then organized and synthesized key themes in Google Docs and FigJam. Personas were designed and refined in Figma, with supporting visual elements created in Photoshop and Illustrator to maintain a polished, branded look.
I used Google Surveys to collect initial user data, then organized and synthesized key themes in Google Docs and FigJam. Personas were designed and refined in Figma, with supporting visual elements created in Photoshop and Illustrator to maintain a polished, branded look.
Empathy Map: Visualizing User Emotions, Frustrations & Desires
Empathy Map:
Visualizing User Emotions, Frustrations & Desires
To build deeper empathy with our users, I created an Empathy Map using real survey quotes and themes identified in the Affinity Mapping process. This helped me visualize what users are thinking, feeling, hearing, seeing, and doing when it comes to crypto fashion — including their pain points and goals. By organizing feedback in this way, I was able to stay grounded in real user needs while shaping product and design decisions that feel more intentional, inclusive, and human-centered.
To build deeper empathy with our users, I created an Empathy Map using real survey quotes and themes identified in the Affinity Mapping process. This helped me visualize what users are thinking, feeling, hearing, seeing, and doing when it comes to crypto fashion — including their pain points and goals. By organizing feedback in this way, I was able to stay grounded in real user needs while shaping product and design decisions that feel more intentional, inclusive, and human-centered.
Tools: Google Forms, Google Docs, Figma, FigJam, Adobe Photoshop, Adobe Illustrator
Tools: Google Forms, Google Docs, Figma, FigJam, Adobe Photoshop, Adobe Illustrator
I used Google Surveys to collect initial user data, then organized and synthesized key themes in Google Docs and FigJam. Personas were designed and refined in Figma, with supporting visual elements created in Photoshop and Illustrator to maintain a polished, branded look.
I used Google Surveys to collect initial user data, then organized and synthesized key themes in Google Docs and FigJam. Personas were designed and refined in Figma, with supporting visual elements created in Photoshop and Illustrator to maintain a polished, branded look.
Card Sorting: Organizing Content Around User Expectations
Card Sorting:
Organizing Content Around User Expectations
To shape a more intuitive navigation experience, I conducted a card sorting exercise to understand how users naturally group and categorize content. Each card represented a potential page or section for the Diamond Luxe Co. website, and participants were asked to sort them into categories that made the most sense to them. This helped me validate the site’s information architecture and ensure the structure aligned with how real users think — not just what the brand assumes. The results directly influenced my sitemap and navigation layout decisions.
To shape a more intuitive navigation experience, I conducted a card sorting exercise to understand how users naturally group and categorize content. Each card represented a potential page or section for the Diamond Luxe Co. website, and participants were asked to sort them into categories that made the most sense to them. This helped me validate the site’s information architecture and ensure the structure aligned with how real users think — not just what the brand assumes. The results directly influenced my sitemap and navigation layout decisions.
Tools: Miro (Primary), FigJam (original layout), Google Sheets (for synthesis)
Tools: Miro (Primary), FigJam (original layout), Google Sheets (for synthesis)
I used Miro to run the digital card sorting session, allowing users to group content in a way that felt natural to them. While Miro was the main tool for interaction, I also explored tools like OptimalSort for benchmarking and used Google Sheets to track, review, and organize the results. FigJam was used for synthesizing patterns and mapping those insights into the site’s structure.
I used Miro to run the digital card sorting session, allowing users to group content in a way that felt natural to them. While Miro was the main tool for interaction, I also explored tools like OptimalSort for benchmarking and used Google Sheets to track, review, and organize the results. FigJam was used for synthesizing patterns and mapping those insights into the site’s structure.
Tree Test: Validating Site Structure Through User Navigation
Tree Test:
Site Structure Through User Navigation
To evaluate how intuitive the proposed site navigation would be for Diamond Luxe Co., I conducted a Tree Test focused on five common user tasks. Participants were asked to locate specific information—such as Bitcoin-themed apparel, customer support, or return policies—using only a simplified version of the site’s structure without any visual design elements. This allowed me to test how well users could navigate Diamond Luxe Co.’s information architecture based purely on labeling and hierarchy. The results revealed friction points in certain areas, which directly informed how we reorganized content to make high-interest items easier to find in the final design.
To evaluate how intuitive the proposed site navigation would be for Diamond Luxe Co., I conducted a Tree Test focused on five common user tasks. Participants were asked to locate specific information—such as Bitcoin-themed apparel, customer support, or return policies—using only a simplified version of the site’s structure without any visual design elements. This allowed me to test how well users could navigate Diamond Luxe Co.’s information architecture based purely on labeling and hierarchy. The results revealed friction points in certain areas, which directly informed how we reorganized content to make high-interest items easier to find in the final design.
Success Rate by Task
Success Rate by Task
Success Rate by Task from the Tree Test:
Task 1 - Buy Bitcoin Hoodie → 15% success
Task 2 - Crypto Market Trends → 30% success
Task 3 - Return Policy → 46% success
Task 4 - Customer Feedback → 38% success
Task 5 - Contact Support → 46% success
Success Rate by Task from the Tree Test:
Task 1 - Buy Bitcoin Hoodie → 15% success
Task 2 - Crypto Market Trends → 30% success
Task 3 - Return Policy → 46% success
Task 4 - Customer Feedback → 38% success
Task 5 - Contact Support → 46% success
Success Rate by Task
Success Rate by Task
Summary: Success Rate by Task
Summary: Success Rate by Task
To evaluate how intuitive our site structure was, we ran a Tree Test with five common user tasks. The results revealed clear friction points: only 15% of users successfully located the Bitcoin hoodie, while tasks related to support (returns and contact) performed better, with success rates up to 46%. These insights helped us identify opportunities to improve our navigation hierarchy and labeling strategy, especially for shopping-related content.
To evaluate how intuitive our site structure was, we ran a Tree Test with five common user tasks. The results revealed clear friction points: only 15% of users successfully located the Bitcoin hoodie, while tasks related to support (returns and contact) performed better, with success rates up to 46%. These insights helped us identify opportunities to improve our navigation hierarchy and labeling strategy, especially for shopping-related content.
To address this, we’ve made design adjustments that will directly improve discoverability. Once the site is live, Bitcoin hoodies will be prominently featured on the homepage, reducing the need for users to dig through nested categories to find them.
Meet Our Users: 8 Unique Perspectives
Meet Our Users:
8 Unique Perspectives
Every user interacts with the site differently. By analyzing diverse personas, we ensure a seamless experience tailored to different needs, behaviors, and expectations.
To validate the site’s information architecture, each user was given 5 specific tasks designed to test how well they could navigate through the proposed structure. These tasks mimicked real-world actions, such as:
✔︎ Finding a specific product category
✔︎ Locating customer support information
✔︎ Navigating to a blog post or resource
✔︎ Accessing account-related pages
✔︎ Discovering promotional offers or limited edition items
To validate the site’s information architecture, each user was given 5 specific tasks designed to test how well they could navigate through the proposed structure. These tasks mimicked real-world actions, such as:
✔︎ Finding a specific product category
✔︎ Locating customer support information
✔︎ Navigating to a blog post or resource
✔︎ Accessing account-related pages
✔︎ Discovering promotional offers or limited edition items
Tools: Figma, Adobe Photoshop, Google Docs. Google Sheets, Google Sheet Sync
Tools: Figma, Adobe Photoshop, Google Docs. Google Sheets, Google Sheet Sync
I used Figma to map out the Tree Test structure and document how users navigated Diamond Luxe Co.’s proposed site layout. Google Docs helped track participant feedback, success rates, and task insights across each scenario. To visually showcase how different users approached the tasks, I created the User Perspectives graphic in Photoshop, giving the data a more human and relatable touch.
I used Figma to map out the Tree Test structure and document how users navigated Diamond Luxe Co.’s proposed site layout. Google Docs helped track participant feedback, success rates, and task insights across each scenario. To visually showcase how different users approached the tasks, I created the User Perspectives graphic in Photoshop, giving the data a more human and relatable touch.
Site Map: Structuring for Clarity & Confidence
Site Map:
Structuring for Clarity & Confidence
A well-organized site is key to a seamless shopping experience. After analyzing user behaviors and testing navigation patterns, we refined our site map to make browsing effortless. Each section is now structured to align with how users naturally search for products, explore content, and seek support. Whether it’s discovering new collections, diving into crypto fashion trends, or finding customer support, our optimized navigation ensures that users can access what they need in just a few clicks. 🚀
A well-organized site is key to a seamless shopping experience. After analyzing user behaviors and testing navigation patterns, we refined our site map to make browsing effortless. Each section is now structured to align with how users naturally search for products, explore content, and seek support. Whether it’s discovering new collections, diving into crypto fashion trends, or finding customer support, our optimized navigation ensures that users can access what they need in just a few clicks. 🚀
Tools: Figma, Adobe Illustrator (layout refinement)
Tools: Figma, Adobe Illustrator (layout refinement)
I used Figma to structure the site map and visually organize the hierarchy of Diamond Luxe Co.’s pages. Illustrator may have been used to fine-tune layout elements or export the final graphic, keeping the visual style aligned with the brand’s overall aesthetic.
I used Figma to structure the site map and visually organize the hierarchy of Diamond Luxe Co.’s pages. Illustrator may have been used to fine-tune layout elements or export the final graphic, keeping the visual style aligned with the brand’s overall aesthetic.
Task Flow Diagrams: Mapping Key User Actions Step-by-Step
Task Flow Diagrams:
Mapping Key User Actions Step-by-Step
To ensure the most important user tasks on the Diamond Luxe Co. site felt smooth and intuitive, I created a series of Task Flows. Each diagram focuses on a single user goal — like signing up for the newsletter or adding a product to the cart — and maps the ideal path from start to success. This helped identify potential friction points early in the UX process and made it easier to validate that core actions were logically structured and easy to complete.
To ensure the most important user tasks on the Diamond Luxe Co. site felt smooth and intuitive, I created a series of Task Flows. Each diagram focuses on a single user goal — like signing up for the newsletter or adding a product to the cart — and maps the ideal path from start to success. This helped identify potential friction points early in the UX process and made it easier to validate that core actions were logically structured and easy to complete.
Summary
Summary
These flows helped us catch early UX issues before wireframing. For example, by mapping the newsletter sign-up flow, we confirmed the need for a clear and persistent email field in the footer across all pages. Simple, direct flows like these create confidence during design handoff and development.
These flows helped us catch early UX issues before wireframing. For example, by mapping the newsletter sign-up flow, we confirmed the need for a clear and persistent email field in the footer across all pages. Simple, direct flows like these create confidence during design handoff and development.
Tools: Figma, FigJam
Tools: Figma, FigJam
I used Figma to build each flow and visualize step-by-step user actions. FigJam supported the early planning stages, allowing me to quickly sketch out task ideas and iterate on possible user paths before finalizing the designs.
I used Figma to build each flow and visualize step-by-step user actions. FigJam supported the early planning stages, allowing me to quickly sketch out task ideas and iterate on possible user paths before finalizing the designs.
User Flows: Supporting Real Decisions
User Flows: Supporting Real Decisions
While Task Flows outline a single path to success, User Flows go deeper by exploring the different decisions users make on their journey. These diagrams map out multiple entry points, branching paths, and potential detours — helping us understand how users interact with the site when goals shift or curiosity strikes.
By visualizing these flows, we ensured that whether a user browses, searches, or cross-checks policies, the experience remains seamless and intuitive across all touchpoints.
While Task Flows outline a single path to success, User Flows go deeper by exploring the different decisions users make on their journey. These diagrams map out multiple entry points, branching paths, and potential detours — helping us understand how users interact with the site when goals shift or curiosity strikes.
By visualizing these flows, we ensured that whether a user browses, searches, or cross-checks policies, the experience remains seamless and intuitive across all touchpoints.
User Flow: Buy a Tote Bag (with Decision Points)
User Flow:
Buy a Tote Bag (with Decision Points)
This user flow explores multiple ways a customer can discover and purchase a tote bag on Diamond Luxe Co. We mapped both direct and alternate paths, including browsing the accessories collection, using the search bar, or clicking on featured sections. The flow also accounts for real-world decisions like saving an item for later and system conditions like cart errors. This ensures the shopping experience is smooth no matter how users reach their product.
This user flow explores multiple ways a customer can discover and purchase a tote bag on Diamond Luxe Co. We mapped both direct and alternate paths, including browsing the accessories collection, using the search bar, or clicking on featured sections. The flow also accounts for real-world decisions like saving an item for later and system conditions like cart errors. This ensures the shopping experience is smooth no matter how users reach their product.
User Flow: Read a Blog Post About Mental Health & Money
User Flow:
Read a Blog Post About Mental Health & Money
In this user flow, we examined how visitors might find and engage with blog content centered around financial wellness and mental health. We accounted for various entry points—homepage features, navigation clicks, or direct search—and mapped key decisions like whether a user chooses to read, save, or share. Alternate paths, including error handling and 404s, were included to ensure a resilient experience. The goal is to give users easy access to valuable content that supports the brand’s mission.
In this user flow, we examined how visitors might find and engage with blog content centered around financial wellness and mental health. We accounted for various entry points—homepage features, navigation clicks, or direct search—and mapped key decisions like whether a user chooses to read, save, or share. Alternate paths, including error handling and 404s, were included to ensure a resilient experience. The goal is to give users easy access to valuable content that supports the brand’s mission.
User Flow: Add Product to Cart, Then Check Return Policy
This user flow explores multiple ways a customer can discover and purchase a tote bag on Diamond Luxe Co. We mapped both direct and alternate paths, including browsing the accessories collection, using the search bar, or clicking on featured sections. The flow also accounts for real-world decisions like saving an item for later and system conditions like cart errors. This ensures the shopping experience is smooth no matter how users reach their product.
Summary
Summary
These flows helped us catch early UX issues before wireframing. For example, by mapping the newsletter sign-up flow, we confirmed the need for a clear and persistent email field in the footer across all pages. Simple, direct flows like these create confidence during design handoff and development.
These flows helped us catch early UX issues before wireframing. For example, by mapping the newsletter sign-up flow, we confirmed the need for a clear and persistent email field in the footer across all pages. Simple, direct flows like these create confidence during design handoff and development.
Tools: Figma, FigJam, Google Docs
Tools: Figma, FigJam, Google Docs
I used FigJam to outline each user flow and explore alternate paths based on real user scenarios. Once the structure was solid, I moved into Figma to create polished, color-coded diagrams that were easy to interpret and present. Google Docs helped with flow planning and documenting edge cases like 404s or decision points based on user behavior.
I used FigJam to outline each user flow and explore alternate paths based on real user scenarios. Once the structure was solid, I moved into Figma to create polished, color-coded diagrams that were easy to interpret and present. Google Docs helped with flow planning and documenting edge cases like 404s or decision points based on user behavior.
Wireframes
To begin visualizing the layout and structure of Diamond Luxe Co., I started by ideating on paper with pencil and micron pen(s) to explore layout variations and core user pathways. These initial sketches helped shape the foundation of the homepage design.
To begin visualizing the layout and structure of Diamond Luxe Co., I started by ideating on paper with pencil and micron pen(s) to explore layout variations and core user pathways. These initial sketches helped shape the foundation of the homepage design.
Once finalized, the plan is to scan those drawings and recreate them in Figma for refinement and digital presentation. The wireframe shown here was created using Uizard as a temporary layout aid to speed up planning while the hand-drawn versions are completed. The final wireframes in Figma will reflect the same structure, incorporating real product collections, headlines, and sections focused on conversion and luxury brand storytelling.
Once finalized, the plan is to scan those drawings and recreate them in Figma for refinement and digital presentation. The wireframe shown here was created using Uizard as a temporary layout aid to speed up planning while the hand-drawn versions are completed. The final wireframes in Figma will reflect the same structure, incorporating real product collections, headlines, and sections focused on conversion and luxury brand storytelling.
Wireframe Layout – No Text
This version focuses solely on the structural layout and visual hierarchy without the influence of copy, allowing for a clean, content-neutral review of the design’s spatial flow.
Wireframe Layout – With Sample Text
A refined version of the layout including placeholder headlines, subtext, and product descriptions to demonstrate how real content will interact with the design and guide the user experience.
Tools: Paper, Pencil, Micron Pen Set, Figma (final output)
Tools: Paper, Pencil, Micron Pen Set, Figma (final output)
For this stage of the design process, I used traditional sketching tools including paper, pencil, and a Micron pen set to quickly draft layout ideas by hand. This analog approach allowed me to experiment freely before committing to a direction. Once the initial sketches were complete, I scanned them and recreated the wireframes in Figma to refine the structure, align elements, and prepare for high-fidelity mockups.
For this stage of the design process, I used traditional sketching tools including paper, pencil, and a Micron pen set to quickly draft layout ideas by hand. This analog approach allowed me to experiment freely before committing to a direction. Once the initial sketches were complete, I scanned them and recreated the wireframes in Figma to refine the structure, align elements, and prepare for high-fidelity mockups.
User Journey Map: Understanding the Full Customer Experience
User Journey Map:
Understanding the Full Customer Experience
To visualize the full customer experience with Diamond Luxe Co., I created a User Journey Map that follows a crypto-savvy shopper from awareness to post-purchase. This journey highlights user emotions, actions, touchpoints, and pain points across each stage. Mapping this out helped identify moments of friction and opportunity — especially around product discoverability, checkout flow, and post-purchase confidence — which directly influenced design decisions in the next phase.
To visualize the full customer experience with Diamond Luxe Co., I created a User Journey Map that follows a crypto-savvy shopper from awareness to post-purchase. This journey highlights user emotions, actions, touchpoints, and pain points across each stage. Mapping this out helped identify moments of friction and opportunity — especially around product discoverability, checkout flow, and post-purchase confidence — which directly influenced design decisions in the next phase.
Low-fidelity Mockups
Low-fidelity Mockups
Once I had the wireframes mapped out, the next step was translating those ideas into low-fidelity mockups. I didn’t jump straight into high-fidelity just yet—I wanted to stay focused on layout, flow, and structure without getting caught up in fonts, colors, or polished visuals.
Once I had the wireframes mapped out, the next step was translating those ideas into low-fidelity mockups. I didn’t jump straight into high-fidelity just yet—I wanted to stay focused on layout, flow, and structure without getting caught up in fonts, colors, or polished visuals.
I created two variations: one that’s a bit cleaner and closer to the final layout, and another that’s very barebones—just enough to communicate the hierarchy and page sections. These helped me validate spacing, content priorities, and overall user experience direction before investing time in pixel-perfect details.
I created two variations: one that’s a bit cleaner and closer to the final layout, and another that’s very barebones—just enough to communicate the hierarchy and page sections. These helped me validate spacing, content priorities, and overall user experience direction before investing time in pixel-perfect details.
Very Low-Fidelity Mockup – Skeleton View
This version refines the sketch into a structured layout with placeholders and basic product text. It helped me get a clearer sense of spacing, navigation, and content alignment across the homepage.
Low-Fidelity Mockup – Simplified Layout
A minimalist layout with light styling and text included for clarity. It focuses on structural decisions and core UX flow without getting deep into design details. This step helped me ensure the layout made sense visually and functionally before adding any brand styling or imagery.
Tools: Google Docs, Figma
The low-fidelity mockups were created entirely in Figma. I used Figma because it allowed me to move quickly from rough concepts to structured digital layouts, while still keeping things flexible and easy to iterate on. At this stage, I wasn’t focused on visuals or branding—just layout, content structure, and overall flow. Figma’s component system and grid tools made it easy to align elements and test different arrangements without overcommitting to polished designs.
User Journey Map: Understanding the Full Customer Experience
User Journey Map:
Understanding the Full Customer Experience
To visualize the full customer experience with Diamond Luxe Co., I created a User Journey Map that follows a crypto-savvy shopper from awareness to post-purchase. This journey highlights user emotions, actions, touchpoints, and pain points across each stage. Mapping this out helped identify moments of friction and opportunity — especially around product discoverability, checkout flow, and post-purchase confidence — which directly influenced design decisions in the next phase.
Accessibility - Designing for Everyone, Not Just the Majority
Accessibility - Designing for Everyone, Not Just the Majority
Accessibility wasn’t an afterthought for Diamond Luxe Co. — it was baked into every design decision from the start. Using tools like Figma, Shopify, Color Contrast Checker, and Google Lighthouse, I prioritized inclusive design practices that make the site usable for as many people as possible.
Accessibility wasn’t an afterthought for Diamond Luxe Co. — it was baked into every design decision from the start. Using tools like Figma, Shopify, Color Contrast Checker, and Google Lighthouse, I prioritized inclusive design practices that make the site usable for as many people as possible.
The result?
A 92 Accessibility score in Lighthouse, with clear wins in areas like:
• High color contrast ratios (verified manually and through automated checks)
• Descriptive alt text for images and product thumbnails
• Use of semantic HTML tags for proper screen reader hierarchy
• Fully keyboard-navigable components (menus, CTAs, form fields)
• Responsive design to support screen magnification and zoom
These practices don’t just help users with disabilities — they improve UX for everyone.
The result?
A 92 Accessibility score in Lighthouse, with clear wins in areas like:
• High color contrast ratios (verified manually and through automated checks)
• Descriptive alt text for images and product thumbnails
• Use of semantic HTML tags for proper screen reader hierarchy
• Fully keyboard-navigable components (menus, CTAs, form fields)
• Responsive design to support screen magnification and zoom
These practices don’t just help users with disabilities — they improve UX for everyone.
Accessibility Testing with Google Lighthouse
This screenshot captures the official Lighthouse audit results for the Diamond Luxe Co. homepage. The site earned a 92 in Accessibility, along with perfect scores (100) in both SEO and Best Practices. These metrics validate the use of proper HTML structure, contrast ratios, and semantic design throughout the Shopify build.
Tools: Figma, Color Contrast Checker, Shopify, Google Lighthouse
I used Figma throughout the design process to build clean layouts and maintain visual consistency. When it came to accessibility, Figma helped ensure proper type sizing, spacing, and alignment for readability and ease of navigation. I also used Color Contrast Checker to validate that all text/background combinations met WCAG contrast ratio standards.
Shopify provided a strong foundation for accessibility with built-in ARIA labels, semantic HTML, and responsive design patterns. I further tested and optimized these choices using Google Lighthouse, which gave the site a 92 in Accessibility — confirming that our user experience worked well for all types of users.
Want to see my deeper dive on this topic?
Check out my blog post: 👉 Accessibility Best Practices
Want to see my deeper dive on this topic?
Check out my blog post: 👉 Accessibility Best Practices
User Journey Map: Understanding the Full Customer Experience
User Journey Map:
Understanding the Full Customer Experience
To visualize the full customer experience with Diamond Luxe Co., I created a User Journey Map that follows a crypto-savvy shopper from awareness to post-purchase. This journey highlights user emotions, actions, touchpoints, and pain points across each stage. Mapping this out helped identify moments of friction and opportunity — especially around product discoverability, checkout flow, and post-purchase confidence — which directly influenced design decisions in the next phase.
© 2025 Chris Puncekar, All Rights Reserved