Introduction
Arket: Learn Your Lore is an art history app whose purpose is to connect works of art with the supplies used to create it. By browsing a specific art piece, viewers can see a list of what went into creating it. Clicking on one of these materials will bring up a page showing the cultural, economic, and regional impact as well as a list of art pieces on the app that use this material. On both art piece and material piece there is a segment for education, a way to add to a favorites list, and a way to organize the list. Future iterations of the app will include an online shop for environmentally friendly-gathered materials and an educator portal.
My personal background includes work at living history sites, the National Park Service, museums, the wide world of publishing, fine art, education, human resources, and retail. I've listened to educators literally break down crying over education software malfunctioning and a general lack of resources.
This project was assigned through Google's Coursera UX certificate program and was my first experience working in Figma. I've chosen to use this project as my "learning project", the assignment I go back to each time I learn something new in Figma or when I want to experiment with a new design concept. As a result this project may not represent real-world constraints, but I hope you are able to see the joy I took in ideating and developing this concept.
Why I Care About This Story
Therefore, I designed an app that...
Project Details
Problem
Visiting cultural institutions can be intimidating to people, are not always accessibility friendly, Many working adults and full-time students don’t have time to travel to and visit art galleries and museums.
Lack of readily available information for people interested on specific pieces published by verified sources Research on individual art pieces tends to be locked behind scholarly journals and other paid databases
Goal
Increase access for the public to fine art and provide an educational tool and database. The majority of students and educators do not have disposable income to use on art or scholarly literature.
Impact
This tool has not been used in the real world, however it has been tested for usability and accessibility including in a school context.
Key Competitors & Inspiration
WebsiteExpansive knowledge database but unclear authorship
WebsiteInformation on pieces given by artist. Interactive experience.
WebsitePurchasable art organized into collections
Empathy
"Being able-bodied is a temporary condition."
- Bookstore Customer
User-centered design philosophy requires designing with accessibility first. Age is inevitable, and accessible designs welcome a much larger user base, improving the bottom line. This type of design leads to more usable products that require fewer bone-level updates and decrease the likelihood of class action lawsuits.
Accessibility Highlights
Motion
A dropdown menu in settings allows the user to choose their preferred language. Primary use of images and icons is designed to help navigate for users for whom reading is difficult.
Vision
Settings include a dark mode, light mode, and text size changes.
Language
Many different ways to navigate the app including multiple types of movement allow for a range of physical abilities
Closed
Captioning
Many different ways to navigate the app including multiple types of movement allow for a range of physical abilities
"You don't know who these kids will turn out to be someday, so your impact matters today."
Arwen Connolly is a high school teacher who needs to see specific information about paintings because connecting the information
with her art history class.
To give real-world context to what she is teaching in the classroom. To teach her students the importance of respecting other cultures while learning about global history. To be up-to-date with ways for students to learn, so using technology in addition to outside experiences is important to her.
Communicating nuanced information to her diverse group of multiethnic, multilingual students. Some of her students are hearing, vision, or other ability impaired, and might not be able to read. Any software or app she assigns needs to be accessible. Any technology she is using must be intuitive for teenagers.
"What homework, miss?"
Felicia has a history assignment coming up in which she needs to present the impact of colonization on a particular culture during a specific year. As a knitter she wants to focus on the fiber arts and dyes of the group she is researching.
Her mother and grandmother regularly share their family histories around the dinner table. In that spirit, Felicia wants to show how an impact can be multigenerational, but also celebrate strides made today.
Information is abundant but unreliable and often comes with an agenda.
"I want to give people the opportunity to see the beautiful things we have in the world while protecting the place those things come from."
Jules Pierre is a professional photographer who wants to give historic context to materials by photographing them in their unharvested state in nature.
Jules Pierre is a professional photographer who wants to give historic context to materials by photographing them in their unharvested state in nature.
Jules Pierre is a professional photographer who wants to give historic context to materials by photographing them in their unharvested state in nature.
"Environmental justice matters for everyone. I hope in some tiny way every stitch I sew makes the world a little better."
TabBee is a fiber artist who travels the world going to different conventions to display their designs and find new clients.
To learn more about the cultural and environmental impact of the materials they use to design their costumes.
As a person with ADHD, they tend to fall down rabbit holes and lose information. They want a single place where they can both research art and save information for later.
Arwen Connolly: Sample User Journey
Find special accounts for teachers
Add education to search tags
Add multiple ways to share
Ideation
The Inspiration
I wanted to build something that looked and felt luxurious to use, contains beautiful imagery, and runs smooth as warm butter in a hot pan. I don't want people to feel hung up trying to find something, but rather to give the sense of excitement of chasing treasure down a rabbit hole.
Iteration Progression
Red stars indicate items I felt were important and wanted to keep.
Research & Testing
Key Questions
Is It Usable?
Is it Pretty?
Does It work?
Sample Observations
The navigation is really simple on this.
Participant 1
Stock Image Used for Privacy
First things first - going to go into the settings. I am specifically looking for a dark mode that I would assume would inverse everything.
Participant 2
Stock Image Used for Privacy
Task Completion Key: 1. Easy to complete
2. Completed, but with difficulty
3. Not completed
N/A. Not Relevant or Available
Participant 1
Additional Notes: Neurotypical User
Participant 2
Additional Notes: User has ADHD and thus had difficulty following the prompts
Prompt 1: Navigate to an art piece
user seemed to navigate pretty easily
search bar - menu - browse - art piece
User tried several things before finding their way to the browse option
Prompt 2: Navigate to a material
took time to review the material page
Website stalls / needed to refresh Figma page
Prompt 3: Add an art piece or material to your favorites list
Clicked favorites on top right of corner
Did so without needing to look at prompt
From current materials page - hit heart button
User immediately noticed the different aspects of each page
Prompt 3 follow up: How do you feel about the navigation? Is it intuitive? What would you change about it?
Felt the back and forth between materials and paintings was pretty smooth
User seemed comfortable using a low-fi prototype and to enjoy exploring the different options outside of the prompts
Prompt 4: Navigate to your favorites page
Tap favorites at bottom of page
Immediately found the favorites page from the bottom of the materials page
Prompt 5: Navigate back to the home page
Did so without needing to look at prompt
User immediately found the home page without trying to hit the back button
Prompt 1: Navigate to an Artpiece
user seemed to navigate pretty easily
search bar - menu - browse - art piece
User tried several things before finding their way to the browse option
Prompt 2: Navigate to a material
took time to review the material page
Website stalls / needed to refresh Figma page
Prompt 3: Add an art piece or material to your favorites list
Clicked favorites on top right of corner
Did so without needing to look at prompt
From current materials page - hit heart button
User immediately noticed the different aspects of each page
Prompt 3 follow up: How do you feel about the navigation? Is it intuitive? What would you change about it?
Felt the back and forth between materials and paintings was pretty smooth
User seemed comfortable using a low-fi prototype and to enjoy exploring the different options outside of the prompts
Prompt 4: Navigate to your favorites page
Tap favorites at bottom of page
Immediately found the favorites page from the bottom of the materials page
Prompt 5: Navigate back to the home page
Did so without needing to look at prompt
User immediately found the home page without trying to hit the back button
Case Study Review
You made this really clear design that works really well. Why didn't you use it for the final prototype?
Fellow UXer
At the time when I was first making my high-fidelity prototype I didn't know how to animate a spinning wheel. Needing to meet class deadlines, I went with something I could animate but that did not meet my visual design goals. After having completed the course I went back and researched different ways to create clickable wheel that would both spin to location as well as be something the user could manually grab and turn. I would have given up on this design being worth exploring if not for the enthusiastic affirmation during this case study review.
Both users were able to experience the core features of the app and have a good experience in spite of key neurological differences.
Change Examples
I had been so excited with my design for a magnifying glass/search icon and no one knew what it was. Future versions of the app used a more easily identifiable symbol. I still like my original design but it does not fit the user's needs.
I used what I thought was a standard filter icon and not everyone knew what that was. Future iterations will include text to explain the icon's function.
Final Designs
Development Goals
This app does not yet exist but if it were to be pushed into development, there are a few key elements I'd like to see implemented:
1. Add haptics to the scroll wheel.
2. Pay scholars to write the copy for each piece.
3. Include a shop for art materials.
4. Closed caption mode -click a button to remove the scroll wheel that enables screen readers to easily navigate the app.
Future Steps
If I were to continue iterating on this project here a few additional pieces I would want to include in future prototypes:
1. Change the logo - "Why does your llgl lllk like a piece lfmedical equipment?" is slme lfthe feedback I received.
2. Colorblind and low-vision filter icons available next o each image, preferably near where the "expand image" icon is located in order to normalize their use and make them easy to find.
3. Explore other accessibility options including the validity of dyslexic type.
4. Educator portal - key for this to be useful in the education section and would include such QOL as a way to add assignments, extend deadlines, custom-set grading tiers based on lateness, and add custom names and pronouns for students.
5. Online Shop - connect users with a means to purchase materials found in art pieces that are gathered in a way that reduces environmental impact and improves the wellbeing of local communities. Highlight segment under materials showing "communities and people today" by providing additional information on family and community run businesses, allowing users to have a direct impact.
Credits
Unsplash and other credits In order of appearance
.png)
2.png)
.jpg)
.jpg)
_4_(16848647509).jpg)
.jpg)
.jpg)
.jpg)
