Submission

Medium

Gallery Pal: Design a better experience for art museum guests

Want to see the full challenge and give it a shot?

Start Your Free Trial
👍
👍
0
🔥
🔥
0
♥️
♥️
0
💃
💃
0
😀
😀
0

GalleryPal - an art discovery website created in conjunction with a local art gallery needed a mobile web experience for users to discover information regarding the art pieces. 


Main Themes From Interview:


The main themes from the interviews were:


- Guests don’t know much - they know its good but not why…

- The main goal is to “create a story” - share background on artist and a biography. Share fun facts.

- Users want tidbits about how they became an artist - users found resonation in tragedy. 

- Guests want to know key highlights - why they used a technique. How colors were used and what pieces have specific meanings. 

- Viewers want a story about the work and have a high level understanding of artist


Inspiration:


The first two examples (First app/Spotify) the visual theme is using “cards” - a very, very popular design trend in UX. A user sees a graphic and can swipe through different “cards” to get information on a given topic and proceed to either swipe to the next one or perform an action. 



Crazy Eights - Results:


Below are the results of my crazy 8’s experiment:



All sketches/ideas have a common theme of the card concept discussed earlier. However, there are a few key differences in approaches:

- As I progressed through the challenge, on sketch #5 I started thinking about how the app could be more engaging. Instead of just showcasing information on cards, I started adding icons that detail specific type of facts - including but not limited too surprising and “shocking” facts.

- In the second design, I thought about the idea of tooltips. A user can tap on an image of a piece of artwork and can see tooltips that show interesting “tidbits” about the work of art. 

- I then progressed to a gallery idea, which users can see multiple pieces of work from an artist. 


Process:

After careful consideration I decided to go with the card based design for a few reasons:

1. Cards are excellent for showcasing images. Since we will be showcasing pieces or art and details about them, cards are a great method to do this.

2. Responsive Design - in terms of visual appearance and technical implementation, this technique will scale nicely across multiple different devices. 

3. Prevention of information overload - since our research and persona, Angela, state the importance of not needing to know everything, card design will help us organize information in a concise and logical fashion. 


Wireframes

During the wire framing process while sticking to the cards convention, one of the other large elements of the design I wanted to use that was demonstrated in the “crazy 8” exercise is the use of a slideshow, or sometimes more commonly referred to as a carousel. They’re known to Increase Engagement and Highlight important content- however if they are not implemented properly they reduce visibility and annoy users.

The main criticism from NNGroup is that in a study, the user failed to find necessary information because the carousel auto-rotated, and critical information was placed on the right side of the page. 

With this in mind, we’ll keep 2 key things in mind:

1. Design for content left aligned, which will feel natural for a large majority of readers

2. The carousel will not autoforward. The user will manually need to scroll through the cards. 

We can see the idea in a wireframe below:



Another concept I wanted to heavily rely on is iconography. They add visual integrity and help users recognize meaning quickly for international users. In this first “slide” we see two key components - a paintbrush, which tells us the artist, and a clock, that tells us when the painting was painted. 



Another element of this design is using other icons that depict types of facts about the work - including an eyeball for “insights” and a paper and clock to signify historical aspects of the painting - as your users are interested in knowing specific and interesting details about the art and artwork. 


Final Design



Attached is the final product. You can see the serif font for the headers, and a sans-serif font for the content. The serif was chosen for the headline as serif fonts are typically used for  high end art branding and sans-serif for ease of readability. 

From a development perspective, I chose the carousel as it is relatively easy to implement from a developer's perspective as there are many third-party options for this

Connor Harper

Front End Web Developer Transitioning to UX Designer

View Portfolio

Comments

Log in to leave feedback, show some love, or ask a question.