H.
Project Overview:
The Product:
An art gallery website for visitors to easily preview and book exhibitions.
Project Duration:
4 weeks.
The Problem:
Sometimes the amount of visitors of an art exhibitions on certain day is too many to have a good experience for a viewer, and visitors cannot find out which day is the best time for them to have a visit. Other than that, it’s also inconvenient to gain the information of an exhibition or an artwork onsite, since the text of it on the exhibition is small.
My role:
I planned this project for portfolio showcase, and I conducted every step of this project by myself, from user research to prototype.
The Goal:
Showcase the amount of visitors booked on certain day on the booking calendar to let visitors having knowledge about if certain day is crowded or not. Besides, there would also be some exhibition and artwork information on exhibition page.
Responsibilities:
•User research.
•Define problems and ideate solutions.
•Wireframes and prototype.
•Visual design
Understanding the Users and Define Problems:
User Research:
I conducted user research by interviewing 3 frequent gallery visitors, and my goal was to understand the inconvenience they met often when they are visiting gallery exhibitions.
Pain Points:
-
There are too many people visiting exhibitions on certain day.
-
Sometimes it’s inconvenient to read the background information of an artwork or an exhibition due to the crowdedness.
-
Sometimes it’s difficult to find the location of certain exhibition.
-
After leaving the exhibition, you may want to review certain exhibition information.
Persona:
User Story:
As a graphic designer who is interested in contemporary art, I want to choose the best time to visit an exhibition and get the information of an exhibition and its artworks easily, so that I can optimize the experience of visiting exhibition
User Journey map:
Problem Statement:
Catherine is a graphic designer who needs a website to choose the best time for her to visit an exhibitions and get the exhibitions and artworks information quickly and easily, because sometimes the exhibitions is crowded. It’s also hard to locate an exhibition and get the background information of an artwork.
Ideate Solution:
Goal Statement:
Our art museum website will let users book a day for visiting with visualized amount of visitors each day and check the exhibition and artworks information on out website, which will affect how art museum visitors experience an exhibition by allowing them to visit on the day that may have less visitors and to find out the location of an exhibition as well as the background knowledge of an artwork easily. We will measure effectiveness by randomly interviewing visitors to see how many of them is currently using these functions.
Competitive Audit:
Solution:
1.Show the amount of visitors on booking calendar.
2.Exhibition locating function on exhibition page.
3.List all of the artworks and their information on the exhibition page.
4.Folded exhibition preview on each exhibition card.
5.Balanving between text and images for readibility.
6.Minalism while also keep a constrasting visual design for visual interest and suitable branding.
Wireframes:
Sitemap:
I created the sitemap of the whole gallery website, which contains other pages other than the main user flow.
Paper Wireframes:
I created the paper wireframes first for initial layout research, as well as the variation format on tablet and phone screen size.
Digital Wireframes:
I transfer the paper wireframes into digital version for readability and preliminary design.
Then I designed the layout of the same page on different screen sizes.
Homepage:
This page is mainly about showcasing the featured exhibitions and recent events, as well as some background information of the gallery itself, membership and newsletter subscription.
Featured exhibitions cards with an emphasize on photography for providing a sense of immersive of each exhibition.
Card slider in place of the grid layout for the exhibition cards on smaller screens.
Exhibition Page:
In exhibition page, you can scrutinize the exhibition information easily like reading an article. There are also most of the artworks of an exhibition listed in a grid format at the end. There are also a exhibition location finder function as a popup page triggered by a button on the top of this page.
Exhibition locating function for visitors to easily find where the exhibition is when they are onsite. After clicking, a popup page with the location information would appear.
Asymmetrical layout design for exhibition information and photography for a balance between text and image to increase readability.
Larger font size for exhibition information on phone screen for better readability in case the viewer is viewing this page onsite.
Calendar Page:
You can select the date you prefered to book in calendar page. The amount of people will be represented by a mark within each date cell. There is also a event reminder section at the top right. Each event will also be listed within the date cell of the date of that event.
A mark representing the amount of visitors within each date cell.
A small container with event title within the date cell
Events reminder
Low-Fidelity Prototype:
Clickable Prototype Links:
Mockups:
I design the interface in a minimalism and contrasting style to reflect the identity of this gallery as contemporary art focused. I tried to decrease the usage of color and create contrast mainly through typography and layout to draw viewers's focus onto the overall flatness as well as the balancing between text and image, hence produce a visual effect that maintain both readability and visual interest.
When you hover over the exhibition card, a left and right arrow would appear which could let you preview other exhibition pages, as well as the title of the exhibition with an up arrow beyond.
When you click the up arrow, a page with the summary of the exhibition would slide in, and you can close it with a down arrow beyond.
After clicking “detailed location”button, an exhibiton map with description would pop up.
Larger text on the phone version of exhibition page
After clicking the image of artwork, a popup page with the artwork description would appear
High Fidelity Prototype:
Clickable Prototype Links:
Takeaways:
Through this project, I gained a deeper understanding of how design thinking can help to solve user problems and improve user experience.
I experimented a lot of different layout possibilities to create visual contrasts. Nevertheless, I also played around with the use of animation on assets to enhance user experience. I also learnt that by hiding certain elements as popup pages, it could reduce distraction from the main content and improve readability.
For further design, I would add a video about this gallery within the hero section of the homepage to create a more immersive effect. I would also add more complex animation on exhibition and artwork cards to add more visual interest and interactivity.
