ARCHIVING SOLUTIONS FOR VISUAL ARTISTS
Arte|Faktum
Sketch | InVision Studio | InVision
Miro | Marvel POP
Sketch | InVision Studio | InVision | Miro | Marvel POP
There is a lack of consistency in the way visual artists archive their artwork.
Some artists use computer files, folders and spreadsheets; others, still rely on hardcopy archiving. Having an efficient structure for documenting and managing their artistic practice enables artists to have an organized overview of their career. The ability to quickly locate and share some images and important information about their artworks can have direct benefits to their professional success.
SOLUTION
Using Design Thinking, I explored how Arte|Faktum could help visual artists organize their artwork in order to create a comprehensive and versatile database that will assist them in both archiving and presenting their work.
For this Springboard project, I played the role of UX Researcher, Information Architect and UX/UI Designer. I developed the idea, performed a heuristic analysis of competitors, conducted user research and synthesized my findings into an Affinity Map, a User Persona and an Empathy Map. I worked with Information Architecture to develop a Sitemap and my red route User Flows. I designed hand-drawn Sketches that I tested with Guerilla Usability Testing. I designed Wireframes, created a Brand Platform and Style Guide and designed High Fidelity Mockups. I created a Prototype and performed two rounds of User Testing.
PROGRAMS USED
MY ROLE
PROBLEM
FROM ARTIST'S STUDIO TO ARTIST'S ARCHIVE
How should artists document their own work?
How could archiving be seamlessly included into their creative process?
Let's observe these two works: illustrations of Pablo Picasso's studio and of Jean-Michel Basquiat’s studio. Through these images, Damian Elwes offers us a rare glimpse into the universes of both artists and their artistic process. A deeper look at these works may prompt us to think about archiving and documenting the artwork that we see in these studios.
.jpg)
Damian Elwes, Picasso's Studio, Rue de la Boétie, Paris
Watercolor and charcoal on paper, 12 x 18 inches
Damian Elwes, Basquiat's Studio on Crosby Street
Mixed media on canvas, 66 x 102 inches
USER RESEARCH
As part of my user research, I sent a Screener Survey to determine visual artists' current approach to archiving. 23 visual artists completed the survey.
Age of Survey Participants
Do Visual Artists Archive Their Work?
Art Media Used by Survey Participants
I conducted 30-minute Interviews with 6 visual artists from Canada, United States, United Kingdom and China. I selected artists who work with different media - painting, drawing, photography and mixed media - to get a better sense of the archiving process within the different spheres of the visual art field. I used the notes that I gathered from the User Interviews to create an Affinity Map.
Affinity Map
These user interviews confirmed that:
-
artists are aware of the value of archiving and of documenting their artwork.
-
there is a clear need for an archiving platform to match their needs and to solve the existing issues that they’re having.
Most artists store
images and information about their artwork in computer folders and
excel documents
Artists appear to have disjointed archives that
are hard to manage between devices
Artists explained the
challenges of taking
photos of their artwork:
lighting, angles, color correction, photo
quality
USER PERSONA
With the information I collected from my user research and Affinity Map, I created a Persona whose goals and frustrations match those of the visual artists that I interviewed. From this moment onwards, all design decisions were made with this Persona in mind.
User Persona: Sara the Visual Artist
EMPATHY MAP
In order to further focus on user-centered design, I created an Empathy Map to understand and explore what the Persona is thinking, feeling, seeing, saying, doing and hearing.
Empathy Map: Sara the Visual Artist
SOLUTION
STATEMENTS
1/
Create reminders that will prompt artists to fill out incomplete information about their artwork
2/
Customizable drop-down menus and intuitive fillable blanks
3/
App should sync across different devices (computer, tablet and smartphone) and operating systems
4/
Design a beautiful interface to make each artwork entry look professional. Guide the user through the process making it as simple and seamless as possible
5/
Design an app feature that will assist users in taking good photos of their artwork, to avoid problems with light, distortion and inaccurate color
PROBLEM
STATEMENTS
1/
How might we help visual artists archive their artwork?
2/
How might we assist them to stay
consistent in their archiving methodology?
3/
How might we facilitate accessibility
to their archives from different devices?
4/
How might we make archiving a more enjoyable activity, one that is less daunting and repetitive ?
5/
How might we help visual artists take
better photos to document their artwork?
USER STORIES
After creating the Persona and establishing the Problem Statements, I produced a list of User Stories to describe the tasks that the user would want to complete using the Arte|Faktum app. I separated the tasks into two sections: tasks that needed to be prioritized for the MVP phase and tasks that could be postponed to the 2nd phase.
SITEMAP
After defining the User Stories, I asked 5 visual artists to participate in an Open Card Sort to help categorize the User Stories. The results of the Card Sort allowed me to create the initial Sitemap of Arte|Faktum. This Sitemap followed a very simple structure, which I further elaborated with the User Flows and slightly amended once I started designing the Wireframes.
Sitemap
USER FLOWS
I used the framework provided by the Sitemap to identify 3 critical Red Routes that the user would take.
To represent them visually, I prepared User Flows for each of the red routes.
-
Red Route 1: Registered user adds new artwork to archive and sets update reminder.
-
Red Route 2: Registered user searches for existing artwork to update it.
-
Red Route 3: Registered user updates archive after selling artwork.
HAND-DRAWN SKETCHES
To prepare the hand-drawn Sketches of the red routes, I reproduced the sequence of my User Flows.
The findings from my Heuristic Analysis were particularly helpful at this stage.
When designing these sketches, I paid special attention to:
-
the ability to easily edit and delete an entry
-
designing an app that is visually appealing but not too crowded
-
creating an interface that is flexible and customizable
Mobile and Desktop Sketches
GUERILLA USABILITY TESTING
Using my hand-drawn Sketches, I prepared a Low Fidelity Prototype of Arte|Faktum using Marvel POP.
I performed Guerilla Usability Testing with 6 participants.
Due to the pandemic, I was unable to test the app in person and had to test it through video calls on Skype and Facetime. I was hoping to discover if there were any issues with the app - anything that seemed unclear or confusing to the participants. The usability test uncovered some aspects of my design that needed to be changed:
Login Screen
The login screen’s “New User” and “Sign In” caused a little bit of hesitation. Several participants told me that the side-by-side position was unusual and that they were more used to seeing the options presented on top of each other. I reworked my first screen and changed the position of “New User” and “Sign In”. I also changed the wording to “Register” and “Login”.
Navigation icons
The icons on the bottom tab navigator were slightly unclear, especially the “Sales” icon. Some participants guessed that it referred to art sales, but they initially felt like it had to do with pricing. I removed the dollar icon and decided to integrate the sales category into the artwork category and to write a caption for each icon in the bottom navigation tab.
WIREFRAMES AND WIREFLOWS
Once I designed the Wireframes for my red routes, I created Wireflows by adding arrows that represent the user flow information. With these Wireflows, Arte|Faktum’s interactivity began to take shape.
After reviewing the results from the Guerilla Usability Testing, I created Wireframes for my 3 red routes using Sketch. They reflect the changes that I decided to implement based on my findings. The structure of the screens is now much clearer and more developed than it was in the hand-drawn Sketches. Below is a selection of Wireframes.
Wireframes (selection)
EDGE CASES
As I designed the Wireframes for my red routes, I simultaneously identified unexpected scenarios that could occur. I designed different Edge Case screens related to these scenarios. Here is an example of the Edge Case to change currency.
Edge Case: Change Currency
MOODBOARD
Imagery Inspiration
I chose this imagery because it is important for this brand to reflect a sense of legacy and artistic vision that will appeal to its users (visual artists). I would like to integrate framing in the design. I would also like to use the style of cut-out silhouettes in the onboarding screens and in any instances that require illustrations. The colors are inspired by the mosaics of Ravenna (green and gold) and the ornamental patterns of Gustav Klimt’s paintings (blue and gold).
UI Inspiration
I chose this imagery because it is sophisticated, empowering and visually pleasing. Given the nature of this app, it is important for the UI to be carefully selected, to ensure that the visual design of the app doesn’t overpower the images added by the users. There should therefore be a balance between bold and colorful screens (appropriate for onboarding, registration, login) and well organized and slightly subdued monochrome screens (dedicated to data entry and to viewing the user’s archive).
BRAND STYLE GUIDE
The Arte|Faktum Brand Style Guide includes a defined visual language and a set of guidelines about the brand.
Mission/Vision
Visual artists should have an efficient structure for documenting and managing their artwork. We provide an archiving platform to guide the artists through this process and enable them to have a comprehensive overview of their career.
Brand Personality
Arte|Faktum is concerned with preserving the legacy of artists and ensuring that proper documentation is left behind for their heirs.
Brand Attributes
Empowering, trustworthy, organized, effortless
Color Palette
The background color is Archival - a reference to the cream color of archival paper and files.
Dark Blue is the color of the font on Archival. Archival is the color of the font on Light Blue, Blue and Plum.
Light Blue and Blue are the primary action colors. Plum is the accent color. Light Gold and Dark Gold are the secondary colors, used for the logo, the headers and other UI elements. Gold is a reference to gilded picture frames.
Primary
Light Blue #5570B2
Blue #21358A
Secondary
Light Gold #D6B775
Dark Gold #AD8D49
Neutral
Archival #FFFBF4
Dark Blue #001329
Accent
Plum #825575
Typeface
The Arte|Faktum typeface is San Francisco Pro. For an archiving platform with a large amount of content and data entry, it is important to have a font with a high degree of legibility. San Francisco Pro is a sans-serif typeface that is well suited for Arte| Faktum’s brand identity. San Francisco Pro is effortless to read and does not distract the user from the content.
ACCESSIBILITY AUDIT
I began designing my High Fidelity Mockups by creating 6 screens, which I tested for accessibility using the WebAIM Contrast Checker and the Color Blindness Simulator. I amended the colors in my 6 screens and in the Style Guide's color palette based on the findings from my Accessibility Audit.
Accessibility Audit: Gold Color Variations
PROTOTYPE
After designing the High Fidelity Mockups of the 3 red routes, I created a clickable High Fidelity Prototype using InVision. Unfortunately, I ran into some technical difficulties because I had designed my High Fidelity Mockups for iPhone 12. When I transferred the screens to InVision, I had to reformat them to iPhone X because InVision doesn't support iPhone 12.
I did two rounds of usability testing for the InVision Prototype of Arte|Faktum and wrote a Usability Test Report to summarize my findings. Here are some of the issues uncovered during the usability testing:
Artwork Summary Screen: Naming of the 4 cards
There was some confusion with regards to the 4 cards: View Cataloguing Information, View Sales Information, View Images and Add to Checklist. The source of the confusion appears to be the wording. To resolve this issue, I renamed the cards in a simpler and more wide-ranging way: Cataloguing Information, Sales Information, Images and Checklist. According to one of the participants, the use of the word “View” is too specific, and it might be misleading.
Interactivity of User's Profile Photo
One of the participants was surprised that nothing happened when tapping the user’s profile photo. He was expecting to see the user’s Account Settings and a Contact Us section. This is a minor issue since it was only mentioned by one of the participants, but I thought it was important to fix before the next round of usability testing. To resolve this issue, I added an overlay screen that appears when the user taps the profile photo.
USER TESTING
Designing Arte|Faktum has been a fascinating experience and one that was also challenging in many ways. Through my user research, I quickly understood that visual artists see the importance of archiving and that there is a definite need for a product that can help them with this task. I wanted Arte|Faktum to be elegant and sophisticated in order to make the user’s artwork stand out and look professional. Since users will be adding their own text and images, it was important to design an archiving platform that wouldn’t overpower the user content. For this reason, the UI of Arte|Faktum had to be more subtle; however, it still needed to have an aesthetic that would appeal to visual artists. I focused on consistency and the user’s ability to customize certain features to make them more relevant to their artistic practice.
Looking back at the different stages of this project sheds some light on the complexities that I encountered along the way. The main issue has certainly been volume. Given the nature of this app, there had to be many screens. I designed over 150 Wireframes and High Fidelity Mockups for my 3 red routes. When I created the Prototype, I had to design some additional screens with slight detail changes to make the prototype more interactive and realistic.
CHALLENGES
NEXT STEPS
There is still much to explore with Arte|Faktum. I focused on including what was most essential for the MVP phase. For the second phase of the product, I plan to integrate some additional features that will enhance the user experience. According to the research interviews, there are many challenges associated to taking photos of artwork. I would like to develop a feature that will guide and assist users in taking proper photos of their artwork in order to help prevent issues related to lighting, distortion and color inaccuracy. I also plan on creating connections between artworks (works from the same series, preparatory drawings, etc.), add the ability to attach documents, invoices and certificates of authenticity to each artwork, and develop a public facing version of the app where users would be able to select which artworks to keep private and which ones to show publicly.
Archiving should be included in the routine of every visual artist. Archiving should be taught to Fine Art students in order to learn how to document their artwork early in their career. The next step for Arte|Faktum would be to establish partnerships with universities and Fine Art schools to give them access to Arte|Faktum and introduce young visual artists to art archiving.