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
2025
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.
Full Project Stack
Tools: Shopify • Shopify Liquid • Figma • Photoshop • Adobe Illustrator • Salesforce Tableau • Framer
Tools: Shopify • Shopify Liquid • Figma • Photoshop • Adobe Illustrator • Salesforce Tableau • Framer
Design Skills: Visual Design • Branding • Typography • Color Theory • Accessibility & Empathy • Responsive Design • E-commerce Optimization
Tools: Shopify • Shopify Liquid • Figma • Photoshop • Adobe Illustrator • Salesforce Tableau • Framer
UX Methods: UX/UI Design • User Research • User Testing • Task Flows • Wireframing • Prototyping • Project Planning • Heuristic Evaluation • A/B Testing
Tools: Shopify • Shopify Liquid • Figma • Photoshop • Adobe Illustrator • Salesforce Tableau • Framer
Live Project: Diamond Luxe Co.
———— Explore the full case study below ————
———— Explore the full case study below ————
01 Research
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
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.
Behind the Scenes - User Survey: Quantitative Research
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Behind the Scenes - User Survey: Quantitative Research
Behind the Scenes:
Behind the Scenes:
I put together a user survey to get a better idea of how people actually feel about crypto fashion — what they’re into, how much they’d spend, and what turns them off. Once the responses came in, I dropped everything into Tableau Public to break down the data and spot trends. This gave me a clearer picture of what people are looking for, and helped shape smarter design and product decisions for Diamond Luxe Co.
I put together a user survey to get a better idea of how people actually feel about crypto fashion — what they’re into, how much they’d spend, and what turns them off. Once the responses came in, I dropped everything into Tableau Public to break down the data and spot trends. This gave me a clearer picture of what people are looking for, and helped shape smarter design and product decisions for Diamond Luxe Co.
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.
Behind the Scenes - To Affinity and Beyond
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Behind the Scenes - To Affinity and Beyond
Behind the Scenes:
Behind the Scenes:
After gathering responses and insights from the user survey, I brought everything into Figma to visually map out the key findings. From early Affinity Maps to organized research blocks, this phase helped me spot connections between user frustrations, product expectations, and market gaps. Figma became my hub for making sense of the data — allowing me to cluster sticky notes, sort themes, and start connecting dots that would eventually guide the design direction for Diamond Luxe Co.
After gathering responses and insights from the user survey, I brought everything into Figma to visually map out the key findings. From early Affinity Maps to organized research blocks, this phase helped me spot connections between user frustrations, product expectations, and market gaps. Figma became my hub for making sense of the data — allowing me to cluster sticky notes, sort themes, and start connecting dots that would eventually guide the design direction for Diamond Luxe Co.
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.
Behind the Scenes - Building User Personas
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Behind the Scenes - Building User Personas
Behind the Scenes:
Behind the Scenes:
After pulling key insights from the survey and affinity mapping work, I created user personas to better represent the different types of people shopping in the crypto fashion space. I focused on their goals, frustrations, spending habits, and how they view style. This helped me think more clearly about who I was designing for — not just as numbers on a chart, but as real people with preferences, pain points, and expectations. It also gave me a reference point throughout the project to stay aligned with the user mindset.
After pulling key insights from the survey and affinity mapping work, I created user personas to better represent the different types of people shopping in the crypto fashion space. I focused on their goals, frustrations, spending habits, and how they view style. This helped me think more clearly about who I was designing for — not just as numbers on a chart, but as real people with preferences, pain points, and expectations. It also gave me a reference point throughout the project to stay aligned with the user mindset.
Empathy Map: Visualizing User Emotions, Frustrations & Desires
Empathy Map:
Visualizing User Emotions, Frustrations & Desires
After pulling key insights from the survey and affinity mapping work, I created user personas to better represent the different types of people shopping in the crypto fashion space. I focused on their goals, frustrations, spending habits, and how they view style. This helped me think more clearly about who I was designing for — not just as numbers on a chart, but as real people with preferences, pain points, and expectations. It also gave me a reference point throughout the project to stay aligned with the user mindset.
After pulling key insights from the survey and affinity mapping work, I created user personas to better represent the different types of people shopping in the crypto fashion space. I focused on their goals, frustrations, spending habits, and how they view style. This helped me think more clearly about who I was designing for — not just as numbers on a chart, but as real people with preferences, pain points, and expectations. It also gave me a reference point throughout the project to stay aligned with the user mindset.
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.
02 Info Architecture
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
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.
Behind the Scenes - Building Meet Our Users
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Behind the Scenes - Building Meet Our Users
Behind the Scenes:
Behind the Scenes:
I put together a user survey to get a better idea of how people actually feel about crypto fashion — what they’re into, how much they’d spend, and what turns them off. Once the responses came in, I dropped everything into Tableau Public to break down the data and spot trends. This gave me a clearer picture of what people are looking for, and helped shape smarter design and product decisions for Diamond Luxe Co.
I put together a user survey to get a better idea of how people actually feel about crypto fashion — what they’re into, how much they’d spend, and what turns them off. Once the responses came in, I dropped everything into Tableau Public to break down the data and spot trends. This gave me a clearer picture of what people are looking for, and helped shape smarter design and product decisions for Diamond Luxe Co.
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.
03 Interaction Design
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
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.
You can check out the task flow in the embed right here — no Figma account needed.
Use the zoom or fullscreen buttons to dive in and explore the UX choices.
You can check out the task flow in the embed right here — no Figma account needed.
Use the zoom or fullscreen buttons to dive in and explore the UX choices.
You can check out the task flow in the embed right here — no Figma account needed.
Use the zoom or fullscreen buttons to dive in and explore the UX choices.
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.
Want to see a larger version?
GO TO FIGMA FILE
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.
Want to see a larger version?
GO TO FIGMA FILE
User Flow: Add Product to Cart, Then Check Return Policy
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.
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.
Want to see a larger version?
GO TO FIGMA FILE
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.
04 Visual Design
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Visual 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.
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.
Brand Aesthetic: Fun Luxury
Brand Aesthetic: Fun Luxury
Brand Aesthetic: Fun Luxury
Fun Luxury (n.)
A design language that blends premium minimalism with personality.
Think “drip for the detail-obsessed,” not “fashion for the untouchable.”
Fun Luxury (n.)
A design language that blends premium minimalism with personality.
Think “drip for the detail-obsessed,” not “fashion for the untouchable.”
Fun Luxury (n.)
A design language that blends premium minimalism with personality.
Think “drip for the detail-obsessed,” not “fashion for the untouchable.”
Where Fun Luxury Was Born
Where Fun Luxury Was Born
Where Fun Luxury Was Born
Through research and observation, one insight stood out:
People want premium goods — looking for an alternative to traditional, overly formal brands.
They want elevated design, quality materials, and bold style — with approachability and personality.
Through research and observation, one insight stood out:
People want premium goods — looking for an alternative to traditional, overly formal brands.
They want elevated design, quality materials, and bold style — with approachability and personality.
This became the foundation for every design decision — from typography to product layout. It’s the reason DMNDLX doesn’t whisper; it speaks confidently, clearly, and with intention.
This became the foundation for every design decision — from typography to product layout. It’s the reason DMNDLX doesn’t whisper; it speaks confidently, clearly, and with intention.
Laying the Foundation – Naming, Sketching, and Ideating
Laying the Foundation – Naming, Sketching, and Ideating
This was the early exploration phase where I started brainstorming the name, logo concepts, and overall direction for Diamond Luxe Co. I sketched out ideas by hand and on iPad to get thoughts flowing around brand tone, visual identity, and how the name might feel in a real retail context. These early drawings helped me think through different angles for the brand — from luxury cues to crypto symbolism — and gave me a clearer vision of where I wanted the project to go.
This was the early exploration phase where I started brainstorming the name, logo concepts, and overall direction for Diamond Luxe Co. I sketched out ideas by hand and on iPad to get thoughts flowing around brand tone, visual identity, and how the name might feel in a real retail context. These early drawings helped me think through different angles for the brand — from luxury cues to crypto symbolism — and gave me a clearer vision of where I wanted the project to go.
Behind the Scenes - Sketching
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Behind the Scenes - Sketching
Tools used: Pen, Paper, Sketching, Inspiration, Mood Boards
Tools used: Pen, Paper, Sketching, Inspiration, Mood Boards
I used a mix of analog and digital tools to explore logo styles, and layout ideas. Having tactile feedback from pen and paper helped me iterate quickly, while the iPad allowed me to digitize and refine those concepts. I also pulled references from crypto design, fashion editorials, and luxury branding to spark ideas and guide the vibe for Diamond Luxe Co.
I used a mix of analog and digital tools to explore logo styles, and layout ideas. Having tactile feedback from pen and paper helped me iterate quickly, while the iPad allowed me to digitize and refine those concepts. I also pulled references from crypto design, fashion editorials, and luxury branding to spark ideas and guide the vibe for Diamond Luxe Co.
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.
Finalizing the Brand Identity – Diamond Luxe Co. Media Kit
Finalizing the Brand Identity – Diamond Luxe Co. Media Kit
Once the brand’s visual identity was defined, I created a simple, focused media kit to package the key elements: the logo system, color palette, brand typography, and tone statement. This media kit serves as a foundational asset for future marketing, collaborations, and outreach efforts — ensuring that every visual touchpoint remains consistent with the Diamond Luxe Co. brand. Keeping the layout clean and minimal allowed the luxury aesthetic to stand out while maintaining flexibility for future expansion.
Once the brand’s visual identity was defined, I created a simple, focused media kit to package the key elements: the logo system, color palette, brand typography, and tone statement. This media kit serves as a foundational asset for future marketing, collaborations, and outreach efforts — ensuring that every visual touchpoint remains consistent with the Diamond Luxe Co. brand. Keeping the layout clean and minimal allowed the luxury aesthetic to stand out while maintaining flexibility for future expansion.
Media Kit
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Laying the Foundation – Naming, Sketching, and Ideating
Laying the Foundation – Naming, Sketching, and Ideating
This was the early exploration phase where I started brainstorming the name, logo concepts, and overall direction for Diamond Luxe Co. I sketched out ideas by hand and on iPad to get thoughts flowing around brand tone, visual identity, and how the name might feel in a real retail context. These early drawings helped me think through different angles for the brand — from luxury cues to crypto symbolism — and gave me a clearer vision of where I wanted the project to go.
This was the early exploration phase where I started brainstorming the name, logo concepts, and overall direction for Diamond Luxe Co. I sketched out ideas by hand and on iPad to get thoughts flowing around brand tone, visual identity, and how the name might feel in a real retail context. These early drawings helped me think through different angles for the brand — from luxury cues to crypto symbolism — and gave me a clearer vision of where I wanted the project to go.
Behind the Scenes - Sketching
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Behind the Scenes - Sketching
Tools used: Pen, Paper, Sketching, Inspiration, Mood Boards
Tools used: Pen, Paper, Sketching, Inspiration, Mood Boards
I used a mix of analog and digital tools to explore logo styles, and layout ideas. Having tactile feedback from pen and paper helped me iterate quickly, while the iPad allowed me to digitize and refine those concepts. I also pulled references from crypto design, fashion editorials, and luxury branding to spark ideas and guide the vibe for Diamond Luxe Co.
I used a mix of analog and digital tools to explore logo styles, and layout ideas. Having tactile feedback from pen and paper helped me iterate quickly, while the iPad allowed me to digitize and refine those concepts. I also pulled references from crypto design, fashion editorials, and luxury branding to spark ideas and guide the vibe for Diamond Luxe Co.
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.
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.
Low-Fidelity Wireframes: Mapping the Foundation
Before jumping into visuals or branding, I created a series of low-fidelity wireframes to establish the core structure and flow of the site. This step allowed me to focus purely on layout, content hierarchy, and functionality without getting distracted by color, typography, or imagery. It served as a blueprint for the rest of the design process — helping me validate the user experience across homepage, product listings, and cart flow before committing to high-fidelity visuals.
Low-Fidelity Mockup to High-Fidelity
After mapping out the core layout in low-fidelity wireframes, I transitioned to high-fidelity mockups using real photography, branding elements, and product visuals. This helped bring the luxury and crypto-inspired tone of Diamond Luxe Co. to life.
Tools: Google Docs, Figma
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.
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.
Strategy Shift: From Custom Code to Shopify
Strategy Shift: From Custom Code to Shopify
As I was wireframing the Diamond Luxe Co. experience, my original plan was to build the e-commerce site entirely from scratch — we’re talking HTML, CSS, JavaScript, the whole thing. But pretty quickly, I had a lightbulb moment: why am I reinventing the wheel?
As I was wireframing the Diamond Luxe Co. experience, my original plan was to build the e-commerce site entirely from scratch — we’re talking HTML, CSS, JavaScript, the whole thing. But pretty quickly, I had a lightbulb moment: why am I reinventing the wheel?
Building a custom-coded storefront sounded cool, but in reality, it would’ve eaten up way too much time and added zero value to this case study. Shopify exists. It’s not just a nice option — it’s a billion-dollar platform (seriously, fact check that — it’s massive) powering millions of online stores. Companies large and small use it to handle everything from storefronts to checkouts to analytics. It’s the industry standard for a reason.
Building a custom-coded storefront sounded cool, but in reality, it would’ve eaten up way too much time and added zero value to this case study. Shopify exists. It’s not just a nice option — it’s a billion-dollar platform (seriously, fact check that — it’s massive) powering millions of online stores. Companies large and small use it to handle everything from storefronts to checkouts to analytics. It’s the industry standard for a reason.
Once that clicked, I shifted gears immediately. I refocused my energy into designing around Shopify’s real-world constraints, and updated my high-fidelity prototypes to reflect what an actual user would experience on a Shopify-powered storefront. This pivot let me demonstrate not just good UX thinking, but how I adapt quickly to use the best tools for the job.
Once that clicked, I shifted gears immediately. I refocused my energy into designing around Shopify’s real-world constraints, and updated my high-fidelity prototypes to reflect what an actual user would experience on a Shopify-powered storefront. This pivot let me demonstrate not just good UX thinking, but how I adapt quickly to use the best tools for the job.
TL;DR:
TL;DR:
I could’ve hand-coded a site for the sake of the process, but instead I chose what real brands choose every day — Shopify — and built around that reality to deliver a better, faster, more relevant end product.
I could’ve hand-coded a site for the sake of the process, but instead I chose what real brands choose every day — Shopify — and built around that reality to deliver a better, faster, more relevant end product.
Prototyping
Prototyping
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.
Prototyping for customer checkout
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.
DMNDLX Teddy Bear Unisex Hoodie Checkout Walkthrough
DMNDLX Teddy Bear Unisex Hoodie Checkout Walkthrough
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.
Checkout Steps
Scroll through the homepage to find the
DMNDLX Teddy Bear Unisex Hoodie
Scroll through the homepage to find the
DMNDLX Teddy Bear Unisex Hoodie
Click the hoodie to view the Product Detail Page
Click the hoodie to view the Product Detail Page
Select your size and click “Add to Cart”
Select your size and click “Add to Cart”
In the popup, click “Checkout”
In the popup, click “Checkout”
On the Cart page, confirm your item and
click “Checkout” again
On the Cart page, confirm your item and
click “Checkout” again
Enter contact & shipping info in the
checkout form
Enter contact & shipping info in the
checkout form
Select a payment method and place the order
Select a payment method and place the order
Land on the Order Confirmation page with
a summary + tracking
Land on the Order Confirmation page with
a summary + tracking
Order is Confirmed, Yay!
Order is Confirmed, Yay!
05 Accessibility
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
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.
*Quote is from Antony Conboy UI/UX Designer
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.
*Quote is from Antony Conboy UI/UX Designer
Able – Friction-Free Accessibility Plugin for Figma
Able is a lightweight accessibility plugin that allowed me to quickly test contrast ratios between layered elements in Figma. By selecting two layers — such as text over a background — I was able to instantly verify WCAG compliance for both small and large text. The plugin’s simple preview and vision simulation options helped ensure the site remained accessible to a wider range of users.
Figma’s Built-in Color Contrast Checker
Figma’s own Color Contrast Checker helped me validate accessibility directly within my design workflow. I used it to verify that all critical foreground and background color combinations passed AA and AAA compliance for both text and UI elements. Its clear pass/fail indicators and WCAG alignment ensured I maintained visual clarity across all user interfaces.
How I Made the Site More Accessible
How I Made the Site More Accessible
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
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.
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
Designing Ethical Engagement – Fun, Accessible, and Rewarding
User Journey Map:
Understanding the Full Customer Experience
To create a more engaging and memorable experience for visitors, I introduced an interactive spinwheel popup where users could win prizes like discounts and free shipping. My goal was to add a touch of excitement without overwhelming or distracting from the shopping experience. Using Klaviyo’s built-in functionality, I designed the spinwheel to be visually accessible, mobile-friendly, and easy for all users to interact with.
To create a more engaging and memorable experience for visitors, I introduced an interactive spinwheel popup where users could win prizes like discounts and free shipping. My goal was to add a touch of excitement without overwhelming or distracting from the shopping experience. Using Klaviyo’s built-in functionality, I designed the spinwheel to be visually accessible, mobile-friendly, and easy for all users to interact with.
While gamification can drive user engagement, it’s important to balance fun with responsibility. I wanted to avoid encouraging gambling-like behaviors or unhealthy patterns, so I made a conscious design decision: every spin results in a guaranteed prize. No one leaves empty-handed. This ensured that the experience remained positive, fair, and inclusive — creating excitement without exploiting user psychology. I also ran accessibility checks to ensure clear button labeling, high contrast, and keyboard navigation compatibility.
While gamification can drive user engagement, it’s important to balance fun with responsibility. I wanted to avoid encouraging gambling-like behaviors or unhealthy patterns, so I made a conscious design decision: every spin results in a guaranteed prize. No one leaves empty-handed. This ensured that the experience remained positive, fair, and inclusive — creating excitement without exploiting user psychology. I also ran accessibility checks to ensure clear button labeling, high contrast, and keyboard navigation compatibility.
Popup window using klaviyo integrated with Shopify
I integrated Klaviyo with Shopify to create an interactive popup experience that encourages email signups while maintaining accessibility standards. The spinwheel offers users a chance to win discounts and free shipping incentives, helping drive engagement without disrupting the shopping flow. The popup design is fully responsive, ADA-conscious, and optimized for both desktop and mobile visitors.
06 Testing and Improvements
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Refining the Experience: Testing, Feedback, and Brand Alignment
Refining the Experience: Testing, Feedback, and Brand Alignment
During the testing and iteration phase, I reflected on how certain content sections aligned with the brand’s visual tone and market positioning. One change I made was removing the “Cuteness Robot” section from the homepage. While I’m keeping the product collection live, I felt that featuring it so prominently on the homepage didn’t fully reflect the elevated, minimalist tone I wanted for Diamond Luxe Co. Instead, I replaced it with a new “Buy the Dip” section that better fits the brand’s clean, finance-forward aesthetic and appeals more directly to the target audience.
Other small improvements:
- Reduced number of homepage sections for faster scroll
- Tweaked Shopify product filters for easier mobile use
- Adjusted call-to-action copy based on clarity feedback
During the testing and iteration phase, I reflected on how certain content sections aligned with the brand’s visual tone and market positioning. One change I made was removing the “Cuteness Robot” section from the homepage. While I’m keeping the product collection live, I felt that featuring it so prominently on the homepage didn’t fully reflect the elevated, minimalist tone I wanted for Diamond Luxe Co. Instead, I replaced it with a new “Buy the Dip” section that better fits the brand’s clean, finance-forward aesthetic and appeals more directly to the target audience.
Other small improvements:
- Reduced number of homepage sections for faster scroll
- Tweaked Shopify product filters for easier mobile use
- Adjusted call-to-action copy based on clarity feedback
BEFORE - Original Homepage Feature: Cuteness Robot
The Cuteness Robot collection was originally featured on the homepage as a product spotlight. While the designs were well-received, I realized the aesthetic leaned too playful and didn’t match the luxury, finance-forward tone I wanted Diamond Luxe Co. to project at first glance. It clashed slightly with the overall brand vibe and made the homepage feel less cohesive.
After - Updated Homepage Feature: Buy the Dip
To better align with the brand’s minimalist, high-end style, I replaced the Cuteness section with the Buy the Dip collection. This new product set feels more aligned with the tone and message of Diamond Luxe Co. — sleek, direct, and designed for confident crypto investors. The updated visuals deliver stronger cohesion and reflect a clearer brand identity.
BEFORE – Homepage Hero Missed the Mark
The original homepage hero featured a stock-style image and vague tagline that felt off-brand for Diamond Luxe Co. While clean and neutral, it lacked personality and failed to represent the luxury crypto streetwear vibe the site was meant to convey. The tone was too generic, leaning lifestyle over identity, and didn’t speak to our target audience — crypto investors and high-end buyers looking for a sharper, more curated experience.
After - Updated Homepage Hero — Buy the Dip Collection
To better align with our luxury crypto fashion aesthetic, I replaced the header with a bold, editorial image from the Buy the Dip collection. The new design feels more premium and better communicates our brand identity—sleek, confident, and investor-minded. It also delivers greater visual cohesion and clarity across the full user experience.
BEFORE – Homepage Hero Didn’t Match the Vision
This behind-the-scenes image shows the active redesign of the Diamond Luxe Co. homepage hero section in Figma. After realizing the original layout didn’t reflect the brand’s upscale, crypto-investor vibe, I reworked the visual structure and replaced the generic hero with a stronger, more aligned aesthetic. The goal was to elevate the experience, clarify the brand’s premium tone, and deliver a design that matched the product offering and target audience — bold, sleek, and finance-forward.
07 Summary
User Survey: Quantitative Research –
Consumer Preferences in Crypto Fashion
Case Study Summary
Case Study Summary
Diamond Luxe Co. began as a concept for luxury crypto fashion, but through focused UX work, accessibility auditing, and visual refinement, it evolved into a fully functioning brand with a clean e-commerce experience. This project demonstrates how intentional design decisions—across branding, UI, content, and accessibility—can create a seamless user journey from landing to checkout.
Diamond Luxe Co. began as a concept for luxury crypto fashion, but through focused UX work, accessibility auditing, and visual refinement, it evolved into a fully functioning brand with a clean e-commerce experience. This project demonstrates how intentional design decisions—across branding, UI, content, and accessibility—can create a seamless user journey from landing to checkout.
Throughout the project:
• Built and customized a real Shopify site to ground my UX case study in real-world constraints
• Refined homepage visuals and collections to better reflect a premium, investor-forward aesthetic
• Incorporated accessibility best practices across all visuals, copy, and structure
• Created mobile-optimized banners and used media queries to tailor the experience by device
• Designed collection sections that balance clarity, visual appeal, and performance
• Used Figma, Visily, and Shopify Liquid to create a working product with both design and technical merit
Throughout the project:
• Built and customized a real Shopify site to ground my UX case study in real-world constraints
• Refined homepage visuals and collections to better reflect a premium, investor-forward aesthetic
• Incorporated accessibility best practices across all visuals, copy, and structure
• Created mobile-optimized banners and used media queries to tailor the experience by device
• Designed collection sections that balance clarity, visual appeal, and performance
• Used Figma, Visily, and Shopify Liquid to create a working product with both design and technical merit
🎥 Case Study Walkthrough: Diamond Luxe Co. UX & Shopify Build
This video walks through the full UX process behind Diamond Luxe Co.—from early research and wireframes to final Shopify implementation. You’ll see design decisions explained, homepage and collection changes in action, and the accessibility improvements that helped the brand feel more polished and user-friendly.
What's Next >>
User Journey Map:
Understanding the Full Customer Experience
Diamond Luxe Co. continues to grow. Future iterations include:
- Designing additional t-shirts and apparel collections based on user feedback
- Add Hotjar to the website to track user actions
- Building a presence on social media to grow brand visibility and engagement
- Testing new product categories and refining the store experience based on customer behavior
Creating the Diamond Luxe Co. Collection
Creating the Diamond Luxe Co. Collection
Bringing Diamond Luxe Co. to life meant going beyond just wireframes and UI — it meant creating real products that reflected the brand’s voice. I designed original artwork for the collection, focusing on luxury, boldness, and crypto culture influences. Using tools like Adobe Illustrator and Photoshop, I created detailed t-shirt and hoodie designs that captured the Fun Luxury vibe — modern, elevated, and rich in character. Every graphic was crafted to feel like a wearable extension of the brand’s story.
Bringing Diamond Luxe Co. to life meant going beyond just wireframes and UI — it meant creating real products that reflected the brand’s voice. I designed original artwork for the collection, focusing on luxury, boldness, and crypto culture influences. Using tools like Adobe Illustrator and Photoshop, I created detailed t-shirt and hoodie designs that captured the Fun Luxury vibe — modern, elevated, and rich in character. Every graphic was crafted to feel like a wearable extension of the brand’s story.
This phase was about translating the brand’s values into something tangible. I worked through multiple concept sketches and iterations to get the look and feel right for both apparel and accessories. Building real products, not just mockups, allowed me to fully imagine the customer experience — from the visuals they would first see online, to the designs they would eventually wear in real life.
This phase was about translating the brand’s values into something tangible. I worked through multiple concept sketches and iterations to get the look and feel right for both apparel and accessories. Building real products, not just mockups, allowed me to fully imagine the customer experience — from the visuals they would first see online, to the designs they would eventually wear in real life.
Building the Real Website on Shopify
Building the Real Website on Shopify
After developing the early prototypes for Diamond Luxe Co., I realized that instead of stopping at a clickable model, I wanted to bring the brand to life as a real, working e-commerce site. While building the wireframes and user flows, it became clear that launching on an established platform would better showcase the full experience — not just design thinking, but real-world execution. I also realized that while building a custom-coded e-commerce site might be noble, it wasn’t the best use of my time for this project. I needed to focus on branding, UX, and the real customer experience — not reinvent the technical foundation.
After developing the early prototypes for Diamond Luxe Co., I realized that instead of stopping at a clickable model, I wanted to bring the brand to life as a real, working e-commerce site. While building the wireframes and user flows, it became clear that launching on an established platform would better showcase the full experience — not just design thinking, but real-world execution. I also realized that while building a custom-coded e-commerce site might be noble, it wasn’t the best use of my time for this project. I needed to focus on branding, UX, and the real customer experience — not reinvent the technical foundation.
I decided to build Diamond Luxe Co. using Shopify, which powers over 4.4 million live stores globally (source: BuiltWith, 2024) and is trusted by major retailers like Allbirds, Gymshark, Kylie Cosmetics, and Fashion Nova. Shopify offers fast load times, mobile optimization, secure checkout, and built-in SEO advantages — all critical for a premium online store experience. Rather than losing time in backend development, I focused on designing, customizing, and optimizing a real product that could scale like a true brand.
I decided to build Diamond Luxe Co. using Shopify, which powers over 4.4 million live stores globally (source: BuiltWith, 2024) and is trusted by major retailers like Allbirds, Gymshark, Kylie Cosmetics, and Fashion Nova. Shopify offers fast load times, mobile optimization, secure checkout, and built-in SEO advantages — all critical for a premium online store experience. Rather than losing time in backend development, I focused on designing, customizing, and optimizing a real product that could scale like a true brand.
This shift during the prototyping phase allowed me to align my UX decisions with real-world platform constraints and best practices. It turned the project from a concept into a fully functional brand — giving me the opportunity to design with intent, execute against real e-commerce needs, and create an experience that feels authentic and market-ready.
This shift during the prototyping phase allowed me to align my UX decisions with real-world platform constraints and best practices. It turned the project from a concept into a fully functional brand — giving me the opportunity to design with intent, execute against real e-commerce needs, and create an experience that feels authentic and market-ready.
Customizing the Live Shopify Experience
To bring Diamond Luxe Co. to life online, I customized the Shopify Dawn theme using a combination of built-in settings and direct Liquid code edits. This allowed me to tailor the site’s design, improve the structure for SEO and accessibility, and ensure the shopping experience aligned with the brand’s premium, minimalist style. Building a live store added another layer of real-world execution to the project — moving beyond prototypes into functional design.
If You Made It This Far—Thank You!
If You Made It This Far—Thank You!
Building Diamond Luxe Co. was more than just a portfolio piece—it was a deep dive into real-world design, branding, and Shopify execution. If you’ve taken the time to scroll through everything, I genuinely appreciate your time and attention.
I hope this gave you a clear picture of how I think, work, and solve problems. If you’d like to connect, collaborate, or chat more, I’m always open.
Building Diamond Luxe Co. was more than just a portfolio piece—it was a deep dive into real-world design, branding, and Shopify execution. If you’ve taken the time to scroll through everything, I genuinely appreciate your time and attention.
I hope this gave you a clear picture of how I think, work, and solve problems. If you’d like to connect, collaborate, or chat more, I’m always open.
© 2025 Chris Puncekar, All Rights Reserved