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.
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.
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!
In gamifying the experience, we focused on these 3 key areas:
In improving these key areas, we hope that this will give members a more delightful & rewarding experience as they receive their reward.
This is how we applied these concepts…
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.
To enhance the overall mood and user experience, we proposed the inclusion of game design sounds, such as a drum roll and prize collection:
Now as we piece together all of the components and designs, we’ve made it all into a prototype which you can watch below…
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…
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.