Shukran

Shukran gives the liberty to earn and spend Shukrans on customer's purchases. It’s the biggest and the most successful retail loyalty program in the Middle East which serves with an extremely rewarding shopping experience across the Landmark Group brands or LMG partner brands. 

 

Shukran

Shukran gives the liberty to earn and spend Shukrans on customer's purchases. It’s the biggest and the most successful retail loyalty program in the Middle East which serves with an extremely rewarding shopping experience across the Landmark Group brands or LMG partner brands. 

 

01-3

My Role

My Role

I worked on Shukran for a year and a half (of course along with other Landmark’s e-commerce brands).  The project started in January 2018 and I joined the end of February 2018, Initially, I designed the Desktop and Mobile experience and then after the launch in July 2018 it was handed over to me fully to own it as it’s product designer.  From then I was responsible for followings:

I worked on Shukran for a year and a half (of course along with other Landmark’s e-commerce brands).  The project started in January 2018 and I joined the end of February 2018, Initially, I designed the Desktop and Mobile experience and then after the launch in July 2018 it was handed over to me fully to own it as it’s product designer.  From then I was responsible for followings:

 

  • Drive user experience and interface design across all digital platforms of Shukran.
  • Collaborate with product managers, engineers, and multi-functional teams to build concept consensus.
  • Advocate for the end user by always seeking ways to improve their experience.
  • Conduct and participate in user experience research.
  • Design wireframes, mockups, or interactive prototypes to communicate and test user behaviour.
  • Keeping an eye on loyalty user needs to explore new opportunities for Shukran.
  • QA interfaces for accuracy and to keep consistency across the platforms for uniformed user experience.
  • Drive user experience and interface design across all digital platforms of Shukran.
  • Collaborate with product managers, engineers, and multi-functional teams to build concept consensus.
  • Advocate for the end user by always seeking ways to improve their experience.
  • Conduct and participate in user experience research.
  • Design wireframes, mockups, or interactive prototypes to communicate and test user behaviour.
  • Keeping an eye on loyalty user needs to explore new opportunities for Shukran.
  • QA interfaces for accuracy and to keep consistency across the platforms for uniformed user experience.

Shukran 1.0

Shukran 1.0

  • Meet Shukran members’ needs on their account (origination and servicing) 
  • Delivers business and communication objectives of Shukran program 
  • Engage, informs and inspires Shukran members.
  • Support sales, cross-sell and up-sell of products and commercial initiatives from concepts and participating brands
  • Meet Shukran members’ needs on their account (origination and servicing).
  • Delivers business and communication objectives of Shukran program.
  • Engage, informs and inspires Shukran members.
  • Support sales, cross-sell and up-sell of products and commercial initiatives from concepts and participating brands.
02

Business Goals for Shukran 2.0

