I’ll be sharing the Behind The Design of a quick UXUI project I did a while back in 2022 with SM Digital Advantage Corporation (DAC). I thought it would be interesting to revisit and share the things that I’ve learned throughout the process.

In this project, I will be going over the key concepts we applied and the design process we went through that led us to the final designs.

‍

A SMAC Surprise

‍

The microsite we designed, titled “Super SMAC Surprise”, aligns with the SM’s “Super Month” campaign that ran for the month of October 2022, where for the whole month it’s all about exciting shopping and dining deals from different brands across SM Malls.

(Note: SMAC or “SM Advantage Card” is a membership card of SM where cardholders can shop with points, get discounts, and enjoy freebies — Learn more)

The goal of the microsite was simple… To encourage existing SMAC holders to log in or register their SMAC.

‍

To achieve this, members need the scan the QR code found in SM malls. Once they have logged in or successfully registered their SMAC, they’ll receive a random SMAC points reward ranging from 1, 5, 10, and 100, which they can use to shop at different SMAC partner brands.

‍

Challenge

The challenge is… How would we elevate the user experience?

We could have easily gone with a simple path where the member logs in and receives the reward. However, they might perceive it as a task rather than an exciting journey. Needless to say, it would also be very boring.

To make the experience less tedious and more rewarding, the approach we went with was the use of — Gamification!

‍

Gamification

In gamifying the experience, we focused on these 3 key areas:

1. Eye candy visuals → Appealing visual design aligned with the campaign’s vibrant branding to grab the members’ attention.
2. Interaction & animation → Provide entertaining feedback as members go through the process.
3. Sound → To enhance the mood while interacting with the microsite.

In improving these key areas, we hope that this will give members a more delightful & rewarding experience as they receive their reward.

‍

Design Process

This is how we applied these concepts…

‍

1—Eye candy visuals

Fortunately, SM’s marketing team already had a campaign style guide in place, which served as a valuable reference for our design process.

The style guide vividly portrays the campaign’s creative direction and gives a lively and festive look and feel. With this inspiration in mind, our goal was to ensure that visitors to the microsite experienced the same captivating visuals.

To start off, we created a key screen for the landing page. This key screen will be the foundation of the visual design for the rest of the screens.

We proposed 3 composition options based on the style guide and aimed for a circular, vibrant, and festive look…

‍

Ultimately, we leaned towards option B “Pop“ as it focuses the eye on the center. After gathering feedback from stakeholders and polishing it a bit more, we ended up with this final design…

With the key screens now finalized and approved, this establishes the creative direction for all the remaining screens.

I’m not going to go over the entire flow, but I thought it would be interesting for you to see the preview of the points redemption UI flow.

‍

‍

2 — Interaction & Animation

• Button Design — We’ve stylized the majority of our buttons akin to gaming buttons. For our design direction, we embraced a minimalist 3D button appearance. When a button is selected, it gracefully depresses, and instead of instantly revealing the reward, we’ve chosen to heighten anticipation and excitement by prompting the members to click a ‘TAP TO REVEAL’ button first, which unveils the reward on a subsequent screen.
• Reward shuffling animation — Once the ‘TAP TO REVEAL’ button is selected, a points-shuffling animation will play, building anticipation before unveiling the reward.
• Confetti — Lastly, we’ve added a confetti animation at the end, in celebration of receiving their reward.

‍

3 — Sound Effects

To enhance the overall mood and user experience, we proposed the inclusion of game design sounds, such as a drum roll and prize collection:

• Drum Roll: This addition amplifies the excitement during the shuffling and anticipation phases before revealing the reward.
• Prize Collection: Members will be treated to a satisfying reward sound as they unveil their points reward, adding to the overall sense of gratification.

‍

Final Design Prototype

Now as we piece together all of the components and designs, we’ve made it all into a prototype which you can watch below…

‍

Final Thoughts

This project was an enjoyable experience, even though it was relatively small in scope. We took care to ensure that the overall experience remained engaging.

What stood out for me was our effort to go beyond the ordinary, aiming to infuse an element of ‘surprise’ and create an intriguing user experience. Additionally, I had the opportunity to explore interaction design within Figma, discovering how micro-interactions can add an extra layer of delight for users.

Reflecting on the project, I see several areas for improvement which include…

• incorporating more micro-interactions or page load animations,
• tracking statistics to gather campaign performance data, and
• enhancing the experience for any future similar campaigns.

Nonetheless, this project has provided valuable experience, and I anticipate that as I engage in more of these projects, I’ll be able to further improve my processes, and gather relevant performance data more effectively.

—

Thanks for reading!

In my journey, my goal is to continually evolve as a designer and, ultimately, to create brands and products that have a meaningful impact on people’s lives. I’m always eager to learn, grow, and meet new people.

Feel free to say hi to me on Instagram or connect with me through LinkedIn.

#BehindTheDesign

‍