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
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.
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.
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.
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!
Front End Web Developer Transitioning to UX DesignerView Portfolio