Artist Next Door

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.

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.

Important Regions

Important regions of Home page.
Artist Next Door logo, search, cart, account, and navigation are in the header (ARIA role=banner). Navigation is marked as aria-label=main navigation and footer navigation. The content is the main region. The ARIA role of the footer is content info.

Focus Order

Focus order of home page
1. Skip to main content (hidden link)
2. Artist next door logo
3. Search Artist Next Door
4. Sign in
5. Cart
6. Discover artists
7. Shop art
8. My collection
9. About us
10. Discover local artists, shop one of a kind art, and invest in your community
11. Click on your state to find artists near you or search for your location
12. Enter location text input
13. Use my current location link
14. Within 50 miles drop down 
15. Go button
16. Interactive United States map
17. Most viewed artists nationwide
18. See more top artists link
19 through 28: artist names, medium, and locations. 
29. Arrow button
30. Why support local artists button
31. Showcase your artwork button
Example of focus order of drop down of global navigation.
1. Discover Artists
2. Artists Near me
3. most viewed nationwide
4. by medium
5. view all

Roles, States, and Properties

For each item on the home page, assigns role, behavior, accessible name, and ARIA states and properties where applicable.

CREATED FOR INM401 Information Architecture (PRD1 A 2020/21) AS PART OF MSC HCID AT CITY, UNIVERSITY OF LONDON AND AWARDED A DISTINCTION.

More projects:

Portfolio

%d bloggers like this: