Tanvi Joshi

B design 7th semester CD

DUMMY TASK SUBMISSION
UX REACTOR
Aim

The Aim of the project is to create a search results

visualization screen where people are able to see
the results for a flight search made and make
decisions based on what is shown to them. Take
into account that the purpose is to facilitate this
experience for the users.
Problem Statement

After doing lot of research and analyzing the available flight

booking websites,I discovered that the Interfaces are too
bulky as it has lots of content and interactions. This can be
very confusing for the user to navigate through the site and
follow the proper process. Eventually it results in bad user
experience especially while booking flights especially in
connecting flight experience.
Solution
My focus was to use clean and minimal required UI
elements which conveys their interactivity and purpose
making it user friendly to use.
While booking for connecting flights, the process can be a
bit confusing and cumbersome. To solve the issue I worked
on the interface that provides the easy search result
option, which allows user select the type of flight (one
way,round trip,multicity).
The search results will show the best available flight
combinations from the starting point to the connecting
point and from the connecting city to the final destination.
This can provide a good user experience so as to simply
make decision based on the combinations available.
User scenario
Rajveer (28 yo) travels frequently for business meetings and
trips. He is supposed to attend a conference at Goa the next
day,before that he is supposed to collect an important
document from his client in Mumbai.For that,he needs to
reach Mumbai from Jaipur on 22 october, and meet his client
at Mumbai to receive the document.
He is looking for flights from Jaipur to Mumbai, so that he can
meet his client on the airport or in the city for few hours and
take a flight from Mumbai to Goa the same day as he have to
attend the conference the very next day.
He is struggling with the timing schedules of the flight while
booking a connecting city flight from Jaipur to Mumbai and
then from Mumbai to Goa.
He is looking for best combinations available that he should
select according to his convenient time and fare preferences.
He wish to book the flight using multicity booking option and he
wants the interface to be easy to use and the whole process to
be less time taking.

The UI of the search result visualization screen is made

considering the pain points of the given scenario or for similar
users. The interface which is considered for better user
experience is made clean and with required and minimal
interactions. For example, breadcrumbs are used for easy
navigation and quick process so as to solve the problems of
such similar user scenarios.
The UI of the search result screen will be helpful for Rajveer as it
will save his time while booking flight as he will not have to
struggle with different flight searches from different cities along
with the timings.
Wireframings
More Iterations
Different iterations were made in wireframings using
different layout structures and elements.
Out of which the final one was selected for the visual
design.
Iterations for Visual Designs
Final Visual Design
UI elements
Typography
Open Sans

 Open Sans is used in some of Google's web pages as well as its print and web
advertisements. Its design is similar to that of Matteson's Droid Sans created as the
first user interface font for Android phones, but with wider characters and the
inclusion of italic variants. It is used as Mozilla's default typeface for websites until
2019
 Open Sans was designed with an upright stress, open forms and a neutral, yet
friendly appearance. It was optimized for print, web, and mobile interfaces, and
has excellent legibility characteristics in its letterforms. It is used for standard look in
web, android ui and provides good readability.
Variation-
Light
Light Italic
Regular
Regular Italic
Semi-Bold
Semi-Bold Italic
Bold
Bold Italic
Extra-Bold
Extra-Bold Italic
Color
Icons
Grid and layout

 Grids help designers to build better products by trying different design

elements together to achieve effective hierarchy, alignment and consistency,
with little effort. If executed properly, your designs will appear thoughtful and
organized.
 The design follow the 12 column grid structure.
Interactions
 The Visual design of the search result screen is made using minimal
elements and options so as to make the better and easy experience
for the user to book a flight.
 The toggle switch is used to select the type of travel experience the
user wants to have.(0ne way,Round trip,Multicity)
 The search results are shown for the multicity travelling experience by
the user, which shows the best combination of flights available at the
desired dates and time and also the individual A to B and B to C
flights.
[A multi-city flight is an itinerary that doesn’t follow a typical there-and-back pattern, but
instead goes from Point A to Point B and on to Point C (and possibly Point D, etc). A multi-
city itinerary can be used to create a layover, visit several cities in one trip, or fly back to
a different airport than where you started.
If you plan to cross several regions—for example, flying from San Francisco to Hong
Kong to London to San Francisco, it may be cheaper to book it all on one ticket.]
 The breadcrumbs are used to show to process of the
booking process step by step that eventually simplifies
and show the labels of the sections in the hierarchy for
the easy navigation all along the website.
 It also makes the booking process easier and
understandable for the user.
 The filter section above the search cards allows user to filter their
preferences of time,stops and fare range.
 This also acts as a tab bar which allows user to change search view
results according to the user preferences.The tab bar includes the
flight combination section which makes it easier to select the best
combination of flights and makes it easier for the user to take
decision while having multicity travelling experience.The tab also
provides option to select individual flights between the two cities
(Jaipur-Mumbai,Mumbai-Goa)
 The search result flight combinations are shown inside the cards.
 This shows the combinations of flight from the starting place(Jaipur) to
the connecting city (Mumbai) to the final destination (Goa).
 Along with that,the search card also shows the best deals or offers
available for that flight combination along with the final price.The
offers and discounts can fluctuate and according to the dates.
 The search result list cards will continue on further scrolling down
through the website.The details of the flight can be seen after clicking
on the Flight detail option below the card.
Mockup