Background
Yindividual is trying to organize RoboMaster North America Online Challenge 2022: a graphical programming competition for teenagers. They need a landing page designed and launched ASAP to present their proposal and passion of hosting the event in order to win.
The goal of this landing page design is to encourage the visitors to sign up for the competition by immersing them with the fun, young, and futuristic brand image.
Challenge
- Super tight timeline
- The client wants the landing page designed and launched within 3 days.
- Limited resources
- The client is currently using Wix. Considering the cost of money and time, I had to go with the same platform to design and launch the page, instead of designing on Figma and looking for development to launch it, which means much less freedom of design.
- Since it is still under planning, not much details of information is available for me to design with. A simple landing page with a clear structure was designed so that it can be easily modified afterwards when more details are confirmed.
Solution
Design a landing page that attracts teenage students in North America to sign up for a graphical programming online competition?
- Who are the audience? - Students in North America age 12-18: minorities, young
- What is about the event? - A graphical programming online competition: esports-like, fun
- What are the important information in order to encourage the users to sign up? - Key answer that needs to find out
Research
Due to the limited time and resources, primary research was not applicable in this case. I started my secondary research by visiting competition and event landing pages to:
- To see the pattern of Information Architecture
- To find inspiration for visual design
Information Architecture
In order to plan the Information Architecture of the landing page, I wrote down the following questions that a user may ask:
- What - What is the competition? What’s the price?
- When - When will the competition take place? What’s the schedule of it?
- Where - Will this competition be online of offline?
- Why - Why should I sign up for this event? - Highlights
- How - How should I participate in the competition? What do I need to prepare?
Color
I extracted the blue and orange color theme from the hero image the client provided and adjusted the values to get the two primary colors. They are bright, young and neon-like, which also resembles Esports (exactly what the event is about).
Typography
Two sans-serif typefaces were chosen for their high readability and ease of scaling. Considering the main group of audience is teenage students, these typefaces help convey an open, friendly and modernized vibe of the event.
Visual Elements
Due to the limited time and resources, I had to come up with creative ideas to do the visual design: they need to be easy to make, apply and adjust with the limited functions on Wix platform whiling making sure it’s attractive. After drafting on Figma, basic shapes including squares, rectangles, and some geometric pngs were used as the highlighting and decorations of the page.
Outcome & Impact
I delivered the design and launched the landing page within the tight timeline of 3 days. As a result of my design, the client successfully impressed the event committee and is currently pushing the project into next planning phase.
I have been in this community of passionate young technology enthusiasts for over 4 years from a competition team PM to an event organizer, and I am honored to continue contributing in fostering it. Looking forward to this competition and future events!
See the website here: https://www.yindividual.com/rmnaonline (It has been modified afterwards.)
What I Learned
- Work with limited time, resources, and freedom
Instead of passion projects where I can start from scratch, I had to work with the current situation and limited freedom to design. Designing directly on Wix by only using drag and drops was hard and frustrating. After trying to do small adjustments but messed up the entire thing, I am glad that I found my way of working with the limited functionality by coming up with creative yet practical ideas.