Orlando Vacation — E-commerce website redesign — UI/UX Case Study

In this case study, I’m going to talk about my process of how I redesigning the Orlando vacation website from scratch. I will share my process, design decisions, and approach toward the redesign.

Disclaimer

This was a Current ongoing project at the Dotcomweavers that I had worked on from end to end. At the time of writing this case study, the new website is not yet live as it is under development by the DCW team.

About the project

Orlando Vacation is a company located in Orlando, Florida. They help their clients to plan their Orlando vacations at affordable prices. They manage all the theme park tickets like Disney World, Universal, sea world, etc., and provide hotel booking facilities for their clients.

The scope of the project was to redesign the entire website which has around 25–45 pages and even introduce a new ticket booking system directly from the website. But in this case study, I am going to talk only about the landing pages.

So let’s get started.

Competitor analysis

Before starting any project, the first thing I do is to understand the scope of the project. After having a good discussion with the client, I analyse what they were looking for and what their requirements were. The client is really friendly and has a great approach to technology.

Once that was done, I decided to do a bit of competitive analysis to understand design paradigms. The order of content on a page, navigational flow, various sections like contact information, footers, etc.

I usually add all the screenshots of competitors’ websites as a mood board and then analyze them one by one. This is just to show you how my Figma file looked.

Logo and Typeface

Let me quickly show you the new logo they came up with. This logo was designed by the internal Orlando team.

And of course, we needed a new font. The company wanted to use a Google font. So the best one I could find looks similar and friendly for the ticket booking scenarios so I’ve chosen DM sans as the primary font and the secondary font is Roboto.

The primary typeface has just 4 weights, regular, medium, bold, and extra bold. I used only the bold weight for the main headings and medium weight for the subheadings on the entire website.

The secondary typeface has just 12 weights, thin, light, regular, medium, bold, extra bold so on. I used only the regular weight for the body text on the entire website.

Alright then. Let’s get to the main part of the case study ✌️

Homepage

So I’m going to break down the landing page section by section. Let’s start with the Hero section.

Right off the bat, you can clearly see that the website needed a massive visual upgrade. You don’t need to be a designer to figure that out. But let me take you through the changes.

Header Search

Since the company wanted to introduce a new landing page for their clients, I decided to introduce a ribbon header that allows the customer to switch between the type of search. This is a common pattern I saw when I explored similar websites. I also added the contact information right to the ribbon so that it’s easily accessible when the need arises, which is quite often. And that header search will be sticky though.

Navigation

In the old design, the navigation links were on the left and top of the screen. This meant that the tabs were opened by the display itself. So I have combined a few tabs that were not worthy on the home landing page so now the links which were displaying were the IMP links that the client wanted to display. You can see the difference

Hero Section

The Hero section also needed some work. The old website’s value proposition was about Deposits and things related to theme parks and tickets. While that was not bad, I felt it could be better. So I changed the copy of the value proposition which conveyed the exact same thing as the old one but in a much more impressive way. You can see the difference below.

Banner Sliders

I also added an image carousel that users can click to view the different offers on theme park tickets, hotels, packages, and company offers.

A lot of designers are against the use of carousals due to their many drawbacks. But in this case, I still chose to use it. Because even if the user did not look at all the slides of the carousel, he would not lose out on any information. The slides were just product image sliders. After all, once the user scrolls, the user can see the list of available products

CTA

And last but not the least, the old website had no CTA in the hero section. We decided to bring in a CTA called Walt Disney Packages which would direct the user to a page where they can directly interact with theme park tickets and buy them. This was a business decision.

Anyway, here are a few iterations that I did that I think is worth showing. Trust me, you don’t want to see the rest 😂

Popular Attractions and Categories

At a glance, the user might want to know the categories or what are the hot running on the websites, right? So I’ve added the. popular attractions section at a glance the user might feel that there are attractions that we need to check in and the below itself added categories which he might view all the related. categories like hotels, homes, tickets, etc from start.

Featured Categories Listing and Discounts

The featured categories will represent the user with a research mindset and will be the best suitable for the below sections. The categories will display random hotel or theme park ticket bookings and packages will be shown

The discounts section will be easy for users to get notice that what are the discounts that are trending on the current websites and these discounts will show all types of discounts which include hotel booking, theme park ticket booking, etc.

Special Payment Plans

The client has special payment plans for the employees who are associated with the Orlando vacation for years. They will get huge discounts on all categories including hotel booking, theme parks, and so on. This will require additional information and need to fill out a form for employee sign-up. This section was added to the homepage itself to motivate users to get associated with the Orlando vacation and business improvements.

Wrapping up the website

Testimonials are very crucial to any business. This was missing on the old website. Hence made them in the form of a three-card carousal.

A few more blog sections to know the clients what was happening in Orlando and things to do in Orlando for vacations and the covid related norms etc.

The company also wanted to collect email IDs for sending out promotional newsletters. So we decided and the block for the newsletter signup added in the footer that the company was not more focus on it.