The Art Gallery Responsive Website
I designed this website for people who would like to be able to know what kind of events and classes are going on at their local art gallery and be able to sign up online.
Project duration: January 2024-February 2024
Project Overview
The Problem:
Users would like to be able to see what events and programs are on offer and the hours of operation.
The Goal:
Create a website that will list the hours, location, events, programs, and more.
User Research: Summary
Going into this, I created a colorful design that would keep the user’s attention and keep them engaged with the website. I tested it on 5 people and the feedback was extremely helpful. They wanted to be able to not only know about the classes and events online, but sign up for them and add them to their own calendar, so I added that option in.
Users need to be able to find the hours of operation for the art gallery quickly and easily as well as the location.
Pain Points
Allowing the users to be able to find a list of programs they can take part in at the gallery.
Users want to be able to add events and classes to their own personal online calendars so they can be reminded and see it on their calendars.
Users want to be able to sign up for memberships, classes, and programs online.
Persona: Gerri
Problem Statement:
Gerri is an art lover and hard working mom
who needs to be able to find information about an art gallery
because she wants to instill the love of art in her children.
Personas
Age: 32
Education: College
Hometown: Cleveland, OH
Family: Married, 2 children
Occupation: Office Worker
“Art is for everyone, no matter what age.”
Goals:
Visit the art gallery
Sign up for programs
Frustrations:
Doesn’t know when the gallery is open
Doesn’t know what programs are available.
Gerri works full time and grew up with a love for the arts. She would love to instill this into her own children, but it’s hard to find out and coordinate when the galleries are open and what types of programs they offer. She needs a way to see when the gallery is open, what programs are available, and what times so she can schedule accordingly.
Information Architecture
Paper Wireframes ~ Desktop
I wanted to make a simple to use website for an art gallery for people to see what classes and programs were available.
This is the mobile version of the desktop version. I’d like to keep the tablet version looking exactly the same as the desktop version.
Paper Wireframes ~ Mobile
My goal was to make the links to everything easily accessible along the top. User research requested a profile option be added so that classes that have been signed up for could be tracked and adjusted.
Where the profile button would be located.
Digital Wireframes
Originally, I was going to add cards to the front page, but my user research came back as that being rather overwhelming for a front page, so I decided to go with only a couple of things with brief descriptions.
The Desktop Prototype had a profile added.
The Mobile Prototype would no longer consist of cards on the front page, but instead used a couple of images with descriptions to events.
Home page
About page
Featured articles
Programs & Events
Classes
Memberships
Profile
Blog
Careers
Low-fidelity Prototype
Usability Testing Results
Need a profile section so that the user can keep track of classes and events they sign up for and edit.
The users wanted the ability to sign up for classes online.
Users wanted the ability to add events to their own personal digital calendar.
Mockups
As seen in this example of the mockup, you can see where I added an Add to My Calendar option, drop shadow, and frames.
At first, I wanted to keep the mobile site as close to the desktop as I could and I thought I could keep the menu at the top the same, but after user research, I found that it was too cluttered and too easy to click on something that they didn’t want to click on, so I switched to a menu button.
Before usability Study
After Usability Study
Before usability Study
After Usability Study
High- Fidelity Prototype
In my user flows, you can see that the website and mobile website have many features that include:
Home page
About page
Featured articles
Programs & Events
Classes
Memberships
Profile
Blog
Careers
Accessibility Considerations
Alternate text was used in the design so screen readers could easily read them.
Appropriate color contrast was used so that if dark mode is applied, it will still look good and be accessible.
The animation is set at a slow enough limit so as not to cause irritation when using the app.
Takeaways
Impact:
My testers really liked the final design and the ability to be able to add classes and edit their choices in their profiles. They also enjoyed being able to add events to their google calendar so they could be alerted the way they wanted to be.
What I learned:
I learned about website layouts, adjusting to screen sizes, and how to use cards.
I would love to add a virtual tour option or a virtual gallery so that anyone would be able to view the art on the website.
Next Steps
Digital online classes would be a fun addition to add as well, and could also be placed behind a paywall for the classes that must be paid for or are for members only.
I would test this more after publishing to see see what more people would want to have added or changed. I’d also like to add a feature to add more local artists.