Early this year, after completing a couple of initial projects, I told to my Head that I would like to take full design ownership of the native apps rebuild and redesign project, which was about to begin. It involved migrating the full app portfolio (10 apps) into a native iOS and Android app. This project is still in development and I'll be writing about it later when it's live, in 2018.

The answer was “Sure, but you'll also take care of the design for Flynder.” Flynder.com is a small startup within our company, but I didn't took it lightly. Flynder's design has been neglected since the beginning and this young company never got proper attention from our product team. Even its logo was made by a freelancer or some external design agency.

By that time, the team wanted to launch a blog on their website, in order to have a better rank on Google and to give their users extra insights about the Flight travel business. I said to the PM that started working with me on this team that they needed a redesign and prepared for a 1.5h meeting with the business team to present my proposal.

On this presentation, I've outlined why a redesign was needed and showcased examples of the usability issues they had on their website, based on my analysis as a Lead UI/UX Designer and the thoughts of potential users via peek.usertesting.com, an online usability testing tool.

Suggesting to design systems instead of web pages, implement interface patterns and create scalable systems, I proposed 4 redesign steps:

Step 1 – Footer & UI styles

• Bring the website to a more modern look.
• Make the buttons more elegant and brand-like.

Step 2 – Deals & Blog pages layout

• Increase readability and create vertical rhythm.
• Improve the user experience for all content pages.

Step 3 – Header & Navigation

• Allow more screen state for the page content.
• Make navigation clearer and prominent on mobile.

Step 4 – Deal cards on homepage and within blog pages

• Add contrast, clear hierarchy and reduce clutter.
• Clearly distinguish between deals and blog posts.

After giving a short preview on the first 2 steps, I've also suggested to focus on usability testing and further refinements when the UI redesign is implemented.

As a UI/UX Designer, I need to think about the overall look–and–feel and content hierarchy.
Thus, I had to know which elements were to be more prominent and appear first on their website. In order to get those, we proceeded with a brief workshop where the team was asked to define the following aspects:

Company Mission

☛ What is Flynder for.

User Goals

☛ What's the website ultimate purpose.

---

Target Market

☛ What type of users —demographics, personality traits, etc.

---

Tonality

☛ Visual scale (from 1 to 6) on how informal or serious the brand is.

As you can see, I was the only one in the group thinking that the brand tends to be more serious. This measurement was crucial for me to decide on using rounded UI elements and playful graphics.

---

Plans & Strategy

☛ What’s next.

---

Futurespective

☛ What is called “Tweet to the future”, where I asked the team to define what would they like to tweet in a year from the workshop —what they achieved by that time, for example.

My tweet was “Users love Flynder's style that we've created and keep on returning”.

---

Global features

☛ Asked them to rank elements on the global website (navigation elements, social media, vouchers, contests) in terms of what’s more and less important, with static post–its that can be moved around on a whiteboard.

---

Deals info

☛ Asked to do the same but with the elements inside a deal page (price, class type, origin, destination, title, airline and other deal info like if it’s a direct flight and/or a last minute one), since it’s the main landing page for their product, in order to know what should be the hierarchy when redesigning it.

After the 90–minute workshop described above, I confidently proceeded with a redesign that was inline with business and user needs. You can find the results bellow.

---

Contests

☛ Flynder contest page proved to be easy for the customers to use, doubling the newsletter subscribers.

---

Homepage deal cards

---

Blog posts