Bentolicious Website Redesign and Online Ordering

Role

Product Designer & Front End Developer

Tools

Figma, HTML, CSS React

OVERVIEW

Background

My Role

Timeline

7 Weeks

Contribution

End to End Online Ordering system Design & Implementation

JOURNEY MAP

USER RESEARCH

Team

1 Front End Developer, 3 Product Designers

Outcome

Being deployed for 500+ customers

Bentolicious is a family-run Taiwanese restaurant in Pleasanton, CA, best known for its corporate catering and home-cooked meals. However, their existing website lacked strong brand presence, intuitive navigation, and a way for customers to directly place orders, forcing them to rely heavily on DoorDash and limiting engagement with their core audience.

So, I wanted to explore:

How might we create an intuitive online ordering experience that helps Bentolicious effectively reach and engage their corporate catering clientele in the East Bay Tri-valley area?

I led the entire design and front-end development of the online ordering system, from ideation to implementation. While I collaborated on the broader website redesign, my primary focus was building a seamless ordering experience that aligned with Bentolicious’s brand and business goals. I was also responsible for developing the full landing page based on designs provided by our UI team, ensuring responsiveness, branding consistency, and accessibility across all screens.

COMPETITOR ANALYSIS

To stay on track with our 3-month timeline, we began designing core homepage elements before conducting user research

Our early landing page sketches focused on storytelling and trust, highlighting the chef’s story, showcasing popular dishes, and incorporating testimonials to build credibility before diving into research. We took these initial lofi figma designs to the client for feedback.

Where could Bentolicious stand out?

We compared 3 competitor types: fast casual (Panda Express), local Taiwanese restaurants, and corporate catering services to understand the landscape.

  • Streamline the ordering experience: Most local restaurants lacked intuitive, mobile-friendly ordering

  • Celebrate Taiwanese identity: Authenticity was underserved in fast/corporate competitors.

  • Appeal to corporate clients: branding needed to balance warmth with professionalism.

User Insight: “I couldn’t even find the menu.”

To better understand the user flow and friction points, we mapped out a journey for Emily Chen, a typical customer seeking weekday lunch.

Key insights emerged:

  • Users often discovered Bentolicious on Yelp or Instagram, but struggled to find clear menu details or pricing upfront.

  • The ordering process was clunky, with no streamlined online system and limited mobile usability.

  • Customers wanted pre-order options and a clearer pickup process, especially for lunch rushes.

Landing Page

Interactive Cart System (CSS + React)

I implemented the front-end design for the online ordering system to be shipped using HTML, CSS, and React and helped with implementing the back end ordering system using firebase

Challenges and Learnings

To have a truly branded experience, we realized that we needed a better understanding of branding, so our team conducted conducted brand psychology research and chose warm tones and soft layouts to emphasize authenticity, trust, and emotional connection.

I used this by ensuring the final ordering interface aligned with those principles across layout, font choices, and interaction cues.

Creating the Brand

Our design were goals were then shaped by research and and success criteria

Users should be able to view the menu and order within 1–2 clicks.

Please email me at diyamahapatra@berkeley.edu for the github link for this project :)

HI-FIDELITY DESIGNS

Survey

IDEATION

Based on feedback from the client, I created a survey to our target users of age 18-35 to gauge the pain points of our target customers regarding online ordering platforms.

We received 82 responses

Our main takeaways were:

  • 79% of users prefer to order directly through a restaurant’s website, not third-party apps or by calling

  • The #1 frustration was menus not being immediately visible or missing prices entirely

  • Users wanted to see menus, deals, and ordering buttons immediately, not stories or brand copy

1. Quick menu and CTA access:

3. Consistent brand experience

Use warm visuals, logo prominence, and a friendly tone to reflect authenticity and build trust

2. Streamlined ordering steps

Reduce friction by minimizing pages and grouping steps logically.

4. Clarity at every step

Ensure cart logic is intuitive, with visible confirmation states and clear pickup instructions.

Corporate Catering Page

PROBLEM

HI-FIDELITY

Final Shipped Designs

Background

To the Drawing Board

IMPLEMENTATION

Side Selection Pop Up

  • Introduced a modal pop-up to keep users anchored in the ordering process

  • In the updated version, I introduced secondary options such as drink add-ons and spice level, with a cleaner, expanded layout. This iteration responded to feedback around wanting more personalization while keeping the core “choose 3 sides” interaction simple and transparent

TAKEAWAYS

The landing page of this website introduces visitors to the restaurant with dish visuals, location and hours, and quick access to the ordering flow.

Decision 1

Improved visibility of key actions through clearer navigation and CTAs.

The landing page was redesigned to elevate access to the menu in the header and introduce a prominent ordering flow. This addressed usability findings where users had struggled to find core pages, ensuring that ordering became a direct and intuitive experience.

Decision 2

Shifted from text-heavy intro to a visual-first design.

