Valley House Gallery: Website Redesign

Redesign information architecture and layout for an art gallery website to improve usability and branding.

đź“Ś Project scope

  • Timeframe: 16 Weeks
  • My Role: UX Designer
  • Methods: card sorting, site mapping, wireframes, competitive analysis, visual design, prototyping, and usability testing
  • Tools: Miro, Zoom, Figma

Project Overview

Introduction

The Valley House Gallery website highlights its art collection and community. The goal is to improve usability, navigation structure, and modernize the design for a better online experience.

Problem

Valley House Gallery’s exceptional in-person experience is not reflected in their outdated, difficult-to-navigate website, making it challenging for users to browse and explore their art collections online.

goals

  • Improve the website’s information architecture with a new flow and navigation.
  • Modernize the website’s design and overall look.
  • Enhance the user experience for browsing artists and collecting art.

Competitive Analysis

Looking at direct competitors, small art galleries that offered similar services, and indirect competitors, such as more prominent museums like the Dallas Museum of Art, MoMA, and others, were chosen to evaluate their navigation and experiences surrounding art, collection and artists.

Competitive analysis findings

The competitive analysis showed that other art galleries and museums had solutions for navigating between art, artists and their overall collection, but a local gallery “Galleri Urbane” addressed the navigational issues most similar to VHG.

Pages that are most important to have include:

  • Single page that consolidates artists of all types together.
  • Easy navigation between artists and collections for an optimal exploration experience.
  • Artists' CVs and artworks displayed in one unified location.
  • Ability to purchase art directly through the website.
  • Links to exhibits within artist profiles to enhance discoverability.

Card Sorting

Using unmoderated closed card sorting sessions with 9 recruited users and cards containing types of content and pages to be shown on the website, users grouped and categorized them.

Card Sorting Findings

Pages that are most important to have include:

  • Artist Talks Videos make sense to be places in “art & artists”
  • “My collection” didn't really fit into one category well so from this it wa decided to make it its own category
  • “Art work search” made sense to go under the art & artists as a broad category

Sitemapping

Using the insights found from the card sorting and the competitor analysis a new sitemap was creased to reflect how expect the website pages to flow and where to find different types of content.

Low-Fidelity Wireframe

Using the sitemap a low-fidelity wireframe was created to showcase the types of content that will go on the new website.

Design system

The Design System was crafted to capture the Gallery's warm, mid-century modern aesthetic and evoke a sense of awe and wonder, translating that experience into their digital presence.

High-Fidelity Prototype

The website final designs where created to showcase the art that this gallery has in addition to breathing a new life into the old website.

Before and After Designs

Artist Search

Before to search for an artist by name you would have to go to 3 separate category pages to find a static list of names, making these artist profiles highly difficult.

The new design consolidated all the artist profiles into one list, with a category search filter in addition add visual cues to help the user navigate.

Artwork Search

Before, the artwork search feature was very outdated and difficult to navigate. The results were on another page and not easy to use.

The new Artwork search is inviting, allowing several ways to search the gallery, including filters, categories, search by name, search my medium, and more. The results of the search dynamically change on the same page to provide an easier viewing experience.

Artist profile

Before, artist profiles lacked hierarchy and did not have all related content in one place, making it hard to discover information about a particular artist.

After the artist profile, there is now a dynamic set of works in the collection by the particular artist, related artist talks links, CV, news, and a link to buy their art directly or share their profile.

(Main Navigation) Nav bar and Footer

Before, there was no real nav bar; instead, there was a list of links at the bottom of the home page and a light footer with links. 

The new nav bar is at the top of each page based on card sorting from before. In addition, a visual footer helps the user navigate while adding elements of the gallery's brand to create a sense of cohesion.

Task Comparison: Add art to collection and view artist profile

Prototype Demos

Prototype Demo: Collection Experience

Prototype Demo: Artist Profile

Conclusion

This redesign project successfully transformed an outdated website into a visually appealing and user-friendly digital space that reflects the elegance and sophistication of the Valley House Gallery. The new design not only enhances the user experience and navigation but also aligns the website's branding and personality with the gallery's esteemed reputation

Overall Takeaways:

The journey of redesigning the Valley House Gallery website imparted several invaluable lessons:

  • The Power of Simplicity: Usability improvements were achieved by consolidating pages into compact, easy-to-navigate sections.
  • Multiple Viewing Options: Offering various ways to view the art, with or without prices, allows users the freedom to choose a fully immersive experience or a more practical one.

Next Steps

Moving forward, the project will focus on extensive usability testing and A/B testing to refine the user experience further. These efforts aim to identify the most effective design variations for different user segments, ensuring a seamless and engaging digital experience.

