UI Design | Case Study: FlightClub
To give you a small introduction, I am part of a startup called Flightdrop.
We have a partnership website called, as you may have guessed it, FlightClub.
The website looks really unaesthetic, which gave me the idea of redesigning everything on the website while giving a fresh voice to it.
Here’s the process I used to come up with a brand new website design.
Define the purpose of the website
Before designing a website or an app, I always want to understand its purpose.
The purpose of this website is not to be a convertion monster since only the people who desire to be part of it have access to it.
My goal was more to show how cool and trustworthy the brand actually is. I wanted the website to be an exhibition for our future influencers, something that pushes them to love and promote us.
Find its own voice
Since it’s not a real brand in itself, I wanted to keep the Flightdrop’s vibe.
Our Flightdrop’s vibe is this pink-ish color that you can easily find through the entire design.
The problem is that, besides the color that I had to use, everything else needed to be invented.
When you look at the current website, it doesn’t really inspire you. Or tell you its voice, or style, or anything.
It is a very simple website everyone can recreate with some basic coding.
It is a one-page website, but nothing crazy comes from it. A random person wouldn’t trust this website at first.
Design everything
Since I only had the copy of the website and its purpose, everything else had to be thought, experimented and invented.
The entire website design took me around 5 days to design.
My process is very simple: I create.
This may sound a bit raw for some people, but the best way for me to come up with interesting designs that I love is to actually create the design and evolve from this point.
My art teacher used to say that you can’t draw if you don’t start drawing.
Here, it’s the same thing.
I jumped on my Photoshop, found inspirations from Dribbble and Behance, created a mindmap design, and began.
1. Frame & Transition
I wanted a clean and useful frame (social media and website pages) for users, in order to give this trustable feeling and easiness to travel throughout the website.
For the transition, you may have seen it. It is the white rectangle at the bottom of the first page. It helps people to know that there’s something else and that they have to scroll down in order to see it.
2. First, the Hero Section.
It’s the first thing people are going to see so I had to make it impactful and play on our strengths.
I always think that familiarity is essential in a design, otherwise, the user is lost. Which is why I decided to show the rewards of FlightClub through an iPhone chat (at the time of the design, our app Flightdrop was only available for IOS users).
Then, the bold and impactful title to instantly show the purpose of this partnership: we reward influencers for talking about us.
3. About FlightClub
For this page, I wanted to really be centered on the purpose of FlightClub.
What’s the website about? What’s the goal of it? Why should people join?
I try to play with forms and colors to always give nice feelings and make users comfortable while traveling through the website.
I’m focused on not using too many colors, policies and forms in order to always keep the voice I’m trying to build in the mind of the user.
I try to keep a rhythm throughout the pages.
4. Rewards
Colors and forms play a huge role in the design, and I wanted to use them for the best here.
Each form and gradient attract the eye on the two main values of the page: The title with its explanation and the rewards in themselves.
On the left, you have some geometrical, with bright colors. It asks people to think about what’s written.
I really try to frame the idea and text in order to let the user focus on each element one by one.
On the right, we can see a curve with the main rewards of being an influencer of the FlightClub.
Each reward is on the white background, which instantly captures the user’s eye with the main title. They quickly link each of them. I also show a level of importance for the rewards with colors, size, and height.
5. Join
This is the grand final.
I wanted to combine all the forms and colors that were used throughout the entire design and put them in a way that frames the CTA.
This way I still was able to remember the voice of FlightClub and never lose the user throughout its journey.
The design shows useful information but never overtake the space.
I have also played on the color inversion for “Join FlightClub” in order to catch the eye on it while making it really aesthetic.
Conclusion
Here’s everything I did for the design of FlightClub.
You can see my process and my way of thinking in order to come up with a design that fits the brand while giving a fresh look.
I always stick to the main purpose of the design but never hesitate to innovate or come up with new ideas that may be beneficial for the brand.
