Moola

Secure Gift Card Solution and Marketplace to Help Shoppers Save Money

The Challenge

Help users save money by introducing the simple life-hack of buying gift cards for yourself.

Outcome

Launched a mobile app for both iOS and Android, that allows users to buy, store, and redeem e-gift cards directly from their phones - saying goodbye to lost cards and bulky wallets.

My Role

Working closely with the PM and the development team, I created wireframes, prototypes, and formalized a design system to be shared across teams. On the UX side, I conducted user research and led usability testing sessions.

Typically gift cards are seen as the quick and easy gifts to get for your friends or family members. However, there is a whole new way of shopping that you may be missing out on, which is buying gift cards for yourself.

By taking advantage of deals and bonuses, you can make profit on purchases at your favourite stores. Despite the name, gift cards are no longer exclusive for just giving. Moola is gift card solution that helps everyday shoppers save money at their favourite stores.

Overview

Understanding our users

The first part of project was to conduct user interviews with our target demographic. My focus was on understanding their experiences in buying and using gift cards; I wanted to find out more about what they typically buy gift cards for, when they use them, and how often.

Based on the findings, most people used gift cards as last minute gifts when they didn’t really know what the recipient wants or likes. Along with it being a last minute present, gift cards were also thought of as impersonal as it lacked the thought that would go into giving a good gift. Additionally, I was surprised by the number of people that did not think to buy gift cards as a way to save money on personal purchases. Overall, the interview participants did not face much frustrations when actually buying the gift cards, as they were primarily purchased at the stores during checkout.

  • The majority of users never thought to buy gift cards for themselves

  • Most gift card purchases were made in person at the stores

  • Gift cards can be seen as an impersonal gift

IMG_7114_2.jpg
IMG_5048_2.jpg

Defining user goals and business goals

In the next stage of this project, I wanted to involve the stakeholders to collaborate with me in the design process. I first interviewed each stakeholder to get a better understanding of their goals and expectations for this project. I then held brainstorming sessions where we worked together to narrow down the scope of the project. This helped us get aligned on the same objectives and also find empathy for the needs of our target users.

As part of the Design Thinking process, I organized a “How Might We” exercise for myself and the stakeholders to fill out. This encouraged the team to think in the perspective of the users and empathize with the problems they may be facing. The activity also helped promote a solution-oriented mindset, by framing problems into opportunities that we can potentially solve.

Large JPG-Aro Ha_0380.jpg

We then organized the HMW’s into an affinity map of overarching themes to highlight the primary problems that we were looking to solve. The exercise gave insight into what the team were expecting, and set up the early architecture of the product we were creating.

“How might we get the most value when buying a gift card?”

With our personas in mind, we mapped out the journey of buying a gift card, to visually detect areas that we can improve. I also created an experience map, as it was important to analyze the broader experience of discovering and downloading the gift card product we wanted to create.

Experience Map

Ideating Solutions

To start the design phase of this project, I created low fidelity wireframes to communicate user flows and features. It was important to the stakeholders that the marketplace and wallet shared equal weight in importance within the app.

The focus was to not only give users the ability to buy gift cards quickly, but also use them quickly as well. This became a challenge in my early wireframes, as I had the two features on separate screens. I was hesitant on putting them on the same screen since that could become confusing for first time users. Working with the stakeholders, we were able to come up with a middle ground of having the wallet as a module that could be expanded into its full view.

Grayscale Wireframes.png

Designing the Experience

What started as a challenge, evolved into a unique way of navigating through the mobile app. By placing the wallet as a sliding module within the marketplace, users are able to switch back and forth from browsing to scanning their stored gift cards. The wallet module also became a good way for users to quickly see the amount of stored value they have remaining on purchased cards.

Hi-fi screens 1.png
Hi-fi screens 2.png
Hi-fi screens 3.png

Moola is available to download on the App Store and Google Play Store

Learn more at Moola.com

Design System

As we finalized the designs for the mobile app, I created a design system to establish a single source of truth for the team to refer to. I documented the typography, colours, and components of the product; and kept it at the forefront during the production phase. The design system became most useful when handing off my work to the development team, as they were able to create classes within their codes to expedite their workflow.

Design System.png
Next
Next

Joey