Uncle John's

Uncle John's Cider Mill

About

UX/UI Designer: Webflow Website Redesign

June 1, 2015 - June 31, 2025

With a family run business, it is hard to keep up with everything. As years have passed, the Uncle John's website stayed static as the business continued to blossom. A UI refresh was much needed with a basis in core UX principles.

Steps

1 Client Brief
2 Competitive Analysis
3 CMS Reworking

4 Iterative Designing
5 Client Handoff
6 Continued Tech Support

Brief

Redesign the Uncle John's Cider Mill website to improve navigation, enhance brand discovery, and modernize the user interface for a fresh, updated look.

Client Brief

What's Going wrong?

To adequately understand what issues the company is facing with their digital experience, I completed a simple audit of the website pages. Mainly just notes, it was important for me to give the client reasoning as to why contrast issues and alignment differences is a problem, as they have no history with web design and accessibility. I met with the client with these findings and went page by page to understand the issues they were having as well. This became the support to my digital redesign.

Key Takeaways

Too Much Text

Makes users skip valuable information with a lack of visual appeal

Landing Page

Broken Components

Components do not work or have poor visuals

Broken sliding components for displaying wine

Taproom Options

Accessibility Issues

Contrast issues, poor alt text, and unresponsive design

Barns Page

Competitive Analysis

competitors and Friends

The world of Michigan cider mills and wineries is tightly knit, making a competitive analysis not only valuable but deeply engaging. As I explored the digital presence of well-known names like Blake’s, Yates, and Phillips, two key patterns emerged. First, the importance of a strong landing page. These businesses face a unique challenge: clearly communicating what’s available on a daily basis. Cider tastings, bakery hours and live music might happen daily, but hayrides may happen only seasonally or on special event days. Second, many of these farms have rich, historic legacies that shape their identity. This history needs to be front and center, often introduced right from the homepage.

CMS REWORKING

Oh yeah, I can code!

The existing CMS collection powering the events calendar had nearly 150 entries, making any meaningful update to its information architecture a daunting task. I knew that to restructure the calendar the way I envisioned, I’d need a more efficient approach than manually editing each entry in the Webflow UI. Instead, I exported the collection as a .csv file and opened it in VSCode, allowing me to update and organize the content programmatically, saving time and ensuring consistency across all entries.

Computer screens showing a CMS and python code

Easier For Handoff

Beyond updating the CMS, I restructured the backend to empower the clients to manage and update the site independently and without needing to touch the design itself. Every editable element was integrated into the CMS with clear labels and descriptions, ensuring that future updates are intuitive and low-maintenance. This approach supports a long-lasting, scalable site that the clients can confidently manage on their own.

Iterative Designing

Low fidelity fun

This project was my first time working in Webflow, a new platform for me, but thanks to my background in HTML/CSS, Squarespace, WordPress, and Figma, the transition was smooth. The primary design goal was a UI refresh, with a particular focus on rethinking the UX of card components, which needed more clarity and functionality.

Testing some Options

Rather than beginning with full-page wireframes, I focused on iterating small components first. These low-fidelity explorations helped me build up toward a cohesive, high-fidelity system. Due to a fast-paced timeline, most iterations happened within a single design file, so the version history isn’t fully documented. But, each change was driven by usability and consistency.

Client Handoff

Back at 'ya

By the end of the month, the updated site was handed off to Uncle John’s, following rounds of iterative feedback. The result was not just a visual improvement, but a functional one that aligned with the client’s key needs: a user-friendly calendar system, stronger use of imagery throughout the site, and simplified content updates with accessibility in mind.

Clean Landing Page

Gives users an overview with a mix of text and imagery

Clear Information Archetecture

Easy to understand pages

Accessible and Responsive

Updated alt text and fully screen responsive

UJCM Website

Continued Tech Support

I'll keep it going

A key goal for this project was not just delivering a refreshed and functional site, but ensuring long-term sustainability for the client. I’m committed to providing continued technical support as needed—whether it’s troubleshooting, feature updates, or seasonal content changes. My priority is that Uncle John’s team feels confident managing their site independently, with the reassurance that help is available when more complex needs arise.

Looking ahead, I aim to continue refining the site’s performance, accessibility, and responsiveness as new opportunities or challenges emerge. This ongoing relationship allows the site to grow alongside the business, supporting both their digital and in-person experiences year-round.

UJCM Website

Rock on my friend.