Brooklyn Water Bagel - UX/UI Mobile Redesign

‍

Pictured below are screen captures of the original app design as it stands today:

‍

‍

(Re)design Rationale

‍

Overview

This redesign reimagines Brooklyn Water Bagel’s mobile app to better reflect its brand and improve the overall user experience. The original app suffered from usability challenges, dated visuals, and poor accessibility, which are all issues that limit how effectively customers can place orders and engage with the brand. My redesign focuses on modernizing the interface, streamlining navigation, and creating a smoother and more pleasing ordering flow while maintaining brand consistency.

‍

The Problem

Brooklyn Water Bagel’s existing app made it difficult for users to accomplish its main goal: ordering food quickly and easily. Some pain points include:

• Usability: The ordering feature is only accessible via navigation rather than being highlighted on the home screen.
• Visual Design: The interface has bright colors, all-caps typography, and busy background textures that distract from the content.
• Accessibility: Many text and link colors fail WCAG contrast standards.
• Information Architecture: Repetitive and scattered navigation (with both sidebar and bottom tabs) create some confusion.
• Brand Consistency: The app fails to communicate what sets Brooklyn Water Bagel apart, which is their signature “Brooklynized” approach.

‍

Goals

‍

• Make the ordering process the focal point of the app.

• Simplify navigation and reduce redundancy.

• Modernize the visual language while keeping it true to the brand.

• Improve readability and accessibility.

• Strengthen the connection to Brooklyn Water Bagel’s identity.

‍

‍

Process

I began by identifying usability and design issues through heuristic analysis of the original app. I then restructured the navigation and designed new layouts in Figma, focusing on:

• Home Screen: Introduced a clear “Order Now” prompt and relocated the “Order Again” section for quick reordering.
• Ordering Flow: Simplified the process into intuitive, guided steps with visual emphasis on product imagery and customization options.
• Rewards & Account Screens: Refreshed layouts for consistency, improved hierarchy, and brand alignment.
• UI Design: Implemented a clean, minimal interface with refined colors, modern typography, and accessible contrast levels while still keeping the brand identity present.

‍

The Solution

The redesigned interface highlights the ordering experience as the app’s core function while delivering a visually cohesive and accessible design.
Key improvements include:

• A home screen that prioritizes the user’s next action (ordering).
• Simplified and consistent navigation.
• Better color contrast to meet accessibility guidelines.
• A refreshed brand aesthetic featuring subtle aqua-colored elements and rounded UI elements that connect back to the “Brooklynized water” concept.

‍

Outcome

The result is a cleaner, more modern mobile experience that reflects Brooklyn Water Bagel’s brand values while improving usability and accessibility. The new design provides a faster, friendlier ordering experience and repositions the app as an engaging digital extension of the in-store brand experience.

‍

In Conclusion...

This project really showed me how much thought goes into creating a smoother, more intentional user experience. Overall, it gave me a lot more confidence in my process and helped me practice and apply finding that balance between visual design and usability.

‍

‍