Hazelverse
Web and Mobile Design
A website to advertise a new NFT climate change impact game aimed at reducing carbon footprints in the real world through the Hazelverse.
Made with
About the Project
Internship project for 412 Technology
The trend among NFTs was to have an interesting website that excited and informed users about upcoming plans. As 412 Technology began branching off into the NFT space, the need for this central information hub became apparent.
They wanted to create a website that embodied the calm, light-hearted nature of the Hazelverse while also exciting users with a mix of interactable elements and original art from the game.
My Role
Worked alone as a designer and developer to create deliverables every week. I conducted design research, designed prototypes and developed the website.
Impact
This project received positive feedback from the company and has gained over 100 active users.
The Problem
Research on other websites showed that implementing animations, art, or interactable artifacts among these informative features were what helped bring them to life.
The website needed to be as dynamic, entertaining, and informative as other NFT websites, without losing sight of the company’s focus on climate change.
The Solution
Design and build a website to showcase the purpose and intrigue of the company’s NFT mobile game.
The Process
1
Research
Competitor Research
2
Design
Design Language
Prototyping
Feedback and Interation
3
Develop
Building the Website
Delivery
Research
Competitor Research
As the NFT space was new to me, I began by doing some research on what other competitors were doing on their websites. I looked through 8 NFT websites and took note of my observations, key take-aways, likes, and dislikes. This helped me identify what I liked and wanted to see on our website and also understand the trends within the NFT game space.
General Trends
1
Maintaining the theme is important especially when it is other-worldly. This includes color palettes, font, and images.
2
Simple is best. Minimal text and simple animations add more to the website as opposed to heavy text mixed with intense animation and interaction.
4
Adequate spacing between text and images can make or break the feel of the website.
3
Big features include the title, roadmap, and meet the team sections.
After compiling the research and narrowing down what should be included on the website, I spoke with the company and discussed the theme, features, and target users of the game. This allowed me to begin researching art styles, fonts, and color palettes.
Target User Group
Educated young women between the ages 18 – 39 who are casual gamers
Theme
Calm and cute
Features
Animations, interactive elements, roadmap, social media information, meet the team section, and an info page
Design
Design Language
Design Research
To find design styles, color palettes, layouts, typography, and other design language, I began by exploring other NFT game websites and noting design language I liked and could see being a part of our website.
Example Image from Al Goanna
I liked the checkerboard layout on the homepage of this website and thought about incorporating it on our assets page. This would make the page feel less overwhelming when showing images and text and keep the viewer from getting bored as they scroll through the page.
Example Image from Azuki
Looking at styles for the roadmap, I really enjoyed that this website had a very simple but visually interesting roadmap. I wanted to take inspiration from this one by using images for visual appeal and hiding extra text behind each clickable card which would then bring up a card. This encourages the viewer to explore the site rather than have all information readily present for them.
Example Image from Azuki
This website also leaned heavily into scrollytelling throughout their pages. I liked this way of making the pages interactive, so it was something I wanted to incorporate in some way in our website.
Design Language
First Iteration
Art Style
Pseudo 3D
Colors
Cool color palette
Typography
Simple font
DM Serif Text
DM Serif Text
Second Iteration
After the first iteration, the company decided to move to a 3D art style and develop themes for assets. To better match the assets and overall style of the game, I began exploring other color palette and typography.
Final Iteration
Art Style
Cute 3D Models
Colors
Warm and cool color palette to help combine the calm and cute theme while also keeping in the realm of climate change
Primary Colors used for Headers and Large Text
Secondary Colors used for Accents
Background Colors
Typography
Round and bubbly typography for headers. Round and thin font for larger blocks of text
Quickens
abcdefghijklmnopqrstuvwxyz
CreamShoes
abcdefghijklmnopqrstuvwxyz
Design
Prototyping
Initial Prototype
To keep a user interested upon first glance, I decided to have the title “Hazelverse” at the center of the screen with an image of the game in the background that would include animations of moving water and clouds.
This would give users an immediate idea of what the game was and its theme.
Title Screen
This prototype also featured a manifesto to help set the tone of the universe being created followed by an explanation of how the game worked.
Manifesto Screen
How It Works Screen
The following sections consisted of the roadmap, social media, meet the team, and FAQ.
Roadmap
Social Media
Meet the Team
Feedback
Properly Themed
Informative
Visual Interest
Pros
Text Heavy
Not enough animated elements
Cons
More visuals and less text
Add more animated and interactive elements to increase user engagement
Design Implications
Iterative Prototypes
Prototype 2
Change to warm color palette
Prototype 3
Change in art style, color palette, typography, layout, and images
Prototype 3
Change to roadmap and meet the team structure
Final Prototype
The final prototype featured the roadmap and the meet the team structure changes from prototype 3, but focused on adding animation and storytelling. The title section would act as a storybook, where the user clicks the arrows and is walked through how the game works while getting the chance to view some assets up close. The assets would also have a floating animation.
While this was the last prototype before development began, there were several changes made during the development process.
Develop
Launched Website
Final Results
The final version of the website that was launched featured the structure, art style, and animations of the final prototype, but changed in terms of color placement and interaction.
Title Screen
The background was changed to a gradient to imitate the sky and sunset to keep in line with the climate change theme and to help ground the floating islands. The islands and their debris have floating animations to bring help bring more life to the 3D models.
Three of the islands also feature red targets that when clicked, bring the user to a popup where they can view the island in depth through zoom and rotation features.
Title Screen Popup
As the islands are the NFT assets of the game, the company and I thought it would be more beneficial to show them in this way.
Adding the targets instead of the storybook feature also allows for a more user-driven experience where they get to explore the website rather than being guided. I made the targets red with a flickering animation to help notify the user that that is an option for them to explore.
The roadmap features a similar style of animation and target prompt.
Roadmap
Mobile Compatibility
The website was also designed to fit a mobile browser. All features are designed the same as the website but, considering the mobile screen size is smaller, the web version of the roadmap was too wide, so I redesigned it to be a horizontal scrolling roadmap.
Title Screen
Roadmap
Reflection
Lessons:
This project taught me a lot about the amount of detail needed for the design process. Every iteration needed a new level of attention and focus to ensure that I was progressing in the right direction to design a website that fit all the company’s needs.
I learned the most about communication with different teams as I was constantly speaking with the CEO, marketing team, engineers, artists, and community outreach to ensure that we were all on the same page every day. I also became well acquainted with documenting and presenting stages of my work every week.
Future:
If I were to revisit this project in the future, I would like to redesign the information page that was left behind in the prototype stage and the social media section.
I would revisit color palettes because while I like the colors used, I think there are colors that could better set the tone of the calm and cute game.
I would also update the style of the app as it feels a bit dated compared to new standards of web design.
I would also like to change the horizontal scrolling to clickable arrows that scroll for the user. This would make the website more user-friendly.