User Experience of the Starbucks Membership Rewards Card

Kuldeep Kulshreshtha
May 27 · 9 min read

Who hasn’t heard of Starbucks? I really like ‘The Starbucks’ Brand and UX being my crush, I couldn’t help but write about an experience with “Starbucks Rewards / Membership / Loyalty card / Program”.

I’ve successfully managed to join the “Starbucks Rewards” program and this sharing of experience intends to interest some of the UXers involved in design of websites, loyalty / rewards programs. Hopefully, it could also reach designers of Starbucks Singapore website (and Mobile App, in which credit card top-up didn’t work).

While ordering coffee at this rather quiet Starbucks outlet, a stack of beautiful “Gift Cards” caught my attention. Most of them had decorative graphic designs, I guess keeping the Millennials target audience in mind. A quick survey in our teams at Malaysia and India offices confirmed my guess to some extent.

While most of us at our UXArmy Singapore enjoyed working from nice cafes like Starbucks, not surprisingly, we also ended up consuming more caffeine per day. The article like this one was only adding to our hunger for more coffee. Coffee good or bad, let’s park that discussion for another day.

Coming back to Starbucks, for at least 70% of the ‘work from cafe’ sessions, I found myself ending up in a Starbucks. It’s perhaps the huge number of Starbucks outlets across the island, not to mention the consistent “feel” these outlets have. Every time I went to pay for a coffee at the cash counter, I couldn’t help but notice this stack of beautiful looking “Gift cards” nestled among the nuts and Caramel Wafels.

Rewards Cards on Sale at a Starbucks outlet in Singapore

After a few Starbucks visits in which I chose to ignore those, I was sold to one of the most simplistically designed one.

My first Rewards Card

Buying and Losing my first Card

I enquired at the cash counter and was graciously explained about the Membership program. It made sense to purchase one, just for the heck of it (and admittedly, a bit of greed for free coffee). And I did. I was a little too casual about this purchase, as I was soon expecting a Client meeting. Not surprisingly, I lost that membership card on my way home.

I visited the Starbucks website to check my case. Little did I recognise until then, there was no way to recover my “unregistered” card. The searching through information about lost card on the website was actually quite difficult. The information wasn’t present where I expected it i.e. in FAQs or on the footer of “Starbucks Rewards” page. Instead, that information was only accessible from the footer of the Home page.

Footer section of Home page in Starbucks website

On the footer sections of the Home page, there were two menu options in which the information could likely exist — ‘Starbucks Rewards’ and ‘Terms of Use’. I chose to Search in the “Terms of Use” menu because I had already visited the Rewards page and did not find the relevant information.

In ‘Terms of Use’ menu, it took four page scrolls to find a link “Starbucks Card Terms & Conditions” that led to information about ‘lost or stolen cards’.

Link to Card T&C hidden inside other T&C

Upon clicking the link, the information about the “lost or stolen cards” was two scrolls away inside the fine print.

Lost or Stolen card information can be made more readily available on the website

Having no option but to accept the fact of having lost the card, and the 5 bucks on it, it was time to move on. After all I was to blame for losing the card before Registration. The question “Why do I need to Register a pre-paid card?” did cross my mind but that thought faded away within a few days of the card loss. That much for the Lost Loyalty / Membership Card.

UX Problems and suggestions — Set #1

  • Missing information on lost cards on CARDS page, and also under FAQ. Place relevant information at the places where users expect it. That’s why comes in handy.
  • After browsing to the ‘Membership cards” page, it was hard to find a way back to the Starbucks website home page, except for resorting to using the Back button in the browser. Dead ends on the website can get the users stuck. Even if due to it, the sky doesn’t fall, it gets users frustrated during navigation.
  • Deeply placed / hidden information of lost or stolen cards. Face the facts and help people with clear and easy to find information on your websites. Losing cards is not an uncommon problem and remember, not everyone comes back to complain. Those customers can much more likely to become detractors.

Buying again and Registering my second Card

Three weeks later…..!

The “law of greed” worked in favour of Starbucks. I purchased a new Membership card again. This time my favourite Design was displayed on the stands but, this outlet had run out of that Design. Actually, I wanted to choose the one with most basic looks so that I don’t mix that up with my other Credit / Debit cards — those are starting to look equally colourful. That was a very minor disappointment, something I can live with. Finally, I picked up this one, choosing the simpler design out of the only two options available. Yes, I had the urge to stop being indecisive.

Front looks of my new Loyalty card

Since I did not want a repeat of last Loyalty card loss, I decided to register it, right away. This time, Before leaving the cafe!

The Registration Journey

In my mind, I was hoping to find a QR code to scan which would then open up the Registration page. I could then just input my card number, pin, and Voila! But, it was not to be my way. After frantically searching the Card on both sides for a website address to register, I found it in one of the 12 lines of small sized printed text at the back of my Loyalty card.

Reverse side of my new Loyalty card

The small font sizes of text required me to remove my spectacles and sift through the entire text (yes, I’m far-sighted and without bifocals). On the 7th line of text, it was written that should be used for Registration of “Starbucks card”.

