Project Scope: May - Jun 2021
Role: UX Research, UI Design, Usability Testing
Project Type: Personal
Tools: Photoshop, Figma, Miro, Principle
Project Overview
Curate is an art history app that presents a personalized, quick and easy way to find more information about art during your gallery visits. It puts the control in the user's hands, allowing for full self-guided tours, while also offering easy access to search tools at any point in your visit, and related interesting facts you might not have expected to learn. No more depending on only audio tours or just the written plaques, Curate lets you enjoy art you love, at your own pace, in your own time.
Kickoff
During my UX design course, I was granted a prompt for my first design project: Design an art history app for an art gallery in London. To start off, I asked myself a few initial questions to guide my process:
-
What art gallery in London?
-
Who is the primary user?
-
What are their goals? Why will they use our product?
-
What do they need the most?
To answer the first question, I decided on working with The National Gallery in mind. Well ok, that was easy. But what about the rest? To start answering them, I followed the Design thinking framework:
-
What are their frustrations?
-
How will the business benefit from it?
-
How do people interact with competitors? Are there any issues there?
Design Process
-
Empathize - Surveys, User Interviews, Research, Affinity Mapping;
-
Define - MVPs (MosCow Method), User Persona, User Journey Mapping, Storyboards;
-
Ideate - Brainstorming Ideas, User flow, Sketches;
-
Build - Wireframes, Logo Design, Style tile, UI Kit, Prototype, Final UI screens;
-
Test - User Testing, Takeaways
1. empathize
1.1 User Interviews
I conducted interviews to better understand how the users approach their gallery visits and how they go about to learn more art history that interests them. I recruited 9 interview participants through a screener survey published in social media groups related to art, galleries and museums. I wanted to minimize the scope of the public being interviewed to focus solely on people that already have interest in art, as to better apply my resources and better understand the primary user group.
Interview Goals
-
I want to identify common challenges people face when trying to learn more about art history when visiting an art gallery.
-
I want to understand how people experience art galleries and why.
In the script, I made sure to first empathize with the interviewee. Started by asking broad life questions, to get to know them and make them comfortable. Then introduced the subject on art history. The flowchart was used as a rough guide - just to make sure I would hit the main points I needed information on. Those questions were written to be open-ended to encourage detailed conversation.
1.2 Affinity Map
1.3 Insights
Prior to my research I didn't expect how the pacing of your experience is so important to people and how that's where most of the frustrations with guides and audio tours come from. I also underestimated the importance of the ability to make specific questions about the art piece or topic. Users had also placed a high importance on learning more about the timeline of the art movements and the artist lifetime, and where the specific piece fits in.
Learning how art evolved to that point and where it went after it was mentioned as an interest by 75% of the users.
62.5% of users mentioned wanting to know more about the artist themselves and how they made their art.
Pain Points
-
Not being able to follow their own pace / schedule when following a pre-recorded audio tour or a tour guide.
-
Tour guides / audio tours might not be able to provide all the information the users want.
-
Tour guides / audio tours can be expensive.
-
There's no easy, practical way provided by the gallery to learn more about a specific art piece besides brief plaques and audio tours.
User Goals + Motivations
-
Learn more about art pieces and how they relate to the art world.
-
Visit art galleries to see, feel and experience new things outside their everyday life.
-
Galleries makes them feel cultured and have their horizons expanded.
"I like a more unstructured experience where I let my whims take me. I don't want to worry about following someone else's schedule. "
Jordan, 28
"I find it very interesting to know how styles evolve to each other, how things connect to each other. That timeline is very interesting to understand."
Rachel, 33
"The thing I don't like about group tours is that you have to be on their pace. You can't linger."
Michele, 52
2.1 Create Personas
After gathering the research, It is now time to define the problems in more clear context. So I create Personas and storyboards to get more insights and to gain a fresh perspective on the problem space from the point of view of the users.
2.2 Storyboard
2. define
3. ideate
3.1 User Flow
Trying to understand how to get the users to interact and perform the right tasks, I developed an user flow:
3.2 P&P Wireframes
Before moving onto more high fidelity wireframes and mocks, I used pen and paper to sketch a couple different pages options, trying to figure out the core of the app and how it's structure would work.
4. build
4.1 Lofi Wireframes
With the paper wireframes done, I felt confident on what I needed to proceed with lofi wireframes on Figma. Thinking through the preliminary flow, I made sure to only keep what was completely necessary at first, thinking we could have add-ons in the future, and what in those areas needed improvement. There was a lot of my time into this step to make sure I had the finishing touches on the underlying UX before moving onto the visuals.
4.2 Wireflow
With the wireframes done and wireflow planned, I moved to the HighFi wireframes, building a prototype I could test
with users.
5. test
5.1 Usability Testing
I recruited 5 people to test the prototype through a moderated usability test. The participants were aged between 22 - 62 years with all of them being regular art gallery visitors.
The objective of the test was to check:
-
How easily users are able to search information and browse through it
-
If each page is clear, easy to understand and navigation is intuitive
-
How easily users are able to set up and follow the self-tours
-
How does the overall experience feel like
0 = Failed
1 = Completed with difficulty
2 = Completed
5.2 Insights and Iterations
The participants were asked to perform 5 different tasks, and those were rated as 0 if the task wasn’t completed, 1 if completed with difficulty and 2 if completed successfully. The Start Self-Tour task had a lower success rate because the page had to be scrolled down in order to find the start tour button. This issue could be fixed quickly by placing the start tour button on top of the page, right next to the name of the tour you chose. I also added a written description to the tour, changed the text to be more clear and, instead of the more button, I organized the content with horizontal scrolling:
Tour Description Page v2
Tour Description Page v1
I also added a simple menu on the top right of the screen with a tour and search buttons, allowing the user to freely move between the two features whenever needed. That way you could be in the middle of a tour but still be able to search for information on art pieces that might not be part of it originally.
Tour Map Page v2
Tour Map Page v1
Search Pop-up
Tour Pop-up
5.3 Final Designs
Onboarding
Welcoming the user to the app, I wanted the first screens they see to represent the visual language we'll be seeing throughout the app. We're welcomed with beautiful art pieces completely taking over the screen and very minimal and elegant text and buttons guiding us through the app possibilities.
Browsing Knowledge
All the visuals are kept in a dark mode style, giving the app a modern look, allowing design elements to pop and reducing eye strain (specially avoided bright white screen as in art galleries we might have darker rooms to let the art piece shine - we don't want a super bright screen taking away from that).
Timeline
Self-Guided Tour
Starting from pre planned tours, you can select the amount of time you want to spend at the gallery that day. Get a quick preview of what's to come and start your tour to guide yourself. You can always skip pieces you don't find interesting, or linger on artists you like the most. All in your own pace, your own time.
5.4 Style Guide
5.5 Takeways / what's next
Coming from the art world (albeit animation focused), working on Curate was incredibly rewarding. I was able to bring my love for art to the design and got to experiment with a lot of Figma features I haven't used before to bring it to the next level. I was not able to fully flesh out other features and designs I wanted ( like better develop the timeline - my favorite feature ) due to time constraints, but I'm excited to incorporate my learnings in future projects down the line. If possible, for Curate in the future, I would love to:
-
Do more in person, on sight user testing, to make sure the self-guided tours are completely fleshed out
-
Add a sound option to the readings, giving more accessibility to the app
-
Develop the floor plan and map with the actual gallery, allowing for the best instructions possible
-
Add a QR code search feature in conjunction with working with the gallery to provide more options for in app search
. But wait - there's more!
Management app for the animation industry
New UI systems for Playdots
Daily UI challenges
. reach out on
. reach out on
