Meta Convention Landing Page — UI/UX Design Case Study

In this article, I’ll disclose my process of building and designing a landing page for a metaverse convention.

🔦Context -

Being a part of the 10kdesigners’ Cohort 4, one of the assignments was “Designing a landing page for X’s event.’’ The X may be anything because it was chosen at random. The goal of this design assignment was to talk about the event, showcase why someone should attend it and accept registrations.

My niche for the project was originally Music/Music Production! My favorite niche (fun right?) Too easy….

That’s what I thought, but trust me building anything isn’t as easy as it looks then let it be your favorite easy looking thing or the challenging one.

Speaking of challenges, I used to find web 3.0 space extremely challenging, well I still do. Stuff started to interest me more and more, and after getting done with my music event landing page assignment (coming soon…) I decided to take up the challenge of designing a landing page for a Cryptocurrency/Blockchain event because, hey! What’s a better way to explore space than on the project related to the space. Cryptocurrency/Blockchain are too specific, why not broaden the vision into something more, I thought.

So, here I present to you….. 🥁 🥁 🥁

In The Metaverse — A 2-Day Meta Convention.

💭 What is, “In The Metaverse”?

Cryptown is hosting an event called In The Metaverse, which is a concept hybrid convention. It will take place in two places: Malta and the Metaverse. Decentraland, a virtual event hosting platform, will fuel the metaverse.

🔴Disclaimer -

“Cryptown” DAO doesn’t really exist, it’s an assumed DAO and this whole event is hypothetical, there is no resemblance to anything similar that exists in real life.

📛The Event’s Name and Logo -

I had obvious keywords in mind when coming up with names and titles, such as Metaverse, Crypto, Community, Blockchain, and any other Web 3.0 related buzzwords I could think of.

To be honest, I attempted highly technical titles like “Global Metaverse Summit” and “Metaverse conference,” but they didn’t have much of a ring to them, since I didn’t want this event to be too formal.

This title came to me while surfing through Instagram Reels, where plenty of celebs were stating things like “Bro, I’m in the metaverse…” Folks seem to like it, so I figured it could be a snappy, attention-getting event name.

In terms of the logo, I came up with it at the very last hour. It wasn’t challenging to come up with since it is hosted by DAO and engages the community.

🎨Design Process -

To be honest, I didn’t create this one using a “appears to be fit” approach. With the design, I went for broke. But this is how it appeared in general.

Because this was only a hypothetical landing page, I didn’t want to go with any standard algorithm.

🔎What everyone else is doing? In a nutshell, Research!

Because research is the first stage, the first question that comes to mind is: emojis…

“How did others do it ?”

Well I went there to find an inspiration and I came across plenty of websites with -

  • One who has relatively little information
  • One with weirdest serif fonts possible
  • One with bunch of neon illustrations hanging here and there

And the list goes on….

⛵️Exploration -

At the start of the project, I knew I wanted an edgy yet laid-back vibe for this landing page.

But I needed some ideas for design patterns, namely UI elements like :

  • Layouts
  • Gradients
  • Font sizes and spacing
  • Glass Morphism
  • 3D elements
  • Layouts: A good user experience is expressed in a good layout design that corresponds to objectives. As a result, we can claim that a good layout helps the user find what he wants. This is shown in increased task completion and time spent on the site (engagement).
  • Gradients: Gradients can help us make our designs more realistic by bringing them closer to reality. They (along with shadows) are a great way to give UI Design more depth and, thus, a more intuitive experience. Just don’t get lunatic.
  • Font sizes and spacing: I didn’t do anything specific; I just went over basic fundamentals. But, yeah, I’ve begun studying Typography more in depth and the principles of em/rem.
  • Glass morphism: Based on my findings, this style can work if it’s applied wisely and the objects on these backgrounds hold their structure and legibility without the decoration.
  • 3D elements: Because this landing page is about metaverse convention, and what is metaverse without 3D? I added some 3D bits to spice things up a little. But just like gradients and most of the UI elements, adding 3D merely for the sake of adding it could have a negative impact sometimes. Verify the benefit of implementing 3D designs before putting them into action, if at all possible.
Inspirations from existing landing pages.

📜Information Architecture -

🔃AIDA -

Since this was a landing page with the core purpose of converting visitors to registrants, it was vital to accomplish things by the book. Using the AIDA model as a basis.

  • Attention: The first step in the AIDA principles is to pay attention, and it is the one on which all the others are built. After all, how can you expect a user to take action if you don’t grab their attention in the first place?
  • Interest: The second AIDA principle, Interest, comes next. We’ve already sparked the user’s interest; the next step is to spark their interest in what we have to offer. And what’s the best way to go about it?
  • Desire: So now that we’ve gotten their attention and piqued their interest, we need to persuade them to want what we’re selling. We need to arouse desire.
  • Action: We’ve put in the effort and gotten this far; now it’s vital to take the next step: action. The ultimate goal of a landing page is to convert someone into a buyer or a subscriber, and we don’t want to fall short at this stage.
Click on the image to see the content closely.

🗺️Sitemap -

Throughout my research and initial mockups, I led to the realization that these folds would be expected for my landing page to display appropriate data and lead the user/visitor to the other connected pages (if there is any) before returning to the landing page.

Click on the image to see the content closely.

🪟Wireframes -

Like I mentioned before, I dove right into the design, though not without wireframes.

