Redesigning ABJAK's website
Overview
ABJAK is a cloud kitchen that helps 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: UX/UI Designer
Responsibilities: User research, wireframing, prototyping, and UI design
Tools Used: Figma, FigJam
Problem Statement
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.
Old website Mockup
Current Website Analysis
I conducted an evaluation of the existing website using Google Lighthouse and the WAVE Web Accessibility Evaluation Tool to benchmark its performance, accessibility, and overall compliance. The analysis provided the following scores:
Avg Lighthouse Performance Score: 29.6/100
Avg Lighthouse Accessibility Score: 65/100
Avg WAVE Accessibility Report:
Average number of errors- 25
Average number of contrast issues- 11.8
Average structural element problems- 5.2
Average ARIA- 10.8
This assessment helped identify key improvement areas, which I used as a baseline for my redesign recommendations.
Project Goals
Improve website performance and accessibility based on evaluation benchmarks
Current Performance Score: 29.6/100 → Goal: aim for 70+/100 in redesigned prototype.
Current Accessibility Score: 65/100 → Goal: target 90+/100 by following WCAG 2.1 AA guidelines.
Reduce accessibility barriers identified by WAVE
Errors: 25 → Goal: reduce to <5
Contrast issues: 11.8 → Goal: reduce to 0
Structural element problems: 5.2 → Goal: reduce to 0 (proper use of headings, landmarks, lists)
ARIA issues: 10.8 → Goal: reduce to <2 (correct use of ARIA attributes).
Establish a mobile-first, accessible design system
Consistent typography, color contrast compliance, scalable components.
Clear hierarchy and simplified task flows for key user journeys.
User testing insights
"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 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.
"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.
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.
Snapshots from current website
Opportunities for Redesign
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).
Mockups Iteration 1
Feedback 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.
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 Customers, Investors & Future Partners
Easily explore ABJAK's brands—designed for customers, investors, and ambitious partners looking to grow with us.
Onboarding Journey
Experience a smooth and hassle-free onboarding journey. Easily add all details in a few simple steps, ensuring a secure and seamless process.
Discover More Services
Explore catering solutions, understand why ABJAK is a smart investment, and get to know the passionate team driving ABJAK's success.
Checkout the High Fidelity Figma Prototype
Design System
Accessibility Considerations
WAVE Accessibility tool
Used wave accessibility tool to clearly understand the problems in each page.
Contrast Check
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
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.
SUS, CSAT, Success Rate, Task completion time, Usability testing questions
Outcomes of this 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.