UI for Mobile App- add a feature

Vittoria Anastasia Valentini

Graphic Designer
Web Designer
Product Designer
Figma
Slack
Magaloop

PROJECT DETAILS

My role UX Researcher, UI Designer

Team Kiristin Edwards & me

Tools Figma, Google Suite, and Slack

Overview 🔎

Promoting a Christmas raffle from the 1st December 2022 till 24th December 2022, had the goal to increase customer engagement with the app (Magaloop). The raffle was only played once per day, but always gave users an opportunity to win a voucher. This case study describes how an integrated ux/ui project team created such a buzz around vouchers that it led to higher as well as more diverse app retention through increasing user engagement more than 50% - just like that int he first 5 days of its launch!.

Wheel user flow animation

PROCESS OVERVIEW

Chosen process: DOUBLE DIAMOND; design the right thing, design things right

When designing Double Diamond UX/UI processes, there are many different ways people tend to approach it: some may start with wireframes or prototypes before moving onto higher fidelity designs; others may start with higher fidelity designs like mockups so they can get more of an idea of what they're going for before jumping into coding; still others may jump straight into designing without any prototypes at all (which I don't recommend). Due to the lack of time, this feature was created in just 8 days (Design & Development), We decided to start with Mid Fidelity designs this is the process We followed:

1. IMAGINE: User Persona

2. DEFINE: User Journey, HMW Statement, Problems & Hypothesis

3. PROTOTYPE: User flow, Wireframes, Design System, Mid-fi Prototype

4. TEST: Testing results, Iteration & Implementation, High-fi prototype, Next steps

Problem & Solution 🤝

One of the biggest challenges that Magaloop face is engaging their customers and getting them to spend more time on the app. The solution? Adding a Christmas raffle feature by designing a wheel of fortune! The marketing department thought that this gamification could replace a marketing campaign.

The first thing we did was to engage with our Marketing department .We wanted to get a sense for what they were looking for in an experience like this—what would inspire them to engage with the app more often? What would keep them coming back for more?

We found that people were mostly motivated by receiving discounts on their favourite suppliers, but also wanted some sort of challenge or competition. This led us to create a wheel of fortune-style game where users could spin a wheel and win prizes as they went along.

We set up the game so that each time someone spins the wheel, they receive points based on how many times they've spun it before. We also made sure that there was always something new to look forward to: one person might win a voucher worth €25, while another will win a PS5! This means that even if someone doesn't win anything right now, they'll still have something fun waiting for them next time they play!

Process 🛣

We started searching and looking around in order to gather some info related the Wheel Design experience. I personally deep dived into online gambling designs as those are created with the main purpose of attracting and retaining customers attention. As the main focus for Magaloop was to create a gamified app experience centered around the Christmas period, the design itself was created for merging to major points: - Christmas atmosphere - Gamification of the usual customer app interaction

low fi
Christmas decorations inspirations

It was important to greet the user with a catchy overlay so that he can be intrigues by this new feature and while playing with the raffle it could learn more about the voucher promotions.

How can traders play the raffle?

Traders can enter the raffle page by clicking on an overlay we show inside the startpage. The overlay is shown if there is an active raffle, i.e. all the following conditions apply:

  • raffle has start_at <= today and end_at >= today
  • raffle is not paused 
  • raffle is not in preparation (unless you are an admin with show_test_content: true)
  • you did not perform any raffle draw today (unless the raffle has one_draw_per_day set to false)



landing page/homepage

By clicking on the overlay, you enter the wheel-page, where you can spin the wheel.The design in this page was all as it should have merged the Christmas atmosphere alongside the joy of gamifying something that for them was quite familiar, the vouchers.



spinning wheel



The design is representing the categories of the prizes: - Cashback - Lottery ticket for the final raffle of a PS5 - Freebies like Amazon, Ikea and Saturn gift cards - No luck today

A winning message pop up comes up in order to claim the prize and starting using it right away while shopping

cashback reward
final lottery tickets

Results 🎁

By adding a Christmas raffle feature, Magaloop was able to engage users and get them to spend more time on the app. The feature was created by designing a wheel of fortune that users could spin to win prizes. The business saw an increase in the number of users who returned daily as well as an increase in user retention rate.

The results were:

-A 20% increase in monthly active users (MAU) -A 20% decrease in churn rate -A 30% increase in retention rate

Takeaways 📣

As you can see, this project was a lot of fun. I learned a lot about how to make an app, and I’m really happy with the final product.

If I had to do anything differently, it would be that I would have spent more time researching how to make my app easier for users to use. But overall, I think the app is pretty easy to navigate, so that’s no problem!





2022

Partner With Vittoria Anastasia
View Services

More Projects by Vittoria Anastasia