Whatever iterations I did afterwards were directly in the design.

🔮Visual Design -

🎨 Colors:

I wanted to reflect my taste in design and colors, but then again this is a Web 3.0 site, I wanted it to be dramatic, surprising, yet still sleek and elegant for the vibe.

✔️Contrast Check:

I tried to do my best to follow the AA Contrast for color contrast checks while choosing colors and combinations. The hues occasionally got passed the AAA grading.

And here are some sample mixes that I’ve tested -

Click on the image to see the content closely.

⌨️Typography-

I used gradients to highlight the text when I first began out, but I quickly realized that it looked tacky and was difficult to read in the background on the darker background with gradients. Because of this I shifted my focus to a much cleaner-looking typeface.

Both of the typefaces I used were sans-serif, and I went with a solid clean and modern style for the page.

  • Titillium Web
  • Space Grotesk (Multiple Weights)
Click on the image to see the content closely.

💎Landing Page:

The final version after tons of iterations and procrastination.🎭

Click here to look at the visuals in detail.

Now, let’s take a deeper look.

😎 Hero Section

Going ahead with Web 3.0 aesthetics with a modern-edgy look with a bit of a 3D touch to it, I tried to give the users/visitors everything they needed to navigate throughout the page and not have them drain their time and attention, in this single section while still keeping it clean and minimal.

Click on the image to see the content closely.

❓ Why Should You Attend?

Well to spice things up, I thought to bring some drama to this section, white background with unusual patterns, 3D illustrations and the Tab bar in the middle of the page…… oof, too much someone might think, but when I said dramatic aesthetics, I wasn’t bragging.

Here are the iterations I tried with variations around.

The tab bar doesn’t necessarily have an extreme usable purpose in this section, but the same I have used in the agenda section.

The user gets a sense of familiarity with the interface by looking at some recurring elements, which is why the tab bar is here, but the familiarity extends to the Timeline section as well.

And the 3D card illustrations are there to meet the need for drama and to seize users’/visitors’ attention in order to keep them hooked while also giving the interface a nice touch.

So, this is the final “why attend?” section.

Click on the image to see the content closely.

🕙Agenda

Creating the Agenda section was a bit of a challenging task for me.

The challenging part selector tab. Putting a tab with 3 selection options was a no brainer. But compromising on not displaying the crucial information such as date wasn’t an option and here things go tricky. Also the important information such as who’s the speaker gonna be and much more were missing in the first few iterations. Let’s have a look at it.

Here are the iterations I tried with variations around

I almost went with the final iteration, but after some feedback sessions I finally came up with the much better solution without compromising visuals as well as user experience

Here’s the final agenda section looks like

Click on the image to see the content closely.

💺Get a Spot

UGH! Another section that ate millions of my brain cells. Wasn’t easy to come up with, as most of the things I tried weren’t passing the vibe check of the page.

Here have a look at how I almost gave up on designing this section.

As I successfully maintained users/visitors’ attention till now, my main goal here is to make them hit the CTA button.

While arousing the interest and creating the scarcity, it is crucial for the user to know, “what they’re signing up for?”, “what should they expect?”

Click on the image to see the content closely.

📝On the Closing Note

📓My Learnings & Takeaways:

  • Always ask yourself, “Does it make sense for my users?” before designing. For each Why, you must have an explanation.
  • Users look for certain data points, and information that assists them in making decisions must be obviously visible and essential.
  • Because users consume similar information together, information should be categorized in order of importance and when they inform about related things in a broader perspective.
  • One of my core ideologies is, design has the ability to evoke emotions in people that eventually affects the business that’s why it is more and more important to evoke the right emotions.

🛠️ Tools used:

  • Figma
  • Adobe After Effects (for promo)

…and that’s a wrap!🌈

If you’ve made it until here, ta🤜🤛

Thank you for taking the time to look at my work. Designing and documenting the entire process was nothing short of a roller-coaster ride for me, as it was my first UI/UX design case study. If you’re still reading, thank you for sticking it out to the end, and kudos to me for keeping it interesting (hehe😆).

Big thanks to Parth Pandav for taking out time & answering all my doubts and despite being extremely busy with work.

Last but not the least, always grateful to Abhinav Chhikara and Jayneil Dalal for all the wisdom, mentorship, and such a great platform, 10kdesigners! ❤️

I’m open to Product Design roles, feel free to reach out to me to discuss work, design or just to vibe!

See you somewhere on the internet. Salud

💼LinkedIn

🐤Twitter

📸Instagram

👏If you could long press on the clap icon, drop a few claps, and show your support, it would mean a lot to me.

--

--

--

Product Designer. Web3.0 enthusiast.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Weekly Reflections

Masjid Istiqlal Houston Kiosk— UX Case Study

Want to innovate? Embrace the constraints.

Apple’s Human Interface Guidelines: A Word Count

Wigs: 10 Tips to Style Your Wig for the Perfect Look: brown wig human hair

My first design project — Redesigning an app used by 35 million people

acryli sign | signage| Bayan ng Balayan

Ironhack Prework->Challenge 1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rutuja Patil

Rutuja Patil

Product Designer. Web3.0 enthusiast.

More from Medium

UX CASE STUDY: Reservation/Booking Hotel App

Case Study: Indeed UI/UX Mobile App Design Concept Feature

My 1st UX Design Project: Case Study

Ironhack UX case study: redesigning an local eCommerce website