Breka

2024

Mobile Redesign

To improve usability and visual consistency of BREKA.

Our focus was on refining the navigation flow and creating a more intuitive, cohesive user experience.

The new design reflects BREKA’s modern and friendly brand identity.

Layout & Design

→ Homepage looks crowded and unorganized.

→ Menu name unclear.

→ Font style and size not user-friendly; readability issues.

→ Images lack consistency in style.

Usability & Navigation

→ Footer navigation confusing - users expect map or homepage links.

Feedback & Content

→ No store location info shown.

→ Too many steps in ordering flow.

Users found Breka’s ordering function usable but criticized information overload, visual inconsistency, and unclear navigation.

Improving clarity, font readability, and reducing visual clutter would enhance usability and accessibility.

Redegin Goal

Who

Regular Breka customers who often visit during peak hours and prefer quick takeout.

How

By reducing cognitive load and minimizing decision time through clearer visual hierarchy and fewer choices per screen.

What

A redesigned mobile interface that allows users to find, select, and order bakery items within seconds.

Menu Screen – Category-Based Product Browsing

  → Users can explore new items and specific options like gluten-free products through a clear, visually organized menu layout that improves product discovery.

Navigation Menu – Clear & Accessible Category Structure

  → A simplified navigation drawer that organizes Breka’s core services into clear categories, allowing users to browse Home, Online Orders, Catering, Menu, and Contact options with ease.

Footer - Brand Information & Quick Access

→ A simplified footer that highlights Breka's brand story, contact details, and essential navigation links to improve credibility and accessibility.

Customer Reviews

→ Users can check customer reviews at a glance.

Menu Navigation & Quick Search

  → The redesigned home screen allows users to quickly search for items, browse categorized menus.

📍 Brand story and promotional messages are repeated, reducing clarity.

📍 Open 24/7” dominates the top, but essential CTAs

(Order, Menu, Locations) are missing from immediate view.

📍 The navigation menu lacked clear hierarchy, making it difficult for users to quickly find the most important actions.

📍 Footer

→ They have this footer in entire page. This is for their branch.

Not proper as footer.

📍 Too many menu options

→ No search bar. Hard to find what user want.

Using the same size even though differnt device sizes.

For mobile ver, you can see one by one.

Analysis Problem

Key Flow

> Redesigned “ Contact us” page.

> Redisigned menu bar and Simplified order flow.

Analysis Problem

📍 Too many menu options

→ No search bar. Hard to find what user want.

Using the same size even though differnt device sizes.

For mobile ver, you can see one by one.

📍 Too many menu options

→ No search bar. Hard to find what user want.

Using the same size even though differnt device sizes.

For mobile ver, you can see one by one.

📍 Open 24/7” dominates the top, but essential CTAs

(Order, Menu, Locations) are missing from immediate view.

📍 Open 24/7” dominates the top, but essential CTAs

(Order, Menu, Locations) are missing from immediate view.

📍 Brand story and promotional messages are repeated,

reducing clarity.

📍 Brand story and promotional messages are repeated,

reducing clarity.

📍 The navigation menu lacked clear hierarchy, making it difficult for users to quickly find the most important actions.

📍 Footer

→ They have this footer in entire page. This is for their branch.

Not proper as footer.

📍 Footer

→ They have this footer in entire page. This is for their branch.

Not proper as footer.

Layout & Design

→ Homepage looks crowded and unorganized.

→ Menu name unclear.

→ Font style and size not user-friendly; readability issues.

→ Images lack consistency in style.

→ Homepage looks crowded and unorganized.

→ Menu name unclear.

→ Font style and size not user-friendly; readability issues.

→ Images lack consistency in style.

Usability & Navigation

→ Footer navigation confusing - users expect map or homepage links.

Feedback & Content

→ No store location info shown.

→ Too many steps in ordering flow.

→ No store location info shown.

→ Too many steps in ordering flow.

Users found Breka’s ordering function usable but criticized information overload, visual inconsistency, and unclear navigation.

Improving clarity, font readability, and reducing visual clutter would enhance usability and accessibility.

Users found Breka’s ordering function usable but criticized information overload, visual inconsistency, and unclear navigation.

Improving clarity, font readability, and reducing visual clutter would enhance usability and accessibility.

Redegin Goal

Who

Regular Breka customers who often visit during peak hours and prefer quick takeout.

How

By reducing cognitive load and minimizing decision time through clearer visual hierarchy and fewer choices per screen.

What

A redesigned mobile interface that allows users to find, select, and order bakery items within seconds.

UI Kit

Submit Inquary

Submit Inquary

Submit Inquary

Design Assets

Background

HEX

#F5ECDA

HEX

#F5ECDA

Border

HEX

#CCA98A

HEX

#CCA98A

Muted

HEX

#ABBF9A

HEX

#ABBF9A

Primary

HEX

#3A1612

HEX

#3A1612

Secondary

HEX

#E36F31

HEX

#E36F31

Name

Price

Vancouver's 24/7 bakery and café, serving fresh baked goods and exceptional coffee since 2003.

Contact

Locations

Join Our Team

E-mail:info@breka.ca

Tel: 604 559 0900

Vancouver's 24/7 bakery and café, serving fresh baked goods and exceptional coffee since 2003.

Contact

Locations

Join Our Team

E-mail:info@breka.ca

Tel: 604 559 0900

Delivery

We'll bring the sweetness right to your doorstep

Pickup

Order online or call your nearest Breka location

HOME

Footer - Brand Information & Quick Access

→ A simplified footer that highlights Breka's brand story, contact details, and essential navigation links to improve credibility and accessibility.

Menu Screen – Category-Based Product Browsing

  → Users can explore new items and specific options like gluten-free products through a clear, visually organized menu layout that improves product discovery.

Menu Screen – Category-Based Product Browsing

  → Users can explore new items and specific options like gluten-free products through a clear, visually organized menu layout that improves product discovery.

Navigation Menu – Clear & Accessible Category Structure

  → A simplified navigation drawer that organizes Breka’s core services into clear categories, allowing users to browse Home, Online Orders, Catering, Menu, and Contact options with ease.

Navigation Menu – Clear & Accessible Category Structure

  → A simplified navigation drawer that organizes Breka’s core services into clear categories, allowing users to browse Home, Online Orders, Catering, Menu, and Contact options with ease.