2020 - 2023
Spinneys Website
I built an end-to-end e-commerce grocery website during the COVID lockdown. This full digital transformation was achieved using Adobe XD and Figma.
Web Design
Ecommerce UX
Know More
At Digital & Code, I led the UI design for the Spinneys UAE e-commerce website. This project was built urgently during the height of the COVID pandemic, as Spinneys had no online delivery solution. Starting in Adobe XD and later shifting the design system into Figma, the website was crafted to handle full-scale grocery delivery with responsive layouts and intuitive navigation. The platform launched on time, marking Spinneys’ first digital grocery presence in the UAE.
Building in Crisis Mode
A digital lifeline for the UAE during the pandemic, the Spinneys website was built under immense pressure to serve thousands of daily users. With no online delivery system in place at the start of the lockdown, it became an urgent national need. I designed all core pages, Shop, Recipes, Lifestyle, and Podcasts, with clear user flow and frictionless UX to enable fast, secure shopping under pressure. Inside the Shop section, I built detailed templates for over 20 categories, including Fresh Produce, Frozen, Butchery, Toiletries, and World Foods, ensuring speed and clarity in every browse state.
Tool Evolution and Workflow
Tool Evolution and Workflow
I began projects with Adobe XD for rapid kickstart, then transitioned to Figma for scalable growth. My workflow incorporates real-time updates from clients, optimized for agile development sprints.
Initial wireframes and visual layouts were developed in Adobe XD to hit tight sprint goals. As the project matured, I migrated the entire design system into Figma for better collaboration and modular component handling. Updates from the Spinneys team were frequently integrated, requiring tight file control and consistent versioning. I maintained a full design system, including navigation components, product cards, filter sets, and all banners, to ensure brand consistency across the evolving UI.
Design Language and Structure
Design Language and Structure
My typography, color systems, and iconography are tuned for long-scroll clarity, device adaptability, and commercial storytelling.
I applied Spinneys’ brand palette: fresh greens, warm neutrals, and strong white space to communicate health, freshness, and trust. Iconography was developed using simple line styles and grid precision for intuitive readability. Typography focused on system-safe fonts with smart line height and clean text padding for responsive flow. Each template was optimized for content density while preserving a clean, accessible shopping journey on both desktop and mobile.
Web UI Best Practices
Web UI Best Practices
I integrate responsive layouts, accessibility, and SEO-friendly structures into every template and user touchpoint.
Every page was crafted with mobile-first responsive behavior, including thumb-friendly tap zones, quick product previews, and flexible grid breakpoints. I followed best practices in e-commerce UX, incorporating persistent navigation, smart filters, breadcrumbs, and CTA visibility. Page loading speeds, retina image compatibility, and accessibility compliance (contrast ratio, font size, alt tags) were all built in from the start to support scalability and search visibility. The checkout flow was tested for clarity, with trust badges and address handling refined for fast completion.
More Works
©2004 - 2025
More Works
©2004 - 2025
FAQ
FAQ
01
What is your design experience?
02
What design disciplines do you specialize in?
03
How do you approach design challenges?
04
Do you use AI tools in your design process?
05
What tools do you master?
06
How do you stay innovative in design?
07
Why should clients choose you?
08
How can we get started?
01
What is your design experience?
02
What design disciplines do you specialize in?
03
How do you approach design challenges?
04
Do you use AI tools in your design process?
05
What tools do you master?
06
How do you stay innovative in design?
07
Why should clients choose you?
08
How can we get started?
2020 - 2023
Spinneys Website
I built an end-to-end e-commerce grocery website during the COVID lockdown. This full digital transformation was achieved using Adobe XD and Figma.
Web Design
Ecommerce UX
Know More
At Digital & Code, I led the UI design for the Spinneys UAE e-commerce website. This project was built urgently during the height of the COVID pandemic, as Spinneys had no online delivery solution. Starting in Adobe XD and later shifting the design system into Figma, the website was crafted to handle full-scale grocery delivery with responsive layouts and intuitive navigation. The platform launched on time, marking Spinneys’ first digital grocery presence in the UAE.
Building in Crisis Mode
A digital lifeline for the UAE during the pandemic, the Spinneys website was built under immense pressure to serve thousands of daily users. With no online delivery system in place at the start of the lockdown, it became an urgent national need. I designed all core pages, Shop, Recipes, Lifestyle, and Podcasts, with clear user flow and frictionless UX to enable fast, secure shopping under pressure. Inside the Shop section, I built detailed templates for over 20 categories, including Fresh Produce, Frozen, Butchery, Toiletries, and World Foods, ensuring speed and clarity in every browse state.
Tool Evolution and Workflow
I began projects with Adobe XD for rapid kickstart, then transitioned to Figma for scalable growth. My workflow incorporates real-time updates from clients, optimized for agile development sprints.
Initial wireframes and visual layouts were developed in Adobe XD to hit tight sprint goals. As the project matured, I migrated the entire design system into Figma for better collaboration and modular component handling. Updates from the Spinneys team were frequently integrated, requiring tight file control and consistent versioning. I maintained a full design system, including navigation components, product cards, filter sets, and all banners, to ensure brand consistency across the evolving UI.
Design Language and Structure
My typography, color systems, and iconography are tuned for long-scroll clarity, device adaptability, and commercial storytelling.
I applied Spinneys’ brand palette: fresh greens, warm neutrals, and strong white space to communicate health, freshness, and trust. Iconography was developed using simple line styles and grid precision for intuitive readability. Typography focused on system-safe fonts with smart line height and clean text padding for responsive flow. Each template was optimized for content density while preserving a clean, accessible shopping journey on both desktop and mobile.
Web UI Best Practices
I integrate responsive layouts, accessibility, and SEO-friendly structures into every template and user touchpoint.
Every page was crafted with mobile-first responsive behavior, including thumb-friendly tap zones, quick product previews, and flexible grid breakpoints. I followed best practices in e-commerce UX, incorporating persistent navigation, smart filters, breadcrumbs, and CTA visibility. Page loading speeds, retina image compatibility, and accessibility compliance (contrast ratio, font size, alt tags) were all built in from the start to support scalability and search visibility. The checkout flow was tested for clarity, with trust badges and address handling refined for fast completion.
More Works
©2004 - 2025
FAQ
01
What is your design experience?
02
What design disciplines do you specialize in?
03
How do you approach design challenges?
04
Do you use AI tools in your design process?
05
What tools do you master?
06
How do you stay innovative in design?
07
Why should clients choose you?
08
How can we get started?
2020 - 2023
Spinneys Website
I built an end-to-end e-commerce grocery website during the COVID lockdown. This full digital transformation was achieved using Adobe XD and Figma.
Web Design
Ecommerce UX
Know More
At Digital & Code, I led the UI design for the Spinneys UAE e-commerce website. This project was built urgently during the height of the COVID pandemic, as Spinneys had no online delivery solution. Starting in Adobe XD and later shifting the design system into Figma, the website was crafted to handle full-scale grocery delivery with responsive layouts and intuitive navigation. The platform launched on time, marking Spinneys’ first digital grocery presence in the UAE.
Building in Crisis Mode
A digital lifeline for the UAE during the pandemic, the Spinneys website was built under immense pressure to serve thousands of daily users. With no online delivery system in place at the start of the lockdown, it became an urgent national need. I designed all core pages, Shop, Recipes, Lifestyle, and Podcasts, with clear user flow and frictionless UX to enable fast, secure shopping under pressure. Inside the Shop section, I built detailed templates for over 20 categories, including Fresh Produce, Frozen, Butchery, Toiletries, and World Foods, ensuring speed and clarity in every browse state.
Tool Evolution and Workflow
I began projects with Adobe XD for rapid kickstart, then transitioned to Figma for scalable growth. My workflow incorporates real-time updates from clients, optimized for agile development sprints.
Initial wireframes and visual layouts were developed in Adobe XD to hit tight sprint goals. As the project matured, I migrated the entire design system into Figma for better collaboration and modular component handling. Updates from the Spinneys team were frequently integrated, requiring tight file control and consistent versioning. I maintained a full design system, including navigation components, product cards, filter sets, and all banners, to ensure brand consistency across the evolving UI.
Design Language and Structure
My typography, color systems, and iconography are tuned for long-scroll clarity, device adaptability, and commercial storytelling.
I applied Spinneys’ brand palette: fresh greens, warm neutrals, and strong white space to communicate health, freshness, and trust. Iconography was developed using simple line styles and grid precision for intuitive readability. Typography focused on system-safe fonts with smart line height and clean text padding for responsive flow. Each template was optimized for content density while preserving a clean, accessible shopping journey on both desktop and mobile.
Web UI Best Practices
I integrate responsive layouts, accessibility, and SEO-friendly structures into every template and user touchpoint.
Every page was crafted with mobile-first responsive behavior, including thumb-friendly tap zones, quick product previews, and flexible grid breakpoints. I followed best practices in e-commerce UX, incorporating persistent navigation, smart filters, breadcrumbs, and CTA visibility. Page loading speeds, retina image compatibility, and accessibility compliance (contrast ratio, font size, alt tags) were all built in from the start to support scalability and search visibility. The checkout flow was tested for clarity, with trust badges and address handling refined for fast completion.
More Works
©2004 - 2025
FAQ
What is your design experience?
What design disciplines do you specialize in?
How do you approach design challenges?
Do you use AI tools in your design process?
What tools do you master?
How do you stay innovative in design?
Why should clients choose you?
How can we get started?