City Donuts Website Concept

Project overview

City Donuts is a locally owned donut shop in Lubbock, Texas that currently relies on a Facebook page as its only online presence. For this course project, I explored how a dedicated website could improve the shop’s visibility, accessibility, and professionalism while giving customers a clearer experience when browsing the menu, checking hours, or finding the nearest location.

This was not a paid commission or real client engagement. It was a school project designed to practice user-centered design, information architecture, branding, and responsive front-end development. The final concept site is live here:

Visit the City Donuts prototype

Design goals

With no existing website to redesign, I started by imagining what a typical customer would need from a small donut shop site, and what problems a Facebook-only presence creates. From there, I set five main design goals:

• Build a clean, modern site for a local food business. Many bakery sites are visually noisy or outdated. I wanted a fresh, warm, and inviting experience that feels like walking into the shop first thing in the morning.
• Surface essential information clearly. Within a few seconds, visitors should be able to answer three questions: What do you sell? Where are you located? When are you open?
• Improve discoverability beyond Facebook. A standalone site helps with search visibility and makes it easier for people who don’t use Facebook to find the shop.
• Create a consistent digital brand. Using cues from the physical storefront (colors, signage, and vibe), I built a simple visual identity that carries across the site.
• Make the experience mobile-first and accessible. Most people look up donut shops on their phones, so the design had to be responsive, readable, and easy to tap through.

Process

1. Informal competitive review

I started by looking at websites for other donut shops and small bakeries in Texas and beyond. I noted common strengths (strong photography, clear hours) and weaknesses (cluttered layouts, tiny text, slow mobile performance). This helped me identify patterns to emulate and pitfalls to avoid.

2. Defining the site structure

From there, I outlined a simple, customer-focused site map:

• Home: Hero, featured items, quick hours and address.
• Menu: Donuts and drinks organized into clear categories with photos.
• Locations: Addresses, map, and contact info for each store.
• About: A brief story about the shop and its place in the community.
• Contact: Simple form plus phone number and email.

The goal was to make every page answer a specific need while keeping the overall navigation very simple.

3. Visual style & branding

I created a visual language inspired by what you’d expect from a donut shop:

• Soft pastel colors reminiscent of frosting and glaze.
• Rounded cards and buttons that echo the shape of donuts.
• Clean, legible typography for menus and descriptions.
• Bright, appetizing imagery to highlight signature items.

4. Wireframing & prototyping

Using Figma, I built low-fidelity wireframes for both mobile and desktop to establish layout and hierarchy. Once the structure felt right, I layered on the visual style and interactions, then moved into implementation.

5. Building the prototype

I coded the site using semantic HTML, custom CSS, and a small amount of JavaScript where needed for interactions. The layout is fully responsive, with a mobile-first approach. I paid particular attention to:

• Hierarchy of headings and content for screen readers.
• Readable font sizes and line spacing on small screens.
• Clear button states and accessible color contrast.

The final prototype is deployed at citydonuts.conflodesigns.com .

Key features

1. Menu with visual cards

The menu uses image-driven cards to highlight popular categories and items. Each card includes a photo, name, and short description, making it easy for visitors to quickly scan options without reading long text blocks.

2. Fast access to hours & location

Because many users visit just to check “are they open right now?” the homepage prominently displays hours and address near the top, along with a link to detailed directions on the Locations page.

3. Simple, predictable navigation

The navigation is intentionally minimal: no dropdown megamenus, no hidden options. On mobile, the nav collapses into a recognizable icon with a clear list of pages; on desktop, it stays visible in a single row.

4. Mobile-first layout

All layouts were designed mobile-first and then expanded for tablet and desktop. Content stacks vertically on small screens, with generous spacing and tap targets.

What I learned

Designing the City Donuts site taught me how to work from very limited existing materials. With only a Facebook page to start from, I had to infer user needs and brand direction by researching similar businesses and thinking through real-world customer scenarios.

It also gave me practice in:

• Translating physical brand cues (signage, atmosphere) into a digital identity.
• Balancing fun, food-focused visuals with usability and accessibility.
• Designing and coding a fully responsive, mobile-first marketing site.

Overall, the project reinforced a lesson I carry into other work: small, local businesses benefit immensely from simple, well-structured websites that answer core questions quickly and respect users’ time.