AT
Alexandra Tragut
Kunst Gallery Website
The Problem: Visiting art galleries and discovering artists can be dependent on one’s location.
The Goal: Design a responsive website for desktop & mobile that allows users to virtually tour and view art from anywhere.
​
The Product: A responsive website for an art gallery that allows visitors to virtually tour the gallery and view artwork both from desktop and mobile. Users can contact the gallerist regarding purchasing artwork.
​
My Role: UX Designer designing a website for an Art Gallery from conception to delivery.
​
Project Timeline: August 2022 (3 Weeks), project completed in Adobe XD.
Understanding the User
User Research
Based on the research and interviews conducted for the Virtual Art Gallery App I based the website development on these user needs. I created empathy maps to understand the users I’m designing for. A primary user group identified through research was art lovers who hadn’t visited a gallery in long time due to time restraints or travel restraints.
This user group would be interested in discovering new artists and artwork. They also expressed interest in possibly purchasing art but were intimidated by the typical art gallery model.
Personas
Melinda is a busy working art enthusiast who needs an easy way to discover and view art from home because she recharges through learning about art and new artists.
Katherine is an art collector who needs an easy way to discover and contact artists because she is interested in expanding her art collection.
User Journey Map
Mapping Melinda’s user journey revealed how helpful it would be for users to have access anytime virtually to a gallery and clear text or audio information regarding the artwork available.
Responsive Design
Sitemap
Easy website navigation was my main goal regarding the information architecture for the overall website. The structure I chose was designed to make things simple and easy.
.jpg)
Wireframes & Low-fidelity Prototype
Through multiple iterations of the home screen, I explored the placement of different elements and how they would best address the user. I prioritized the exhibits and virtual tour.
Paper Wireframe Variations of the home screen
Final Version
Moving from paper to digital wireframes I made sure to prioritize visual element placement on the home screen and easy navigation.
Mobile
Desktop
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of contacting the gallerist and virtually viewing art.
Testing Round #1
Study type:
Moderated usability study
Location:
Remote, Europe
Participants:
5 Participants
Length:
20 - 30 Minutes
Findings
I conducted one round of usability study. Findings from this study helped guide the designs from wireframes to mockups.
1
Contacting gallerist should be available on multiple pages
2
Menu bar was used more often for navigation
Refining the Design
Mockups & High-fidelity Prototype
Early design had the no contact button under the gallery information page. Based on insights from the usability study, I revised the design to have the contact button available on the gallery information page.
Wireframe
Mockup
The home screen layout for mobile and desktop design focused on clear imagery of current exhibits and easy access to the virtual gallery tour. Contacting the gallerist was added through the home page as well.
Mobile
Desktop
Virtual Gallery Tour - Desktop
Art Information - Desktop
Exhibits - Desktop
The high-fidelity prototype followed the same main user flow as the low-fidelity with some changes based on feedback from the usability study.
Accessibility Considerations
1
I used headings with different sized text for clear visual hierarchy
2
Provided audio for heavy text summaries for users who are visually impaired.
3
Reviewed color and contrast for text with WCAG.
Going Forward
Takeaways
Impact: The website makes it easy for users to visit an art gallery anytime or from anywhere. Users can easily learn about art or listen to audio or video.
​
What I learned: While designing the website for the virtual art gallery I integrated feedback from the app design regarding navigation and ease to contact the gallerist and made sure to address these items early on.