Hero section and image gallery redesign for the hotel pages
We were asked to redesign the image gallery for the hotel pages of the Premier Inn website, as part of our retainer work. The scope expanded to encompass the whole hero section of the page.
Mid-fidelity wireframes for the Hero banner, and final annotated designs for the image gallery pop-up and slider. This work was completed June 2025, in one week.
In this project I worked as part of a team of three — an experience designer and a senior UI designer. I also collaborated closely with our UX strategist, creative director, and project manager, as well as the engineering team and various stakeholders from the Premier Inn team.
For this particular piece, I explored competitor approaches, then came up with ideas which I wireframed and iterated on based on my team's and client's feedback.
This project taught me how complex gallery grid design can be, especially given that multiple breakpoints and image resolution need to be considered.
I also got better in estimating the time I need to complete a piece of design work, and knowing to ask for feedback early to avoid having to redo large parts of work.
Initially, my team & I started working on the vision for the Hotel pages of the Premier Inn website; we had agreed with the Premier Inn team that it was a better idea to adopt a more strategic approach to design and have a bigger vision that we were working towards, rather than small individual design tickets that resulted in a website that lacked cohesion.
We began by focusing on the Hotel Detail Page (HDP). After an initial collaborative brainstorming session with my two colleagues, I developed a new structure and created low-fidelity wireframes for the page.
Our team agreed on implementing a modular component structure that could:
- Accommodate varying content across different hotels
- Flexibly incorporate any future legal requirements
- Present information thoughtfully to prevent page clutter and excessive length
- Add engaging elements while adhering to brand guidelines
- Address findings from a recent UX audit conducted by another agency
With our team and client happy with the low-fidelity wireframe and structure of the page, we split work between us and started working on more detailed wireframes for the individual HDP sections. Part of my responsibility was the image gallery section of the page.
After getting some inspiration around how other websites were doing image galleries on Mobbin, I started sketching some rough ideas exploring different configurations. I created low-fidelity wireframes from those sketches that I shared with my colleague.
What began as just the image gallery section soon evolved into the entire hero section of the page.
Our team identified additional elements that needed integration, including:
- Award banners for individual hotels
- TripAdvisor ratings
- Hotel highlights
- Location map
I thought that it would be best for all the important sections of the page to be visible and accessible from the hero section — It would offer users the ability to find quickly what they are looking for without having to scroll — so I started working on mid-fidelity wireframes to see how this might look.
After exploration, I presented two design options:
Option A: A "Compact hero banner" incorporating the image gallery, map, and highlights in a unified grid.
Option B: A hero image gallery with an integrated map tile, with highlights displayed as a separate section below.
After my colleague approved these options, I designed layouts for different screen breakpoints to present to our Senior UI designer for final sign off.
When I presented Option A breakpoints to our Creative Director during our biweekly design review, I received feedback that necessitated revisions. In retrospect, seeking this feedback earlier would have prevented repeating work.
Our Senior UI designer and I then refined my designs to create Option C. Following client priorities, we paused further hero banner work to focus on the image gallery popup and slider functionality.
For the image gallery pop up page, I created a design option that included the different image categories with their thumbnails at the top that worked as anchor links to the different category sections at the bottom. When designing the gallery pop up page grid, I wanted to create an immersive experience while balancing the often poor resolution of images and taking into consideration the aspect ratio of the Premier Inn images.
To create some texture and interest on the page the grid would have strips of up to 3 images, the number of which should not be repeating in two consecutive strips.
Finding my initial designs cluttered, I consulted our Senior UI designer who recommended increased margins for larger viewports and smaller category thumbnails. These adjustments created a more spacious, airy feel and after some minor extra tweaks we were both happy with the result.
Next, I designed the image gallery slider. I experimented with different arrow, image number and description placements. Both the popup and slider designs received enthusiastic client feedback, with their only request being to create more interesting presentations for premium and accessible room categories.
I looked for inspiration on Awwwards and experimented with colour, texture and badges. I felt that badges would work best, especially if they had some delightful icon. After sharing different designs with the team, we agreed on moving forward with a rectangular badge. Our client was very pleased with the result and we all felt it fitted well to the style of the brand.
Finally, I updated the files for the developers, making sure that everything was consistent and annotated clearly. The final annotated designs were handed over to the developers' team in June 2025 and are in the process of being implemented.
