Context
Zyda launched in Kuwait in 2018, gaining traction and finding an entry to product-market fit within the local Kuwaiti market. After securing funding, Zyda planned to expand, penetrating more markets and diversifying beyond food ordering. However, several issues emerged:
Customer Success team bottleneck: The CS team handled onboarding all users, most store setups and maintenance — leading to overload.
Confusing dashboard UX: Complex navigation and overwhelming flows made store management frustrating.
Limited storefront functionality: Focused only on food ordering with minimal customization options.
Scalability problems: These issues made it hard to grow as a business & expand regionally.
Research
I participated in daily workshops with the CEO, CTO, and PMs to reshape and refine the omnichannel experience, ensuring we avoided existing pitfalls and focused on scalability. Regular meetings with the Customer Success team helped address UX challenges, while interviews with current users provided valuable insights into their needs and pain points.
We continuously ran A/B tests on the V1 platform, leveraging the existing user base to validate and iterate on our design hypotheses. This allowed us to refine and prioritize design patterns based on real user data.
These collaborative efforts and research were key in setting core design principles for Zyda’s shift to a more scalable, user-friendly platform.
Key design principles
Progressive Complexity: Enable users to complete tasks with minimal steps, while providing options for advanced customization.
Streamlined Workflows: Implement a clean, clutter-free layout for independent processes like adding products or categories.
Contextual Guidance: Provide clear descriptions and context when introducing new features to ensure user understanding and adoption.
Modular Architecture: Design features and components as independent, reusable modules that can be easily combined or reconfigured
Customization-Centric Design: Develop a design language with high customizability in mind, allowing users to tailor their stores to specific needs and style.
These core principles, among others, guided our approach to transforming Zyda into a more intuitive, flexible and scalable platform.
Design details…
In this section, I’ll break down some of the key design decisions and solutions that addressed the challenges we faced.
Brief anatomy of the dashboard's navigation panel, highlighting key design decisions.
We learned that V1 of the store dashboard (built with Ant.design) struggled with cluttered creation flows, overloaded with too many fields due to the default need for bilingual setups in Zyda's MENA market. The reliance on inline editing coupled with other patterns amplified these issues, made the users feel even more overwhelmed.
To address these challenges and streamline the experience, we made key decisions. Here are some of the building blocks of Zyda's design system:
CTA Hierarchy & Structure
We established a clear button hierarchy to guide users:
Primary: Main & key flows. Used to identify the main CTA in a page.
Secondary: Supporting & alternative flows. Used for less prominent flows that accompany the main CTA.
Tertiary: Controller-type actions. Used for configurations and low-visual-cue actions.
Ghost: Extender-type actions. Used to expand the UI, helping to reduce visual complexity.
This approach helps users quickly identify button importance and function throughout the UI.
Zyda's CTA hirerachy.
Bilingual Field
To reduce redundancy and create a clutter-free experience, we introduced Bilingual Fields, leveraging segmented controls for better efficiency.
Example of bilingual fields, highlighting inactive and validation states.
Feature Toggle
In line with modularity, we broke down features into toggles, providing users with clear context on what each feature does, allowing them to decide whether they need it or not.
Simple interaction of Variants utilizing feature toggle.
Following our key design principles and utilizing the patterns we built. We crafted a seamless, clutter-free experience. This allows users to explore features progressively, navigate key actions easily, and maintain efficiency across languages.
Here’s an example of how these elements come together in the "Add Product" flow:
Initial screen of adding a new product flow.
We prioritized simplicity & efficiency over functionality in the initial setup, aiming to create a more accessible entry point for users and progressively unlock functionality. This approach gives users the option to launch products 70% faster.
We used "Save & Customize" in the main CTA to direct the user towards exploring more functionality while simultaneously offering an option to quickly publish a product.
Here's another screen of editing a product:
A snippet of a product edit screen.
Key scope previews
In this section, we’ll take a high-level look at key scopes of the project, providing quick snapshots of the overall product.
An expanded view of an order.
With the recent integration with Mashkor to handle the delivery phase for business owners, the process is broken down into phases, represented by tabs, with "Pending" as the default view to prioritize urgent tasks. Active indicators and updates are shown across all stages to keep operators informed.
For operators, we implemented a card-based layout, moving away from the traditional table view. This design allows for quick skimming through orders, with visual cues providing context before taking action.
Quick actions, such as copying the customer’s number or sending the location via WhatsApp to couriers, are embedded within each card to enhance efficiency. The table view remains available for other user personas who may require a more detailed or structured overview.
Farther details…
Due to confidentiality, I’m unable to share the project’s documents or research materials. For more information, feel free to reach out to me at hi@zee.gg