Artist Next Door
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.
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.
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.
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.
Roles, States, and Properties
CREATED FOR INM401 Information Architecture (PRD1 A 2020/21) AS PART OF MSC HCID AT CITY, UNIVERSITY OF LONDON AND AWARDED A DISTINCTION.