top of page
.png)
MobissimO Redesign
Company
Mobissimo
Overview
Mobissimo is a travel search engine founded in 2005 that helps users find the cheapest airfairs, hotel prices, car rentals, and vacation packages. Mobissimo reports users from over 70 different countries and across all ages.
Since the latest version of her website, Mobissimo founder Beatrice Tarka has shifted her target market to families and young solo travelers. In the freelance brief, the focus was held on rebranding and making the website's different options more discoverable in order to increase customer retention.
Year
Summer 2019
Type
Freelance
UX/UI design
Objective
Given the original design of the Mobissimo website, rethink the interface and user experience in a way that helps travelers easily discover the different options of the search engine. The goal is to increase efficiency and purchases.
Tools
Adobe XD, Photoshop
Menu
Constraints
-
Must keep essential usability the same.
-
Items on original website must be conserved (this includes advertising panels and logo area).
-
Limit scope of UI redesign to Home page and Search Results page.
Assumptions
-
Page layout, typography, and color are the core issues limiting feature visibility and discoverability.
-
Users do not use all the website's features (even if they are aware of them) - they mainly want to find flights, hotels, and cars.
With the explosion of the dot.com bubble, Mobissimo initially started as a travel search engine that could serve all types of users. My first step was to see how current users interact with the website, figure out their main goals, observe trends, and note difficulties they had.
Users & Testing Current Infrastructure
Mobissimo has a wide array of users, and given the relative small size of the search engine, it is hard to find frequent users. Since there is no perfect average-user, I tested the current website infrastructure with 15 different people (7 male, 8 female) with ages between 21 and 49 years old.
I structured my user testing in two parts:
1. A general naturalistic observation of how users interact with the website (also using click metrics)
2. Specific User Tasks
In order to cluster ideas, I wrote insights on post-its, each representing one of the main pages of the website.
Affinity map + pre-design version of mobissimo.com Home Page
Naturalistic observation of users
These guiding questions helped me refine my research:
I used Fullstory click metrics and Mobissimo's Google Analytics report to gather data on the website's usage.
-
Who does Mobissimo target?
Mobissimo targets millennials who are looking for the cheapeast airfare possible and who want to be able to compare their options between different providers.
-
What are the users' goals?
Easily find the cheapest flights within their selected filtered parameters. They want to distinguish between their options easily.
-
Which options are the most used, which ones do users have difficulties using?
Since Mobissimo is a search engine that compares between providers, users mainly access the website to find flights, hotels or cars. Occasionally a user will be interested by the deals options but since it does not stand out it is not a user's main priority on the website.
-
Can the users easily identify the call to action in every page?
They can easily figure out what they are looking for but most of the time they struggle finding it. For example, users do not find search button on Home page very intuitive.
User tasks
-
Purchase the cheapest round-trip ticket from San Francisco to Paris you can find for the next weekend.
-
Find the best deal listed this week.
Results & Pain Points
My user testing confirmed the existing assumptions I had about the overall interactivity of the website. These were the key user takeaways derived from my naturalistic observation and the user tasks:
1. Users want to access their search results very effectively, spending the least time meddling with filters.
2. 94% of users did not find best deal.
3. They spent on average 30 seconds figuring out where filters were on results page.
4. From click data, sponsored site comparison was less important than Mobissimo's actual results.
1
2
2
2
2
3
4
5
Pain points on the mobissimo.com Results page
Pain point labels
1
Click metrics show that it is not clear that there are different search categories like hotels and cars.
2
Filters are here, here, here, and here... All over the place.
3
4
Users barely clicked the comparison box, yet it is placed in the top-center of the screen.
5
Text-based ads are right next to the already text-heavy results menu while picture ads are at bottom of the page. These can be swapped.
CTA which is to click on flight ticket is not clear, metrics show users click on the entire rectangle before clicking the fare price.
Main takeaways
-
Reduce clutter.
-
Improve information hierarchy to make CTAs more visible and discoverable to user.
-
Expedite user journey by putting filters in the same area.
User Research
02 -
Ideation
With the results of the testing, interviewee feedback, and keeping the user's goal in mind, I began ideating different possible redesign options. My overall objective was to simplify the purchasing process for the user by improving visual hierarchy.
Initial Sketches
After performing some competitor analysis, I began by sketching many different low-fidelity options keeping in mind the filter box, results menu, buttons, and ad layouts. The two screens I focused on were the Home page and Results page.
Very simple yet very many sketches! 2 left columns are home page sketches & 2 right are result page.
Layout design consideration
After exploring the different layouts for the home + results pages I selected 2 possible design options which I then evaluated to see how viable each one was.
Center CTA
Left-Centric CTA + Background
Linear + Offset Ads
Ads Left of Results
Obvious Centric CTA but not the best user experience with the ads.
Eye-Catching background but less space for ads which means more on results page.
Straightforward and intuitive but ads take away from symmetry.
Skewed hierarchy. Relatively straightforward journey to CTA
1st Iteration & Design
Going back-and-forth with Mobissimo's CEO Beatrice Tarka, we settled on the "Center CTA" for the Home page and the "Linear + Offset Ads" design for the Results page. Beatrice mentioned liking the eye-catching background in the "Left-Centric" design because it made the experience more personable and more aligned to her branding vision.
Interaction design consideration
In iterating on the first digital screen mockups, I had to keep in mind the entire user experience. Mobissimo had trouble with getting users to the screens they needed to reach, as well as keeping them on the website in general.
The two reasons being that the CTAs (Call to actions) such as the search and buy buttons were not easily found. The user also got lost in the multitude of filters. From my testing, a user wants to spend the least time editing filters and wants to look at ticket prices as quickly as possible.
This was a very interesting part of the project because it entailed changing the user experience from
control (as many filters as possible for the most precise results) to efficiency (getting the user to the price listings as quickly as possible.
Using Adobe XD, I built the two screen designs in medium-fidelity. I payed specific attention to making the interactions discoverable, visible, and understandable. I was also able to get the basic functionality coded by a database engineer.
Ideation
03 -
Design
With this design at hand, I tested it with 10 of the same users I had previously tested on and 5 new ones; I performed the same testing as with the 1st version. They liked the more personalized look with the image in the background but the color scheme reminded them of competitor companies such as Kayak.
On top of this, the "Deals task" was still mostly failed and people just went straight for the air fares. Some video conference calls later with the CEO, I came up with a similar but slightly different design.
Style Guide
Visual design consideration
One of the main problem for the users having been trouble finding features due to bad information hierarchy and clutter, I chose a very simple layout and contrasting colors to lead them the right way. I limited the use of colors to a specific palette so as to not confuse the user and to best inform content hierarchy.
Given that for most people making travel plans is a rather stressful experience, I chose a soothing and calming purple hue. These colors are not only more relaxing than the previous bright and confusing orange, they also give Mobissimo.com a unique brand identity that no other competitor has. They are more young and vibrant which conforms to the CEO's rebranding vision, and conserve the effect of making CTAs more visible and discoverable.
Final Design
4 months later, here is the final design approved by Beatrice, Mobissimo's CEO and already implemented on the french version of the website!
Final Design - Home page
Final Design - Results page
Design
Summary
04 -
Mobissimo's redesign was my first freelance project. Beatrice Tarka (CEO) gave me the chance to put my design skills to test and has since already released the design on the french version of the website.
The entire process involved user testing of the old website, sketching, interactive prototyping, and iterating on design choices. The use of click data and website metrics helped a lot in deciding where to place buttons and how to structure content visually. The constraints of having ads (both text & picture based) made the UI redesign task quite challenging, and the limited amount of Mobissimo's users forced me to analyze carefully the current UX to make it more intuitive and pleasant.
Beatrice Tarka wants to implement a similar design as the 1st iteration with a picture in the background, eventually replacing traditional ads on the home page with paid user content or pictures. There is future work to be done in that direction...
A word from Beatrice on my work
"
Mobissimo was looking to rebrand and establish its brand name with younger audiences - Generation Z. That’s why we have actively looked for design ideas that appeal to age groups 20-35 years old; we wanted to have proposals from a designer representative of this group. Daniel delivered us the UI/ UX analysis and complete new set of branding that we are now actively A/B testing in a live environment.
"
Summary
bottom of page