ABJAK

ABJAK restaurants scale by providing kitchen facilities and order fulfillment services. The goal of this redesign was to enhance the user experience for restaurant partners and streamline the ordering process for customers.

Role

Product Designer

Responsibilities

User research, wireframing, prototyping, UI design

Tools

Figma, FigJam, WAVE, Google Lighthouse

Outcome & Learning Summary

Reduced ordering friction by 50%, unified B2C and B2B journeys into a single mobile-first experience, and delivered a scalable, conversion-focused product across 25+ screens.

Learning: Simplification is strategic, collaboration prevents rework, and clarity beats cleverness in high-intent flows.

Reduced ordering friction by 50%, unified B2C and B2B journeys into a single mobile-first experience, and delivered a scalable, conversion-focused product across 25+ screens.

Learning: Simplification is strategic, collaboration prevents rework, and clarity beats cleverness in high-intent flows.

Reduced ordering friction by 50%, unified B2C and B2B journeys into a single mobile-first experience, and delivered a scalable, conversion-focused product across 25+ screens.

Learning: Simplification is strategic, collaboration prevents rework, and clarity beats cleverness in high-intent flows.

Reduced ordering friction by 50%, unified B2C and B2B journeys into a single mobile-first experience, and delivered a scalable, conversion-focused product across 25+ screens.

Learning: Simplification is strategic, collaboration prevents rework, and clarity beats cleverness in high-intent flows.

Introduction

Abjak is a B2B2C food technology platform that helps food entrepreneurs scale efficiently by providing end-to-end operational support. For entrepreneurs, we remove the burden of operations, while for consumers, we deliver affordable choice and convenience.

Problem

The ABJAK website suffers from cluttered design, inconsistent branding, and poor accessibility. Navigation difficulties caused by these issues have reduced engagement and conversions from both restaurant partners and customers.

User testing insights

"I want to know what’s popular or recommended."

There’s no section for best-sellers or user ratings. Seeing reviews or a “Recommended for You” section would help me decide faster.

"I lose track of filters and options when I scroll."

The filters and company lists disappear, making it frustrating to navigate. A sticky navigation bar would help.

"Why do I have to click to see food details?"

I want to see vegetarian/spiciness and allergen details without extra clicks

"It’s hard to find discounts or deals."

If there are special promotions, they don’t stand out. A dedicated “Deals” section would make it easier to spot them.

"I wish I could customize my order."

There’s no option to add instructions like "Make it extra spicy" or remove ingredients. A simple customization feature would improve the experience.

"Some text is hard to read."

The font size is too small, and some color contrasts fail accessibility checks.

User testing insights

"I want to know what’s popular or recommended."

There’s no section for best-sellers or user ratings. Seeing reviews or a “Recommended for You” section would help me decide faster.

"I want to know what’s popular or recommended."

There’s no section for best-sellers or user ratings. Seeing reviews or a “Recommended for You” section would help me decide faster.

"I want to know what’s popular or recommended."

There’s no section for best-sellers or user ratings. Seeing reviews or a “Recommended for You” section would help me decide faster.

"I lose track of filters and options when I scroll."

The filters and company lists disappear, making it frustrating to navigate. A sticky navigation bar would help.

"I lose track of filters and options when I scroll."

The filters and company lists disappear, making it frustrating to navigate. A sticky navigation bar would help.

"I lose track of filters and options when I scroll."

The filters and company lists disappear, making it frustrating to navigate. A sticky navigation bar would help.

"Why do I have to click to see food details?"

I want to see vegetarian/spiciness and allergen details without extra clicks

"Why do I have to click to see food details?"

I want to see vegetarian/spiciness and allergen details without extra clicks

"Why do I have to click to see food details?"

I want to see vegetarian/spiciness and allergen details without extra clicks

"It’s hard to find discounts or deals."

If there are special promotions, they don’t stand out. A dedicated “Deals” section would make it easier to spot them.

"It’s hard to find discounts or deals."

If there are special promotions, they don’t stand out. A dedicated “Deals” section would make it easier to spot them.

"It’s hard to find discounts or deals."

If there are special promotions, they don’t stand out. A dedicated “Deals” section would make it easier to spot them.

"I wish I could customize my order."

There’s no option to add instructions like "Make it extra spicy" or remove ingredients. A simple customization feature would improve the experience.

"I wish I could customize my order."

There’s no option to add instructions like "Make it extra spicy" or remove ingredients. A simple customization feature would improve the experience.

"I wish I could customize my order."

There’s no option to add instructions like "Make it extra spicy" or remove ingredients. A simple customization feature would improve the experience.

"Some text is hard to read."

The font size is too small, and some color contrasts fail accessibility checks.

"Some text is hard to read."

The font size is too small, and some color contrasts fail accessibility checks.

"Some text is hard to read."

The font size is too small, and some color contrasts fail accessibility checks.