My Role
UX Designer
Timeline
October 2023 - May 2024
WEBSITE REDESIGN

Valley House Gallery

My Role
UX Designer
Timeline
August 2022 - December 2022

Overview

Website redesign and information architecture optimization of a local Dallas art gallery.

Introduction

Valley House Gallery, a celebrated Dallas high-end art gallery known for its beautiful physical venue, encountered a significant challenge: its online presence failed to reflect its high-end reputation and provide an immersive, user-friendly experience. This gap between the physical and digital realms underscored the urgent need for a website redesign to make the art collection accessible and engaging for online visitors. The initiative focused on aligning the digital experience with the gallery's esteemed status, leveraging heuristic analysis and competitive benchmarking to identify critical usability issues and opportunities for enhancement.

As the UX Researcher and Designer on this project, I played a crucial role in transforming the gallery's digital interface into an inviting and intuitive platform, effectively bridging the gap between art enthusiasts and the works they seek to explore online. This was accomplished through creating wireframes, site mapping, card sorting, developing a visual design system, and a high-fidelity prototype, all underpinned by extensive user research and usability testing, which led to improved design iterations

Development

Card Sort

hrough four rounds of open card sorting, participants were tasked with categorizing website content. This iterative process led to the development of a user-informed navigation bar, streamlining the site's layout and enhancing user navigation.

Site Map

The insights from card sorting directly informed the website's sitemap.  The site's information architecture was significantly simplified by organizing related topics into distinct pages. This strategic grouping tackled the critical issues of information overload and clutter, which had been major pain points in the original design.

Design Development

The final designs were developed with the main goal of showing the actual content within the high-fidelity prototype. One of the main goals was to incorporate a dark theme into the website to support the techy theme of this start-up. In addition, the accent color purple was used to help tie in the brand and maintain consistency among the various pages.

Wireraming

The wireframing stage involved using Adobe XD to craft layouts for desktop, tablet, and mobile devices. Initial wireframe versions were critiqued, leading to successive iterations that refined the design. These wireframes addressed user concerns regarding information overload and lack of content hierarchy by clearly sectioning and grouping related information, thus facilitating a more intuitive navigation experience.

Final Designs

High-Fidelity Prototype

The final design phase brought the Valley House Gallery's vibrant and sophisticated essence into the digital realm. A carefully selected color palette and elegant typography mirrored the gallery's physical ambiance, offering a digital experience that speaks to the quality of art and curation the gallery is known for. The design strategy focused on showcasing the art, reducing text-heavy pages to let the visuals dominate the conversation.

Usability Testing and Solution Implementation (1/2)

Usability testing on the prototype highlighted a critical issue: a lack of navigational consistency and cues.To address this, enhancements were made to improve user orientation by integrating page headers and adjusting the navigation bar's color state to reflect the current page, reinforcing user choices.

Usability Testing and Solution Implementation (2/2)

Another identified issue was the "My Favorites" page, which lacked navigational clarity and felt too similar to other pages, confusing users. The revised design introduced a minimalist approach, focusing solely on user-selected artworks and a clear path to browsing or adding items to the cart.

Next Steps

Moving forward, the project will focus on extensive usability testing and A/B testing to refine the user experience further. These efforts aim to identify the most effective design variations for different user segments, ensuring a seamless and engaging digital experience.

Impact:

This redesign project successfully transformed an outdated website into a visually appealing and user-friendly digital space that reflects the elegance and sophistication of the Valley House Gallery. The new design not only enhances the user experience but also aligns the website's branding and personality with the gallery's esteemed reputation

Overall Takeaways:

The journey of redesigning the Valley House Gallery website imparted several invaluable lessons:

Embrace Iterative Development

The project's success was significantly bolstered by an iterative approach, allowing for constant refinement based on user input. This methodology is crucial for enhancing usability and achieving design excellence.

The Power of Simplicity

Simplifying the site's structure and emphasizing visual content over text dramatically improved user engagement. This approach reaffirmed the effectiveness of minimalist design principles in facilitating better navigation and understanding.

Navigation Clarity Enhances User Confidence

The implementation of consistent and intuitive navigation cues was a key factor in improving user orientation within the website, underscoring the importance of clear and coherent navigation in user experience design.

Cases
Explore More Projects
WEBSITE REDESIGN
Valley House Gallery
UX RESEARCH AND DESIGN
Civic Engagement App
UX DESIGN
TillerXR Branding and Website Redesign

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

View Case
UX Design
TillerXR Branding and Website Redesign

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

View Case
UX Research
TillerXR User Research

Oliver Jack Myers

Have a project in mind?

Get in touch
LinkedIn
Email