Website Redesign for the Coral Gables Museum
Before
Outdated layout, low contrast, and lack of visual hierarchy
After
Engaging visual design, clear call-to-action, and improved branding alignment
The Journey from Concept to Creation
1
Ideation & Research
2
Design & Prototyping
3
Development & Testing
Comprehensive Case Study
In addition to performance optimizations, we implemented responsive layouts, semantic HTML, and accessibility improvements to ensure a smooth experience for all users.
Sketching the Layout
Initial hand sketches explored layout hierarchy, key sections, and user flow.
Refining in Figma
Translating hand sketches into digital wireframes allowed for refined spacing, alignment, and early prototyping in Figma.
Initial wireframe and layout concept with placeholder text and imagery. This version focused on establishing the structure, hierarchy, and overall design direction before real content was available.
Final mockup incorporating real text and imagery. This iteration refined the layout for better readability and visual impact, bringing the design closer to its live implementation.
Top User-Facing Features:
- Custom mega menu for top-level navigation, improving access to museum programs, support opportunities, and community involvement
- Modernized brand palette and typography to align with the museum’s tone
- Teaser-driven layout for exhibitions, events, and programs to promote user engagement
- Filterable portfolio-style grid to improve discoverability and user control
- Interactive venue map showcasing rentable spaces with visual highlights
- Flexible CMS framework to support future growth and calendar integrations
- Modular CMS components enabling in-house content management
- ADA-compliant design ensuring accessibility for all users
Design Strategy
UX Decisions & Layout Choices
Expanded mega menu design prioritizes engagement paths such as membership, volunteering, and donations—key pillars of the museum’s mission.
Exhibitions landing page layout
A modular, filterable grid organizes exhibitions by status—Current, Upcoming, Online, and Past—allowing users to browse intuitively and explore content on their own terms.
Venue rentals map
An interactive module highlights rentable museum spaces, helping visitors and event planners explore options visually.
Upcoming events are showcased through a teaser carousel, encouraging exploration and timely attendance.
The design process began with a review of modern museum websites to gather inspiration and identify patterns that support engaging user experiences. We focused on visual storytelling, intuitive navigation, and strategies that balance cultural richness with contemporary design principles.
Drawing from this research, we developed a refined layout system that prioritized clarity, visual hierarchy, and responsive flexibility. Each decision was grounded in accessibility best practices and user-centered thinking.
Our workflow included close collaboration with the client to ensure alignment with their content needs and internal workflows. We implemented modular content sections that could grow with the museum, along with teaser-driven structures to spotlight exhibits, events, and programs.
The final design combined thoughtful UX strategy with a modernized aesthetic—balancing historical sophistication with a clean, mobile-optimized interface designed for ease of use across all audiences.
Execution Details
The Final Product
The redesigned Coral Gables Museum website delivers a seamless experience across desktop, tablet, and mobile devices. With a refined layout, intuitive navigation, and optimized load performance, the final product reflects both the museum’s cultural richness and its future-forward vision.
Accessibility remained a top priority throughout development, resulting in a fully ADA-compliant site built on semantic HTML with lazy-loading images and clear visual hierarchy.
Whether visitors are browsing exhibitions, planning a visit, or exploring upcoming events, the new site empowers them to engage easily from any device.
Want to explore the live site?
- Visit Coral Gables Museum Website
Note: Design may have changed since original delivery.
These highlights reflect the most visible and impactful features users experience across the new site.
Responsive Design
Intuitive Navigation
Our design prioritizes user-friendly navigation, making it easy for users to find the information they need quickly and efficiently.
Fast Load Times
Optimized for speed, the website and app load quickly, reducing wait times and enhancing user satisfaction.
Accessibility Compliance
Designed with accessibility in mind, the project adheres to WCAG standards, ensuring inclusivity for all users.
Modern Aesthetic
The minimalist design with ample white space and dark text creates a modern and professional look.
Modular CMS Structure
Custom-built content blocks allow museum staff to easily manage and update exhibitions, events, and program pages without external help.