SEARCH PAGE
REDESIGN
My work
.png)
Unfortunately, we launch the new design but I didn't have enough time to evaluate the performance because I had to jump to another project in another team. However, there are a few learning that I got after finishing this project:
-
The search page is more about features and navigation than visual design.
-
Small improvements can make a huge impact on navigation, from setting auto-loadings to displaying more images on hotel card details, every micro change increases user experience.
-
Certain things don't need to be tested. Take the search on map functionality as an example, we already knew that our customers like to navigate on the map because we have that on other pages and they use it a lot and benchmarking confirmed that this group of users is used to using as well, but to search for offers.
Final thoughts
Problem statement
This website consists of basically 7 pages and at that time, all of them were built and updated following the new design system, only the Search Result Page was missing to update the designs. In this project, I was responsible for doing that, and also suggesting new features to improve the user experience.
Project goal
Evaluate current scenario
Analyze how the page is currently performing to improve and fix errors.
Analyze competitors
Map what the competitors do differently to study possible new features.
Define UX improvements
Understand what needs to be improved on the page usability.
Present new design
To decide on the final design, the entire team needs to be aligned, so we can develop 100% of what was planned.
SUMMARY
Project
eCommerce responsive website
Role
Product Designer
Skills
Data analysis, competitors benchmark,
technical requirements, wireframes, etc.
Tools
Google Analytics, Hotjar, Baymard, Figma
Target market
Portugal, Spain, Italy and Brazil
Process
1. Collecting & analyzing data
First thing first, I start collecting and analyzing available data to understand how the current page is performing, to get insights about user behavior, and to list the main changes and updates regarding usability.
2. Studying competitors
This part is the most interesting to do because when you look at what the competitors are doing, you kind see what is important for each product. Some prioritize map navigation, while others prefer to highlight rewards/promotions, etc.
3. Technical requirements
For the search page, is important to understand technical limitations to think of smart but effective solutions and features. I had a meeting with the Tech Lead to discuss our limitations, in order to design and suggest improvements.
4. Structuring with wireframe
Halfway done, now that I have user data, business requirements, and competitors overview is time to look at UX improvements. I read a bunch of Baymard articles and together with all studies made so far, I started to structure the wireframes.
5. Gathering team's feedback
After finishing the wireframes, I gather the team to analyze together what has been done so far. Getting their feedback and keeping them aligned about what I'm doing is important to build a healthy and successful product.
6. Designing final screens
When all teams are aligned and agree with the final approach, I jump to designing the final screens to finally start the development phase. As our product is a responsive website, I created all device versions on Figma.
7. Handovering design assets
The next phase after finishing the designs is to handover the entire project to the development team. This is an important part, because not creating good documentation, brings friction to the future development of the product.
8. UX review
The last phase before launching the product live is to review what was built by the development team and to confirm that the product is according to what was designed..
Final UI designs
Design improvements
NEW UI
Was implemented the new UI, with a fresh and modern style, following our design system and brand guidelines.
MORE FILTER OPTIONS
As discovered during competitors' research, offering more filter options is a must and we included a few more to it, like "popular filters", "nearby locations", etc.
SEARCH ON MAP
An important feature implemented was the "search on map". All competitors have, and our users proved to like using maps.
NEW HOTEL CARD
The new hotel card includes not only a new UI, but also:
- New gallery view mode
- New "user review" UI
- Option to add to favorite
- Special offers/promotions highlighted
- etc
