IntroductionProject DetailsEmpathyIdeationTestingFinal DesignsDevelopment GoalsFuture StepsCredits

Battle.Net

Learn Your Lore

2.2023 - 5.2023, 8.2023 - 9.2023

UX Designer, Artist, Researcher, Idea Spelunker
Laura Sender

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

Where I've Been
Human Resources
Bookstore
Museum Employee
and Student
Art Instructor
Living History Site
National Park Service
What I Heard and Saw
Making something accessible for one person often improves access for many others.
Interest in niche aspects of art, history, and culture are alive and well.
There is a way to design exhibitions to be both fresh and accessible for a variety of audiences.
Art can be more meaningful to viewers when they understand the labor that went into creating it.
There are ways to communicate historical information that makes it digestable.
People want to know about history in a way that is accessible without being corny.
How I Responded

Listening

Creating

Storytelling

Therefore, I designed an app that...
Accessibility
... the content under each painting and material is meant to give a holistic view, including culture, ecology, and environmental impact, as well ashow it's made and highlighting artistic skill.

Exploration

... looking for ways to encourage users to take ownershipsof what they are seeing and learning. Developing list systems that are easily extractible to other media and shareable across platforms.

Connection

... emphasizing the people here and now where history and cultures are tied to these resources in a way that is respectful, designing an online shop for hobbyists and artists to buy new materials.

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

History of Art

Website
Main page splash image

Tumblr

Website
Expansive image database

Wikipedia

Website
Expansive knowledge database but unclear authorship

Blase Art Gallery

Website
Information on pieces given by artist. Interactive experience.

Smart Art

Website
Personable blurbs

Saatchi Art

Website
Purchasable 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."
Age:
48
Education:
MAT
Hometown:
Boston, MA
Family:
Cat and Adopted Child
Occupation:
High School Teacher
Problem Statement:
Arwen Connolly is a high school teacher who needs to see specific information about paintings because connecting the information
with her art history class.
Goals:
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.
Frustrations:
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?"
Age:
15
Education:
HS
Hometown:
Lynn, MA
Family:
Three siblings, parents
Occupation:
Student
Problem Statement:
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.
Goals:
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.
Frustrations:
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."
Age:
27
Education:
BA
Hometown:
Tampa, FL
Family:
Wife, two children
Occupation:
Photographer
Problem Statement:
Jules Pierre is a professional photographer who wants to give historic context to materials by photographing them in their unharvested state in nature.
Goals:
Jules Pierre is a professional photographer who wants to give historic context to materials by photographing them in their unharvested state in nature.
Frustrations:
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."
Age:
43
Education:
MFA
Hometown:
Portland,OR
Family:
Spouse, guinea pig
Occupation:
Fiber Artist
Problem Statement:
TabBee is a fiber artist who travels the world going to different conventions to display their designs and find new clients.
Goals:
To learn more about the cultural and environmental impact of the materials they use to design their costumes.
Frustrations:
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

Actions
Download the App
Make an Account
Explore
Create Lists
Share Lists
Task List
Download from app store
Find special accounts for teachers
Browse art and materials
Add pieces to favorites
Post lists on Schoology
Emotions
🤔
😒
😄
🤔
😁
Fix-Its
Add education to search tags
create educator portal
Add tags for
art pieces
Add privacy options
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.
Initial Sketches
Low Fidelity Mockup
High Fidelity Mockup

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 #
Click Path
Observations
Score
User 1
menu - browse - material
user seemed to navigate pretty easily
1
User 2
search bar - menu - browse - art piece
User tried several things before finding their way to the browse option
2
Prompt 2: Navigate to a material
User #
Click Path
Observations
Score
User 1
artwork - material
took time to review the material page
1
User 2
artwork - material
Website stalls / needed to refresh Figma page
1
Prompt 3: Add an art piece or material to your favorites list
User #
Click Path
Observations
Score
User 1
Clicked favorites on top right of corner
Did so without needing to look at prompt
1
User 2
From current materials page - hit heart button
User immediately noticed the different aspects of each page
1
Prompt 3 follow up: How do you feel about the navigation? Is it intuitive? What would you change about it?
User #
Click Path
Observations
Score
User 1
N/A
Felt the back and forth between materials and paintings was pretty smooth
N/A
User 2
N/A
User seemed comfortable using a low-fi prototype and to enjoy exploring the different options outside of the prompts
N/A
Prompt 4: Navigate to your favorites page
User #
Click Path
Observations
Score
User 1
N/A
N/A
3
User 2
Tap favorites at bottom of page
Immediately found the favorites page from the bottom of the materials page
1
Prompt 5: Navigate back to the home page
User #
Click Path
Observations
Score
User 1
menu - home
Did so without needing to look at prompt
1
User 2
menu - home
User immediately found the home page without trying to hit the back button
1
Prompt 1: Navigate to an Artpiece
User #
Click Path
Observations
Score
User 1
menu - browse - material
user seemed to navigate pretty easily
1
User 2
search bar - menu - browse - art piece
User tried several things before finding their way to the browse option
2
Prompt 2: Navigate to a material
User #
Click Path
Observations
Score
User 1
artwork - material
took time to review the material page
1
User 2
artwork - material
Website stalls / needed to refresh Figma page
1
Prompt 3: Add an art piece or material to your favorites list
User #
Click Path
Observations
Score
User 1
Clicked favorites on top right of corner
Did so without needing to look at prompt
1
User 2
From current materials page - hit heart button
User immediately noticed the different aspects of each page
1
Prompt 3 follow up: How do you feel about the navigation? Is it intuitive? What would you change about it?
User #
Click Path
Observations
Score
User 1
N/A
Felt the back and forth between materials and paintings was pretty smooth
N/A
User 2
N/A
User seemed comfortable using a low-fi prototype and to enjoy exploring the different options outside of the prompts
N/A
Prompt 4: Navigate to your favorites page
User #
Click Path
Observations
Score
User 1
N/A
N/A
3
User 2
Tap favorites at bottom of page
Immediately found the favorites page from the bottom of the materials page
1
Prompt 5: Navigate back to the home page
User #
Click Path
Observations
Score
User 1
menu - home
Did so without needing to look at prompt
1
User 2
menu - home
User immediately found the home page without trying to hit the back button
1

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.
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