By featuring dish imagery, business hours, dietary tags, and reviews upfront, the page reduced friction and built immediate trust with new users. The focus on recognizable visuals and key details encouraged quicker engagement with the ordering flow, which according to our research, was crucial to keeping users engaged on the page and was one of the several factors users considered as a good online ordering page.

Decision 3

Surfaced top selling bentos to simplify choice-making.

After scrolling down from the first page, this shorter menu highlights the most popular bento boxes first, helping users make faster decisions and reducing cognitive load. This directly addressed user feedback around “choice paralysis” when faced with the full menu.

By also situating the CTA right below the top-selling bentos, users could quickly transition into the broader ordering flow without feeling overwhelmed. This design choice balanced simplicity with access to variety, ultimately encouraging quicker conversions.

Decision 4

Designed a guided step-by-step ordering flow.

The build-your-own section uses a layout that walks first-time users through customization. This reduced decision fatigue and gave users more confidence while personalizing their meal. It also helps new comers in not shying away from the food and encourages them to order.

Decision 5

Elevated footer as a quick access hub for essential info.

Location, hours, and contact information were made highly visible in the footer, serving both casual diners and corporate clients. For catering customers in particular, this clear access point streamlined inquiries and reinforced trust.

Decision 1

Made catering inquiries fast and direct.

The page surfaces contact information (call and email) prominently at the top, so businesses can quickly reach out. Clear instructions on advance notice requirements reduce confusion and set accurate expectations from the start. By featuring images of best-selling bentos with labels and star ratings, the design reassures customers about meal quality. This visual-first approach mirrors the trust-building strategies from the landing page while tailoring them to corporate buyers

Decision 2

Built trust with authentic customer reviews.

Highlighting repeat customer feedback at the bottom of the page provides social proof, reinforcing reliability and satisfaction for new corporate clients. This positioning turns testimonials into a final nudge for decision-making.

Decision 3

Organized offerings into clear categories for scannability

Reinforced our brand identity into a separate menu for corporate catering. The BentoLicious logo and orange accent bar tie the menu back to the website’s branding, while the footer includes business hours, contact info, and a welcoming tagline. This not only grounds the design in brand consistency but also builds trust for first-time catering clients.

2. Online Ordering

The previous website lacked an online ordering system, which forced customers to call in or order in-person. This created friction and lost potential sales over doordash and uber eats.

My goal was to create a simple, intuitive ordering experience that worked for both first-time visitors and repeat customers, while staying consistent with the BentoLicious brand

RESEARCH

Competitor Analysis

Coming Up Next

I looked at many online ordering websites like Sweetgreen and others to gain insights on what other online ordering platforms are employing. These are the key insights I found from my research:

  • Brand alignment: Clean layouts, consistent color palette, and visual hierarchy helped reinforce our personality and reputability.

  • Streamlined ordering flow: Included step-by-step dialog for customization, minimized steps to checkout, and kept cart visible reducing decision fatigue and encouraging conversions.

IDEATION

Key notes:

  • Modal overlay lets users stay anchored in the ordering process, rather than navigating away

  • Used a slide-out panel on the right that updates in real-time with item names, quantities, and price breakdown

Online Menu Browsing

  • Each bento option is displayed with an image, short description, and price to users scan menu visually and make faster decisions without needing to click into multiple pages

  • Placing the CTA directly under each card eliminates unnecessary steps, giving users confidence to act immediately after choosing an item. This was especially important for streamlining first-time orders.

  • A small badge on the cart icon reinforces user actions by confirming items were successfully added, creating a smoother and more reassuring ordering experience

Slide Out Cart

  • The cart slides out from the right, updating live with each added item. This reassures users that their actions went through and reduces uncertainty around order status.

  • Each item shows name, price, and a clear quantity counter, allowing users to adjust without navigating away. This streamlined the editing process and minimized drop-offs

  • Placing suggested items like drinks directly in the cart offered subtle upsell opportunities without disrupting the flow. This balances user convenience with business goals.

  • The online ordering feature was built quickly, so there wasn’t enough time to gather real user feedback before launch and this made it harder to validate assumptions and refine details.

  • Because the feature hasn’t been pushed live to customers, it’s difficult to measure conversion rates, engagement, or revenue impact

  • Even lightweight usability testing or informal walkthroughs could have helped surface issues earlier (like mobile responsiveness or choice overload). In the future, I’d like to put in at least 1–2 rounds of feedback before development.

  • Designing, coding, and deploying the cart flow taught me how much clarity is needed at each stage of the process. It gave me insight into how developers think about scope and constraints!

Some images from our visit to Bentolicious to learn about the brand, clientele, and food! We also did a photoshoot for their items on their online ordering menu!

Carbon Sustain

Spearheaded a B2B carbon accounting platform, improving user retention by 30% through an optimized information architecture. Created an analytics dashboard that boosted data visibility by 40% and reduced cognitive load via intuitive visualizations.

Interaction Design - Visual Design - User Research - Storytelling - Prototyping - UI Design Principles