Arthur 'Art' Vossler
1933-1994
I've always been interested in my grandfather Arthur 'Art' Vossler as his art was on the walls of our home growing up.
By all accounts he had a brilliant mind that bridged between the world's of art and engineering. He lived a fairly interesting life that saw him serve in the US Air Force, a career as an electrical engineer at that saw him working at NASA and NOAA, and eventually a family life during which most of his artwork was produced.
Since his premature death in 1994, his paintings have been scattered across multiple states among family members. His art is only really known to family members, and I thought it was a shame that his art never made it out into the wider world.
Art's artwork was limited to 2D work, mostly oil paintings with a wide range of subject matter, including common subjects like landscapes and still life's, as well as more abstract and mathematically inspired pieces.
Before setting out on this project, I needed to reach out to family members to take photos of the artwork, so that I was able to properly crop, color correct, as well as correct shadows and glare from the photos and even digitally restore damaged parts of the art itself.
- How might I... commemorate Art's Art?
- How might I... expose Art's Art to more people?
- How might I... keep this project funded?
Idealized Vision
It was important here that I found interview participants who were either artists themselves or active consumers of the visual arts.
As I've spent my career in the visual arts, I was able to leverage my network to identify potential candidates for interview, and from there, I used screening questions to narrow down to my final set of interviewees.
User Interview Questions >
Digital's increasing share
Prior to the pandemic digital was already the primary mode of consumption for those seeking new art, but since the onset of the Pandemic, digital has become an even more integral part of art discovery.
Mobile First
Mobile was by far the primary mode of accessing new art and social platforms acted as gateways of discovery for my participants, particularly Instagram. Designing an experience that performs well on mobile and can connect easily with Instagram will be crucial.
Spontaneous Discovery
Interestingly, respondents felt they did more discovery during times when they weren’t seeking out new art. This gave me some insight into the mindset site visitors may have, that they’re waiting for something to catch their eye.
Consumption patterns varied
Generally, participants still felt that an in-person viewing experience was still the preferred way to experience art, but some preferred the control over the experience online, particularly the ability to focus in on one artwork.
Donors are looking for a connection
When choosing to donate to an artist, participants were very particular. It was important that the donor was able to connect with the artist somehow and also trust the money was not going to waste.
Include context, but keep things 'clean'
‘Cleaner’ experiences were talked about more favorably, however participants also wanted to learn the greater context of the piece (medium, artist, why the piece was made, when the piece was made, and how the piece was made).
- How might I... make it easier for mobile users to navigate through and between galleries?
- How might I... give visitors access to the information they want without distracting from the artwork itself?
- How might I... make it easier for users to share what they find?
The site will have a quite simple structure. Dividing Art's work into different 'Galleries' each with 3-7 artworks each. 'Doorways' to each gallery would be accessible from the landing page.
In addition to the galleries, visitors can find out more about the artist himself on the 'About' page and if they choose to do so, a donation page would allow them to make a donation to the project.
From my user interviews, it was clear that even in older age demographics, Instagram and sometimes other similar platforms are the gateway to new art discovery, and if they were to come across an artist's personal site, it was almost always in the course of scrolling through Instagram, so I thought this context was important to the site experience.
In this Task Flow, Jamie gets interested by an artwork she sees on Instagram, follows the link to the site and after browsing for a few minutes, finds another piece of artwork and decides to share it on her Instagram 'stories'.
Due to my discoveries in the research phase in regards to how a substantial amount of traffic being driven from mobile devices, I decided to use a mobile-first approach when it came to designing this interface.
I started on grid paper with very quick, rough concepts for how the mobile site might function. I took these ideas into Figma and began digitizing them as low fidelity wireframes, slowly introducing detail.
The galleries would be the heart of the user experience and I thought through multiple approaches to include all the required features, without distracting from the artwork itself.
While a lot of the focus during the early wireframing was focused on the gallery pages, I also started to imagine what the landing page might look like. I created mockups with a 3D effect that made the gallery previews look like canvas edges. Technical considerations left this idea on the drafting room floor... for now.
After discussion with other designers, I narrowed my ideas down to 2 variations on the same concept: a horizontally scrolling gallery and a vertically scrolling version.
The only way to find out which would work was to test both approaches in usability testing. I created prototypes for both versions and presented them to test users.
Given the outsized role the artwork itself plays within the experience of the UI, I determined it important that the prototypes I tested with users included the artwork. This meant they were fairly high-fidelity screens being shared with my users.
Tests were conducted using Figma mirror on a mobile device.
Along with conducting tests with a handful of users, I also used this prototype to get feedback from family stakeholders.
Testing with a sample of users revealed a very clear winner: Vertical.
Users didn't understand the horizontal scrolling until prompted, a huge issue if I wanted to engage users with the site.
On the vertical prototype, users were able to navigate and interact with galleries smoothly.
The tests also revealed some users had trouble figuring out how to return to the home page, so in refinement I added a discrete 'home' button in the menu.
I chose Petrona because a traditional serif seemed like the appropriate font pairing for more traditional art styles.
For smaller headings and body text I went with Red Hat because it’s a sans-serif that seems very inviting and easy to read.
Italics were added to convey a more personal tone.
The original base colors came from using the eyedropper tool on some of the 'snowscapes' paintings until I found a scheme that felt right.
I needed a primarily neutral scheme that was a bit friendlier than grayscale to better match Art’s more animated personality.
The punch of orange and red exists on the other end of the color wheel from my neutral blue and only appears in association with the donation page, to draw attention to it.
Textured White Wall background paired with shadows added to the artworks allows the user to better immerse themselves with details that make the site feel more like a physical gallery.
In order to keep the artwork as the star of the show, the information card is greyed out in ‘minimized’ form to not overpower the artwork.
Almost all of the paintings have a known medium but only a few have known dates.
The ‘+’ and ‘-’ are used to give the viewer the option to view more or less. This seemed the clearer approach than up and down arrows, and my first round of testing proved that.
The landing page acts as a portal to each of the galleries.
With such visually compelling subject matter, I let the art lead the way.
The menu highlights the site's color scheme, and draws attention to the donation page.
.gif)
In response to different user interests, each piece can be viewed using 3 different states: 'minimized card', 'maximized card' and 'focused'.
The Pros and Cons of highly personal work
Due to the personal nature of this project, this was one of the most rewarding projects I've ever worked on. It was also a chance for me to better understand a piece of family history and connect with Art as a person and artist.
The difficulty with working on a highly personal project was becoming very connected to the work.
Usability is king
I learned even if users prefer an in-person experience, it doesn't mean they want a digital experience that mimics that. Whenever there's a conflict between an aesthetic vision and usability; usability will always be more important for users.
Subtlety is the secret
When it came to the UI for this project, I knew I already had powerful visuals thanks to my grandfather's paintings, and it was really important that I wasn't distracting from that on the pages with artwork.
.png)
.jpg)
