%201.svg)
UX/UI DESIGN
UX/UI DESIGN
Dromoland Castle - Homepage Redesign
My Role
UI/UX Designer
Timeline
Sep 2023-Sep 2024
Introduction
While gathering inspiration for the Dubarry of Ireland website redesign project, I reviewed the Dromoland Castle website. Known for its values of heritage, luxury, and prestige, I expected the site to reflect these values but found it lacking. This motivated me to take on a redesign as a portfolio passion project.
Desktop prototype of the redesigned homepage can be found here
Mobile prototype of the redesigned homepage can be found here
Initial Thoughts on the Current Website
- Branding: Crown logo effectively conveys heritage and luxury. Serif headings and sans-serif body text balance elegance and readability.
- Colour Palette: Too many colours, with dark grey feeling out of place; doesn’t fully represent the brand's identity.
- Scrolling Animation: Animation creates friction by causing users to get "stuck" on sections; potentially tiring for users seeking information.
- Spacing: Lower page sections lack white space; full-width banners could benefit from padding for a more sophisticated look. The lack of white space can sometimes overwhelm users.
%201.png)
Mock-up of an instagram advertisement
Mock-up of a hero image for Shannon Airport blog post
An example of a graphic created for Twitter to promote an upcoming webinar.
Screenshot of Dromoland Castle redesign including hero section
Screenshot of the Dubarry of Ireland product page before the redesign
The Redesign Strategy and Layout
- Layout: Desktop uses a 12-column grid with 110px side margins and a 20px gutter; mobile version features a 2-column layout with 20px margins.
- Colour Scheme: Soft off-white (#FBFAFA) as base, dark grey (#3D3B3C) for headings, lighter grey for body text. Gold (#AF873B) accents for call-to-action buttons to match Dromoland Castle logo.
- Accessibility: Colours adhere to Web Content Accessibility Guidelines, meeting AA standards for contrast.
Menu Design
- Structure: Secondary menu for less critical links (Gift Vouchers, Store, phone contact) above main menu to avoid clutter
- Navigation Style: Main menu simplified with reduced items and “Book Now” button for quick access, in contrast to the current menu hidden behind a slideout. The Slide out menu means users have to click more to get to information instead of the links being straight in front of them as is the case with most other sites. Logo repositioned for consistency.
- Appearance on Scroll: Transparent background on initial load, shifts to white upon scrolling to improve contrast between text and background.
Screenshot of Dromoland Castle redesign including hero section
Initial concept for the redesigned product page that I designed
What’s the Occasion Section
- Compact Display: Carousel format showcases events and amenities while keeping the page length manageable and uncluttered.
Dining at Dromoland Section
- Dedicated Restaurant Page: Link directs users to a detailed comparison of all four restaurants, helping users decide based on cuisine and location. Listing all restaurants in detail on the homepage might overwhelm users.
The newly designed reviews that I created, which we are currently in the process of integrating into the site.
Based on the feedback gathered from users during the second round of usability testing, we decided to implement the following changes. However, we are still in the process of addressing some of these issues:
- Add the product technology logo to product cards for products that feature specific technologies.
- Rewrite the text on product cards appearing in product recommendation blocks or on the collection page to highlight key product USPs, such as whether the product is waterproof, breathable, windproof, etc.
- Add tags to product cards with product callouts such as "Waterproof," "Breathable," etc.
- Add tags to Mega Menu items to distinguish between Country Boots (Waterproof) and Country Lifestyle Boots (Not Waterproof).
- Switch to a one-page checkout.
- Offer better filtering options on the collection pages such as improved price filtering and other possible filtering options as outlined by Kate Moran of Nielsen Norman(Moran, 2018).
- Add a sticky "Checkout" button on the mobile cart page.
Example of a collection page featuring 'Adspots' and the GORE-TEX logo, added to highlight the waterproofness of Dubarry’s bestselling leather boots with GORE-TEX lining.
An example of a looping video created for television screens within each of the 7PSD department based around the globe.
Mock-up of an twitter card with new branding
Mock-up of display advertisement for google ads
Hero Section Design
- Focus on Booking: Positioned booking system prominently above the fold to streamline reservations.
- Visual Design: Background includes images of grand rooms with a subtle overlay for text contrast. Retained five-star symbol to emphasise the luxuriousness of the castle between headline and subheadline.
About the Castle Section
- Streamlined Content: Reduced text to essential information, with a “Learn More” link for further engagement.
- Imagery: A visually rich image grid to convey the castle's charm and historical richness.
Choose the Perfect Room Section
- User-Friendly Layout: Removed hover-based text display to ensure all room details are visible immediately. Hiding content behind hover objects gives way to a higher risk of users not seeing this content at all.
- Detailed Pages: Each room type links to a dedicated page with complete descriptions, helping users make informed choices.
.svg)