Business Goals for Shukran 2.0

  • Expand the Shukran Scale in Middle East by 2x.
  • Digitazation of Shukran loyalty card. 
  • Increasing the App downloads
  • Inviting more brands to partner with Shukran across middle east and use Shukran as their platform to retain their customers. 
  • Understanding and satisfying the digital Shukran member’s motivation, needs and goals.
  • Communication of cross-border points accrual and redemption
  • Clear Visibility for Silver and Gold Tier.
  • High level communication on how to manage Shukran membership account (e.g. Recent purchases history, Shukran Calculator, Shukran points converter, Self-Help and troubleshooting content) 
  • Increase the visibility of Store Locators 
  • Exclusive content and offers (in-store only or multichannel) 
  • Push existing members to download Shukran Apps
  • Expand the Shukran Scale in Middle East by 2x.
  • Digitazation of Shukran loyalty card. 
  • Increasing the App downloads.
  • Inviting more brands to partner with Shukran across middle east and use Shukran as their platform to retain their customers. 
  • Understanding and satisfying the digital Shukran member’s motivation, needs and goals.
  • Communication of cross-border points accrual and redemption.
  • Clear Visibility for Silver and Gold Tier.
  • High level communication on how to manage Shukran membership account (e.g. Recent purchases history, Shukran Calculator, Shukran points converter, Self-Help and troubleshooting content

Acheived

Results

Acheived

Results

113% - Organic app downlods lift

83% - Reduced web bounce rate

12% - Reduced call centre load by introducing inbox

42% - Logged-in users visiting the New receipts & transactions.

113%

Organic app downlods lift

83%

Reduced web bounce rate

12%

Reduced call centre load by introducing inbox

42%

Logged-in users visiting the New receipts & transactions.

Foundation

Foundation

Apps are our first priority, iOS was leading the whole project but for desktop, there are always some fundamental requirement that needs special treatment. These wireframes were the very initial steps of desktop site. There were lots of changes I made moving towards design phase, you will see while you scroll down.

Apps are our first priority, iOS was leading the whole project but for desktop, there are always some fundamental requirement that needs special treatment. These wireframes were the very initial steps of desktop site. There were lots of changes I made moving towards design phase, you will see while you scroll down.

sketches
05

Wireframes

Wireframes

Took the Lo-fi sketches to a solid form and step by step I was improving each section like what content should follow what? what information would be best for which page? and so on …

In desktop, you get more space to guide your users (if you use it smartly). The goal of the Shukran website and the purpose (nowadays) desktop sites serves, was a good match for me because all we wanted from desktop site to push customers to download the app and to give information about Shukran and it’s partners as much we can.

Took the Lo-fi sketches to a solid form and step by step I was improving each section like what content should follow what? what information would be best for which page? and so on …

In desktop, you get more space to guide your users (if you use it smartly). The goal of the Shukran website and the purpose (nowadays) desktop sites serves, was a good match for me because all we wanted from desktop site to push customers to download the app and to give information about Shukran and it’s partners as much we can.

wireframes

Was & Now

Image 1

Highlights of the project

Highlights

of the project

Digitization of Shukran Card

Digitization of Shukran Card

For 8 years Shukran was using the physical card to reward users. It's 2019 now and finally they decided to kill the physical cards and go digital. I don't need to explain what benefits this step has given to users and the company, quite obvious! isn’t it?!

For 8 years Shukran was using the physical card to reward users. It's 2019 now and finally they decided to kill the physical cards and go digital. I don't need to explain what benefits this step has given to users and the company, quite obvious! isn’t it?!

Cards
Calculator

Improved Shukran Calculator

Improved Shukran Calculator

I designed a better calculator for desktop and mobile site to measure Shukran's earnings and spendings easily. Shukran serves more than 55 brands and each brand gives a different value to Shukran. Based on your transaction new calculator allows you to calculate the values you earn/spend by brand. Which helps users to decide where they should spend their money. 

Inbox

Inbox

The requirement was to reduce the phone calls load from the call center at some level. Introducing Inbox into Shukran has helped members to keep track of their issues/notifications/earnings/spendings in-short everything related to their Shukran membership.

Inbox Screens
Transactions

Receipts & Transactions

Receipts & Transactions

The new Shukran has an account statement of members spendings on Shukran brands. Graphics with text helps to understand things fast. I designed the transactional statement in visuals. Users can keep track of their transactions and what value of Shukran they have earned from different brands. It allows users to track more than 12 months. It's really helpful, my wife uses it a lot. haha!

Increase App Downloads

Increase App Downloads

This is one of the most important goals of any online business. While designing the first page of Shukran I wanted to be loud about downloading the app. There were 3 spots on the homepage where I proposed to remind the user to download Shukran app.

Shukran's main platform is mobile applications. Shukran’s requirement from the and therefore we clearly needed something more than just placing the iOS/android store buttons in footer. 

This is one of the most important goals of any online business. While designing the first page of Shukran I wanted to be loud about downloading the app. There were 3 spots on the homepage where I proposed to remind the user to download Shukran app.

Shukran's main platform is mobile applications. Shukran’s requirement from the and therefore we clearly needed something more than just placing the iOS/android store buttons in footer. 

Download Via Mobile

User Interfaces

170+ Screens! Obviously can't list them all.

170+ Screens! Obviously can't list them all.

After getting the approval my next step was to nicely dress up the wireframes into new Shukran visual style, but it was not just the UI design, I had to work parallel on UX and UI in this project. Wireframe phase only covered few major pages that was needed for the approval purpose and due to the shortage of time, I had to jump directly into UI phase. 

 As in combination of UX&UI many new things were coming up. I tried a lot of solutions for Shukran Calculator, Store Locator, Account Dashboard, Coupons and Offer detail pages etc and all of those were being filtered in each team meetup.

 By the way I have not presented the Visual Style Tile in this casestudy but we (design team) changed it all, just so you know the transformation was from skeuomorphic to modern design.

 I am presenting few screens below. You can browse the site here  www.shukran.com 

After getting the approval my next step was to nicely dress up the wireframes into new Shukran visual style, but it was not just the UI design, I had to work parallel on UX and UI in this project. Wireframe phase only covered few major pages that was needed for the approval purpose and due to the shortage of time, I had to jump directly into UI phase. 

 As in combination of UX&UI many new things were coming up. I tried a lot of solutions for Shukran Calculator, Store Locator, Account Dashboard, Coupons and Offer detail pages etc and all of those were being filtered in each team meetup.

 By the way I have not presented the Visual Style Tile in this casestudy but we (design team) changed it all, just so you know the transformation was from skeuomorphic to modern design.

 I am presenting few screens below. You can browse the site here  www.shukran.com 

Image 1-3
Mobile First Shot-3
About Shukran@2x-2
Brand Detail page
Coupon
Calculator
Dashboard
Account Dasboard – D&M-2
Receipts & Transactions
Mobile screens 1-2
Mobile Screens 2-2
Mobile Screens 3

Other Projects

 

Other Projects

 

Selected Works

ShukranMiddle East Biggest Loyalty Program

One App 7 BrandsEcommerce App

CaretsCase Study - Branding & Desktop Site

SmilePenCase Study - Desktop & Mobile Site

Body JewelryCase Study - Desktop & Mobile Site

BeardCase Study - Desktop & Mobile Site

IWEESocial Network App

VellerCase Study - iOS Social Network App

EycoEcommerce Website

ProducerlyCreate & Sell Music

SocialReport-ConceptTrack your Social Networks

CollabmixCollaboration Tool

HomenidzEcommerce App Design

WORK               ME               BEHANCE               DRIBBBLE               LINKEDIN               MEDIUM           

This portfolio is based on my personal works and the ones I've done for my clients.
All works ©
Umyr Mehmood 2018. Please do not reproduce without the permission of Umyr Mehmood.