ABJAK
ABJAK
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.
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.
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
Role
Role
Product Designer
Product Designer
Product Designer
Responsibilities
Responsibilities
Responsibilities
User research, wireframing, prototyping, UI design
User research, wireframing, prototyping, UI design
User research, wireframing, prototyping, UI design
Tools
Tools
Tools
Figma, FigJam, WAVE, Google Lighthouse
Figma, FigJam, WAVE, Google Lighthouse
Figma, FigJam, WAVE, Google Lighthouse
Introduction
Introduction
Introduction
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.
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.
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
Problem
Problem
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.
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.
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
User testing insights
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
Competitor Overview
Competitor Overview
Competitor Overview
Competitor Overview
Analyzed competitor platforms to identify industry best practices.
Analyzed competitor platforms to identify industry best practices.
Analyzed competitor platforms to identify industry best practices.
Analyzed competitor platforms to identify industry best practices.
Analyzed competitor platforms to identify industry best practices.
Website UX/UI Comparison
Website UX/UI Comparison
Website UX/UI Comparison
Website UX/UI Comparison
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
Key Learnings
Key Learnings
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
Takeaway
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.
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.
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.
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.
Snapshots from current website
Snapshots from current website
Snapshots from current website
Snapshots from current website
Snapshots from current website
Opportunities
Opportunities
Opportunities
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
High Fi Iteration 1
High Fi Iteration 1
High Fi Iteration 1
Feedbacks and Insights
Feedbacks and Insights
Feedbacks and Insights
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: 3 out of 4 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: 3 out of 4 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: 3 out of 4 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: All 4 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: All 4 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: All 4 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: 2 out of 4 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: 2 out of 4 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: 2 out of 4 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
Browse multiple restaurants easily
Browse multiple restaurants easily
Seamlessly browse multiple restaurants, access clear and detailed information, follow intuitive instructions, and a smoother, hassle-free checkout.
Seamlessly browse multiple restaurants, access clear and detailed information, follow intuitive instructions, and a smoother, hassle-free checkout.
Seamlessly browse multiple restaurants, access clear and detailed information, follow intuitive instructions, and a smoother, hassle-free checkout.
Insights for Investors and Partners
Insights for Investors and Partners
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
Discover More Services
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
Check out the high-fidelity prototype
Check out the high-fidelity prototype
Design System
Design System
Design System
Accessibility Considerations
Accessibility Considerations
Accessibility Considerations
Used wave accessibility tool to clearly understand the problems in each page.
Used wave accessibility tool to clearly understand the problems in each page.
Used wave accessibility tool to clearly understand the problems in each page.
Checked contrast of colors using WebAIM's contrast checker to ensure visibility
Checked contrast of colors using WebAIM's contrast checker to ensure visibility
Checked contrast of colors using WebAIM's contrast checker to ensure visibility
Other accessibility considerations
Other accessibility considerations
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
tabindexby 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
tabindexby 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
tabindexby 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
Outcomes of the project
Outcomes of the project
Streamlined Ordering Flow – Reduced the ordering process from 8 steps to 4 by consolidating add-ons into a single page.
Improved Accessibility – Projected Lighthouse Accessibility Score of 90+, with average WAVE errors projected to be reduced from 25 → 4 by fixing contrast issues, structural elements, and ARIA usage.
Enhanced Performance – Projected Lighthouse Performance Score improved from 29.6 → 70+ through simplified layouts and optimized design choices.
High Usability Success – Achieved 90%+ task success rate in usability testing (n=6), demonstrating clear improvements in navigation, clarity, and overall user satisfaction.
Streamlined Ordering Flow – Reduced the ordering process from 8 steps to 4 by consolidating add-ons into a single page.
Improved Accessibility – Projected Lighthouse Accessibility Score of 90+, with average WAVE errors projected to be reduced from 25 → 4 by fixing contrast issues, structural elements, and ARIA usage.
Enhanced Performance – Projected Lighthouse Performance Score improved from 29.6 → 70+ through simplified layouts and optimized design choices.
High Usability Success – Achieved 90%+ task success rate in usability testing (n=6), demonstrating clear improvements in navigation, clarity, and overall user satisfaction.
Streamlined Ordering Flow – Reduced the ordering process from 8 steps to 4 by consolidating add-ons into a single page.
Improved Accessibility – Projected Lighthouse Accessibility Score of 90+, with average WAVE errors projected to be reduced from 25 → 4 by fixing contrast issues, structural elements, and ARIA usage.
Enhanced Performance – Projected Lighthouse Performance Score improved from 29.6 → 70+ through simplified layouts and optimized design choices.
High Usability Success – Achieved 90%+ task success rate in usability testing (n=6), demonstrating clear improvements in navigation, clarity, and overall user satisfaction.