Introduction to TBS
In 2008, TBS (The Bakery Shop) revolutionized the Egyptian food industry by introducing a new kind of bakery concept. With a clear ambition to lead the bakery business in Egypt, TBS started with the latest technology and a focus on developing the skills of their employees.
Over the years, TBS has expanded to become a beloved brand in Egypt, known for its high-quality pastries, innovative ideas, and commitment to providing superior value to its customers.
Defining Design Strategy
The Bakery Shop (TBS) has been a staple in Egypt’s food scene since 2008. What started as a small bakery in the North Coast quickly grew into a thriving business with over 29 branches. However, despite their physical expansion, the TBS app needed a complete redesign to better serve both end
customers and their growing B2B segment. The main objective was to create an app that would deliver superior functionality, showcase TBS’s wide range of offerings, and provide a smooth experience for both individual and corporate clients.
About the Timeline & Project
Timeline Breakdown:
Week 1: Research & Discovery
Stakeholder meetings, competitive analysis, customer journey mapping
User interviews, persona creation, sitemap, and user flow planning
Week 2: Wireframes & Early Concepts & High-Fidelity Design
Low-fidelity wireframes and sketching ideas for layout and structure, UI design using TBS branding, typography, and imagery
Week 3: Prototyping & Testing - Refinement & Handoff
Interactive prototypes tested with users, gathering feedback, Design adjustments, developer handoff, and documentation
User Research
Before diving into the non official design, I conducted thorough user research to ensure the app met the needs of all stakeholders. I identified two primary user groups:
Customers: Individuals who visit TBS for their daily bakery needs or special events. This group needs a seamless, enjoyable experience when browsing products, placing orders, and paying.
B2B Clients: Cafes, restaurants, hotels, and corporations that rely on TBS for bulk orders. They require an easy way to place large orders, track deliveries, and access custom products.
The research highlighted several pain points in the previous app, such as difficult navigation, slow load times, and a lack of features for B2B clients. These insights set the stage for the design process.
Creating Profiles and Personas
To understand our users better, we developed profiles based on WHO they are (customers and business clients), WHAT they need (convenient ordering, bulk order management), WHERE they interact (mobile app, physical stores), and WHY they use TBS (high-quality bakery products, reliable service).
From these profiles, we created detailed User Personas representing individual shoppers and corporate clients.
Conducting Interviews & Field Studies:
Key Insights from User Research:
1.Customers prefer mobile ordering (35%)
Majority of users prefer ordering via the app instead of visiting stores.
2.Demand for real-time order tracking (25%)
Users want clear updates on their order status and delivery time.
3. Corporate clients need bulk ordering features (15%)
B2B clients require a smooth and structured bulk-ordering system.
4. Customization options for orders (15%)
Users want to personalize their bakery items (e.g., extra chocolate, less sugar).
5. Interest in loyalty programs & promotions (10%)
Many customers are motivated by discounts, rewards, and referral bonuses.
To validate our personas, we conducted interviews with TBS customers and corporate clients. We also performed field studies in TBS stores to observe customer behaviors, ordering patterns, and interactions with the brand.This research helped us refine our understanding of user needs and pain points.
Process Breakdown
In my quest to uncover challenges, I delved into both qualitative and quantitative research, exclusively focusing on Android users. The research involved interviews with friends and family members, coupled with personal observations using the Starbucks App.
‣ Empathize: Qualitative research via interviews and quantitative insights through surveys formed the foundation, for understanding user perspectives.
‣ Define: Objectives and motivations were crystallized, pinpointing issues and gathering crucial information for the redesign.
‣ Ideate: Utilizing Affinity Maps, Wireframes, and User Flow Mapping facilitated creative brainstorming and solution conceptualization.
‣ Prototype: Crafting UI & UX solutions, I presented prototypes for evaluation and comparison, addressing identified challenges.
‣ Test: Decision validation ensured through Usability Testing, accompanied by a measurement of success to ensure the efficacy of the proposed solutions.
Understanding TBS's Design System
Before starting the high-fidelity design phase, I carefully studied TBS’s existing branding and visual language across digital and physical touchpoints. TBS is a brand that balances premium quality with approachability, and that needed to reflect in every part of the app experience.
TBS's design system is built around:
Warmth & Familiarity: Earthy tones and cozy imagery that echo the in-store experience.
Clean Visual Hierarchy: A layout structure that guides users effortlessly through browsing and ordering.
Consistency: Reusable components that create a unified look and feel across all screens.
By analyzing their visual identity and customer-facing materials, I built a UI that felt like a natural extension of the TBS experience one that makes users feel at home whether they’re in the store or on the app.
Updation of Personas:
Based on insights gathered from interviews and field studies, we updated our personas by adding demographic details, specific customer preferences, and behavioral patterns.
This allowed us to make more informed design decisions, ensuring that the app catered effectively to both individual and corporate users.
Exploring User Journey Maps:
Next, we created user journey maps to visualize how different users interact with the app. This process helped us identify key opportunities and pain points.
For instance, B2C users needed a quick and smooth checkout process, while B2B users required an easy way to manage bulk orders and schedule deliveries.
Defining Information Architecture:
We structured the app’s information architecture (IA) to ensure intuitive navigation. The main categories included Home, Menu, Order History, and Corporate Services.
Under the Corporate Services section, we provided options for bulk ordering, accessing the Butler’s Box, and managing corporate menus.
Getting into Design with Concept Sketching:
With the IA finalized, we moved into the sketching phase. We created wireframes and conceptual layouts for key screens based on research findings.
The sketches were iterated upon multiple times to refine usability and visual hierarchy. This iterative process helped us create a polished design that aligns with user expectations and business goals.
Design Process
UI/UX Design:
The design for the TBS app was centered around the values that define the TBS brand: warmth, family, and quality. The color palette consisted of warm tones, reflecting the inviting nature of a bakery, while the typography was clean and modern, making the app easy to navigate.
The user interface (UI) was designed to be simple and intuitive, with a clear structure for both product browsing and order management. I made sure that the app's user experience (UX) was seamless, with smooth transitions between screens and easy access to key features like:
Product Catalog: A visually appealing display of TBS's bakery products.
Order Tracking: Real-time tracking of customer orders.
Corporate Services: A dedicated section for B2B clients, making it easy to place large orders and explore corporate offerings like the Butler’s Box and Corporate Menu.
Navigation & Functionality:
The app’s navigation was designed to ensure that users could easily find what they were looking for without getting lost. I used a bottom navigation bar for easy access to the main sections of the app:
Home: Featuring a carousel of featured products and promotions.
Menu: A categorized list of TBS’s bakery offerings.
Order History: A section where users can track their previous orders and reorder items quickly.
Corporate Services: A section dedicated to businesses, offering features like bulk orders and premium delivery services.
Features & Functionality
The TBS app includes several key features that make it stand out:
Product Browsing: Users can easily scroll through TBS’s wide variety of pastries, breads, and cakes. The app includes high-quality images and detailed descriptions for each item.
Real-Time Order Tracking: Customers can track the status of their orders, from preparation to delivery, providing transparency and reducing customer anxiety.
Corporate Services: TBS’s B2B clients have access to a specialized interface for placing bulk orders, managing corporate menus, and scheduling deliveries.
Payment Integration: The app integrates with multiple payment options, making it easy for customers to pay directly through the app.
Promotions and Offers: Regular promotions and special offers are highlighted within the app, encouraging repeat business.
Challenges & Solutions
One of the challenges in designing the TBS app was ensuring the app could cater to both B2C and B2B customers. Each group had different needs, and balancing the design to serve both segments efficiently was crucial. To solve this, I created separate sections for consumer and corporate clients, ensuring each user group could quickly find the features most relevant to them.
Another challenge was ensuring the app was scalable for future growth. TBS’s long-term vision includes expanding to new locations and services, so I designed the app with flexibility in mind. The app can easily be updated with new features or services as the business grows.
Results & Impact
The TBS app has had a positive impact on the business. It has made it easier for customers to place orders, track deliveries, and access exclusive corporate services. For B2B clients, the app has streamlined the ordering process, helping TBS expand its corporate customer base.
Since the launch of the app, TBS has seen an increase in customer engagement, particularly from business clients who appreciate the convenience of placing bulk orders directly through the app. The app has also enhanced the overall customer experience, leading to positive feedback and higher customer satisfaction.
Conclusion
The TBS app was a fantastic project to work on, and I’m proud of the results. By focusing on the brand’s core values and creating an intuitive, easy-to-use app, we’ve been able to deliver an experience that meets both customer and business needs. This project allowed me to hone my skills in UI/UX design while also delivering a product that will help TBS continue to grow and thrive in the competitive bakery market.
If you’re looking to create an app that combines functionality with a seamless user experience, I’d love to connect. Feel free to reach out to learn more about my design process and how I can help bring your vision to life!