Web3 Page & Atomic Design
My role: This was a solo piece for my learning that took four weeks to complete. I did everything in this project including the designing, research and usability test.
Pain points:
There is little known/understanding about Web3 and the online world
How to keep users engaged with something they don’t know much about
The Call to action button was very vague and did not stand out. Users didn’t understand what the goal of the page was
The page looked traditional and corporate- they didn’t capitalise on the imagination and creativity that Web3 and the metaverse invoke in people
Tags: #UI Design #Illustrations #Web3 #Metaverse #Re-design
THE SCOPE
Make a landing page with (1 desktop and 1 mobile) a new focus on web3 to target new clients in web3. I needed to re-create a landing page that shows this company as a leading, one-stop shop for metaverse builds while encouraging user engagement through effective CTAs.
In order to craft a visually captivating landing page that communicates the company's cutting-edge offerings but also entices users to take action - either by contacting the company or exploring more about their metaverse build projects. I worked with brand guidelines to embark on a transformative journey to reimagine their online presence and work with vibrant and creative visuals to keep users interested and engaged in website services.
There needs to be an increase in Newsletter sign-ups and people getting in touch with the company to foster interest and a good following. This will be done through making these actions more prominent and enticing.
THE PROBLEM
Although the Metaverse has been developing in recent years, many people are unsure about its function and value. They weren't leveraging themselves through interest and creativity.
The page was dealing with 84% drop-offs within the first two minutes and only 6% of users were clicking the CTA or signing up for the newsletter. As there is so much disconnect with the information and how the webpage looks aesthetically, I will endeavour to make the page more visually stimulating and interesting for users and even prospective businesses.
I aim to provoke emotion and delight through design since the original design leaned towards a corporate and minimalistic aesthetic, which needed a transformation to better capture the imagination and creativity of the metaverse and ultimately strengthen the brand perception.
With NFTs and Crypto falling, people struggle to understand the metaverse, leading to distrust. How can they trust and invest in it? Metaverse companies today are asking people to not only trust them with their money and time but challenge them to change their perception of the internet.
To then Pair a subversive and sometimes abstract ideology with poor design has been met with pushback. So I am going to work on the one thing that I can help to control: the design and usability of the interface.
PROCESS
Using my competitor analysis research, I started to get a feel for what other landing pages in the same sector were creating. I first started making some lo-fi wireframes in response to the brief, where I looked at separate elements that were needed for the landing page.
I visualised different ways of presenting content and establishing a clear hierarchy. This was to ensure that the user journey throughout the page was intuitive and engaging.
I drew inspiration from concepts of modern futurism and playfulness by using a vibrant colour scheme that comprising gradients of blue and pink. This was to evoke a sense of innovation and excitement as well as curiosity, inviting them to explore further.
The palette was curated to create a visually appealing and futuristic aesthetics. I settled on the usage of small yellow ellipses to indicate divisions in the page and any bullet points. The bright yellow contrasting with the deep blues and purples of the landing page draws the users eye.
For a seamless responsive design, I had to embark on a journey to make sure that all of the information and visuals remained visually striking and engaging on a mobile device. I used eye-catching colours for important buttons to maintain visibility and user interaction. I made sure to keep the 3d illustrations fun and important part, but I resized them to reduce the amount of scrolling to ensure that it was user-friendly.
COMPETITOR ANALYSIS
Cosmos:
This is such an interesting and captivating landing page- leaves me wanting to see more
Visually: colourful gradients, 3D elements, dark mode and futuristic space themes which is very Web3 trendy
Accessible with high-contrast text and backgrounds
Social media links encouraging users to engage
Aave:
The hero section is an animation of the colours moving like liquid which catches the eye
Animated banner that shows how much money has been raised which moves in real-time
A lot of hover interactions and animations which is very interactive and memorable for the user
Metahero:
A truly fascinating and memorable experience than a static website
Incredibly interactive with animations and interactions at many points
Uses 3d and futuristic visuals that are very trendy for metaverse
A captivating hero section with visuals and large wording with a catch-phrase
Cosmos continued:
Mentioning their carbon footprint reading enhances trustworthiness and sustainability
Inclusion of notable partnerships or collaborations add trust and credibility
“Receive transmission” uses wording that interests people in signing up for newsletter
Not much interactions or animations where they could be more
Aave continued:
The transparency shows with more statistics and a list of security firms that audit the service. This is effective for credibility and encouraging engagement
Breaks up what they do into three steps which is easier for the user to understand
Navigation is straightforward however pain point as every link you click on opens a new tab
Metahero continued:
Blue and purple are consistent with colours in dark mode with contrasting white writing and dark backgrounds
Moving the cursor on the hero, it reveals another avatar character below= great storytelling
Hamburger menu button on the right, which creates a clean and decluttered hero section
Looking at competitor websites, it is undeniable that the Metaverse is an expansive topic. It is, after all, ultimately a collaborative melding of the online and offline worlds. These and other techniques combine to provide a truly immersive experience. The Metaverse is now in its infancy… It has unlimited potential. Several companies are experimenting with various ways. Independent users and developers also contribute to the development process. Nobody knows what the Metaverse’s future will be like.
Fewer people are talking about the metaverse and web3 these days. The value of cryptocurrency and NFT markets have crashed, dissolving a lot of companies; It is important to note that the company I designed this for is non-existent either.
I have found the importance of having engaging landing pages for the Web3 world. There also has to be a lot of information that people go through to truly understand the complexities of the metaverse that has needs to be broken up for easier reading and comprehension.
LOFI MOCKUPS
From the research, I found out how important the hero section is in drawing new uses to the world of the Metaverse. I want to use strong imagery and interactions/animation to do this. I also want to have a clear visual hierarchy so that user are able to digest all of the important information that they need to understand the service. When thinking about colours I will use gradients and blue/purple kind of futuristic colours.
FIRST ITERATION & USER FEEDBACK
User feedback from 5 users:
Sizing of some titles and illustrations were too big- needed to look at it closely as It had taken the user a long time to scroll through
Rounded edges for buttons/shapes to look more futuristic than using hard edges
I changed the colour of the CTA buttons to yellow instead of blue as they were not contrasting enough
In the “past project” section, I had to add some descriptions about each build so that the user has more of a sense of what they were browsing and looking at
All five users found the visuals to be very engaging and captivating. Really enjoyed the connection of the illustrations to the information and the colours being used
ATOMIC DESIGN
SOLUTION
An enticing and colourful hero image was strategically placed at the top of the page. Showcases a mesmerizing metaverse cityscape which encapsulates the building of immersive worlds. The gradient frame for the hero image feels very techy and futuristic.
The highlighting of the phrases “Own”, “Build” and “Grow” using larger font draws the user’s eye to the slogan which gives an idea about the service.
Typography and spacing were used to create clear visual hierarchies within the content, as I made sure that the key information stood out effectively with larger font and white space
I adopted a zig-zag approach for portions of the information with illustrations. This added visual cues and helped with enhancing the overall user experience. There was a clear visual hierarchy in terms of headings and sub-headings.
To simplify browsing past projects, I implemented a carousel which users swiped through different projects. The “View more builds” is strategically placed to invite users to explore the company’s builds which streamlines navigation.
3d illustrations incorporated throughout the landing page to highlight the company’s affiliation with the metaverse. Helped to add depth to other designs and conveyed the 3-d nature of metaverse builds and environments.
They were strategically placed throughout the page for visual context to accompany text which was more accessible and engaging. 3d elements served as a visual anchor, guiding users into the immersive world of the metaverse in a visually compelling manner
Click to view the final: Scrollable Mobile Prototype
OUTCOME
The result is a landing page that not only captures the essence of web3 and the metaverse but also guides users towards meaningful interactions. The fusion of a modern, futuristic design with playful elements creates an immersive and engaging user experience which conveys a sense of wonder and excitement about the possibilities that await within the metaverse. I made sure that the CTA’s were a lot more prominent and clearer than before to boost user engagement and users signing up for the newsletter. I would have liked the opportunity to play with some fun and innovative animations and interactions but the time limit did not allow this for me.
My designs were not chosen in this instance, so the project stopped here- but I would have loved for it to have been selected and implemented and done some post-release user and analtyics research.
Click to view the final: Scrollable Desktop Prototype
PROJECT LEARNINGS
Aesthetics: The importance of visual design for user engagement. I was as creative as I wanted for this, which I enjoyed. I played around with colours and illustrations with agency and found out how important captivating and helpful visuals are.
Continuous learning: This industry was completely new to me and I didn’t know much about the Metaverse or Web3. I Embraced a mindset of learning and stayed updated on industry trends and best practices which allowed me to create a page that was clear and understanding.
Sizing: Everything looks smaller on Figma when designing. User feedback told me that typography and visuals were too big, which I would not have picked up without the comments. I made sure to keep headings & body sizes consistent and illustrations small so they didn’t take up too much room