Vote on LockTrip’s User Interface 2.0
*All designs in this article have been optimized for your desktop. We therefore recommend to use a desktop/tablet for reading and viewing.
Dear LockTrippers,
we are happy to reveal the progress that has been made regarding the marketplace redesign, which is a major part of our scheduled user experience improvements.
Before we focus on the UI prototypes, it is important to emphasize that once the UI update takes place, locktrip.com will become the default domain of the marketplace (instead of beta.locktrip.com).
This means we will be fully putting the spotlight on the travel service with 100% of our visitors inevitably seeing our live product.
1. The Design Contest
Based on the valuable feedback from our community members and users/travelers in general, we managed to identify the weak spots in our current design and UI. This allowed us to built a detailed list of requirements, which would later be used to organize an international contest among webdesign communities.
The UI requirements together with the general preference of having a “light” and “modern” color palette was provided to all designers who enrolled for the contest.
The contest took place during April and has already been concluded. We received around 100 entries from more than 50 contestants, among which 5–6 high quality submissions were shortlisted by us. Of these, we have picked one that really stood out.
All contestants were required to design 5 template pages, consisting of the homepage, hotel search results, flights search, hotel details page and the customer dashboard.
2. The Evaluation Criteria
Of the five pages listed above, the search results page is the most critical one, causing the highest friction for customers. → They easily get past the homepage by initiating a search….but quite often feel confused or lost with the search results and/or when they try to initiate a checkout experience.
For these reasons we decided to value the search results page for hotels with higher priority compared to the others (even higher than the homepage). Its complexity is also the most demanding one in terms of fitting functionality, cleanness and informational density into a single product.
Therefore, designing the UI for the search results requires an extremely well thought approach. Every little button, tool-tip, navigation link, word of text, filter and image plays a critical role in the overall quality of the design as it needs to make it intuitively easy for the users to search, filter and book.
3. The Best Pick
We’ve spent a considerable amount of time analyzing multiple components of the provided entries. Among these criteria were:
- User Interface Depth — The fine details that are needed for a great search experience were of highest priority. In addition, we wanted to facilitate the viral effect, which is why we embodied Invite links within the interface that are interconnected with the affiliate system.
- Uniqueness — We received a lot of good suggestions which resembled many of our mainstream competitors. Our goal however is to build a unique and recognizable product, which is why we valued concepts that had been drafted from the core values of our product higher compared to the ones that were inspired from mainstream competitors.
- Color Palette — We gave designers the full freedom to experiment with colors and contrast.
- Typography — The style and size of the fonts make up a considerable amount of the looks and feels. We left this task entirely to the designers too.
- Content organization — Travel searches deal with massive amounts of imperfect data. It is vital to have a design that does not rely on a single beautiful header image. Instead, we wanted to find a design that looks great regardless of the content quality provided by hotels.
Based on these criteria, we’ve shortlisted a prototype that has managed to reach our expectations. We are now providing it to our community for review/approval.
**NB — Please note that the copy-writing on the provided prototype is a mock-up, which will be reworded, proofread and optimized with the final draft of the UI. Please also keep in mind that all provided prototypes are for the desktop version of our marketplace. Mobile views will be provided additionally.
- The Homepage (Desktop Version) — The focus lies on the ease of search, simple navigation and verifiable/trustworthy testimonials.
Our goal was to make it easy for anyone to initiate a search, while giving confidence to those who are in doubt. Since LockTrip is a startup, it is common for the average traveler to be skeptical about the validity of the service. This is why we decided to add verifiable user testimonials to the very top of the homepage. All reviews will be clickable and lead to supporting materials, feedback tweets or links within our Telegram. We are also considering to steer away from the orange pallet of the current site, as that color is a bit too vivid and demanding on the eye.
For a full-screen view, please visit : https://adobe.ly/2WUUZuO
You will notice the simplistic top header, which shows the most important components. All other links will be shown as a drop-down upon clicking on the username. The background can be filled with any travel related visual.
- The Search Results Page — The goal here was to add as much information and functionality as possible, without making it too crowded.
The filters on the left side are simple to use and do not capture too much attention. They also offer an important feature, which is the ability to quickly re-visit previous searches (based on past user behavior).
The quick search at the top flows nicely into the interactive results section, consisting of a hybrid listings/map solution. Within the search results, information regarding the cancellation policy as well as the meal type is being shown.
Prices will not be shown to unsigned users. We will be further testing the best practice to organize the price limitation via A/B testing once we deploy the first UI iteration.
For a full screen view, please visit: https://adobe.ly/2Vx1t1G
- The Flights Search Results — Despite the fact that the flights program will remain to be in Alpha for a considerable amount of time, the new UI focuses on intelligent filtering and ease of information flow via tool-tips and a fluid design.
The most relevant information is shown for both departure and return tickets on the front page, surpassing many mainstream competitors in functionality and information density.
For full screen view, please visit: https://adobe.ly/30tMh90
- The user dashboard — The goal here was to narrow down, so that the things that matter most are only one click away from any page.
All upcoming trips will be shown in one place as those are of absolute priority. Users can additionally browse through cancelled and completed trips for their reference. In addition, the Affiliate tab will be added to the top-right, next to the Wallet tab. The current design makes it easy to integrate additional content and sections without causing clutter.
Mobile App Version
You can view the mobile version of all here (recommended)
Alternative Colors — The coloring of the design can easily be modified without causing too much overhead. This is due to the overall “lightness” in the layout. The contestant has also provided an alternative, which involves more vibrant coloring. You can refer to it from the following links:
The Alternative Colors to the above prototype
1. Landing Page → https://adobe.ly/2w8WIRu
2.Flight Search → https://adobe.ly/2M4EHyq
3.Hotel Search → https://adobe.ly/2HEWQxn
4.Signup → https://adobe.ly/2HrLD4D
5. User Dashboard → https://adobe.ly/2JQgZTW
Some other notable picks (Desktop Resolution)
Designer #2 → http://bit.ly/2HCDdpX
Designer #3 → http://bit.ly/2Eh2164
Designer #4 (below)
Hotel Search Result page → http://bit.ly/2Jwbria
Hotel Details page → http://bit.ly/2JvajLM
Flight Search Result page → http://bit.ly/2JPP9Yc
Logged in User Dashboard → http://bit.ly/2JQr2sa
Designer #5 → http://bit.ly/2Vx2PcM
And there were many other entries again with high quality, such as :
We hope that you will like the substantial amount of work that has been done.
LockTrip UI Community Vote
Before you leave, we kindly ask you for your opinion on the presented prototype in order to proceed accordingly.
If you can not vote here, you can do so by opening this link: https://forms.gle/CtAcMRJod2FNRuyM9
Thank you for your feedback.
LockTrip is the first marketplace with 0% commission where you can save on average 20% on your hotel and rental bookings compared to anywhere else. Read how to buy LOC tokens here!
