The Paley Center
Overview
Introduction
Together with Fadwa Naamna and Gabriel Ayabarevoke, we worked on an exciting project for the Ironhack UX/UI Design bootcamp.
Paley Center and their challenge
For this project, we collaborated with The Paley Center based in Jerusalem. Since 1977 this cultural arts center stands out with its artworks, but also in supporting the younger generation, and the local community and collaborating with contemporary artists. The Paley Center only has a Facebook page at the moment, but no website.
The challenge is as follows: Design a responsive website for a local business or professional.
Role: UX researcher, UX/UI designer
Team: 3 designers
Duration: 54 hours (4-week period, part-time)
Tools: Figma, Google Forms, Notion, Slack, Zoom, Useberry,
Scope & Constraints: Max. 1 stakeholder interview, no user surveys, maximum of 5 user interviews (carefully screened), focus only on the happy path in the user’s flow, most of our design will be in English — and not Arabic for now — since this is better to communicate with each other.
Need to catch a train? No problem. Scroll to the end to see our results and to read our main takeaways.
Let’s dive in!
Researching the world of art
The market and competition
We did a competitive analysis with some of the local and international art centers to learn more about the competition. To do this, we created a branding comparison, a market positioning map, and a Feature Comparison you can see below.
Feature Comparison - Must-haves
This feature comparison shows us what is commonly used in the market and thus in the user’s mental model. This would be a must-have:
Feature Comparison - Opportunities
However, there are also some areas that a lot of competitors haven’t explored yet. These would be some good opportunities:
Ultimately, the branding comparison, market positioning map and feature comparison gave us these following insights:
Strong online presence: We can see that the competitors have a very good online presence. Also, they are well involved with their users due to the fact that they all have social media and almost all have the ability to opt-in for newsletters.
Content & online experience: We also see that all the competitors have a lot of online content in the form of articles, pictures and videos. KADIST takes it even further by showing online exhibitions as well in the form of videos and interviews
E-commerce: Finally, we found out that only Whitechapel Gallery and Al Mamal have the option to buy art pieces, collection books and other products.
Great! Next step: let’s meet our stakeholder.
The stakeholder
We had the opportunity to talk with the director of The Paley Center, Hanna Qubty. He has been the director for over 5 years and has build a clear vision of where he wants to go with the cultural arts center.
Goals:
Bridging the gap between contemporary art and the community.
Attracting more audience (Current reach is 100.000 out of 470.000 Palestinians).
Continuing podcast.
Supporting the young people.
Requirements:
One website that is functional for the contemporary artists as well as the community.
Arabic and English language for the website.
Good archiving on the websites for projects and exhibitions that can also be used as (academical) references.
Let’s move on to meet our users.
The user
We want to learn more about the needs, problems, and perspectives of the user. In order to do that we chose to do qualitative research in the form of user interviews. We created a user interview guide and started interviewing 5 different people varying from art lovers to art professionals with ages between 28–69. Having gathered a lot of useful information, here are a couple of the User’s Quotes that sum it up quite nicely:
Sadik
“Most important elements in online art platforms is accessible information (knowledge) that isn’t merely text but also supported by good quality images.”
Silvia
“Elements of a good experience: clear description, overview points/themes, original intriguing stories about the exhibition, interactivity.”
Laura
“Contemporary art is not always clear, you might find hard time understanding the basics.”
Neil
“I think it’s unfortunate when there is too little information (too constricted) about an artwork so you can’t fully understand or experience it. It is a missed opportunity.”
Manal
“A good experience in art exhibitions: having online presence with accessible information.”
What do these insights tell us?
Affinity Diagram
To synthesize all the data we gathered, we first created an affinity diagram. We’d like to see which themes and patterns we can from our user interviews.
Insights that stood out for us:
The user finds detailed artwork descriptions essential for a good experience
The user needs more online explanatory information about the art spaces, exhibitions and artworks to delve more into the artworks’ message
The user wants to be pleasantly surprised
The user wants to explore information and content before and after an exhibition
Empathy Map
Next, we created an empathy map to sum up our insights and learnings about our:
User Persona
Having synthesized who our user is, all these insights are put together in one primary user persona. This persona will help us during the rest of the design phase. We’d be able to ask at every step: “How is this improving Meryam’s experience?”
User Journey Map
Time to see Meryam‘s full user journey. We want to look for opportunities where the online experience can enhance the overall physical experience.
Problem- & Hypothesis Statement
Having synthesized a lot of data already, we can clearly state the following problem statement. Also, we believe the additional hypothesis statement will help us solve this problem.
Problem statement
Culture (or art) lovers and professionals need accessible information and content about the artworks, exhibitions, programs, and artists because it's difficult to understand the meaning of art without getting further context which is frustrating, un-exciting, and un-inviting.
Hypothesis statement
We believe by creating an accessible website with lots of content, interactivity, and information about artworks, exhibitions, programs, and artists, will achieve a rise in visitors to The Paley Center. We will know we are right with a rise of 15% in online and offline visitors.
Now we can move on to create some awesome ideas! To help us on our way, we created 3 how might we statements:
How might we give Meryam contextual information and content in order to experience artworks, exhibitions, programs and artists better?
How might we support The Paley Center with a mediatory infrastructure in order for them to attract more audience both from the professional and the general public, online and physically
How might we help Meryam to learn more about the artist and give more meaning to the art?
Moving on!
How might we improve Meryam’s experience?
In this step, we want to come up with as many solutions as possible to these how might we questions. We did that by brainstorming without interruption for 15–20 minutes to really diverge in ideas.
MoSCoW-method & MVP
Next, we converged these options into choices by discussing what is best for Meryam. To help us further prioritize these solutions we additionally applied the MoSCoW-method. This helped us to write a final minimum viable product statement (MVP):
Minimum Viable Product
The goal of this website, at the bare minimum, is to provide an accessible platform with information about art exhibitions, artworks and artists for visitors of The Paley Center, in Arabic and English. By offering detailed content about the artworks, exhibitions and artists, the website further aims to improve the experience of the visitors of The Paley Center and bridge the gap between the contemporary artists and the community.
User Flow
Now that we know what we are going to create, we started to work out more of the details for Meryam’s journey. How does Meryam reach this goal? What does that journey look like? To answer this, first we created a User Flow. Here we focussed on the happy path — ideal flow :
Sitemap
Subsequently, we created a sitemap to have a good overview of what the information architecture looks like. This also helps us to see which pages we have to design.
Concept Sketching & Low-fidelity wireframes
The sketching begins! The three of us started to create multiple sketches for our solutions and uploaded them into Figma. Now we had to decide which sketched ideas fit best to Meryam’s needs. We did this by dot voting and ultimately, we created our low-fidelity wireframes based on our top-voted screens:
Concept Testing
So now that we have some actual wireframes it is important to immediately test them because we want to see if our solutions actually work for the user. We got the following insights from our concept testing and highlighted them in the low-fidelity screens above:
The user says it’s unclear what ‘Art Content’ means or contains
The user would search for an exhibition under ‘Events’, not ‘Art Content’
The user thinks there are too many options under the ‘Art Content’ menu
The user prefers to use the search function, partly because the navigating menu isn’t clear.
The user likes the ‘artworks’ page so they can actively research a specific artwork.
Let’s improve our prototype!
Painting the picture of a new online experience
Mid-fidelity wireframes
We improved our low-fidelity design by applying the feedback to our new design iteration. Additionally, we added more details to the screen and wrote most of the text for the content. The result are our mid-fidelity wireframes:
Since the navigation also had a redesign, we changed the sitemap which you can see here: sitemap version 2.
Visual Competitive Analysis
We started doing a visual competitive analysis to see what the competitors are doing, what works, what doesn’t, and most importantly how The Paley Center can differentiate itself from them:
Brand Attributes & Moodboard
Subsequently, we created brand attributes that we felt — based on our user- and stakeholder research insights — fit best to The Paley Center. Based on these attributes, we created a mood board:
Style Tile
Finally, we were able to make decisions for the colors, typography, and other UI elements. We combined these in our style tile to communicate even more precisely what the visual language would be:
Does the user approve of our design?
Desirability Test
Let’s start with exploring how the user feels when they see our visual style and compare that to our brand identity. We did this by doing a desirability test. We tested with 6 people (ages 24–46) and found the following insights:
That’s not too bad, but not really close to our brand attributes. We’ll use this feedback later on.
Usability Test
Now, let’s test those mid-fidelity wireframes with a Usability Test. We received some very valuable feedback by testing with 6 people (ages 24–46):
1. The user wants to use the search button for navigating extensively, even with the improved navigation
2. On the homepage, ‘Agenda’ should be named ‘Exhibitions & Events’
3. Filters should be simplified for the artwork page
4. The user needs better continuity when it comes to clickable cards
5. A subscribe button needs to be added to the newsletter subscribe option
High-fidelity Wireframes (v1.0)
Finally, we applied the feedback to the following design iteration, our high-fidelity wireframes:
Extra Usability- & Desirability Testing
The design is starting to come to life! But how do we know if the design is a success? By doing more testing ofcourse!
We did one more round of Usability + Desirability Testing and found the following insights:
The user also wants to be able to filter names on the exhibition page
The user thinks the ‘art type’ filter is confusing
The user thinks the content cards should be organized chronologically
The user thinks the pages are intuitive and organized, but it can be a bit more exciting and creative
We took all this valuable feedback into our final design iteration. Now it’s time to show you the final result.
Final prototype
High fidelity wireframes (v2.0)
Arabic page
Since people read Arabic from right to left, we’ve made sure in our design that also the navigation and the website’s content follow this order.
High fidelity prototype
Conclusion
It was great working with Fadwa Naamna and Gabriel Ayabarevoke on this project. I want to thank them for all the energy and work they put into this project as well. Also, I’d like to thank Hanna Qubty for the collaboration. I’m looking forward to getting the website developed.
What’s next?
Set up a timeframe to develop our MVP website with the stakeholder.
Iterate the design based on our research synthesis and our lower-prioritized ideas. Subsequently, dive deeper into these topics by doing more research — and the rest of the design thinking process.
What have I learned?
Work goal-oriented when using any design method to not lose myself in the details. I found that the Pomodoro technique is very helpful with that.
Working efficiently in Figma by creating lots of components that can be iterated from a top level and are automatically changed throughout the entire design. The same goes for the power of auto-layout.
Always keep fighting for the user through every step of the process! Sometimes, we all could get lost in our creativity and ideas, but our decisions should ALWAYS be focussed on our user persona.
Every team member has their own strength. It’s great that we communicated so well and listened to each other because it helped us to learn a lot from each other, and work efficiently and effectively.
Main takeaways
The goal is to create a website for The Paley Center in Jerusalem to improve the overall user experience of their visitors and to bridge the gap between the community and contemporary artists.
Competitors already have a strong online presence, but there are still a lot of opportunities. The Paley Center should mainly focus on the local people since we found a gap in the market there and it aligns with the stakeholder’s goals of growing the number of local visitors.
The problem: The user, culture (or art) lovers, and professionals need accessible information and content about the artworks, exhibitions, programs, and artists because it’s difficult to understand the meaning of art without getting further context which is frustrating, un-exciting, and un-inviting for them.
Our solution as a minimal viable product: Providing an accessible platform with information about art exhibitions, artworks, and artists for visitors of Paley Arts Center, in Arabic and English.
By knowing what is available, the website further aims to improve the experience of the visitors of Paley Arts and to bridge the gap between contemporary artists and the community.Result: Our design has been tested 5 times in different ways. The result is a website that meets the MVP’s requirements from above while at the same time conveying The Paley Center’s brand attributes in a visual language. It’s available in both English and Arabic — of which the Arabic pages are readable and navigable from right to left automatically.
Thank you for reading this case study. Have you got any questions regarding this case study or do you want to get in contact?
Feel free to contact me!
— Robin 👋