Northern Pines

To ensure optimal navigation of the interactive demo provided below, follow these steps:

  • Click on the expansion arrows located in the upper right corner of the window to enlarge the display.

  • Within the enlarged web frame, click anywhere to activate interactive elements. These elements will be identified by a distinctive blue highlighting box.

  • Explore the highlighted areas to access interactive features and functionalities seamlessly.

Northern Pines is a website I wanted to work on; after conducting multiple surveys, card sorting activities, and field tests, it was brought to my attention that a few things needed to be changed in order for users to be able to navigate the website with ease as well as to increase trust with the user.

Updates/changes based on feedback from users:

  • Navigation

  • Color

  • Fonts

  • Content hierarchy/Layout

  • Images

Navigation:

Analysis of user behavior and feedback from card sorting exercises highlighted inconsistencies in content organization. To rectify this, the navigation structure was redefined, aligning closely with user expectations. Menu categories were refined based on user preferences, ensuring intuitive access to key sections such as Menu, Info, Contact, and Account.

Color:

User dissatisfaction with the existing color scheme prompted a strategic overhaul. By selecting a richer, more inviting color palette, including a bolder green and Desert Marigold yellow for enhanced accessibility and visual appeal, the redesigned interface aimed to evoke a more favorable user response. Inspiration drawn from Flagstaff's emblem colors provided a cohesive thematic link, reinforcing brand identity.

Flagstaffs emblem

Flagstaff’s Emblem

Fonts:

User concerns regarding text legibility prompted a thorough reassessment of typography choices. Open Sans was selected for its clarity and versatility, offering improved readability across various screen sizes. Complemented by David Libre for headers, the new font pairing maintained consistency while elevating the website's visual sophistication.

Content hierarchy/Layout:

Building upon insights into user browsing behavior, the layout was reconfigured to optimize content accessibility and streamline information retrieval. Aligning with established reading patterns, the redesigned layout employed left alignment to facilitate easier content scanning. Moreover, essential information such as hours and location were prominently featured within the homepage hero image, addressing user expectations and reducing navigation friction.

Images:

Addressing user feedback regarding uninspiring visuals, the redesign prioritized high-quality imagery to showcase Northern Pines' culinary offerings. By featuring authentic, appetizing photographs that accurately represented menu items, the redesigned website aimed to enhance user engagement and stimulate interest. User-generated images sourced from Yelp reviews added a layer of authenticity, fostering trust and transparency.

Overall Takeaways:

As a redesign endeavor, the primary objective was to revitalize Northern Pines' online presence while preserving its core identity. By integrating user-centric design principles and leveraging insights from user feedback, the redesigned website aspires to deliver an enhanced user experience that resonates with both existing patrons and prospective visitors. Through meticulous attention to detail and a commitment to user satisfaction, the redesign seeks to reinforce Northern Pines' position as a destination of choice for quality dining experiences."

This version emphasizes the iterative nature of the redesign process, showcasing how user feedback informed strategic decisions to elevate the website's overall effectiveness and user experience.

Pictured left: original Northern Pines website. Pictured middle and right: Northern Pines redesign.

Next
Next

Karen’s Flowers