Wanderlust NFT Responsive Website
Problem
Wanderlust NFT doesn’t have a way to inform its audience of collection drops, events, or benefits coming in the future. Social media, discord, and websites are typically used to generate traffic, interest, and excitement among the NFT community before a collection drop. The creators want to launch a website that will allow them to inform and connect with their audience.
Background
Wanderlust NFT is preparing to drop an NFT collection with a major travel benefit. The NFT art is travel-themed, showing multiple stereotypical characters on vacation. NFT holders will be offered a stay (likely a week-long) at a resort property in a soon-to-be-announced country. The creators are planning to advertise and connect with their audience soon to build a following and generate interest before the collection drop.
Solution
Design a responsive website that will inform users about the NFT collection, the benefits associated with purchasing, and the team behind it. This site will also direct users to the marketplace where they can buy an NFT, to their social media pages, and to their discord server where users can connect with the community. Scope - design an MVP site in 80 hours.
Research
Stakeholder Interview
The stakeholders main objectives for building a website for this NFT business are to inform users about the NFT (the product, the benefits associated with it, and the current and future developments on it) and provide a way for them to purchase it. The unique selling points for this NFT are the accelerated roadmap and the travel benefit in the real world, rather than just digital benefits. For this website to be successful it would need to handle the amount of traffic being pushed to it and market the NFT in a visually pleasing, informative, and user-friendly way so that users trust the brand and product. The stakeholders believe they have multiple potential users; people who love to travel, people who love NFTs, people who are a mixture of travel and NFT lovers, and crypto-investors. Besides their own personal preferences as NFT owners and investors, the stakeholders are not sure about any user preferences regarding NFT websites. So far on this project they have purchased a domain name, contracted a developer, built the roadmap for their product, and worked closely with an artist to design the characters. They still need a logo and more graphic design work from the artist to use for the website and marketing materials. They are currently working on writing all the content needed for the website. The NFT websites they like for the visuals and structure are as follows: Tasty Bones, CoolCats, RareGhostClub, Travala, Hedgies, and 3landers.
Research Goal -
To learn who will be using this website and how they want to engage with this business through the website.
Methodologies -
Competitive Analysis: Online research into direct and indirect competitors.
Online Survey: Survey people to discover how and why they choose NFT purchases and travel-related purchases.
Deliverables -
User Persona: to direct all future design decisions
Competitive Analysis
The differences between sites are not in the features they offer, but in how they are displayed and designed. The designs strongly represent the NFT art and can sometimes look too artsy and not professional. Most NFT websites only use one page to house all their information, but they typically have navigational links at the top to take you to each section. All sites have links to their social media, Discord, and Opensea. Some sites use animations and music to immerse the user into the world they are creating, but it can decrease the usability of the site. Most of the sites had some sort of roadmap, but they varied in format and content and were very loose in the timeline. Two of the sites had a full list of characters with the ability to filter based on traits and ID, but this can only be available once a collection has sold out and been fully minted. Only one page was very specific about traits and rarities, but this could be because they have fewer NFTs created so it is not overwhelming to list them out. All of the sites were responsive, but some of them didn’t look as good on a phone.
See Feature Comparison Chart here
Online Survey Results
This survey confirmed the basic need for an NFT project to have a website. However, different preferences appeared on the importance of the content typically shown on NFT websites. Some people care about the story behind an NFT project and some don’t. Some care about the creators behind an NFT project and some don’t. Participants were either mostly in favor of specific content or it was about 50/50. This shows me that all of the typical content seen on NFT websites is integral for this website. The aspect of travel as a benefit for this NFT was interesting, but not very influential for most participants so I don’t think it needs to be especially highlighted to keep users on the website.
Do you check out the websites for NFTs to learn more about them?
What factors are most important to you when considering an NFT purchase? (Check all that apply)
Do you get involved with the community created by an NFT collection? (Either on social media or discord)
When looking into an NFT do you want to know about the people who created it?
User Personas
Two patterns appeared from the survey that lead me to create two user personas. One pattern was people who cared about the story of an NFT project and the benefits of owning one. The other was people who care more about the price and the potential financial gain to be had from either owning or selling the NFT. Both users have almost the same basic needs and goals, but their motivations and interests differ.
Empirical Evan
Bio Evan is an Inside Sales Rep working in Silicon Slopes. He works hard for his money and expects it to work hard for him in return. The potential for financial gain from investing in the virtual world is incredibly high, but Evan knows the risks can be high too. Determining which NFT projects will be lucrative is not an exact science and he must avoid phishing scams and rug pulls as well. Although he is not concerned about the story or utility being presented by an NFT project, he knows the importance of these factors in the potential success and resale value of a project. The website for an NFT project should give him all the resources he needs to determine if he feels the potential for financial gain is there or not.
Discriminating Dan
Bio Dan works as a Software Engineer and lives in Salt Lake City with his wife and two kids. He grew up playing video games, and trading Pokemon cards and has been on Twitter since the beginning. Dan believes the metaverse is the future and wants to be involved in how it develops and evolves. When it comes to NFT projects he is picky about who and what he is supporting. He wants to feel important and connected to something revolutionary and fun. In order to determine if he wants to invest, he needs to know the utility an NFT is offering and if it will actually happen. The artist, creators, and the story behind an NFT are important to him as well.
Define
After discovering who I was designing for, I mapped out all the necessary features and how they should be laid out on the page. I accomplished this by compiling a list of user stories and turning them into task and user flows. I was then able to place all of these features onto wireframes.
User Stories
About/Intro - As a new user, I want to learn about the NFT collection so that I can decide if I like the project.
Roadmap - As a new user, I want to see the timeline of benefits planned for this NFT so that I know what I'm getting if I buy it
About the team - As a new user, I want to learn about the team behind the NFT collection so that I can decide if I trust them and want to support this project
FAQ - As a new user, I want to see frequently asked questions so that I can learn more about the NFT
Sitemap
Task Flows
User Flows
Wireframes
Accounting for different screen sizes and devices the user might be using to view this website required a lot of maneuvering and iteration. I sketched some simple wireframes but did most of my exploration digitally.
Desktop
Tablet
Phone
Design
Brand Identity
The logo I initially received for this project was too busy and colorful to be easily understood on different screen sizes. I was given permission to redesign it, so I simplified it to be more responsive. I was also given a color palette I thought I would need to change, but the colors ended up being more accessible than I thought. The colors also worked very well with the NFT art and the travel and resort theme. I then chose a cartoon/comic style header font to go with the style of the NFT art.
Original Logo
Redesigned Logo
Style Guide
High-Fidelity Screens
The hero image has not been drawn up yet, so I used the plane I made for the logo as a placeholder. The future image will be close up on the side of a plane showing some of the NFT characters through the plane's windows. The clouds will be animated moving to the left to make it feel as if the plane is flying through the clouds. Some of the content has not been finished either, so I filled it in with placeholder text.
Testing
Usability Testing
With the screens completed, I created a prototype and ran a usability test. Since all the content was on one page, I gave very minimal instruction and then watched how the users chose to navigate the page. This testing allowed me to find small flaws in the function of the prototype and larger potential design flaws. I then used the feedback from this testing to make multiple improvements to the design.
Revisions
First, I decided to split up the sections into their own pages because all participants commented on the website being on one page. Some participants were confused and thought the information was displayed multiple times on different pages. Splitting up the sections also allowed me to remove the up arrows on each section intended to take users back to the top of the page. Originally I went with the one-page design because it was being used on a lot of other NFT websites and it seemed simple, but after redesigning the sections to be separate pages the site feels cleaner and simpler than before.
Second, when it came to the gallery and team sections some participants commented that it felt unnatural to switch scrolling directions mid-page. I changed all images to be visible on the page (on the tablet and mobile versions) so users can scroll down instead of swiping horizontally to view them.
Tablet Original
Tablet Revised
Mobile Original
Mobile Revised
Mobile Original
Mobile Revised
Thirdly, I revised the header on the tablet version to look like the mobile version. Participants felt the navigation menu was crowded with the logo and social icons on either side, so I moved them into a hamburger menu.
Original Header
Revised Header Default
Revised Header Open
UI Kit
After revising and finalizing the design I gathered all UI elements into one document for future reference. Once the NFT collection drops this kit will aid in adding links to the marketplace where the NFTs can be purchased and any new pages that might become necessary, such as an owner’s portal.