DAO Hybrid-Meetup Landing Page — UI/UX Design Case Study
My process of building and designing a landing page for a hybrid DAO meetup/party.
🗃️ Context
Being a part of the 10kdesigners’ Cohort 4, one of the assignments was “Designing an event landing page for X” and the X could be anything, it was chosen randomly.
My niche for the project was Cryptocurrency/Blockchain. But I thought it was very specific and I could broaden it to something related to Web3.
Well, here I present to you… 🥁 🥁 🥁
The Genesis Conclave. A 3-Day Exclusive GenesisDAO Meetup.
⛵ What is The Genesis Conclave?
The event, The Genesis Conclave is a concept hybrid event conducted by GenesisDAO. It will be conducted across 3 locations; Cayman Islands, Goa, and the Metaverse. The metaverse will be powered by Zuddl, virtual events hosting platform.
The event would be exclusive only for the GenesisDAO members and the whole vibe and lookout of the event is more towards keywords like the meetup, conference, luxury, event, party, celebratory, for the people. Something that is like a rare high-performance club.
Disclaimer: This whole event and the DAO are hypothetical, there is no resemblance to anything similar that exists in the real life.
🎫 The Event’s Name
I think it’d be obvious to you by now why I chose the name “The Genesis Conclave”.
But if you’re still wondering why I’ve used the names and the words GenesisDAO, Genesis Conclave, Genesis Metaverse around in the design, here are the two main reasons:
- The Genesis Block. 🌟
Genesis Block is the name given to the first block a cryptocurrency, such as Bitcoin, ever mined. A blockchain consists of a series of so-called blocks that are used to store information related to transactions that occur on a blockchain network. Each of the blocks contains a unique header, and each such block is identified by its block header hash individually.
These blocks get layered — one on top of the other, with the Genesis Block being the foundation — and they grow in height until the end of the blockchain is reached and the sequence is complete. ~via Investopedia
2. It’s the name of my Wi-Fi network. Yup. 💀
✅ Design Process
Honestly, I did not follow a “fits-in-a-box” kind of design process for this one. I went head first with the design. But here’s what it roughly looked like.
🔎 Exploration
While beginning this project, I had a detailed image of the whole website in my mind, around what way I wanted it to look, what kind of design language I wanted to go with.
But I needed some inspiration around design patterns, to be specific, UI elements like:
- CTAs
- Gradients
- Glass Morphism
- Font Sizes & Spacing
And then, I set up my core inspirations and understood some recurring patterns. Some of the learning from the Exploration phase were:
- CTAs: There usually is a pattern of recurring CTAs on the home screen and around the website. It’s to convert the visitor at almost any point the website grabs their peak interest.
- Gradients: While using gradients, you’ve got options to use a linear gradient, mesh gradient, or anything similar. But make sure the spectrum and contrast of the colors you choose are similar. Don’t go berzerk.
- Glass Morphism: You could create a glass element but you have to realize one thing, glass is transparent. You’ve got something on the top of the frame but you need to find a way to show the transparency by putting something on the back as well.
- Font Size & Spacing: Nothing specific, I cleared up my basics. But yes, started learning about em/rem fundamentals.
📐 Information Architeture
🧩 AIDA
Being a landing page and having a core goal of converting visitors to the registrants, it was necessary to do it the way big shots do it. By using the AIDA framework.
AIDA stands for:
- Attention: This is your first and only shot. Identify what will garner the most attention and be noticed for maximum user interaction.
- Interest: Once you have your prospects’ attention, you need to keep their interest.
- Desire: You have to make the prospect want or even need your offer. Creating an emotional connection to your product
- Action: The final goal is to have the prospect become a consumer by immediately downloading material, joining a mailing list, buying your product, or any other active participation with your brand. ~via Snov.io
🗺️Sitemap
During exploration and rough wireframing, I concluded that these folds would be necessary for my landing page to show enough information and get the user/visitor to the other connected pages (if created) followed by the landing page.
🪟 Wireframes
Like I had mentioned above, I went head-first with design. I made just a couple of wireframes to get a rough visualization of the final format.
After this one, whatever iterations I did, were directly in the design.
🔮 Visual Design
🎨 Colors
To put out my taste and the website being a Web3 one, I wanted to keep it vibrant and harmonious. Hence I chose these colors and gave them their names using this tool to make the design process much more efficient.
But but but…these tweets although being sarcastic, are possibly real.
Don’t worry, I got you covered.
❇️ Contrast Check
While using colors and combinations, I’ve tried my best to follow the AA Contrast according to the WCAG (Web Content Accessibility Guidelines) for the color contrast checks. At times the colors even passed the AAA checks.
The color contrast checks are as followed:
- AA Contrast: 4.5:1 contrast ratio between foreground & background.
- AAA Contrast: 7:1 contrast ratio between foreground & background.
Here are a few snippets of the combinations I’ve used.
⌨️ Typography
While going ahead with strong modern aesthetics for the page, both of the fonts of my choice were sans-serif fonts.
- Druk Wide Bold
- Inter (Multiple Weights)
👑 Landing Page
The final version after all the iterations so far.
Scroll through and have a good look!
Click here to look at the visuals in detail.
Would be uploading it on Behance soon and updating the link here. Need to upload some of my previous work first. 😅
Now, let me take you through a couple of folds.
😎 Hero Section
Going ahead with the modern-stong-vibrant visuals, I had it my mind to use:
- Mesh Gradient
- Impactful yet Readable Seif Fonts
- Some offbeat elements
Here are the iterations I tried with variations around.
After the iterations, I had almost finalized to go with Iteration 3. But after some feedback cycles, it came to an observation that the supporting visual section on the right reduced the breathing space, which made the design look blocky.
So, this is the final hero section.
…and here’s how the scroll would look.
😯 Why Should You Attend?
I went ahead with a tracker line look because I’ve used that in the Timeline section as well.
Looking at some repetitive elements make the user feel familiar with the interface, hence the tracker being here but the familiarity occurs in the Timeline section as well.
While talking about the familiarity, the illustrations used are mesh ones too. Why? Because there’s a mesh look in the hero section.
🤔 “those circles thingy”
They don’t serve a usability purpose as such. But some fun visual cues make the interface interesting.
These elements would slide left or right as you scroll down or up respectively. That’s it.
😇 The Conduct
Like in the Lo-Fi wireframe, I had shown a flow diagram of the way the event would be conducted. I created it this way.
Also, the “Worldwide” tag is just for visuals, which fits the vibe.
Oh also, similar scroll animation like the hero section.
🤨 Timeline
Creating the timeline section was a tricky one for me, for desktop and also for the mobile version.
The tricky part for me was to create a dual context selector panel with 3 selection options each. Following is the solution I went ahead with.
Meanwhile, now that the desktop selector option was sorted. Creating a time selection panel was the tricky thing for the mobile version.
I went ahead with a horizontal slide selector, inspired by how Ultrahuman does on their mobile app.
😏 Get a Spot
This section is basically to pitch to other users’ interests as well as to get them to hit on the CTA button.
While thinking of not going with traditional pricing boxes, I wanted the user to have a visual stimulus of what they would be experiencing if they proceed and reserve a seat.
Because I had mentioned earlier that this event syncs with keywords like luxury/event/meetup/party. I went ahead with the ideology that the pricing would have lower emphasis, the bigger emphasis would be on the experience!
Let’s have a quick look at the description box as well.
I went ahead and continued with glass morphism with these, here’s a brief explanation of all the content in it.
- A — Small copy of the location’s USP.
- B — Core perks if you go ahead with that venue.
- C — Secondary CTA for the user to be redirected to the itinerary's dedicated page.
- D — The pricing, in ETH & USD. The pricing here is meant not to be as important.
- E — Social proof, by showing the attendees avatars (by consent) and the number of spots filled to create a subtle sense of urgency. This section was inspired by the way ADPList does it on their group sessions page.
- F — Primary CTA.
With that being said, that was it about the visuals.
💌 On the Closing Note
📓My Learnings & Takeaways:
- Observe the existing patterns around you, don't re-invent the wheel. Once you recognize the patterns try to execute them with your mindset
- Keep feedback loops close and create iterations faster. Fail fast but fail ahead.
- Tackle one problem at a time, if you try to do it all at once it’s not going to happen. Even if it does, the results won’t be as good. The reference to this is me trying to create all the folds in one go without being satisfied by what I had designed, needed to take a step back and look at it in a zoomed-out perspective.
- One of my core ideologies is, good design is obvious. But while keeping it obvious, be open to trying out new variations, they might work well or they might fail, but definitely try them out.
🛠️ Tools used:
- Figma
- Adobe After Effects (for prototypes & promo scene renders)
- Adobe Premiere Pro (to stitch it all up together)
…and that’s a wrap! ❤️
If you’ve made it until here, you’re the G! ⚡
Thanks a lot for looking at my work. It was an up-and-down journey for me considering it’s my first UI/UX Design case study and documenting this whole process. I’ve designed and documented all of this from my personal point of view, basically my “default settings”.
Big thanks to Vishal Krishna, Mayank Khandelwal, and Ansh Mehra for all the feedback, teachings, and wisdom. ❤️
Last but not the least, always grateful to Abhinav Chhikara for all the opportunities, mentorship, and such a great platform, 10kdesigners! ❤️
Please feel free to reach out to me to discuss Design and Tech, I’m open to Product Design roles. Let’s work on some dope stuff! 🌟
The metaverse exists if you do. ~ ABNUX, 2021
See you somewhere on the internet! 🌌
📷 Instagram (I’m mostly just sh*tposting here)
