Overview
This case study showcases the redesign of a prominent restaurant group based in New Orleans—Creole Cuisine Restaurant Concepts.
The project's mission was to not only showcase the company's deep-rooted culture centered on employee well-being but to also spotlight the diverse portfolio of restaurants under their umbrella. The challenge of these goals lay in revitalizing a dated website that fell short conveying Creole Cuisine's vision and its commitment to fostering a vibrant restaurant community.
This project took place from January 2023 - April 2023.
Roles & Responsibilities
UI/UX Design
- Competitive Analysis
- Stakeholder Interviews
- User Research
- Site Map
- Low Fidelity Wireframes
Visual Design
- Interaction Design
- High Fidelity Page Mockups
- Design System & UI Kit
The UX Challenge
Navigating through the current website posed challenges due to it's outdated content and confusing navigation structure. After initial stakeholder interviews and discussion, I was able to determine what issues stood out the most.
Problems to Solve:
- Difficult to navigate
- Was not effectively serving as a compelling recruitment tool
- The content on the website did not accurately represent the brand
- It was unclear how many and what restaurants were part of the network
- There was not a streamlined experience explaining their passion for the community
The UX Solution
By engaging in collaborative brainstorming sessions with the client and discussing solutions that would help solve the current website's challenges, we were able to define the goals that would make the redesign a success.
Goals
How is Success Measured?
- Increase in new hires/recruitment
- More click throughs to individual restaurant websites
- More gift card purchases
Target Audiences
Primary Audience
Potential Employees
- People looking for a fun atmosphere to work in and love attending events
- Are passionate about community involvement
- Interest in a work environment that encourages support, appreciation and growth
Primary Audience
Food Enthusiasts
- Restaurant owners looking to join the network
- Organizations that keep track of restaurant groups
- Patrons/foodies who love the New Orleans restaurant communities
Navigating the User Journey
In the pursuit of crafting a user-friendly navigation flow, I initiated the process by meticulously analyzing every page of the current website. This involved identifying critical pages and pinpointing chances to streamline content.
Key Takeaways:
- Dropdown links were unnecessary and could easily be folded into the new, streamlined pages with proper headlines.
- I made sure the new navigation links drew immediate attention to the redesign's goals by using straightforward and engaging labels.
Core Features
Below, I've selected three pivotal pages that effectively showcase the solutions crafted to address the project's overarching goals.
Our Restaurants Page
Key Takeaways:
- Wasn’t a full listing, just a few featured ones (but unclear why they were featured)
- Dropdown menu included a couple of restaurant types (like “bottomless mimosas” or “outdoor dining” but was presented in a disorganized manner
Improvements:
- I created a filter system that would help the primary audience (“Food Enthusiasts”) narrow down the kind of restaurant they are looking for.
- A full listing of restaurants are included with an easily identifiable button link to each restaurant (and an external icon to indicate the user was leaving the website).
Gift Cards Page
Key Takeaways:
- The buttons to order gift cards were unflattering and lost in the text.
- Even though the intention was to show what restaurants patrons could purchase gift cards from, the wording and long list of restaurants was confusing and hard to read.
- The page appeared rather uninviting and needed some life and excitement.
Improvements:
- Include a large heading at the top of the page to encourage and excite patrons to purchase a gift card.
- Highlight the gift card card purchasing options with a brief description and corresponding buttons that stand out.
- Include a call to action to make it clear where the gift cards are offered. The button clearly states this and will link back to the restaurant page filtered by participating restaurants.
Community Outreach Page
Key Takeaways:
- Design and content felt uninspiring. The page did not effectively showcase Creole Cuisine's passion for the community.
- The design made it difficult to read the content.
Improvements:
- Created a complete transformation/overhaul of the page.
- Made sure to create a story and passion statement to help achieve Creole Cuisine's goal of showing their love of the community:
- The story starts by including a passion statement and what their main focus areas are for helping the community.
- Show an image slider of examples of Creole Cuisine in the community.
- Include 1-2 featured examples of community outreach.
- A showcase of Creole Cuisine's community partners.
- 3 featured articles from the news page that highlight community events.
The Design Challenge
The client expressed that the website design was outdated and needed a refresh. For the redesign's inception, I was given flexibility to introduce new color palettes and typography while being mindful of the branding elements that were reflected in the logo.
Favored Emotional Responses:
- Excitement around all of the restaurant options in the Creole Cuisine network
- Feeling of connectivity with the community
- Fun, professional, exciting
Design Building Blocks
Below I describe my thought process for creating the foundational design elements, offering a comprehensive view of the decisions and considerations that shaped the visual essence of this project.
Typography
Though not a requirement to include, the client's existing branding consisted of instances of "Avenir Medium" and "Bangla MN Bold". Drawing inspiration from these fonts, I embarked on a selection process that would align with my vision.
- For its resemblance to "Avenir Medium" I opted for "Montserrat" as the body text. Additionally, I felt it had solid legibility at smaller sizes and within paragraph text.
- When it came to heading fonts, I explored "Lora", "Martel" and "Frank Ruhl Libre". I wanted to find a font that not only resembled "Bangla MN Bold" but also displayed professionalism and elegance.
- After careful consideration, I determined that "Lora" not only complemented "Montserrat" most effectively but also achieved an optimal balance of sophistication and readability.
Color Palette
When considering the color palette, I chose to retain the foundational branding colors of black and dark gold as a starting point. The first addition I made was to introduce variations in the forms of grays and lighter gold tints.
However, due to the company's association with food and the client's desire for an energetic and engaging ambience, I felt it was crucial to add vibrancy into the color palette. I opted for Forest Green because I felt it reminded me of leafy greens, freshness and nature.
Shapes
In addition to brightening up the color palette with an earthy green color, I played around with various plant and food shapes in a moodboard with the intention of adding a bit of whimsy to the design.
Photography
Building off of the feeling of nature and whimsy, I played around with another moodboard that included photography that represented beautiful, fresh and appetizing dishes.
Layout Play
I started experimenting with several layout concepts after setting up the basic components of my design vision, including features like buttons, text groupings, and general layout structures.
The Design Solution
Below, I've selected three pivotal pages that effectively embody the final design and showcases the solutions crafted to address the project's overarching goals.
Homepage
The homepage design was the first page to fully express the vision I had been crafting. I wanted to create a first impression that emitted sophistication while maintaining a touch of playfulness.
Key Improvements:
- Typography was carefully considered to guide attention, ensuring headlines captured the eye.
- The layout was kept light and airy, allowing ample space for content to breathe, avoiding overcrowding with excessive text.
- Whimsical shapes and background colors were integrated subtly throughout the page, creating an extra layer of texture and charm to the overall design.
Our Restaurants Page
My primary goal for the restaurant filter page design was to make it truly user friendly and simple to use, as one of the project's success metrics hinged on how easily users interacted with the featured restaurants.
Key Improvements:
- Enhanced filter functionality with subtle but elegant animations for a seamless experience.
- Opted for a horizontal filter at the top of the page instead of a sidebar to provide ample space for restaurant items (I felt this was doable since it was a very simple filter).
- Incorporated iconography to convey restaurant features which provided clarity without overwhelming the component with text.
- Ensured a clear indication that each restaurant component served as a direct link to its individual website, offering users a straightforward navigation path.
Join Our Team Page
The aim of increasing new hires/recruitment through this project's redesign shines through on various pages including the Homepage, Community Outreach page, and the Who We Are page. However, it is the Join Our Team page that serves as the catalyst for driving user action and ultimately realizing this goal.
This is achieved by creating a compelling narrative, supported by exciting visuals and design elements, all working together to guide potential recruits towards taking action.
Here's how it unfolds:
- Introduction: At the top of the page, a large “Apply Now” button provides a direct route for users who are already convinced and eager to apply.
- Answering Key Questions: For those seeking more information, engaging keywords lead to crucial questions: “Why should I join the team?” and “What will I gain?” These initial questions establish what sets Creole Cuisine apart.
- Testimonials: The next section offers compelling evidence of a positive workplace culture from current employees.
- Benefits and Perks: The page goes on to provide specific details users would enjoy. It answers standard questions that prospective employees are always looking for and further entices them to join.
- Cultural Appeal: To seal the deal, an enticing description of the vibrant company culture is included, along with visuals that showcase the fun and energetic atmosphere.
- Taking Action: Finally, the page concludes with another “Apply Now” button at the bottom, providing a convenient opportunity for users to take the next step.
By structuring the page in this manner, a compelling story is told, starting with intrigue and ending with a clear call to action, all supported by engaging visuals and persuasive design elements.
Design System
Despite the relatively small scale of this marketing site, it was important for me to provide the developers with a comprehensive design system. This was to ensure that my vision was faithfully translated into code and set the stage for a successful implementation.
My Philosophy
Designing with Development in Mind
Leveraging my background as a front-end developer, I bring a unique perspective to the design process, anticipating the requirements crucial for developers. My commitment to enhancing this workflow ensures a seamless transition from design to code.
Visual Guidance for Developers
Within my Figma files, I provide comprehensive visual instructions, including:
- A breakdown of foundational elements, component examples and navigation structures.
- Detailed layout considerations for desktop, tablet, and mobile views.
- Direct links to animation examples, which helps the development process and spare developers the need for additional research.
Fine-Tuning Front-End Design
To facilitate a smooth development experience, I meticulously include an extensive array of details, including:
- Color palette organized by a branding tier and a theme tier
- Form elements (including even error messages)
- Typography specifications for various screen sizes
- Interactive features such as links and button hovers
- Text editor elements like horizontal rulers, blockquotes and bullet styles
Conclusion
The goal of this case study was to showcase my passion for attention to detail, where visual aesthetics harmonize with user experience to deliver a compelling digital presence. It also emphasizes the importance of clear design processes and effective communication in ensuring a successful outcome.
With a commitment to client goals and user needs, the end result serves as a prime example of the intricacies of a small but impactful website redesign.