Website Refresh: Marczyk’s Fine Wines
Duration: 3 weeks in October, 2025
Project Title
Project description
UX Case Study
Setting the Scene
“I missed out on one of the C-Smoke allocations earlier this year, and I was pissed,” Casey says. Later, I google the winery and learn that it is, in actuality, Sea Smoke (which arguably makes way more sense).
“Tell me more about that,” I say, as I’m not quite sure what he means by ‘allocation’. As it turns out, if you’re a member at fancy Napa wineries, you have the opportunity to purchase bottles before anyone else. He missed the text and by the time he went to buy, they were out.
Exclusivity. Niche finds. Flexible price points. These are the attributes that the high-end wine buyer seeks. They aren’t afraid to spend money to fill their wine cellars. Sure, they have their staples, but they also like to take recommendations from someone they trust on something they haven’t tried before.
Enter Marczyk’s Fine Wines, a boutique wine shop that’s the sidecar brand to Marczyk’s (Mar-zicks) Fine Foods, a neighborhood grocer and known name in Denver. Marczyk’s original website displayed a $9.99 bottle of Roncier rose as the first product. The buyer above would land here and then immediately assume that buying from Marczyk’s wasn’t the place for them. Compounding this, the website also offered mini bottles of cheap vodka, single beer cans, and a heavy push on gift card purchases - none of these aligning with what this buyer was looking for. Were there aesthetic issues? Sure. But the underlying problem of the website architecture and content not meeting the needs of the buyer wouldn’t be solved by a simple UI refresh. It needed to be coupled with a deeper understanding of this buyer and how they purchase to truly transform into an oenophile’s trusted wine source.
So there was my task: improve the website to better align with user needs, resulting in a better experience and increased sales. Time for the design process.
The Design Process
Understand
User Research, User Interview, Competitive Analysis
Define
User Personas, Problem Statement, User Journey
Ideate
User flow, Card sorting, Information Architecture
Wireframes, HiFi Designs, Prototyping
Design
Test
Feedback, Iteration, Conclusion
Competitive & Comparative Research
I’d first like to note that there is a distinction between buying wine and consuming wine, so the competitive sets are therefore disparate. Since the focus is on an online wine seller, I conducted external research on the buying of wine.
Competitors
Competitors include:
-
Big box: wine.com, b-21.com, totalwine.com
-
Individual vineyards: seasmoke.com, castellodiamorosa.com
-
Other local retailers: argonaut.com, pearlwinecompany.com
-
Wine selectors: vinvino.com, wtso.com, winebid.com
-
Other distributors: in-store, at restaurants
Comparators
Comparators include other luxury purchases:
Watches
Glassware
Art
Instruments
Antiques
From each type of competitor, there are general elements across each type to take into consideration when rebuilding the Marczyk’s website, and there are general elements to be sure to omit. Same concept for comparators. (More on the comparators later, when we look at inspiration.)
Marczyk’s can also leverage some of their company’s strengths:
-
They have strong brand recognition in the Denver area.
-
They already have a process of procuring and curating wines and have existing relationships, especially with local producers.
They have the opportunity to:
-
Become a trusted advisor to wine buyers both in-store and online.
-
Build an exclusive product catalogue without becoming exclusionary.
User Research
I conducted a total of six user interviews, consisting of traditional Q&A format. We'll get to the output of those in just a minute. However, I wanted to start by having a few users run through the existing website for a usability analysis. With three participants, I enlisted them to do so with the direction of "Go add your favorite bottle of wine to your cart."
Usability Notes: Existing Site
The three participants in usability testing revealed the following core issues:
1. UI
One participant exclaimed “Ooomph” on opening the site, another “Hello, early 2000s!” Beyond dated visuals, usability issues stood out. The design was unresponsive, with elements shifting unpredictably across screen sizes. Product images were inconsistent—full bottles, blurry shots, labels-only, and mixed backgrounds—making pages hard to scan. The site also had 51 WCAG accessibility issues.
2. Product & Category Selection
Users noted confusion between categories and subcategories. For example, a Cabernet Franc was tagged only as “red wine,” so it didn’t appear in Cab Franc searches. The product mix felt uncurated: alongside wine were single beers, vodka shooters, and gift bags—“a mixed bag,” as one user said. Out-of-stock items were still displayed, frustrating shoppers who expect unavailable products to be hidden.
3. Vendor Reputation
All participants lacked confidence in the vendor. Comments included: “They don’t know what they’re talking about,” “I would leave,” and “I’m not getting credibility here.”
So is the website visually unattractive? For sure. More problematically, it's not meeting the needs of its user. Let's do more research.
Affinity Map
Out of the qualitative research, I created an affinity map to start to build my persona. Since they can be a bit tricky to read, here is a link to its PDF.
After writing and sorting my sticky notes, here are the I-statements that came out of the wash:
"I don’t mind spending money on wine."
“I have dedicated storage space in my home for wine storage."
"I care about ratings/recommendations only from certain sources."
"I visit wine regions and have memberships to wineries."
“I purchase wine on a consistent basis."
“I like a mix of trying something new and solid bench players."
“I wouldn’t buy a bottle specifically for someone, but would pull from my own collection."
With my affinity map in place, it was time to build my persona.
Persona
Introducing.... Robert!
The key things to know about Robert are:
-
He doesn’t mind spending money on wine and is not particularly price-sensitive.
-
His home has a place to properly store wine.
-
He feels confident in his knowledge of wine.
Writer's note: I had two interviewees say THAT EXACT QUOTE in their interview, and a third said nearly the same thing only using "my" versus "the". It was uncanny!
Customer Journey Map
I created a journey map for Robert's actions, thoughts, sentiments during the wine buying process. Here’s a link to it.
Each phase entails several actions on Robert’s part, both positive and negative thoughts, and positive and negative sentiments. Out of that journey, I can make recommendations to inform the website redesign. A sampling of these include:
-
A wine should not only have product info, but a storytelling-like description as well.
-
A sense of urgency around last-inventory bottles and exclusive offers.
-
The actual purchase flow should be short and familiar - no need for anything fancy.
-
Make sure Marczyk’s establishes credibility.
Problem Statement
Summarizing all of my user research, here is the problem statement for Robert.
Card Sort
Since one of the issues with the previous site was product categories, I conducted a card sort to help inform information architecture. I gave participants the following template:
I had seven participants in my card sort. Here's a link to its output.
The key takeaway is that there was only one participant who didn’t organize wines by color first. The thing to know about about that one outlier, Vince? He works at a Napa winery, so he knows his wines (he sorted by country of origin. And then forced sub-organization within each category from lightest to fullest). The point here? This is not a place to get creative and reinvent the wheel. Stick to what people think of with wine: red, white, rosé, etc. This finding then allowed me to build the site map.
Site Map
Based on the card sort, my resulting site map should not be a shock. Look! Top-level navigation is centered around color.
Because I was deep in the throes of gaining wine knowledge, I continued my research and defined the category filters for each PLP.
This is how Robert will navigate. But what is he trying to do? Buy wine. That’s where my task flow comes into play.
Task Flow
Combining the customer journey map with the site map, here is Robert’s task flow:
This will be the checklist-of-sorts for my sketches, which we’ll get to in a bit. But first! No great artist has a starting point without being inspired by something.
Inspiration
Remember our comparators? I drew on them for inspiration. Steinway pianos, Waterford glassware, Balmuda, and others filled my concept board. The key design qualities of these sites are:
-
Embracing white space
-
Heavy emphasis on imagery with crisp, artistic photography - the products speak for themselves
-
A quiet, understated sense of luxury
Another important element to consider was the history of the shop itself. Marczyk’s? You guessed it - named after an actual person. There’s the founder, Paul, his wife Barbara, and his brother Pete. Their mother is the one chugging from a wine bottle in their logo photo. I wanted to honor this family legacy by also incorporating old Polish black and white photographs.
Time to sketch!
Sketches
I used the 8-card sketching technique for each page, and out of that exercise evaluated each against my research and definition to select the final sketches.
Now to bring these alive in Figma!
Wireframes
I built each page as a frame in Figma, making sure to think holistically about component creation following the atom --> molecule --> organism methodology. The design is originally scaled in the aspect ratio of a MacBook Pro 16”. Here is a link to the Figma file.
Usability Testing
After staring at pixels for several days, it was time to take a step back after getting the prototype working get some feedback from persona-like users. Out of that, I iterated on three issues:
1. In adding an item to the cart, the clickable area on the minus sign was on just the minus line - a whopping one pixel height! In addition to being a usability problem, this was also a huge accessibility problem. I updated the clickable area to incorporate the whole button area.
2. When a user added something to their cart, the original navigation was to the cart page. This sounded so logical in my brain, but this is not how we shop online! We add things to cart, go back to search, add more things to cart, etc. until it’s time to check out, which is when we go to cart. So instead of adding to cart navigating to cart, the cart icon updates with the cart quantity and then the user clicks the cart when they’re ready to check out.
3. I was focused on font selections and trying to stay within 5-7 font variables for computational loading purposes. However, I went a bit too extreme on the home page and Robert does not want to get out his readers to look at text on the home page. The simple fix? Enlargen the font.
With those changes in place, it was time to move into HiFi.
HiFi
I started by picking my palette and typefaces.
In terms of style guide, I used Robert’s suit with the dark navy blue as inspiration for the monochromatic palette. For typeface, I wanted a classic serif as a nod to the feeling of sophistication and timelessness.
I then applied these variables to the wireframe designs and filled in images with full realistic text to bring the website to life. You can go through the full Figma prototype here.
Final Step
The last step was to present my work. You can watch the presentation recording here to get a sense of my presentation style and verbal communication skills.
Key Takeaways
As with all projects, there were highs and lows. In addition to providing my client with a website that better suits their customer needs, I also took away some highlights.
Document as you go! Future you will appreciate it. After an interview, sit and review the notes to make sure you captured everything correctly. Keep a daily journal to remember what you accomplished each day, as it will become a blur. And start building your story from day one!
There is a logical order to the design process, and it doesn’t help to skip ahead. Sure, maybe your initial hypotheses are correct, but maybe they’re not. Give the research and definition phases the solid foundation that they deserve and require.
Once your persona is developed, keep them top of mind. He was in the Figma files as I designed so that I never lost focused on my user.
Thank you for reading!
I’m proud of this work and hope it gave you a sense of my process, user research and design skills, and my storytelling ability. Cheers! Feel free to reach out via email to discuss further.