Whether you're a company in need of my freelance services, or you're expanding your UX/UI team, I'd love to hear from you. Everything starts from a conversation, so let's grab a coffee.
LinkedinBehance
A platform comparing and booking vacations abroad, which is operated for companies, such as travel agencies or for end users.
TopTours allows the user to book vacations in Israel and abroad by an unique algorithm which developed by the company, and allows search results and method of order that has never been seen before. The development of the system underwent tight characterization processes, but at the level of visual design, the company chose to focus less. By the time everything was ready for the pilot, the company realized that more thorough work was needed at the UI level, and that's exactly where I got into the picture.
My job was to take the existing design and redesign it, by a whole new UI process. The company TopTours, developed the system based on UX processes, but without any orderly UI process afterwards. My goal was to create a new ‘look and feel’ system, that would appear to the user as something much more convincing and serious, that would be more pleasant, more beautiful and easier to use.
The main challenge was time. The client was very rushed with the design, because he wanted the system to be ready to run already in the summer, which left the design and development together for a total of a month and a half, of which I got a week and a half. There were two other challenges I had to face:
1. Changing CSS features only, because a change in the structure and process of the UX can greatly extend the working hours of programmers.
2. I had no visual basis for the design on which I could lean.
The main part where I had to change beyond the existing UI, was the main page. I noticed that the current main page does not "utilize" the power that the algorithm has to offer and even confuses the user with an information load, functional and visual. I suggested redesigning the entrance page, which would compensate for both of these issues. A CTA button without any customer input, which will put the algorithm into action and offer unique search results. A CTA also solves the load over the page by replacing all the rounded icons into this button.
I was looking to see examples of home pages on leading sites, ones that already work for the user. The main and useful finding for me was the way the system presents the first search option on the site. Some of them were "ISSTA", "Hotels Combine" and "Travelist". At the visual level, there was a clear trend of concentrating the fill fields into a single focused area, with a clear CTA button. At the Hi-X level, all systems did not allow the user too many options, which directed him to one clear path. Apparently, a goal that the company aimed for.
Since one of my main challenges was to maintain the existing system structure and change only CSS features, I saw fit to analyze how it is built at the component level from small to large. The first way I chose to do this is to examine user flows and see how the system responds, like booking a vacation. From the first action the user has to perform to the actual order. The second way I used it was to get into the site's inspect through the "Chrome" to get a better idea of how the developers chose to develop it.
Home page design and system structure analysis were a good basis for me to start designing the system UI. The design system included new components, controls, color schemes and later also interactions. After performing these two steps, along with researching other design inspirations I started doing this. I wanted to focus on colors that would not be foreign to the user, but would still be unique - that's how I found the shade of blue I was working with. Admittedly blue like many systems, but has a certain tone that allows it the uniqueness I wanted. The process was long and not simple, but fascinating. In addition, I suggested to my client to redesign the logo, at least temporarily for the pilot phase, one that would flatter the system more and be simpler and clearer.
After building the foundations for design, like the design system and all the knowledge I gathered from how to develop and characterize the system to being inspired by existing sites and trendy concepts that have probably not yet been developed, I started connecting everything and designing the screens themselves.
A challenge I encountered while working was designing the screens for mobile, because their design was quite different in it's language and it's UX from the one on the desktop, so I was sometimes required to develop new components but still stay within the limitations that guided me.
Destination Search Result
I wanted to present the destinations of the countries and the flag next to them more clearly, so I chose to increase the white space around them. I put the sub-destinations into a frame to give them a place of their own.
Summary Accommodation & Flights
I put everything I could into a frame, for the simple reason that there is a lot of content and very small sizes, so this area has the potential to be messy and details to be displayed without belonging to each other. The arrow buttons on the right (number of nights) in the old view, affect the rest of the options below, so I enlarged the buttons, so that they enclose all the options so that the user understands this immediately and not just after a change he makes.
Personalizing Flights
When the user selects a flight type from the right-hand view of the table, the center column and the right column change according to the return flight (the main column) and the hotel room features (left column). I have seen fit that this classic table is not the optimal view for this type of interaction. I chose to break the table into horizontal cards, which each tab being basically a row in the table. I saw the need to disconnect between the rows of the table, to show that there is no connection and influence between one another, and that the effect only happens between columns. In addition, I changed the check box buttons that are designed for multiple selection, to radio buttons that are more suitable to the desired action from the user. I centered the headings above the table and enlarged the white space around them, for a clearer display. In order to create a visual connection between the table elements, rows, and columns, I put everything into a light gray background that would connect everything together.
I was a bit afraid that I wont reach the goal because of the limited time. I finished that a day before I had to provide it, so I left another day to take care of things into pixel perfect. I also practiced consideration of the development team because their own need. It didn't feel me the optimal job I could ever have, but I learned that companies has targets they must reach never matter what. It helped me to understand that my role is important, but it's one of other roles are important too on the same level or even more.
.svg){kind=small}
