Booking.com
UI DESIGN
Redesigning a Well-known Mobile Application
Overview
The Process
Duplicating Screens
The first step was to duplicate three actual screens I had chosen of the app on Figma.
I decided to focus on the “Home” page, the “Booking” page, and the “Saved” page.
Recreating actual screens on Figma was more meaningful and educating than I imagined at first because it enabled me to see the missing parts and helped me to take some decisions for upcoming redesign steps.
Heuristic Analysis
First thing first, what is it? Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user interfaces in independent walkthroughs and report issues. Evaluators use established heuristics (e.g., Nielsen-Molich’s) and reveal insights that can help design teams enhance product usability from early in development.
Problem
In light of these principles, I looked deeper to evaluate Booking.com’s three screens to see heuristic usability problems. And I found three principles, which are: User Control and Freedom, Help Users with Errors and Aesthetics and Minimalist Design.
I motivated myself to make some improvements to UI design. First, I was going to fix some basics:
-
Inconsistent fonts on pages
-
Inconsistent button size and shape
-
Poor alignment
-
Poor hierarchy of icons
Competitor Analysis
Before diving into the redesign phase, I conducted a competitor analysis, comparing brands such as Hotels.com and Ets.com. What stood out immediately was the noticeably more fresh and visually appealing UI designs of these competitors. Their designs facilitated effortless and enjoyable navigation. This realization prompted me to opt for a more energetic and fresh design approach.
Style Guide
Confident about the design mood, I created a style guide to gather components before the UI redesign. Following a Competitor Analysis and Desk Research, I stuck to the well-known brand identity but tweaked the colour palette. Shifting from a dark blue background to white and adjusting the logo colour to blue resulted in a minimalist design with lighter fonts and thinner icons, creating a positive transformation.
Redesign
What did I change?
The application’s colour scheme was full of the brand’s dark blue colour, which I found traditional and less energetic with big icons on the top bar. For this reason, I totally changed the header part. The original logo was white on dark blue. I found the header part a little dark and changed the logo colour to blue and the header light but without losing the sense of the brand identity.
The intended goal here was to make the app more consistent in colour choices and make it more modern and lively.
Outcome and Lessons
In conclusion, I would say that this first individual project was really instructive: I realized that even if working by myself sounded very appealing and practical at first, I missed the help and advice of my friends/colleagues in moments of doubt. This strengthened my desires for the near future: as a junior UI/UX designer, I would love to be working in a team that can guide me and share their experience with me, because I think that it’s the best way to learn a new job.
Let’s see what the future holds for me!
