PROJECT:
SI407 ADVANCED UX DESIGN
ROLE:
UX DESIGNER
DATE:
SEP. 2025 - OCT. 2025
LOCATION:
ANN ARBOR, MI
Jefferson Market
overview.
As part of my Advanced UX Design course, I redesigned the website for Jefferson Market, a neighborhood café in Ann Arbor’s Old West Side known for its cozy atmosphere and all-day breakfast.
This project focused on systems thinking — learning how to design for flexibility, accessibility, and developer handoff.
Project Goals:
Build a responsive website that adapts across desktop, tablet, and mobile.
Integrate in-house online ordering instead of third-party links.
Improve information hierarchy and menu navigation.
Develop a consistent color, type, and component system for scalability.
competitive analysis.
I began with a competitive analysis between Jefferson Market and Stray Hen Café to identify gaps in hierarchy, accessibility, and user flow.
Key Insights:
Stray Hen used strong visuals and clear CTAs but lacked accessibility features like ARIA tagging and readable contrast.
Jefferson Market’s site felt friendly but lacked structure — no clear visual hierarchy, fragmented navigation, and external links for online ordering.
From there, my focus became clear: build a cohesive system that blends charm with usability.
sketching.
I began with low-fidelity sketches to test navigation flow and information hierarchy. The goal was to make browsing effortless—helping users quickly find menu items, filter by dietary needs, and order without leaving the site.
While focusing on structure over visuals, I explored modular layouts that could scale into reusable templates, defining early rules for spacing, grids, and interaction patterns while still preserving Jefferson Market’s neighborhood charm and warmth.
colors & typography.
Typography: Roboto (for accessibility) + Archivo (for display)
Color Tokens: Primary green (organic trust), accent orange (warmth), neutral greys (accessibility contrast)
All colors and text styles were stored as Figma variables, enabling global updates and light/dark flexibility.
components & templates.
I built over 25 components and 6 responsive templates using auto layout, variants, and semantic naming for scalability and developer handoff.
Included:
Buttons (Primary / Secondary / Tertiary with Hover, Focus, Disabled states)
Navigation bar and footer system
Filter and tag elements for dietary needs
Cards, modals, and checkout inputs
Reusable page templates for homepage, menu, product, cart, checkout, and 404
Each template used responsive constraints across 1512px / 834px / 393px breakpoints.
Edits made at the component level updated globally — validating the system’s consistency and efficiency.
high-fi & final results.
The design system scaled into 20+ responsive screens optimized for all viewports.
Core improvements included:
Integrated ordering flow that keeps users on-site
Filter system with color-coded dietary tags
Responsive grid ensuring visual consistency and accessibility
The final build produced a 100% responsive experience with 3× faster menu navigation and a cohesive component library ready for handoff.
Every screen was generated directly from system components, proving its scalability in production conditions.
takeaways.
Designing from variables upward ensures predictable scaling.
Accessibility is a system constraint, not a final step.
Building responsive components clarified how tokens → components → templates connect in a true design system.
I now understand how to design systems at scale and with speed, leveraging Auto Layout, Variants, and Variables to make complex products adaptable and efficient.
What's next? I’m exploring AI-assisted design-to-code workflows by exporting my Figma library into global CSS variables and using Figma Build to prototype interactions.
Next, I plan to test how AI can automate layout logic and responsiveness — turning this system into a fully interactive, coded prototype.
