case-study-banner

Services

UX and UI Design, Frontend Development

 

Client Introduction

Skyshopper is Emirates NBD Bank’s exclusive marketplace for the bank’s credit and debit cardholders. Users access the platform to purchase, gain points and redeem attractive offers on flights, hotels, shopping, deals, and events.

 

Design Challenges

 

01

Redesign the portal for Emirates NBD Bank to emphasize deals, offers, and discounts that are curated exclusively for the debit and credit cardholders.

02

Explicitly outline the terms and conditions for each discounted offer. 

 

03

Simplify the navigation and discovery process for new users.

04

Help identify and design for key cross-selling points in the user journey.

 

 

 

UX Research

  • Credit cards that offer a wide variety of offers, deals, and discounts to users are used more frequently.
  • A majority of purchases (53%) on e-commerce platforms are conducted via credit and debit cards. 
  • People use debit cards on low-value purchases like groceries and household essentials while credit cards are more frequently used on high-value transactions such as electronics, home appliances, et cetera.
  • About 84% of credit card/debit card users forget more than half of all the discounts, deals, or offers available on the card within 30 days of use. 
UX-Research-Skyshopper

Strategize

 

Users access the Skyshopper platform to view offers and redeem their rewards. Hence, the key design priority is to display deals and offers upfront to the Emirates credit card and debit card holders. The main homepage and other category sections show generic deals and discounts that are available across hotels, experiences and electronics to navigate quick access to key user flows while rotating banners highlight popular schemes currently applicable. The user experience for the logged-in shopper focuses on personalised offers, bunched deals and discounts of limited validity.

To assert the value proposition of shopping on the Skyshopper platform, the user experience accentuates the special pricing for Emirates Credit and Debit Card users shown directly alongside the struck though standard pricing for the product. When moving forward with a flight booking or a retail purchase, the final payment screen shows the user exactly how much they save by shopping on Emirates’ Skyshopper platform and by using an Emirates Credit/Debit Card as compared to the next best offer through another website.

 

Wireframes-Skyshopper

 

Deliver

 

The entire design was built using the brand colours of Emirates NBD. The navigation bar is punctuated with the Emirates’ blue while the page below is white with rich images and eye-catching offers giving the platform the look and feel of a vibrant online marketplace. This minimalistic approach helps the products and offers stand out strongly in comparison to other elements. 

The website and app use relatively smaller font sizes and sufficient whitespace between elements to convey a feeling of lightness and ease of use. The design also heavily employs the Emirates’ blue in rectangular sections, buttons, input fields and other such components, in order to convey a sense of trust and reliability. We also designed a component library for the Emirates team to ensure design consistency across the website and mobile app.

 

Homepage-Skyshopper

 

Flight-Booking-Flow-Skyshopper
Hotel-Booking-Flow-Skyshopper
Event-booking-flow-skyshopper
shopping-flow-skyshopper
app-screens-skyshopper
Typography-skyshopper

Schedule a call with us