Case study: Designing a landing page for a gaming event by Turnip
A walkthrough of my experience designing an event landing page for a gaming event.
Note: I am not linked with Turnip in any way, this is a personal assignment.
Brief context 📃
This was a design task I got as part of the 10kdesigners cohort, the task was to design a landing page for an upcoming event for any company/startup in your assigned niche, I got “E-sports & Gaming” as my niche and I was quite happy as I am quite familiar with it and its trends.
Design Process🔁
As you might have heard, there’s no ONE correct process but there definitely is a process. So, prior to getting everything rolling, I chose to break down the entire project into manageable chunks, to try not to get overwhelmed and to assist me with keeping focused. This is the process is followed:
Research🕵️♂️
Even though gaming is something I immensely enjoy 🥰 and spend an unhealthy amount of time doing, I was still unaware of what kind of events we can have in the gaming industry. So, I decided to surf the web 🌐 and get my answer. I noticed most of the events were offline tournaments where two teams play against each other. I personally wasn’t satisfied with that idea and didn’t want the event to be a match between 2 two because then the target audience becomes very specific as compared to organizing an event where all gamers can join and enjoy. I brainstormed a few more ideas:
Target Audience
- Anyone who plays video games and watches live streams of it.👾
- E-sports enthusiasts.🎮
- People that want to build a gaming community and connect with like-minded people.👬
Understanding the Users 🙋♂️
After making some assumptions I decided to try and understand the users and what would they want out of this event. Since I’m a part of a lot of gaming communities it wasn’t hard for me to find the right audience to interview. So I interviewed a few of my friends who are all gamers and into e-sports to help me better understand their goals and their perspective on things I should consider which designing this event for the users.
- The users wanted to attend the event to see their favorite streamer in real life and not like on a screen like they do every day.
- By attending this event they wanted to make connections with other gamers and streamers to help them build their career in the gaming industry.
- The users desperately wanted to compete against the streamers to see where they stand and what amount of work they need to do to improve their game.
- A lot of people suggested that there should be a Cosplay event just like in Comic-Con and TwitchCon.
- They wanted to be able to win some prizes and goodies out of this event.
After keeping all the suggestions and ideas in my mind I structured the final event idea.
Final event idea 🎪
I finally decided to go with the idea of a Gaming Festival, a place where you can connect, compete and collaborate with your favorite streamers. There will be lots of different activities including:
- Streamers Showdown- A battle between India’s top streamers, where they play different games in teams.
- Cosplay Contest- You can come dressed as your favorite gaming character and take part in the contest.
- Lan Party- You can play your favorite game with your favorite streamer sitting right beside them.
- Afterparty- Party with your friends while loud music blasts all over the venue.
After finalizing the event idea, the next task was to find a start-up/company who would be interested in organizing such an event, my folks in 10Kdesigners gave me the idea of choosing Turnip as the organizer since the vision of Turnip somewhat aligns with the idea of this event
What is Turnip?
Turnip is a game live streaming, voice chatting, and gaming community platform.
Features
- You can multistream your game on different platforms like Facebook and Youtube for FREE!
- Supports 1080p Full HD streaming.
- You don’t need a second screen to look at things like chat, donations, and other notifications, everything is displayed on your mobile’s screen.
- You can start your own gaming club and run communities on Turnip.
Why would Turnip be interested in hosting this event?
As Turnip is the home for streamers and it helps them build their community stronger, it would make a lot of sense if Turnip organizes an event like this. They will not only grow as a start-up but they’ll also help the gaming community connect and enjoy with their favorite streamer.
Information Architecture
After taking a look at the most-converting landing pages, I noticed that these 5 components are very important to have on a landing page and I made sure I use them all:
- Compelling Heading- You can’t afford to skimp on this one because the headline is the first thing visitors see when they land on your page. Writing a compelling headline will help prevent visitors from bouncing immediately and will encourage them to stick around long enough to consider your offer. Hence, I decided to name my even ‘LANFEST’.
- Effective Copy- Good, persuasive copy is crucial because this is one of the primary methods to get your point across and convince prospects to convert — the benefits of your product, your UVP, etc.
- Engaging Media- Since we know a majority of online users don’t like to read web page copy, what better way to get your information across than some engaging media?
- Trust Indicators- For this, I’ve shown the statistical evidence to the visitors which will help us gain their trust
- Strong call-to-action- Your call-to-action needs to be in the right position with the size and color that makes it “pop”.
I further made sure my landing page answers the basic questions the visitor might have and those were:
- What is this event about
- When and where is it going to be organized
- Why should I attend it
- How should I trust this
- Is this free or do I need to pay for it
Getting these questions answered and out of the way forms a sense of credibility and trust in the company and the event. This can help build the excitement factor for the user and lead to them registering for the event successfully.
With all the information, I was able to make a sitemap:
Wireframing 📝
With the sitemap finalized, now was the time to explore visuals, i.e., how our website should look like. I took style inspiration from what I felt TURNIP wanted to communicate.
At first, I got going with outlining the wireframes with the assistance of pen and paper ✍🏻 once I had an idea of the flow of the page, I got into Figma to do the iterations. Wireframing involved a great deal of referring to the exploration done previously.
After exploring several options for the layouts, I finalized this option and moved forward with my style guide.
We had a whole session about frameworks and mental models in the cohort and that’s when I got to know about the AIDA framework.
AIDA stands for:
- Attention — Grabbing the user’s attention to make sure they continue to scroll-on.
- Interest — Making sure they’re interested in what you have to offer.
- Desire — Creating an unquenchable desire to claim the offer.
- Action — Making your user accomplish your desired action or outcome.
and here’s how the framework was applied through the page,
Visual Design 🎨
Before we get started with the Visuals, here is the BTS of the iterations I did to get to the final design:
Style Guide
With keeping in mind Turnip’s style and valuable feedback from the mentors, I finalized the following:
- The color palette of the website
- The font to be used
Hero Section 🦸♂️
This is the most important section of any landing page, functionality and aesthetics of this section will decide whether the user will scroll down or not, so this section should be made as good as we can.
This section usually gives a basic idea about the landing page and also catch users attention, so I added
- A catchy line — To grab the attention and also to give some context.
- A one-line overview of the event.
- CTAs to give direction to user’s decision
- An eye-catching photo of a gaming character from the famous game Valorant.
Guests/Influencers Page 🧍♂️
This section is also very important as most people will make their decision on the basis that if the streamer they want to meet is going to be there or not. Since most of the gamers know streamers by their in-game name, I have given more emphasis to it. Moreover, if someone wants to know more about the streamer they can check out the respective streamer’s Youtube and Instagram page which has been mentioned in the card. I have also displayed the logo of the games they stream mostly to give a brief idea to the user.
Events Page 🎪
Every potential buyer would be interested to know about the events they will be experiencing. I thought of creating a page to explain the events. I added real photos from previous events to make potential buyers familiar with the work we do.
I went with alternatively aligning the text and images as the user’s eye can scroll the information in a Z pattern. (Refer Gutenberg diagram)
The primary attention goes to the event’s photo as an image conveys more than written text.
For cards of the event page, I focused on two things:
- Consistency: I used the same gradient used in the influencers card before.
- Sharp-edged style: I kept the borders sharp and added gloss to it.
Even though rounded-edged border makes it easier on the eyes to read I still went with sharp borders to give that hardcore gaming website vibe.
Trust Indicators 🤞🏽
In the next section, I have displayed Turnip’s milestones(numbers are not real). I wanted a dedicated page on our landing page to talk specifically about those milestones and achievements. This Our Reach page is designed differently than the previous structure of the alternative alignment and Z pattern reading to avoid repetition and boredom.
Take a look at what happens when you hover on each milestone
After the highlights of all the milestones, it was time to talk about the companies that support us and help us in making the event a reality. I kept the Sponsor Section real simple and clean with only the logos of the companies and when you click on them you are redirected to their website to check out the awesome work they’re doing.
Pricing Section 💸
With the understanding of the event, it was time to talk about the benefits of buying the Battlepass, before I go any further let me explain what a battlepass actually means, it is a type of subscription players buy in-game once they purchase it, they get an opportunity to unlock different rewards and new content. Hence, I used the term Battlepass to give them a more personalized feel.
I introduced two types of battle pass and named them:
- Nerfed Battlepass- the cheaper version with fewer benefits.
- Buffed Battlepass- where you get all the benefits of the event.
FAQ Section ❓
FAQs enable you to deal with specific queries that your customers have about your business. They also represent another way to reach out and connect with your target audience. Therefore, it is one of the most important elements of your website strategy.
Contact Us 📧
Placing the Contact Us section at the bottom because if the users had any questions that have not been resolved in the FAQ section then they can simply mail their query to us.
And now finally!!!! Take a look at the final design:
Learnings and takeaways 🎓
- At the start, every problem seems very hard to solve, don’t let it intimidate you, trust the process, and just get started with it.
- Don’t hesitate in asking for feedback from your mentors and peers, I had no idea how helpful the design community is and that they are always ready to give you some feedback to improve your designs.
- Iterations can do wonders, I am so happy to see the changes in my design from screen 1.
- It is very important to document everything you do while designing something.
- There’s always room for better aesthetics, users love aesthetics.
And that’s a wrap!
Feeling thankful to Zainab, Parth, and Shivay for their constant support and feedback 👐🏽 in making this blog possible. Feel free to drop any feedback in the comments. In case anyone would like to take a more detailed look at the project, here’s the Figma link! You can even check it out at Behance.
You can connect with me on any of my social handles:
