Enabling Accelerated Design Delivery and Feature Deployment

Building flexible templates and design systems to support rapid online growth and an ambitious go-to-market strategy.

Enabling Accelerated Design Delivery and Feature Deployment

Building flexible templates and design systems to support rapid online growth and an ambitious go-to-market strategy.

Organisation

Alshaya Group

Organisation

Alshaya Group

Project

Core Foundation

Project

Core Foundation

Platform

Web, Mobile App

Platform

Web, Mobile App

Product Design Lead

Product Design Lead

Area of Expertise

UX/UI Design, eCommerce

Area of Expertise

UX/UI Design, eCommerce

The Challenge

The Alshaya Group operates in 16 countries, and oversees a portfolio of over 90 fashion, food, beauty and home furnishings brands. By 2015, they had two online stores. In 2016, they launched a digital transformation to bring all brands online with modern, responsive websites and apps.

The Approach

We implemented a "build once, and clone" approach, where a website for a specific market vertical became the template for others in that category. For instance, a fashion-focused site would be cloned and adapted for the next fashion brand, ensuring efficiency and speed to market.

The Response

We built a Core Design Framework, allowing the entire component library and design system to be cloned and adapted for new brands. This significantly reduced design and development efforts, enabling rapid launches of responsive sites and apps. Each responsive site and mobile app share the same back-end and CMS functionality, built with Drupal. Each mobile app is "headless" and pulls data from the responsive web mobile code base. By mid-2021, Alshaya had deployed its 100th e-commerce property (60+40 multi-lingual apps and sites)

My Contribtion

American Eagle MENA: 1) Home page with customizable content modules 2) Headless mobile app home page, 3) dynamic product listing page, 4) product detail page 5) shopping bag

H&M MENA: 1) Home page with customizable content modules 2) Headless mobile app home page, 3) dynamic product listing page, 4) product detail page 5) shopping bag

Bath & Body Works MENA: 1) Home page with customizable content modules 2) Headless mobile app home page, 3) dynamic product listing page, 4) product detail page 5) shopping bag

My Contribution

  • Responsible for designing and maintaining the foundational Core Template, component libraries and underlying design system.

  • Plan, manage, deliver end-to-end cross-platform interface design.

  • Identified, procured and implemented design tools.

  • Defined and designed workflows for two delivery streams.

  • Manage and own developer hand-off tools and access.

  • Introduced Jira to manage design requests and campaign delivery across all business units.

  • Recruit, manage, mentor product and graphic designers to work within the design system to deliver specific goals.

  • Ensure successful user acceptance and quality assurance testing.

  • Manage go-live and brand handover activities.

  • Oversaw the delivery of responsive websites and mobile apps for; H&M, COS, American Eagle, Bath & Body Works, Victorias Secret, Footlocker, Mothercare, Boots, Muji, Pottery Barn, West Elm and The Body Shop.

Deliverables (per brand mentioned above)

Deliverables
(per brand mentioned above)

  • Low fidelity wireframes and journey maps

  • High fidelity screens for responsive web and mobile app experiences

  • Style guide, design systems and component libraries

  • Developer handover documentation

  • Promotional front end trading content (banners and promotions)

  • Automated briefing system, allowing brand partners to seamlessly engage with design delivery teams (custom Jira implementation)

  • E-commerce page templates: Home, pre-launch, campaign, search results, category/department page, product listing page, product detail page, shopping cart, checkout and payment, order confirmation, social login and sign-up, my account, order history, wishlist, address book, order tracking, loyalty and rewards, contact us, store locator, 404, maintenance, terms, shipping and privacy policy.

  • Over 150 e-commerce specific features: Search, faceted navigation, sort and filter, product recommendations, size guide, fit assistance, stock availability, reviews and social proof, cross and up sell, wishlist, persistent cart, drawer shopping cart, guest checkout, single page checkout, promo codes, multiple payment methods, shipping methods, order summary, order confirmation emails, order history and tracking, address book, loyalty program integration, live chat, store finder, push notifications, A/B testing and analytics tool integration, dynamic personalised content, among others.

Delivery Team

Head of Product Design, Product Design Lead, UX Designers (3), UI Designers (3), Product Owners (4), Project Managers (2), Business Analyst (4), iOS dev (4), Android dev (4), Web dev (6).

Timeline

Delivered over a period of 5 years