Crafting a modern and elegant online experience
CLIENT
SERVICE
DURATION
Project Overview
Pierpont's is a renowned, upscale steakhouse located in the heart of Kansas City, known for its historic charm, exceptional service, and top-tier menu offerings. Situated within the beautifully restored Union Station, Pierpont’s provides an elegant dining experience that combines classic sophistication with modern culinary innovation.
With a rich history and a loyal following, Pierpont’s has long been a destination for both locals and visitors looking for an unforgettable dining experience. The restaurant’s classic yet contemporary atmosphere is a reflection of its commitment to excellence, offering a menu that highlights premium steaks, fresh seafood, and signature cocktails in a refined environment.
The Challenge
The original Pierpont’s website was outdated, neglected, and no longer reflected the high standards of the restaurant. The owners struggled with a site that was difficult to update and maintain, especially when it came to adding new promotions or seasonal offerings. Each edit seemed to degrade the site further, and it no longer aligned with the grandure of the restaurant or the exceptional dining experience it provided. While the owners weren’t exactly sure how they wanted to change things, they knew Pierpont’s deserved a major overhaul—one that was modern, visually compelling, and captured the restaurant’s elegance while offering a more seamless experience for their guests.
Initial Research
Meeting with Business Stakeholders
Before starting the redesign, I visited Pierpont’s to meet with the owners and management team. It was time well spent—not only was I treated to some amazing food, but we also identified main objectives for the new site. Together, we uncovered pain points, concerns and the essential features they desired for the new design. We also explored new revenue opportunities, such as promoting gift cards and showcasing the event spaces—previously kept under wraps unless you happened to notice one of the event space's flyers on your way out.
Main Redesign Objectives:
The new site needs to showcase Pierpont's unique historically preserved architectural and charm.
Highlight it's reputation for premium steak and seafood, ensuring it offers the best in fine dining.
Provide better methods for promoting special events, making it easier to keep customers informed.
Highlight the high-quality, one-of-a-kind menu, that focuses on the culinary artistry in each dish.
Enhance the experience with modern features like online ordering and automated reservations.
Position Pierpont’s as the Kansas City's go-to destination for anniversaries and special occasions.
Revamp the menu’s structure to improve readability and make it easier for users to browse.
Promote gift cards and email sign-ups to boost revenue and grow the customer base.
Conducting Competitive Analysis
To ensure the Pierpont’s redesign aligned with modern standards while showcasing its unique identity, I studied many other similar upscale restaurants, both locally and nationally, to see how they effectively approached how they promoted their brand and drove guest engagement. This included analyzing design aesthetics, online reservation systems, menu presentation, and strategies for highlighting special offerings. These insights helped shape a strategy that would equally position Pierpont’s as a leader in fine dining by addressing these gaps and enhancing their user engagement.
Initial Designs
Establish Site's Look and Feel
When you step into Pierpont's, you're immediately immersed in a space that’s anything but ordinary. Housed in the historic Union Station, the restaurant shares the grandeur of its surroundings—95-foot coffered ceilings crafted from heavy stone, and striking architecture that commands attention at every turn. The building itself is a stunning example of Art Deco, while Pierpont’s interior embraces a more Art Nouveau style. This blend of influences creates a unique atmosphere, which presented an exciting challenge for its branding.
Pierpont’s, however, lacked a defined visual identity—an opportunity for a new and fresh approach. After exploring various concepts, I decided the most effective direction was to draw inspiration from the space itself. The existing architectural beauty—rich marble floors, intricate stonework, and the opulent detailing of Union Station—served as the perfect foundation for the brand.
Instead of overhauling the aesthetic, I chose to complement and amplify what was already working well. Rich, deep colors and subtle art-inspired elements were carefully incorporated throughout the design to enhance the restaurant’s atmosphere while maintaining the elegance and timelessness of the space.
Getting Early Approvals on Initial Designs
To ensure alignment with Pierpont’s vision, I presented my initial design concepts early in the process, providing the team with a clear understanding of the design direction and its connection to the restaurant’s unique environment. I highlighted how the rich color palette, refined typography, and visual elements were chosen to complement the grandeur of Union Station and evoke the restaurant’s Art Nouveau style. This helped ground the design choices in the space itself, showing how they would enhance the overall guest experience.
During the review, we also discussed the site’s structure and how best to organize content for efficient navigation and user engagement. By presenting different options for key touch points such as logo treatments, colors, photography, and layout, I ensured the team had flexibility in their decision-making. This collaborative session allowed us to gather valuable feedback and make informed adjustments, setting the stage for the next phase of refinement.
Prototyping and Testing
Finalizing and Testing Designs
With design exploration complete and initial concepts approved, the process moved smoothly into finalization. I worked page by page, focusing on how to best showcase Pierpont’s offerings, while ensuring the design remained true to the brand and user-friendly. I prefer Figma for visual site design as it quite robust for collaboration, I was able to quickly iterate on smaller design decisions and gather feedback from the team, quickly when needed, ensuring seamless approval for the final visuals.
To expedite the process and avoid any unnecessary development, I created interactive Figma prototypes, which allowed us to refine the user experience and ensure everything functioned and flowed efficiently before coding began. Once the prototypes were finalized, I developed a simple, fully responsive HTML/CSS version of the site. Although the site was later intended to be converted to a CMS version, we agreed it was important to launch in this in simpler form first to allow for real world feedback and adjustments. This approach helped us successfully meet a critical deadline for a major event in Kansas City, which required us to have the site up and running as quickly as possible.
Launching the Website
The Pierpont’s website was launched on schedule, meeting the critical deadline. After extensive testing with prototypes, the site was fully optimized for responsiveness and performance across all devices and browsers. Once live, I began implementing essential SEO enhancements to ensure the site was properly crawled by search engines and performed better than the previous version, which had missed key SEO optimizations. This not only improved visibility but also laid the groundwork for future performance improvements. With everything functioning smoothly, I continued to monitor the site, making real-time adjustments as needed to ensure a seamless user experience.