The small font sizes of text required me to remove my spectacles and sift through the entire text (yes, I’m far-sighted and without bifocals). On the 7th line of text, it was written that should be used for Registration of “Starbucks card”.

Sounded easy. I fired up the Safari browser on my iPhone and I was on the Starbucks website. I scrolled through the website to look for card Registration but failed to find it. My next bet was to find the Registration form inside (cursed since years by some UX experts) the Hamburger menu. And indeed it was there, a menu item “CARD”.

Home page of Starbucks mobile website

After selecting “CARD”, on the new page that opened, there wasn’t any option to Register the Loyalty Card. However, there was an “Aha” moment. When I looked at the membership Logo, It was only then I realised the Card I’m holding is actually called “Starbucks Rewards” card, not “Gift Card” not “Starbucks Card” not “Loyalty Card”.

Unable to find the Registration form, I started more careful browsing of page content, one line at a time. I noticed this little “here” — thanks for the underline, it somewhat looked like a clickable link. When I clicked on it, I landed on a new page. However, that page had “Sign-In” instead of a Register / Sign-Up Form — see the last screenshot below.

The “Aha” moment in the fifth screen. The last screenshot was added the next day
Poorly named button label

Upon further scrolling, I saw CREATE ACCOUNT button and in the hope of finding Starbucks Rewards card registration Form, I tapped on it.

Contrary to my expectation of two fields to input the Card number and the hidden pin, I was presented with a Form that had NINE fields (all mandatory) and two checkboxes (one of them mandatory)! The button at the bottom of the Form said, CREATE ACCOUNT. Wasn’t I “Registering” my ‘Starbucks rewards’ card?

As I filled all the fields with a feeling of futile reluctance, the last field needed me to unveil the masked PIN number from the Membership Card.

I partially succeeded in removing the mask in a few tries — I’m not good at working with fingernails. The mask wouldn’t peel off easy and clean. Eventually, I had to rub-off the entire masking sticker, pieces of it breaking apart and also filling up the space between my finger and it’s fingernail. Yikes!

Two-page Registration Form for the Rewards Card

After filling up the “Create account” Form, I was asked to check for verification email which promptly arrived. I clicked on the link in the email to verify my account and I was taken to the browser with this clear acknowledgment.

However one of the statements on that dialogue read, “Please fill up your member profile to complete your registration” and that was touching my lower limits of annoyance. I wasn’t sure why my Registration wasn’t complete!

Acknowledgement message after email verification

Thankfully, most of the further information was optional. Some of those felt unnecessary — especially the INCOME RANGE.

For a heavy coffee drinker and not a coffee sommelier, the detailed sub-options under each of the COFFEE PREFERENCES, MILK PREFERENCES, ADD SYRUP, etc. didn’t make any sense. In fact, I don’t even know what SYRUP does to the coffee. This website interface was bombarding me with jargons from the Coffee world. Perhaps to some people, the jargons sound kool!

Form and drop-downs with hard to comprehend options

Coming back to inconsistency between several touch points, physical and online, here is the list of several terminologies I came across. These might make complete sense to several Starbucks internal staff, website designers and copywriters, not to me.

  1. A Gift Card — Largest and Obvious Text on the Counter Display
  2. Starbucks Card — as was indicated on the back of the Card and also in the ‘Terms and Conditions’ section
  3. Card — Menu item in Hamburger
  4. Starbucks Rewards — The Logo on The Starbucks website
  5. Account — To join the Starbucks Rewards program, people must create an account
  6. Membership Card, Loyalty Card — My own terminology based on everything that looks like a credit card, but not a Credit/Debit card, is either a Loyalty or Membership card. Incidentally, the Cashier at Starbucks called it Membership card too.

While several improvements are needed on the Starbucks website Design, there are also few lessons for the physical world — both combined make an Experience. guys raise your hands :-) The hard to peel sticker could be done with better quality while still being tamper-proof.

Pin masking sticker that’s excessively sticky

UX Problems and suggestions — Set #2

  • Multiple naming conventions for the Card. In fact, in search of a consistent naming convention, I kept on calling the “Starbucks rewards” card with so many different names. Keep the naming consistent on website & showcase designs.
  • Registrations (and consumers’ data) are important to businesses, so is the people’s time. Give people a direct and efficient way to Register the Card instead of making the process lengthy and painful.
  • Many Asians are still not familiar with Western culture. Starbucks — don’t miss on the opportunity of ‘educating’ people about your world of “Coffee”. Instead of using cryptic names like “Syrup” and “Ristretto”, present people with a short explanation of what those are. So that your Sales may increase even further.
  • Use high quality materials everywhere even if it’s a Pin code masking tape. A bad customer experience sticks longer than the sticky bits of the masking tape.

As I’m sipping my nice and hot Americano, I see a little piece of the masking sticker still clinging on to the back of my finger.

UXArmy

Online User Testing platform https://www.uxarmy.com/remote-user-testing

Kuldeep Kulshreshtha

Written by

Founder UXArmy, Asia's only Online user testing platform

UXArmy

UXArmy

Online User Testing platform https://www.uxarmy.com/remote-user-testing