[Iron Cafe Case Study]

Small Business

100% of users rated the new Iron Café site 5/5 for brand alignment, usability, navigation clarity, and satisfaction—confirming the redesign now truly reflects the café’s aesthetic.

Responsive Web Design for Iron Cafe

Transforming Iron Cafe's digital presence to reflect its physical charm.

[Project Overview]

A local coffee shop known for its curated, minimalistic inspired design. While the physical space exudes elegance and calm, the current website does not reflect these qualities.

[The Problem]

  • Outdated Design: The current website does not reflect the curated and minimalistic aesthetic of Iron Cafe's brand.

  • Poor User Experience: Navigation and responsiveness are subpar, making accessing essential information on different devices challenging.

  • Limited Engagement: There are no features to encourage interaction, such as social media integration, an about me section, newsletter sign-ups, or event promotion.

[Industry]

Small Business

[My Role]

Lead Designer

[Platforms]

Desktop, tablet, & Apple iPhone

[Timeline]

January 2024- March 2024

View Live Project

View Live Project

[Final Prototype]

[Persona]

Mira Collins

Full-time Student

"First, it's the website and their aesthetic. I look for space and photos to get an understanding."

Age: 26

Location: Chicago

Brand Affinity: Blue Bottle Co. & Stumptown Coffee

Hangout Spots: Cocktail bars & Indie bookstores

[Goal]

Needs a coffee shop with ample seating for studying.

Values an intuitive website with clear photos of the space and menu.

Wants to feel a connection to the shop’s aesthetic and branding.

[Frustrations]

Websites that lack clear visuals of the interior spaces.

Information that is scattered across multiple platforms, making it harder to find everything in one place.

Coffee shop websites that feel outdated.

[Competitive Analysis]

We have an opportunity to build awareness and loyalty through strong brand storytelling.

We have an opportunity to build awareness and loyalty through strong brand storytelling.

[User Interviews]

User Research Plan

The Problem

Iron Cafe’s current website lacks a modern, curated design, delivers a poor user experience across devices, and offers limited opportunities for user engagement and brand connection.

User Research Plan

The Problem

Iron Cafe’s current website lacks a modern, curated design, delivers a poor user experience across devices, and offers limited opportunities for user engagement and brand connection.

User Research Plan

The Problem

Iron Cafe’s current website lacks a modern, curated design, delivers a poor user experience across devices, and offers limited opportunities for user engagement and brand connection.

User Research Plan

The Goal

We want to understand the needs and preferences of Iron Cafe’s target audience so that we can design a responsive website that mirrors the brand’s aesthetic, improves usability, and fosters customer engagement.

User Research Plan

The Goal

We want to understand the needs and preferences of Iron Cafe’s target audience so that we can design a responsive website that mirrors the brand’s aesthetic, improves usability, and fosters customer engagement.

User Research Plan

The Goal

We want to understand the needs and preferences of Iron Cafe’s target audience so that we can design a responsive website that mirrors the brand’s aesthetic, improves usability, and fosters customer engagement.

Objectives

Understand the aesthetic and functional expectations of Iron Cafe’s audience for a coffee shop website.

Identify user pain points with the current website.

Learn how customers engage with local coffee shops online (for example: searching for menus, store hours, or social media).

Objectives

Understand the aesthetic and functional expectations of Iron Cafe’s audience for a coffee shop website.

Identify user pain points with the current website.

Learn how customers engage with local coffee shops online (for example: searching for menus, store hours, or social media).

Objectives

Understand the aesthetic and functional expectations of Iron Cafe’s audience for a coffee shop website.

Identify user pain points with the current website.

Learn how customers engage with local coffee shops online (for example: searching for menus, store hours, or social media).

Research Findings

5/5 users expect to find location hours, a menu, social media links, and a brand story on coffee shop websites.

5/5 users felt disappointed by Iron Cafe’s website and said it didn’t accurately reflect the brand.

4/5 users emphasized the importance of high-quality photos to visualize the space before visiting.

Research Findings

5/5 users expect to find location hours, a menu, social media links, and a brand story on coffee shop websites.

5/5 users felt disappointed by Iron Cafe’s website and said it didn’t accurately reflect the brand.

4/5 users emphasized the importance of high-quality photos to visualize the space before visiting.

Research Findings

5/5 users expect to find location hours, a menu, social media links, and a brand story on coffee shop websites.

5/5 users felt disappointed by Iron Cafe’s website and said it didn’t accurately reflect the brand.

4/5 users emphasized the importance of high-quality photos to visualize the space before visiting.

[Affinity Map]

Users are drawn to coffee shops that showcase a clear brand story, updated information, and an inviting, well-designed space—especially when the website reflects care, community, and a light aesthetic.

Users are drawn to coffee shops that showcase a clear brand story, updated information, and an inviting, well-designed space—especially when the website reflects care, community, and a light aesthetic.

Users are drawn to coffee shops that showcase a clear brand story, updated information, and an inviting, well-designed space—especially when the website reflects care, community, and a light aesthetic.

[Feature Set Prioritization]

[Sitemap]

[User Flow]

I designed a user flow that highlights key features—location details, café hours, and social media integration—based on insights from user interviews and affinity mapping.

[Wireframes]

[Hi-Fi Designs]

[Outcome]

5/5 users rated Iron Cafe’s new design a 5/5 in brand alignment.
5/5 users rated Iron Cafe’s new design a 5/5 in usability improvements.
5/5 users rated Iron Cafe’s new design a 5/5 in clarity of navigation.

[Key Learnings for Iterations]

Viewport Navigation

During testing, we identified issues in the tablet navigation flow that needed to be mapped and corrected to ensure a smooth user experience.

Viewport Navigation

During testing, we identified issues in the tablet navigation flow that needed to be mapped and corrected to ensure a smooth user experience.

Viewport Navigation

During testing, we identified issues in the tablet navigation flow that needed to be mapped and corrected to ensure a smooth user experience.

UI Details

The spacing around the “Visit Us” header needed refinement, as it appeared more like a photo caption than a section heading. Adding iconography to each main page header helped establish a more consistent and visually guided experience.

UI Details

The spacing around the “Visit Us” header needed refinement, as it appeared more like a photo caption than a section heading. Adding iconography to each main page header helped establish a more consistent and visually guided experience.

UI Details

The spacing around the “Visit Us” header needed refinement, as it appeared more like a photo caption than a section heading. Adding iconography to each main page header helped establish a more consistent and visually guided experience.

Select this text to see the highlight effect