Competitor Overview

Analyzed competitor platforms to identify industry best practices.

Website UX/UI Comparison

Key Learnings

Website clarity: Competitors clearly communicate value with professional, easy-to-scan messaging.

Brand consistency: Strong, uniform branding across pages builds trust.
Navigation & CTAs: Intuitive layouts and visible CTAs improve usability.
Mobile-first: Competitors prioritize smooth mobile responsiveness.
Accessibility gaps: Contrast and readability issues are common, showing room for ABJAK to lead.
Checkout & ordering: Simplicity and clarity in flows create better user experiences.

Takeaway

ABJAK’s redesign should focus on professional clarity, consistent branding, mobile-first usability, and strong accessibility to stand out against competitors while simplifying core user flows like ordering.

Key Learnings

Website clarity: Competitors clearly communicate value with professional, easy-to-scan messaging.

Brand consistency: Strong, uniform branding across pages builds trust.
Navigation & CTAs: Intuitive layouts and visible CTAs improve usability.
Mobile-first: Competitors prioritize smooth mobile responsiveness.
Accessibility gaps: Contrast and readability issues are common, showing room for ABJAK to lead.
Checkout & ordering: Simplicity and clarity in flows create better user experiences.

Website clarity: Competitors clearly communicate value with professional, easy-to-scan messaging.

Brand consistency: Strong, uniform branding across pages builds trust.
Navigation & CTAs: Intuitive layouts and visible CTAs improve usability.
Mobile-first: Competitors prioritize smooth mobile responsiveness.
Accessibility gaps: Contrast and readability issues are common, showing room for ABJAK to lead.
Checkout & ordering: Simplicity and clarity in flows create better user experiences.

Website clarity: Competitors clearly communicate value with professional, easy-to-scan messaging.

Brand consistency: Strong, uniform branding across pages builds trust.
Navigation & CTAs: Intuitive layouts and visible CTAs improve usability.
Mobile-first: Competitors prioritize smooth mobile responsiveness.
Accessibility gaps: Contrast and readability issues are common, showing room for ABJAK to lead.
Checkout & ordering: Simplicity and clarity in flows create better user experiences.

Takeaway

Snapshots from current website

Opportunities

Establish a consistent design system (fonts, buttons, color usage).

Redesign CTAs for clarity, visibility, and accessibility.
Make layouts mobile-first with proper spacing, alignment, and scaling.
Improve contrast ratios and text readability (meet WCAG 2.1 AA).
Create simplified navigation with clear hierarchy.
Ensure widgets (like chat) don’t overlap core functions.
Rewrite content for professional tone and clarity.
Streamline checkout to allow flexibility (optional add-ons, not forced).

Establish a consistent design system (fonts, buttons, color usage).

Redesign CTAs for clarity, visibility, and accessibility.
Make layouts mobile-first with proper spacing, alignment, and scaling.
Improve contrast ratios and text readability (meet WCAG 2.1 AA).
Create simplified navigation with clear hierarchy.
Ensure widgets (like chat) don’t overlap core functions.
Rewrite content for professional tone and clarity.
Streamline checkout to allow flexibility (optional add-ons, not forced).

Establish a consistent design system (fonts, buttons, color usage).

Redesign CTAs for clarity, visibility, and accessibility.
Make layouts mobile-first with proper spacing, alignment, and scaling.
Improve contrast ratios and text readability (meet WCAG 2.1 AA).
Create simplified navigation with clear hierarchy.
Ensure widgets (like chat) don’t overlap core functions.
Rewrite content for professional tone and clarity.
Streamline checkout to allow flexibility (optional add-ons, not forced).

High Fi Iteration 1

Feedbacks and Insights

Research Goals for 1st iteration:

Clarity of Information – Check if users easily understand food categories, prices, and customization options.
Ease of Navigation – Assess if users can move through the food ordering journey (browse → select → customize → checkout) smoothly.
Visual Hierarchy – Validate whether primary actions (e.g., Begin Order, Add to Cart, Checkout) stand out clearly.
System–Real World Match – Test if labels, icons, and categories align with users’ real-world expectations (e.g., cuisine naming, item grouping).
Accessibility & Usability Barriers – Identify issues with readability, tap target sizes, or color contrast that might block certain users.

Research Goals for 1st iteration:

Clarity of Information – Check if users easily understand food categories, prices, and customization options.
Ease of Navigation – Assess if users can move through the food ordering journey (browse → select → customize → checkout) smoothly.
Visual Hierarchy – Validate whether primary actions (e.g., Begin Order, Add to Cart, Checkout) stand out clearly.
System–Real World Match – Test if labels, icons, and categories align with users’ real-world expectations (e.g., cuisine naming, item grouping).
Accessibility & Usability Barriers – Identify issues with readability, tap target sizes, or color contrast that might block certain users.

Research Goals for 1st iteration:

