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
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.
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
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
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.
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.
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.
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.
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.
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
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.
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.
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