UI/UX Case Study-Blockchain Convention Landing Page Design

📌In this case study, I’m going to articulate my process of designing a landing page and mobile version of the same for a website. I will share my process, design decisions, and logic behind the decisions.

Disclaimer

“Blocknodes Convention” firm doesn’t really exist, it’s an assumed company I came up with for this project. This project was done as part of the 10K Designers assignment.

About the project

Blocknodes Convention is a company based in California (Imagine any other place if you didn’t like the California reference, it’s an assumed company). They are a leading firm for hosting Blockchain conferences and expos.

How good are the competitors? Basically Research work!

Research being the first step, the first question that pops in your mind is…..Drumrolls!!!!!!!!!

“How did others do it ?”. I did thorough research and competitive analysis. Found plenty of websites that host Blockchain events virtually.

After analysis, I could easily figure out and C.A.T.E.G.O.R.I.Z.E websites.

1. “One with too much information” — These are the only website that actually looked like a landing page but had too much information. Most of the information was repetitive or irrelevant.
2. “One with very little information” — These were the websites whose landing page was basically a calendar to follow throughout the year.
3. “One with the appropriate information but too much text” — These websites seemed correct but somewhere lacked good design.

Information Architecture

Now that I am done with the research/competitive analysis, I knew what to include in my landing page and what not to!! This takes us to our next section i.e. Information Architecture.

In the picture below you can figure out the order of the sections that I have decided on and why?

Logo

I wanted the logo to be very relatable to the name and the industry.

Idea was to use the words- so “BLOCK”, “CHAIN”, “NODES” were the keywords I wanted to play with and portray.

Below are a few attempts that didn’t make the cut:

But the design, that finally made it is:

Reasons why I chose this logo

1. Satisfies my wish to use the name of the company.
2. The illustration in the logo portrays “BLOCK”, “CHAIN” and “NODES”
3. Rejected option 3 is similar to the final logo, but it is too long to be a good logo.
4. Easy to read and in a go, you can understand it’s something related to blockchain.

Typography and Color Palette

When I started out, I wanted my landing page to be of a white background and then soon I realized it had to be of a dark theme. Blockchain is a concept that is still grey for most people, but this “grey” isn’t the reason I wanted it to be dark. LOL!

It was because of the colors I switched to a dark theme, they were going much better with a dark background.

I chose these light violet and pink shades as a combination of this was a good lift up for the seriousness and sense of importance the theme brings along.

I’ve explained the typography in the cards below.

Low and High Fidelity Wireframes

The next step was to set up the wireframes, which you can see below. I’ll talk about each part of the webpage later in the case study.

As part of the research, I looked around a lot for inspirations and very selectively took screenshots of the design that I liked, which were further used for wireframing.

Hero Section

The basics behind the Hero section was to keep it

1. Simple, skimmable, and uncluttered
2. Interesting but serious/important
3. Provide relevant information only, and not confuse the user by attacking the eye through clutter and mess of pictures and content

Why did I choose these specific sections for the navigation bar?

1. Navigation bar to contain minimal and most commonly used Menus for an event-based website. Including —
   1. “Event”- coz why not, it’s an event-oriented firm who probably have more events coming up and also have information of past events.
   2. “Sponsors”- gives weightage to the company for building trust and also a social proof of work.
   3. “Price”- gotta talk about the price of the passes that users are looking for. Also indirectly works as a “Buy Pass” CTA.
   4. “About”- Details of the company
   5. “Search”- Making it easy for the user to find something specific
2. Header’s main job is to grab attention. Keeping it loud and clear of what’s going to happen soon i.e. a “Blockchain Convention”, shutting out any scope of confusion.
3. Value position has the context about the event dates and type with a short description about the event, teasing the user to make them scroll down and know more.
4. CTA to finish the section with to buy passes, adding the contrasting gradient to the dark theme to make it stand out.

Sponsors

This section is the most common section on the landing pages irrespective of the type of company one is designing for. Everyone got some clients, right?

My thought behind this section was to keep the logos of the companies consistent so edited them to be in whites, following Gestalt’s principles i.e. “Law of similarity”.

This section gives confidence to the users and helps to build trust.

Topics Covered

This was a much-needed section.

1. There were only very few websites that talked about what’s actually going to be covered in the convention.
2. Here we have 4 topics cards with a short description of what exactly is going to be the theme under that topic
3. Added an illustration in the card, which will be later used as a tag under the Speakers section to identify the genre of the speaker.
4. Mobile versions of these are pretty much the same as the webpage.

Here is a little interaction from the section.

Speakers

I wanted to design this section in such a way that the speaker card answers the following questions.

1. Who are the speakers? — Card showing their name and picture
2. What do the speakers do? — Displaying current title speakers holds with the name of the organization that they are working for.
3. What are the speakers talking about? — Description of the session and tag from the “topics covered” to relate it to the genre.
4. When is that particular speaker’s session being held? — Card showing date of the session
5. At what time is he/she going to present? — Card showing the time of the session

Below I have also provided a CTA for the users to apply for being a speaker at the virtual event.

For the mobile version of the section, the cards are the same as the website but are horizontally place to save space on the web and it’s to swipe to right via mobile.

Pricing

Now it’s really important to keep this section clear, simple, and easy to understand.

1. Confusion in this section can make the user go away no matter how good the convention or other part of your website is. It’s simple, you don’t invest in something you are not sure about.
2. I chose to make Day 1 of the 4-day long convention to be FREE, the idea was to attract more and more people — especially the new audience.
3. I have made a separate card which lists down the perks of attending the convention but then it’s FREE so we can’t expect to give away all the things, right? So we have crosses and ticks aligned right next to the perks to indicate which is included.
4. Below that comes the CTA to buy the passes on each card.

FAQs and Bottom Navigation

Find the complete design here on Behance

Blocknodes Convention Landing Page 📎

Blocknodes Convention Landing Page — Mobile Version📱

My key learning for a design process

1. If designing was an exam, research would be the preparation phase. Designing without researching is just trying to make fancy screens where the UX part is lost.
2. There isn’t a correct design process, it depends on what works out for you. Also, this depends on what you are designing.
3. Organized Figma file>> Unorganised Figma file
4. Iterations are a very important part of the design process. They help you improve and get creative.
5. Designing is like storytelling, it should speak for itself. Design products in such a way that you don’t have to explain.
6. Thinking from the perspective of a user and designing the product to make it idiot-proof.

Figma

Here’s the link to my Figma file if you want to walk around and take a look at my iterations.

That’s a wrap. 🌈 Thanks for reading 😉

Don’t forget to check out my other case study

Case Study: User Research on Filmmaking Discord Community

Know the Author

Jeevanshu Narang - An actuarial guy who turned Designer, working towards making products with great user experience. Currently part of the 10K Designers. A product designer is someone who has to wear a lot of hats during the course of designing, I’m here with my closet full of hats.

Let’s get connected here

Portfolio✍🏼 | Twitter🐦 | Linkedin👥 | Dribbble🏀 | Behance 🎨