Fueling retention with collectible loyalty programs, that’s what Keyspace aims to achieve with their platform. By helping brands in increasing customer retention with loyalty programs, not only they create personalized experiences but also crafts unique customer journeys that foster enduring loyalty. I was tasked to create a progressive web app for mobile through which users can create an account, claim exclusive NFTs, redeem limited-time offers, and browse more offers & collectibles offered by their favorite brands.

Come up with a mobile PWA that accommodate users to seamlessly discover and redeem exclusive offers and claim collectibles

Create an intuitive, easy-to-use UX for the app with UI that aligns with the Keyspace brand.

Implement gamification & other methods to maximize users engagement within the app.

I was given a set of screens (which were live in beta then) that shows how their mobile PWA looks like, to give me an initial overview of how the app should function and what are the main user flows. The UX wasn’t very great, and it didn’t have the best looking UI either, and they were aware of this.

The main idea is to get users to create an account easily, and then they can browse the platform to find creators, brands, offers, and collectibles.

It also has a dedicated section for offers, which are divided into 2 subcategories, Upcoming and Current. Upcoming offers are offers that aren’t live yet, but users can set a reminder to notify them when the countdown runs out. Current offers are offers that are readily available for users to redeem, as long as they meet the required criteria.

The profile (settings) section is pretty straightforward, it’s where users will be able to edit their appearance and access to other settings related menu. Naming this section “Profile” would make more sense since that’s also what’s written as the screen heading.

Claiming collectibles can be done by tapping the camera menu from the tab bar, which will open their camera to scan a QR code. I figured this flow can be refined so that it feels more “gamified” and engaging.

Other than the screens, they also provided with me with their existing brand guidelines.

After analyzing the existing flows, I built a set of wireframes on how the new app should look like.

There were some key changes and new flows that were implemented onto design to improve the overall app experience.

Removed the hamburger menu

Implementation of dark and light modes

Refined the whole onboarding and setup flow

Complete overhaul of the welcome screen

Calendar integration for upcoming offers notification

New section dedicated for users’ redeemed offers

Added new flow for connecting wallets

Reworked the home and profile screens

Added category filtering to browse offers and rewards

Before building the high fidelity designs, there were some minor tweaks and modifications I had to do to the existing brand guide to make sure the design works well in both light and dark modes.

I took the main color and created different shades of the same color by decreasing and increasing the L value (HSL). Same goes for the neutral palette, which is used mainly for background and texts.

Componentizing UI elements is always important, especially when working with a rather large project that requires lots of reusing elements such as input fields, buttons, status bar, tab bar, cards, etc.

After multiple rounds of feedback and iterations, here are the finalized screens.

I made a simple splash screen before the welcome screen. A lot of glassmorphic elements were added to the welcome screen since the client requested it, and it’s a trend I’m noticing in a lot of NFT and Web3 based platforms. We also decide to make the dark mode as the default mode, and allow users to easily switch to light mode (which is shown below) if they prefer to do so.

Here are the sign up, sign in, and forgot password flows. When users forgot their password, they’ll be sent an OTP through their registered email, and use this to create their new password.

The refined profile setup flow for after registration, and how connecting their wallets would look like. I added the step progression visualization above to let users know how much steps are there to complete.

Here are the top level screens, the tab bar has 5 menus which are home, search, claim, offers, and profile.

I redesigned the tab bar, and picked the most universally recognized ones so that even without a label users would be able to tell what each icon represents. A highlight was given to the middle menu, claim new collectibles, and changed the icon from a camera to a QR so that users know they’ll need to scan a QR code when tapping on this menu.

The home screen has several different sections that are horizontally scrollable, from features collections, handpicked offers for users, newly added collections, etc.

The search screen looks a little similar to the home, with the exception that the search bar is instantly visible and it also has a list of categories for users to browse around. They can filter the results by category, or choose to only show projects in certain categories.

One thing that the original flow didn’t do is to ask users for permission to use their camera. So I added a popup dialogue asking users permission to use the camera, and modified the button a little to be a slider for claiming NFT and offers.

Instead of stacking upcoming and current offers vertically, and force users to scroll horizontally to see the offers, we decided to implement segmented controls that divide the screen into 3 categories; “Upcoming Offers”, “Current Offers”, and newly added “My Rewards”.

Users can connect their Google Calendar with any upcoming offers so they can get notified when the offer is about to go live. For current offers, we use the same slider button used in the claim flow above for redeeming an offer. The new section “My Rewards” is for accessing all redeemed offers that haven’t been used.

I did some rework on the profile screen, some of the main things are:

Dark/light mode toggle on the top corner to easily switch between modes, so users don’t have to delve into settings and endlessly scroll to find this menu.

“My Collectibles” which show all the user’s collections

“My Rewards” which takes users to the My Rewards section in the Offers page

Sign Out dialogue to avoid any accidental sign out

Dedicated settings screen and edit profile screen

Here are the light mode variants of some of the screens

After all the screens are finalized, I made a set of interactive prototype to show the client how the interaction and user flows would look like.

This was quite a challenge in itself other than building the screens, as there were some extra modifications I needed to make for the prototype to work seamlessly, as well as connecting the dark and light mode for easy switching.

There are some components and states that are required exclusively for the prototype which are not crucial for the high-fidelity designs themselves such as the intro & splash animation, QR scanner animation, and sliding button drag interaction.

But in the end we managed to come up with a working prototype that encompasses all flows and features that the app offers, and micro interactions like horizontal scrolling and sliding button animation.

Legible, bold letterforms for the typefaces to ensure all texts are perfectly readable even at a distance.

All texts and important elements pass AA standard for contrast ratio

Easily accessible mode toggle so users don’t have to scroll through the settings to switch between dark/light modes.

Universally recognized and commonly used icons to avoid any guessing on what each icon represents

Adjusted the main red for dark mode to avoid eye strain by reducing the saturation value

Being a little familiar with the blockchain technology and the world of NFT has helped me in working on this project, as there are certain flows and terms that otherwise I wouldn’t have know of. The UI style and direction of an app is fundamental to how it will be perceived by users, and ensuring that they align with the brand value and identity is a crucial step when crafting the high-fidelity screens.