General Assembly UXDI3

PROJECT 5: Giift.com / Redesigned Android App

Giift.com. It was our final project and also a client facing one as its based on a real brief given by the brand, Giift.

What is Giift.com?

It is a company that allows users to manage all their loyalty and mileage programs, memberships and gift cards in one single digital platform. It operates the world’s largest loyalty and card network and its currently available in English, Mandarin and French through web interface, Android and IOS apps.

The Brief

To redesign their existing Android app which digitises your loyalty and reward cards, helping users to track their reward points and expiry dates. Besides that, we also reviewed on the current user flow of the 4 key functions of the app which are “Add a card”, “Buy an eGift card”, “Top up a card” and “Exchange rewards between participating brands and partners”.

Project Planning

My team and I sat to discuss and worked out a project plan of timelines, deliverables and distributed the task each of us will be taking care of.

Project Plan for the 3 weeks
Stakeholder meeting: Giift client and my team at The Working Capitol

User Research

Using the Double-Diamond Design Process, we started off with our 1st Stakeholder meeting to better understand our client as in where they are currently at and where they see the business to grow and progress. We find out about their business canvas model; key activities, value proposition; their partnerships with retailers and users; the channels that current users are at; the cost and revenues involved in the calendar year.

Based on the client’s feedback, we drew up the business canvas model to clearly define the territories of the business.

Business Canvas Model: Giift

User Interviews

We conducted users interviews based on the list of questions that we came up with.

Through the users interviews, we find out about their habits and usage of loyalty and reward programmes and cards, gift cards, egift cards and vouchers.

Some behaviors of the users are:

  • A stationery reward card to use when buying art supplies
  • Air travel miles when travelling overseas for work matters
  • Petrol station reward cards to collect points when topping up gas for their vehicles
  • A shop selling motorcycle gears and accessories

We then proceed to group the results accordingly to the users’s behaviors to find out their pain points and needs that they currently facing and what they wish for to make life easier in redemption process.

Through our affinity mapping, we map out 2 key personas from the data we have collected and sorted.

Meet our 2 key personas: Juliet Ooi, 26 yrs old; Michael Cheng, 42 yrs old
“I like to be notified how many points I have to enjoy the full benefits of all the loyalty cards I have whenever I need them.” — Juliet Ooi
“ I want the ease of exchanging my points into mileage for use during family holidays.” — Michael Cheng

Working closely with our stakeholders, Giift.

We conducted our 2nd stakeholders meeting to get our clients involved in developing the customer journey map with us in their office as it serves as a way to help them understand why UX is important and discover how UX can help its users to engage with its offerings and grow their business in a long run.

Examples of the steps we took to create the customer journey map of Giift users.

Gathering the outcome of the meeting, we developed the customer journey map of Juliet Ooi into an infographic style map. We decided to create our user flow and prototype with her journey as she is identified as our main target user who are active as a loyalty program junkie.

We then applied Jakob Nielsen 10 Usability Heuristics on Giift.

Coming into the next stage of the double diamond process, we moved on to the development of the redesigned Giift app for Andriod phones.

Based on the need of the 4 key functions which are Adding A Card, Buying A Card, Exchange A Card and Top-Up A Card, my team mate and me discussed about the user flow. From there, I sketched out the 2 key features I am tasked to create.

Redesign: Introduction screen to educate what the Giift app does and its key functions.
Redesign: Real card faces to feel more like a digital wallet and to be visually more appealing. Seeing the convertion in real time. Suggested card redemptions based on locations. Improved footers for easy access.
Existing Giift screen
Existing Giift screen

The unappealing screens have no staying power and it do not give a clear direction to the users. The side menu is replaced with a bottom nagivation bar to reduce confusion and enable efficient navigation.

1st sketeches before starting on the low-fi prototype

After our 1st prototype, we conducted an A/B testing for the card layouts. Here’s the full video:

In hearing the user’s answers give confirmation that what I has sketched out works for them as they prefer to see a bigger card face as opposed to a list of cards as it resembles a real-world storage of cards in a wallet.

After using Sketch to create the mid-fi wireframes, I used an online prototyping tool, CanvasFlip to create the new Giift prototype. I am able to record user’s interaction during usability testing frame-by-frame, the duration for each task and the hotspots that tracks how long and where they stay. We carried out more usability testings with different users and iterated the prototype, 4 rounds of iterations in total.

Our brief to each user to guide them through what they have to accomplish in the usability testing process
Problems we identified from each testings.

Some users are not sure if they should click on the upwards and downwards arrows or enter the value that they wanted. We made the iterations by eliminating the arrow buttons and keep it simple by entering values.

The 1st introduction screen wasn’t well received as users find it too content heavy and the icons were not clear in its message. I iterated it into a simple animation screen that demostrates each function with simple steps. Carousell of the 4 key functions are shown as each animation is completed to move into the next.

Like what you read? Give Zoe Keren Ong a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.