Mentaport - Case Study

Case Study

Company: Mentaport

Year: 2023

Project summary

Create an engaging website layout and user experience for a “Stamps” product demo. The objective of this project is to capture users’ attention with a visually appealing and attractive layout that encourages users to explore the product demo and receive a personalized NFT based on their location.

What is “Stamps”

Stamps is a digital asset collection that offers captivating digital assets for users to explore and collect from various locations worldwide. With the power of artificial intelligence, users can obtain unique postal stamps created with AI-generated city images tailored to their specific location.

Goal

Generating 1,000 stamps / Achieving 500 mints

Final outcome

Over 6,000 stamps generated / 1,586 mints achieved

The team set an initial target of generating 1,000 stamps and achieving 500 mints. Surpassing expectations, the project saw the creation of over 6,000 stamps in just a month and a half, exceeding the stamp target by six times. Furthermore, the total number of mints reached 1,586, surpassing the minting target threefold. This outcome underscored the success of the engaging design and user experience in not only meeting but surpassing the set project goals and attracting participants from over 59 countries and 141 cities.

After gaining inspiration and brainstorming, I was able to come up with a couple of layout drafts. In general, I put a big CTA to capture users’ attention and pique their curiosity. I decided to put a globe on the background to highlight the product’s feature of generating NFTs based on location. I thought it would add visual interest to the page as well as emphasize the product’s unique value.

Draft 1

I placed an image frame on the top left of the website, which displays examples of the NFT images that users can expect to receive based on their location. I thought it would help users to get a clear indication of what users can get from the product demo.

I included social media share cards into the website. I hope to encourage users to try the product demo and receive their own personalized NFT by showcasing the enjoyable experience from previous users.

Draft 2

I placed the message, image frame and CTA in the centre of the page to create a focal point for users. I thought it would be helpful to deliver the concept directly and clearly to users.

I decided to animate the globe to add dynamics. I thought it would make the website more captivating and would increase users’ interest in trying the product demo.

Draft 3

During the brainstorming process, I came up with the idea of incorporating a roulette concept(spinning globe and the location pin like the roulette pin) into the product demo website. I wanted to add excitement and surprise for users as if they are given a present with a personalized NFT image based on their location. I kept the layout minimalist to avoid distractions and to emphasize the message.

Draft 4

In Draft 4, I wanted to improve Draft 1. I increased the size of the image frame displaying example NFT images to provide a more engaging visual experience. I also swapped out the carousel with animated scrolling images to create a more dynamic and interactive experience for users. It allows them to explore previous users’ experiences without having to take any actions.

I decided to develop Draft - 3 to offer users a more playful experience. Based on the idea from Draft 1, I implemented social media share cards. These cards display the positive experiences from previous users, motivating others to engage with Stamps.

In terms of the art direction, I was initially aiming for a minimalist design but I shifted the approach to make the page more dynamic and captivating for users considering the unique Web3 industry's culture.

To highlight the product’s distinctive capability of generating location based NFTs, I used a globe and animated it to rotate with a location icon on top, similar to a spinning wheel. On the background, I incorporated animated scrolling text with a vibrant neon outline effect into the background to attract users’ attention and make the design more visually appealing.

When a user clicks the CTA “Get Your Stamp”, the globe responds by spinning faster, conveying that it is now activated and in the process of generating a personalized stamp.

Once the stamp is ready, users can connect their wallet and proceed to mint their personalized NFT, generated based on their location. Now, users have the exciting opportunity to showcase their cities with one-of-a-kind personalized NFTs. These NFTs capture the characteristics of each user’s location, allowing them to display and share the beauty and uniqueness of their cities with the world.

Following prototype testing, feedback highlighted user discomfort regarding sharing location information. In response, I suggested a solution to implement a pop-up window offering users the choice to either share their location for acquiring a personalized stamp or opt out of sharing this information and get a planet earth stamp.

Further feedback received concerning location sharing, with certain users encountering challenges sharing their location due to the variation in methods across different web browsers. To address this, I placed a link on both the landing page and the pop-up. This link serves to guide users through the process of sharing their location depending on their web browser.