Who am I?
Where am I?
Where am I going?

National Icons

---

Book

---

Chapter Pictograms

---

Re-Design

---

Layout

---

Testing

---

• Client: Comatfilters
• Service: UX/UI

Close

User research & interviews

---

I collaborated with content managers to understand how they create the articles and how they get data, the dev team support me to understand better the technology behind and with my team we found the best solution for that project.

The simple test is helpful to understand better which are the main common issues of the service and which are the areas to work for the usability, UX and UI improvements.

Ideas & improvement

---

User interaction & site map

---

I destructured the entire website to analyse the user interaction, how they walk through the different pages and how the pages are linked together.

The new site map allowed us to find the real painful points and focus our efforts on those.

Users workflow & wireframe

---

The user workflow is important to understand if the project is going in the right direction and to study how the improvement works.

Final output & presentation to the stakeholders and product owners

---

The result is the new concept of the destination page and the new experience for the travelers.

Method

---

The method that I followed is made by four simple steps:

User research: interview & user story

---

decided to test trivago.com platform on four different potential customers, leaving them to be free to browse through the service. I examined their behavior using the list section and the map section. On the map section I tried get as much as possible information ask them to find the hotel suitable for their travel and book it. I did the test three time each person to understand the different user-flow stages and if they are able to use lots of Trivago map features. I asked them if they encountered any difficulties in using the map, what could be heplful to improve the user-friendly experience.

The simple test were helpful to understand better which are the main common issues of the service and which are the areas to work for the usability, UX and UI improvments.

General main painful points:
Label colours, Map graphic style, Hierarchy of the information, Too much step between the listing page and map, Information about the travel time between the differnt attraction/service, Confusion between the company icons and standard google map icons, Keep under control the selected filtes.

Competitors research

---

I did an inspiration research identifying the main trivago competitors and I focused my work on the options that the competiors tried to work out on my same painful points.

Analysis of the platform

---

I studied the characteristics of the map and which elements can help tourists when they would choose a hotel for their trip. I have identified the main issue, unnecessary information and design problems that divert customers' attention. This analysis comes from the test results, the competitior analysis and my personal design assessment.

Sketch & idea

---

As a creative and UX/UI designer I started to get ideas using pen and paper. I can understand how should the project appear defining the main guide style line, the user flow and the first layout to follow during the design stage.

Design process

---

During the design process I worked out on the User Experience and User Interface solution for the painful points came out the research stage. I focused to create a responsive layout for wide and mobile screens and cohesive visual language. The target is to improve the usability and accessibility of the hotel information studing the interaction between the customers and the platform. I changeed the position of the elements, adding the important information for the users and ruling out the unnecessary one.

Mobile version

---

The best practice is to develop the project for mobile users.

Header filter

---

The current link to change the destination, travel dates and the number of the guests is well hide and while I was testing the platform I noticed that the potential stakeholder found very hard the right link to do it. Most of the time they came back to the listing page. I thought to put on the header the destination search bar, check-in check-out input and the number of the guest. The customers can change the main travel details in one step. This solution resolves the problem to open an hide link, helping the users to change their destination or travel dates or the number of guests. In some case it is possible to change the header for a special section of the website but it is also a hard challenge and change for entire user experience and user interface of the Trivago platforms.

Technology research

---

Goole Maps APIs is a google support for Designer and Developpers which offers the full documentation and tutoriar to customise the google map. It is possible to create the own personal map by coding and use it for different application, platform, website. I created an essencial and simple map for this project using Google Maps APIs Styling Wizard, a quick way to generate a JSON styling object.

User research & focus group

---

As Ux design project I was focus on the users and how their experience is receiving the welcome email and uderstand their feeling.

Marketing,Sketch & Userflow research

---

I did a marketing research to understand how the trivago compatitors use their email to engage their users. I underlined the peculiarities of each email useful for trivago email campain. We studied tone of communication, the colours scheme, and the copy text to understand what the best soution could be.

Mock-up & copytext length

---

The first mock-up gave us the better understanding of the email content and how the user will be able to visualise the email. The copy text length is important to have the right balance in between the images, colours and pictures.

Final version

---

The final version of the email is for laptop and mobile.

Technology & code

---

The code for the email is pure HTML and CSS. The email was tested for different email provider and devices using emailonacid.com

Site map & interaction

---

I created an site map to understand the interaction between the pages and how the users can navigate through the platform.

Mock-up of individual features

---

In collaboration with the product owners and tech team we decided to focus our effort on individual features instead to change radically all platform. In this way we could manage the time, where we come from and where we arrive for any task.

Navbar & filter

Create new project form

User flow of the attachment section

User flow of the comment section

Research plan

---

The site got users to product pages (from the home page) easily and smoothly, across all devices. Images were well received, particularly full kitchen images. Whilst we have some improvements to the checkout process, it generally worked well. The KDW site received good first impressions on the home page – our selling points were noticed a lot (22y, 10,000 doors a month, next day delivery on stock), “bright”, “friendly”. We didn’t really see too many struggles with filtering, or the number of results on listings pages. It contains the findings and recommendations from the usability research conducted on 6 participants on 24th Oct 2018.

Product page: confirming a price

---

Ideally, we need to deal with price variables / questions one at a time. If we do, we have more scope to add clarity, and to remove ambiguity around price questions. Also, by dealing with these questions one at a time, we can also deal with any user anxiety one at a time.

We should use one main CTA, which indicates to users where to get prices and check sizes. This could anchor users to the start of a ‘mini-quote’ process (and maybe shadow the rest of the page to remove distraction):

There is a bit of an ‘anxiety trade off’ here – asking these one by one does help focus users and remove distraction, but some users may be worried about how many questions there are before they can see a price. Showing all questions at once might be too intimidating for users:

Product page: secondary CTAs

---

Plan & commit to CRO for 2019

---

Improvement of the usability and updated version

---

The ux design work is driven by the user, technology and style research whitch have to be in line with the requirements and the style.

Start the project using paper and pen allows me to understand how the page itself could be, the elements that I shoud use the space between the elements and the different sections of the page.

Wireframes of the freatures

---

Add to quote

---

Edit item

---

Mockup for desktop

---

Doors and drowers front

Cornice, pelmet, plinth and corner posts

Mockup for mobile

---

Pop-up video