Case Study:
Fat Nats Eggs Responsive Website
Reimagining a Minnesota-based breakfast diner's website with a focus on enhancing its responsiveness.
Role:
UI Designer
UX Researcher
Prototyping
Branding
Team:
Self directed
Timeline:
80 Hours
(~4 Weeks)
Deliverables:
Mobile & Desktop High-Fidelity Wireframes
Prototypes
Background
Fat Nats, a thriving breakfast restaurant with three distinct locations, faces an issue with its website lacking responsiveness and optimization for both desktop and mobile users.
In my website redesign project, the primary objective was to ensure complete responsiveness and introduce interactive elements, enhancing the user experience.
Research
I dedicated my efforts to comprehensive market research, aiming to analyze and compare local restaurant websites for insights into their success. This research also helped me establish a foundation for the necessary information that needed to be included on the redesigned pages.
I've included an analysis map below, which compares Fat Nats Eggs' website with those of other restaurants and outlines my impressions. The categories with the most positive results influenced the development of my final solution.
As you can see, I had a lot of opinions…
Layout
I relied heavily on my research findings and extensive analysis map as I began drafting a comprehensive sitemap. The sitemap allowed me to determine which pages were essential and which could be consolidated or removed altogether.
In addition, I determined that the website needed to include an on-site menu, rather than just a PDF link. I knew that the client's prices were likely to change over time, and they needed an easy and accurate way to convey that information to their customers.
UI Elements
In developing the style guide and various UI components for the redesign, I aimed to preserve the essence of the original design. To pay homage to the original site, I replicated their color palette and sourced imagery of menu items from Yelp reviews and various online platforms. Drawing inspiration from the sites I extensively researched, I crafted page layouts that reflected the spirit of the brand as closely as possible.
Low Fidelity Wireframes
High Fidelity Wireframes
User Testing
I conducted user testing on my high-fidelity wireframes to identify some areas that needed improvement. Some of the feedback I received included increasing text size to enhance accessibility, consolidating individual location pages into a single page to streamline navigation, and arranging locations in a Z-pattern to maintain consistency with the menu section.
Quotes:
“I would make some of these titles bigger to increase accessibility and unify your design more” - Sam
“I would combine your locations all into one page being the menu items and business hours are the same. You could arrange them in a Z-pattern to mimic your menu section” - Nicole (facilitatior)
Before and After
………..
Landing Page
I focused on condensing the navigation bar to include only the required pages, as well as highlighting the 3 locations on the landing page
Additional Features
………..
One of the biggest pieces to this redesign was adding an in-site menu. I copied over all of the menu items from their existing PDF document and added images to each category.
…………
The <> function allows users to easily scroll through menu categories to find what food they’re craving.
Outcome
This project provided valuable lessons on the importance of selecting the right images to enhance page aesthetics and information. It also allowed me to explore innovative page layouts, which I thoroughly enjoyed. I also loved experimenting with responsive page layouts and how they might change with scale.
Looking ahead, I'm eager to further enhance this project. I aim to experiment with Figma's new wrapping feature within their auto layout section to ensure the pages adapt seamlessly to all devices. Additionally, I'd be interested in exploring various plugins that simplify the creation of highly responsive web pages.
Previous
Spotify Feature Addition