Clarity of Information – Check if users easily understand food categories, prices, and customization options.
Ease of Navigation – Assess if users can move through the food ordering journey (browse → select → customize → checkout) smoothly.
Visual Hierarchy – Validate whether primary actions (e.g., Begin Order, Add to Cart, Checkout) stand out clearly.
System–Real World Match – Test if labels, icons, and categories align with users’ real-world expectations (e.g., cuisine naming, item grouping).
Accessibility & Usability Barriers – Identify issues with readability, tap target sizes, or color contrast that might block certain users.

Observation: 6 out of 12 users struggled to recognize the restaurant names, as many were indirect or unfamiliar.

Takeaway: Replacing restaurant-based filters with cuisine categories would make it easier for users to quickly understand what type of food is offered.

Observation: 8/12 users wanted clarity on how the price changed with serving size, but this information was not clearly shown.

Takeaway: Displaying the serving size alongside the cost would help users make quicker, more informed decisions.

Observation: 8/12 users wanted clarity on how the price changed with serving size, but this information was not clearly shown.

Takeaway: Displaying the serving size alongside the cost would help users make quicker, more informed decisions.

Observation: 8/12 users wanted clarity on how the price changed with serving size, but this information was not clearly shown.

Takeaway: Displaying the serving size alongside the cost would help users make quicker, more informed decisions.

Observation: 5/12 users found removing items from the cart to be difficult and unintuitive.

Takeaway: Simplify cart interactions by aligning with the Match Between System and the Real World principle.

Observation: 5/12 users found removing items from the cart to be difficult and unintuitive.

Takeaway: Simplify cart interactions by aligning with the Match Between System and the Real World principle.

Observation: 5/12 users found removing items from the cart to be difficult and unintuitive.

Takeaway: Simplify cart interactions by aligning with the Match Between System and the Real World principle.

Further Testing Insight: Feedback from fellow designers highlighted gaps in visual hierarchy and consistency, which were refined in the next iteration.

Browse multiple restaurants easily

Seamlessly browse multiple restaurants, access clear and detailed information, follow intuitive instructions, and a smoother, hassle-free checkout.

Insights for Investors and Partners

Easily explore ABJAK's brands, designed for customers, investors, and ambitious partners looking to grow with us.

Discover More Services

Explore catering solutions, understand why ABJAK is a smart investment, and get to know the passionate team driving ABJAK's success.

Check out the high-fidelity prototype

View Prototype

Design System

Accessibility Considerations

Used wave accessibility tool to clearly understand the problems in each page.

Checked contrast of colors using WebAIM's contrast checker to ensure visibility

Other accessibility considerations

Ensured that the text in question is truly a heading and that it is structured correctly in the page outline.

I recommended verifying correct use of tabindex by testing navigation and interactions using only the keyboard.
Ensured there are no empty buttons
Ensured that the alternative text conveys the content and function of the image accurately.

Ensured that the text in question is truly a heading and that it is structured correctly in the page outline.

I recommended verifying correct use of tabindex by testing navigation and interactions using only the keyboard.
Ensured there are no empty buttons
Ensured that the alternative text conveys the content and function of the image accurately.

Ensured that the text in question is truly a heading and that it is structured correctly in the page outline.

I recommended verifying correct use of tabindex by testing navigation and interactions using only the keyboard.
Ensured there are no empty buttons
Ensured that the alternative text conveys the content and function of the image accurately.

Outcomes of the project

Delivered a mobile-first website with 25+ screens that supports food ordering, catering enquiries, and partner/investor exploration, enabling the business to serve both B2C and B2B users within a single product.

Reduced ordering task steps by ~50% across both B2C and B2B workflows by simplifying decision points and restructuring complex flows, while preserving clarity and conversion intent.

Designed a clear information architecture and navigation system that successfully balanced transactional ordering flows with brand storytelling, without compromising either audience.

Improved task completion and usability through iterative research and testing (n=12), validating flows and refining interactions based on real user behaviour.

Delivered responsive, mobile-optimised designs focused on speed, clarity, and ease of use, supporting both high-intent orders and enquiry-based journeys.

Enabled smoother handoff and faster implementation by aligning design decisions with engineering constraints, resulting in fewer design revisions during development.

What I Learned

Designing for multiple audiences (B2C + B2B) requires intentional trade-offs , clear hierarchy and prioritisation are critical to prevent cognitive overload.

Reducing steps doesn’t mean removing information; it means surfacing the right information at the right moment in the journey.

Early and frequent collaboration with engineering significantly improves feasibility and prevents late-stage design compromises.

Iterative feedback cycles sharpen decision-making, each round helped clarify what was essential versus nice to have.

User testing, even with a small sample size, surfaced high-impact usability issues that internal reviews alone would have missed.

Strong UX leadership as a sole designer requires balancing user needs, business goals, and technical constraints, not just visual polish.