UI/UX, INTERACTION DESIGN | WEBSITE REDESIGN

Reimagining the Heart of the Valley

From an interactive map website to an art exploration website, for the City of San Jose

The Challenge : Revamp the 2018 Website

Heart of the Valley (HoV) is an open-source website that helps community members discover beautiful public art and artists. It allows users to search for local public art such as murals, sculptures, and graffiti, in the Bay Area.

Originally conceptualized and developed in 2018, the HoV website had major usability flaws as an interactive map website. Through this effort and a completely new team, HoV is getting revamped, helping users find art more easily.

MY ROLE

I led the redesign of the desktop website, establishing a new design system, and defining user flow, user experience, and interaction design.

I joined the project team after personas & user stories were established. Much of the challenge for me was about figuring out & communicating the interaction design with stakeholders & other team members, with the limited resources available. I prioritized efficiency and consistency in the process by establishing a design system and pattern library.

I also guided and gave actionable feedback to two designers who worked on the Mobile interface design.

The Solution

PROJECT VISION

Targeting Art Explorers and Art Facilitators, the website is envisioned for the following user needs and product goals:

PRIORITIES FOR FEATURE ENHANCEMENT (MVP)

I joined the project after the user stories were established and MVP was defined, so to help myself understand the design problem, I set out to find out more about each MVP Feature proposed by defining questions for each product goal -

INTRODUCING THE SEARCH FUNCTION

Since the Search function was the most important function of the website, a search page was designed with the following features, to allow the user maximum control in finding what they were looking for.

1. A Search Bar with the ability to search by art, artist, or zip code

2. Filter by Type of Art

3. Grid / List / Map views for Search Results

REDESIGNING THE HOMEPAGE

We went through multiple rounds of discussions regarding the homepage design, creating iterations to understand how to best lead users from the Home Page to the Search Page. The third option shown below was created with a search bar on the home page, to lead to the search page as a primary call to action.

Design Evolution

USER TESTING

View Prototype used for User Testing

The responses from user testing pointed out the following areas of focus for design iteration:

1. Users found the independency of the search function & homepage map confusing

   The HoV website started as an interactive map website. For the initial design tested, both a map and a search function are located on the homepage to allow the user to choose their path forward. The search bar would lead to the search page, which is the primary user flow. However, testing with users made it clear that they found the map on the homepage very confusing, as the homepage map did not react to the Search bar and vice-versa.
   

2. Users pointed out limited navigational cues and accessibility flaws

   The Art Cards did not sufficiently provide cues that more information would be available once a user clicked on them. Additionally, some users pointed out that the ‘Filter’ for Art type on the search page did not sufficiently inform that those were buttons.

DESIGN ITERATION

View Prototype of Iteration

The following design iterations were made based on user feedback":

1. Search Bar is made the primary feature on the homepage

   Due to the high interaction costs of positioning a map on the homepage, the search bar was made the primary and only search feature on the home page. Moreover, considering usability while viewing the website on a mobile screen led us to consider removing the map on the homepage and instead providing a link to the search page map feature. The information architecture is simplified so that all search interactions would lead to the search page.
   

2. Interaction Design is used to create navigational cues, accessibility is improved

   Art type ‘Filters’ are updated for visual contrast and discoverability, and interactivity on hovering over Art Cards was added to provide cues that those were clickable.
   

Interaction Design

LIMITED RESOURCES CALLED FOR A FLEXIBLE ARCHITECTURE

With limited resources, my goal while creating site maps was to be efficient but intuitive for the user, by providing multiple entry points to the Search Page, which is identified as the primary user flow of the revamped HoV website.

Seen below is one such instance where the Search Page Categories, primarily used as Filters, are also used as an entry point from the home page Featured Categories section.

ESTABLISHING A DESIGN SYSTEM

Establishing a new design system meant the team could work more consistently, facilitating collaboration and building consensus. The new design system also helped us rapidly iterate, and make our process more streamlined.

Back to top