Week #6: Event Microsite
Lisbon Open 2019, a (fictional) summer tennis tournament
One more week of challenge and learnings in Ironhack Bootcamp: design a microsite to the three stages of a festival (pre-event, during the event and post-event) of my choice that will take place next year. I decided to go back to the roots (for those who don’t know, I was a sports journalist before starting my UX/UI journey) and created a microsite for Lisbon Open 2019.
First of all, I needed to do some research. I interviewed 5 professional players to know what is expected in a tennis tournament website in all the steps of the event. Based on the answers, I did a survey with the tennis community: college, professional and amateurs players, coaches, journalists, and fans of the sport. Basically, people that could attend to a tennis event.
With a lot of valuable information, I decided to include features like “Behind The Scenes” and “Legacy” in the post-event page, or “Resell My Ticket” in the during-the-event page, for example. The survey was so important to build the Sitemap and think about the Information Architecture as well.
In this initial part, I also decided on choosing a Grass Court event. The reasons: Lisbon Open would happen in summer and the sunny weather is prosperous to the grass (let’s not talk about the high cost of building and maintaining grass courts compared to the hard courts, ok? It’s fictional!).
Researching
Analyzing the website of the 4 Grand Slams (Wimbledon, US Open, Australian Open, and Roland Garros) and other tournaments, I got inspired about the fonts, colors, visual design, and distribution of information. Pros: I had different stages of those events and it helped me a lot to organize and prioritize information in my design.
Style — Colors and Fonts
The intention of the chosen Color Palette was to relate with the Grass Court (light and dark green) and the city of Lisbon Palette as well (coral/pastel tone). The font I used was Open Sans, a clear and simple one.
Responsive Webdesign — mobile first!
As we learned last week, I started designing the mobile version. Here are the screens of the landing pages of each step of the Lisbon Open.
Bellow, I share the demo animation of the Desktop version done and recorded in Principle:
Zeplin
For the first time, we used the full potential of Zeplin, a tool to improve communication between designers and developers. We also created a Style Guide containing the needed amount of parts of my design system, with all the information to understand it. The relevant learning here is to understand how to work like product teams, especially when the UI designer needs to deliver to let production start.
The Handoff is typically how the industry calls when the design team communicates the definite designs and style guides with accurate specs, assets, naming, etc.
Learnings
Creating a new design and a visual language for a particular product in the real world, on my own, for the first time, was really considerable. Self-manage a solo project was powerful too.
Last but not least, improving my Principle skills (that is so hard, OMG), bit by bit, develop a Design System for a microsite and think about the Handoff of a project considering the coding part of the process.
Be strategic with time and prioritize what to do, not get crazy, not be late, and deal with all the deliverables — week #6 is over. Wow! Time runs so fast!
*Credit of the pictures used in this project: https://www.wimbledon.com/index.html
