top of page

ARTarea

Art Event Website Design Case Study, 2021 - 2022

Project Overview

ARTarea Website screenshot

The Problem

Available event finder websites are clustered and hard to browse for a specific kind of event. Users need an art specific platform to see locations and events.

The Goal

Design a website for ARTarea to be user friendly by providing clear flow, easy search options and offering location specific search.

My Role

Lead UX designer, UX researcher

Project Duration

December 2021-January 2022

The Product

ARTarea is a web platform to show all the  art location and art events in a specific location. The typical user is 16-50 years old, and most users are young professionals, art enthusiasts. ARTarea's goal is to make searching for art events easy and fun.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design

User Research Summary

After conducting unmoderated interviews and creating empathy maps, a primary user group identified as 16-55 years old art enthusiasts who cannot find a platform to keep updated about art events.

 

The user group confirmed the initial assumptions. There were also 2 additional takeaways at the end of the research. 


   1. Users need a website to see art museums and galleries in a specific location
   
2. Users are disappointed and frustrated about the fact that they cannot find individual info unless they already know a place and go to that specific place’s website. 

User Pain Points

User Pain Points

Persona & Problem Statement

Dora is a busy young professional art enthusiast who needs an online website to search for art galleries and art events in a specific location, because they want to easily and quickly explore new art galleries or events in different cities.

UX Persona card for the ARTarea Website design

User journey map

Mapping Dora’s user journey revealed how helpful it would be to add a map view and a better way to show the Saved locations & events 

User journey map for the ARTarea Website design

Starting the Design

Sitemap

Seeing museums, events and galleries separately on their specific page was the main pain point, so I used this knowledge when I created my sitemap. My main goal was to create an easy flow and a clear page for each category
 

Sitemap for the ARTarea Website design

Paper Wireframes

Next, I sketched paper wireframes for Home, Galleries and Museums pages. I used my Crazy 8s outcome to create paper wireframes.

​

The home screen paper wireframe below focuses on optimizing the browsing experience for users. 

Photo of Hazal Ozturk's paper wireframes
Photo of Hazal Ozturk's paper wireframe environment, showcasing design concepts and interactive elements in UX design

Digital Wireframes

Wireframes

I paid attention to user pain points when I moved my designs from paper wireframes to digital wireframes. I chose a Z-shaped layout for the home page.

Digital wireframes
Screen size variations for the digital wireframes

Screen Size Variations

I changed the home page design to Single-column on smaller devices (mobile phones etc). This also allowed to have consistent layout throughout the app.

Digital wireframes 3
Digital wireframes 2

Usability Study Findings

I conducted an unmoderated usability study. Findings from the first round helped turning wireframes to mockups. I had 5 participants the study length was approximately 30 minutes.

1. Date / Time Selection

​User had to select date and time from different drop-downs. This meant more than 1 click to select a time

2. Mapview

Users still wanted to see a list of museums with some information on the map view.

3. Sorting

Users wanted to be able to sort by date OR to sort alphabetically

Refining the Design

Mockups

Based on the insights from the usability study, I made changes to add a sort alphabetically option on the “Museums” and ”Galleries” pages. I added a “sort by:” label and an A->Z icon.
I also made another change on the same pages, which was adding a “map view” option. I used list and map icons, and highlighted the selected view option.

Before and After usability study comparison for landing page

I made changes on the time selection modal based on the user pain points. I added time selection right next to the date picker, and I also added a “from -> to” option to provide users smoother time selection experience. 

Before and After usability study comparison for landing page for the calendar view

Accessibility Considerations

1. I used headings with different sized text for clear visual hierarchy.

2. I chose accessible color pairs for the buttons and text.

3. I used informative text with icons, and added alt text for the images for screen readers.

Original Screen Sizes

Original Screen sizes for Art Galleries
Original Screen sizes for Art Galleries 2
Original Screen sizes for Map View

Screen Size Variation

I included mockups for additional screen sizes based on my earlier wireframes. Most of the users search locations and events from their phones, so I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible. 

​

I changed the Z-shaped layout to Single column and I moved the search bar out from the header to make it more reachable.
 

Original Screen sizes for Museums

High-fidelity Prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team. 

 

View ARTarea high-fi prototype

Screenshot of the High fidelity Prototypes on Figma

Moving Forward

Takeaways

Impact

Our target users shared that the design was easy to navigate through, clear and more engaging with the map, and demonstrated an easy searching experience. 

What I learned

I learned that responsive design is really important as my mockups layout totally changed on smaller devices. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions. 

Next Steps

1. Conduct follow-up usability testing on the new website on different sized devices.

2. Identify any additional areas of need and ideate on new features

bottom of page