Artist Next Door

Objective

I love buying gifts for friends and family from local artists – their art is unique and it’s good to support creative people in my community. When the coronavirus pandemic hit, art fairs and craft markets were harder to come by. Etsy has lots of art by small artists, but I felt the loss of connection with local artists and missed hearing the story behind the art. I aimed to design the information architecture of a website that enables people to discover, connect with, and buy art from small artists in their communities. I consider web accessibility guidelines (WCAG 2.1) throughout the process to ensure Artist Next Door will enable everyone to support local artists.

A. Domain Model

I interviewed two domain experts – a retired art teacher who creates her own art, mainly collages and prints, and a young amateur artist who paints as a hobby – with the objective of understanding the scope of the visual art domain. I approached the interviews with curiosity on how and why these artists do what they do and how art fits into their lives both as artists and as consumers of art.

Web of nodes showing entities and examples branching off of 'Visual art' domain. Important entities are Artists, Consumers, Art Forms, and Markets. Other entities are Galleries, Art Classes, Portfolios (Examples: studios and websites), Workspaces, Materials (Examples: Paint and clay), Attributes (Examples: Color and dimensions), and Content (Examples: Abstract and Cultural).

B. Sitemap

Hierarchical sitemap showing utility navigation, global navigation, and pages. Utility navigation includes Global search, Cart, and My account. Global navigation: 1.0 Discover Artists, 1.1 View All, 1.2 Most Viewed Nationwide, 1.3 Artists Near Me, 1.4 By Medium, Database Artist pages. 2.0 Shop Art, 2.1 View All, 2.2 Art Near Me, 2.3 By Category, Database artwork pages. 3.0 My Collection, When logged in: 3.1 My Starred Artists, 3.2 My Starred Artwork. 4.0 About Us, 4.1 Why support local artists, 4.2 Showcase your artwork, 4.3 contact us.

In an open card sort, most users separated content related to artwork from content related to artists, resulting in two major navigation paths: Discover Artists (1.0) and Shop Art (2.0). Users can access the content pages in more than one way, as shown by the second-level pages in the database structure in the sitemap (1.1-1.4; 2.1-2.3), fed by databases of artists and artworks respectively. Artist and artwork content pages have a consistent structure. One artist page links to many artwork pages and vice versa, as shown by the key cross link.

Navigation and page labels are intended to meet users’ mental models. I conducted a tree test to evaluate the organization and labelling of the navigation. Users easily found an artist’s page but took multiple routes in shopping by specific art forms. While artists used the term “art forms” in the expert interviews, users were more familiar with labels such as “categories”. I chose to use By Category (2.3) to aid in clarity and familiarity for users.

C. User Journey

The user’s goal is to find an artist local to where they live who creates sculptures made out of recycled materials.

Flowchart begins at Home page. First set of decisions are: Interact with Artists Near Me map on Home page, hover over Discover Artists to select a gallery page from the drop down, type 'recycled materials' into the global search bar, or select a gallery page from the Shop Art drop down. Flowchart continues into results pages, filtering or browsing options. User journey ends on an Artist page. Common path taken is: Select Artists Near Me from Discover Artists drop down menu, view artists, filter by location and medium, view filtered artists, click an artist's cover image, view artist page to determine if they make sculptures out of recycled materials.

The path highlighted in yellow shows the path most often taken by users when given this task in the tree test. Common feedback from the tree test was that users wanted search and filter functionality to complete this task, as opposed to being limited to using only the global navigation options. This feedback helped to build out the alternate routes and iterative filtering shown in the user journey.

D. Wireframes

I created wireframes for four key pages from the user journey to show what navigation, content, and functionality are available on the site and how they will be organized. I conducted usability testing to determine how these users might navigate the site, setting tasks focused on finding important content or functionality. While wireframes typically do not show styles, I chose to add minimal color, typographical styling and differentiation between artist profile pictures and images of artwork to help my participants visualize what the site might look like. I observed which elements were easily understood and which caused difficulties for users, making changes to labelling, faceted navigation, content prioritization, and other elements accordingly.

"Search results for recycled materials". 353 results. Enlarged search bar with text "recycled materials". Option to refine by location. Artists heading with 42 results. Showing 5 artists with a button to view more and filter. Artwork heading with 311 results. Showing 5 artworks with button to view more and filter. People also search for a selection of other terms shown as buttons. — D1: Home

Annotating for Accessibility

The following annotations communicate accessibility requirements – regions, focus order, and ARIA roles, states, and properties – across teams. The Home page is used as an example.