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, Empathy Map, User Journey
Ideate
User flow, Card sorting, Information Architecture
Wireframes, HiFi Designs, Prototyping
Design
Test
Feedbacks, Conclusion, Future Concept
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
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
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."
1
2
3
Usability Notes: Existing Site
The three participants in usability testing revealed the following core issues:
The UI
“Ooomph” one participant declared upon opening the website. “Hello, early 2000s!” declared another. While visually unattractive, there were also underlying issues:
-
Unresponsive design: the items and frames on each page hop around unpredictably as you navigate in different screen sizes.
-
Inconsistent product images: a combination of full bottles, blurry bottles, labels-only, and varying backgrounds made it difficult to easily scan through product landing pages.
-
Accessibility: the site had 51 WCAG issues.
Product & Category Selection
There were also issues with product selection and categorization.
-
Confusion between top-level categories and subcategories. In example, a Domaine de la Portardiere Cabernet Franc was tagged with just ‘red wine’, but not with ‘cabernet franc’, so it wasn’t included when searching for Cab Francs.
-
Product selection: in addition to wine, the website offered single beers, shooters of vodka, and wine gift bags, all of which stood out in sharp contrast to a curated collection of bottled wines. All participants noted the variety, one noting “seems like a mixed bag.”
-
Out of stock merchandise: one user was able to find the wine that they were looking for, but when they went to add it to their cart, they discovered it was out of stock. Shoppers don’t want to have to sort through inventory - if something isn’t available for purchase, it shouldn’t be displayed.
Vendor Reputation
Arguably the most important, all users noted a lack of confidence in the website, and therefore its vendor.
-
”I would assume they don’t know what they’re talking about.”
-
“If I got here [the site], I would leave.”
-
“I’m not getting ‘credibility’ here.”
All of these considerations evolved into design requirements when thinking of redesigning the site.
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. (Yes, the crookedness bothers me too. More time!)
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
Call me old-school, but electronic tablets don’t make my creative neurons fire quite like the trusted old Sharpie. Plus, in this digital world, it feels a bit refreshing to create something outside of pixels, don’t you agree?
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.
1
2
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 people who hadn’t been staring at the same pixels for the last several days.
From that, I iterated on three issues:
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.
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 fonts.
In terms of style guide, I used Robert’s suit with the dark navy blue as inspiration for the monochromatic palette. Font-wise, I wanted a classic serif font to 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.
1
2
3
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.