Solving the Problem of Accessing Artworks Online and promoting Art Events in the City of Portland
How I used UX Design to help a Portland museum make art content available online and promote art events in the Portland City Area
The Challenge
Through the UX Design Professional Certificate promoted by Google, this study case was prepared to practice the knowledge studied in the course.
My role was to be the UX Designer, going through all stages of the project, including:
- User research;
- Conducting interviews;
- Wireframing;
- Prototyping;
- Conducting usability tests and more.
My challenge was to Design an art history app for an art museum in Portland.
The Problem
Provide reliable information on works of art, in addition to promoting the culture of the region, is an arduous task, even more so in times of pandemic. Another focus was to include people with disabilities at social events, who usually need to make more effort to find events that are adaptable for them. So, the app came about as a partnership between the Portland Museum (ficticious) and the city hall to solve these problems.
Develop a viable high-fidelity prototype for the business based on feedback from users within two months.
The Product
An app who offers content about art from an art museum, established in Portland. The app also shows all the artistic events that will occur in the Portland region and nearby.
Project duration: 2 months (From 10 april to 10 june ).
User Research: Summary
During this project, several approaches were applied to validate information and discover points of improvement in the app, including desk research, interviews, competitive audit and usability tests.
Some of the frameworks applied were Empathy Map, Personas, User Story, User Journeys, Problem statements, Goal statements, Value proposition and Crazy 8’s. All the stages of the project were guided by the Design Thinking methodology.
User Research: Interviews
In order to understand users’ pain points, initial interviews were conducted with users. But first it was necessary to define objectives that should be clarified during the interviews. Some objectives included:
- Understand how often people visit art museums or the like.
- Understand how people filled in the artistic gaps because they were unable to visit museums during the pandemic.
- Understand what influences a person to go to a particular museum or art gallery.
Based on these objectives, questions were created to help achieve each of them. You can check some of the questions elaborated below:
- How often did you go to museums/art galleries before the pandemic?
- During the pandemic, how was your contact with art? How often? Where?
- How do you choose a museum or art gallery to visit? What motivates you to go on a specific one?
It was important to prepare open ended questions in order to avoid simple answers (such as yes or no) and thus get more valuable information about the user and the goals previously defined.
User Research: Pain Points
With the information received from the users, the main pain points were discovered, which were used as guidelines during the project.
- Hard to use apps: Some people think they are old-fashioned to use technology at art Galleries and at home. So, they need an easy-to-use app.
- Difficulty searching for events: Most people cannot travel to visit famous galleries around the world, so they need to find events nearby.
- Few art events near: There are few art events in the region. So, its important to foment art events and expositions in the city.
- Unreliable art sources: Finding reliable sources about artwork on the internet where there is a lot of fake news ends up being a challenge. So, it’s important to provide quality content.
User Research: Problem Statement and Persona
Evelyn Smith is a Middle-aged teacher with a mild vision problem who needs to find a way to access art online and find out about art events near home because she wants a good source of content to teach her class and enjoy art in an easy way.
User Research: User Journey Map
Based on the Interviews, Personas and Problem Statements, the User Journey Map was elaborated in order to understand the user’s routine with the problem and what insights could be obtained at each stage of this process.
Competitive Audit
A very important step in structuring this project was the competitive audit. A study was carried out analyzing the weaknesses and strengths of direct and indirect competitors. With this tool it was possible to identify both positive points (to know where to focus) and negative gaps (to make our product stand out) from the competition.
This study used 6 key metrics for comparison, such as Accessibility Features, Visual Layout and Reviews across download platforms. The metrics were evaluated based on 5 scores, from Awful experience (1) to Amazing experience (5). You can check the spreadsheet with the competition audit data at this link or if you want to read about the results in a report, it can be found at this other link.
Paper Wireframes
At this stage, the ideas accumulated in the research were materialized. The focus was to generate a large amount of ideas first, and then select the best ones. Crazy 8’s concept was used to come up with ideas related to accessibility and inclusion.
Digital Wireframes
From the ideas that came from Crazy 8’s, some of the integrated ones were to add options to change font size and contrast. Audio player to listen to the artworks and texts in the main icons to make user actions more intuitive.
In the search events page, was added filters to help the user to find the best place to go faster, including a button to filter for accessibility. All events describe about their accessibility points in the event description.
Low-Fidelity Prototype and first Usability Test
After making the main wireframes, it was possible to create the low-fidelity prototype (lo-fi, for short). This prototype was used in the first Usability test. If you wan to check out the lo-fi prototype on figma, just click here.
With a working lo-fi prototype, a UX Research study plan was created to organize a usability test with users. Some of parameters can be checked below:
- Study type: Usability Study Online — Unmoderated.
- Location: Brazil and Europe, Remote.
- Participants: Five (5).
- Lenght: 10–15 Minutes.
- Metrics (KPI’s): Conversion Rate, User Error Rate and System Usability Scale (SUS).
After conducting the usability test with the lo-fi prototype, it was necessary to organize the information obtained. For this we first used a note taking spreadsheet and an affinity diagram.
With the organized data, the analysis was done in order to filter and find patterns among user feedbacks, using pattern identification. Lastly, the insight identification was applied to identify the main insights, as shown below:
- Create account: Include the “create account button” in the login screen.
- Emphasys on events: Include a new section in the home page to make the events more visual.
- Tickets visibility: Include the tickets options in the burger menu.
Style Guide
After laying out the structure of the application and testing it with users, the next step was to establish the visual identity. Visual elements like colors, fonts, buttons, inputs and icons.
The chosen color palette was yellow/golden and brown. This choice was made using elements present in museums and historical artifacts, such as gold and wood. Another tool used to support this choice was Picular (also known as Google of colors). Searching for the words “museum” and “art”, it was noticed that the colors that appeared the most were shades of yellow/gold and brown.
To choose the font, we looked for one that has good readability and legibility. We opted for a sans serif font, but one that was not entirely geometric. The chosen one was Ubuntu, one of Google’s fonts.
The buttons were created in three different sizes plus a FAB (float action button). For borders, a 5px border-radius was used at all edges, which remained consistent in other elements of the application.
High-Fidelity Prototype and second Usability Test
With a defined visual identity, it was time to create the mockups and make their connections to generate the high-fidelity prototype (hi-fi prototype, for short). You can check the hi-fi prototype in this link.
Following the same steps as the lo-fi prototype, a UX Research Study plan was prepared to then carry out a new usability test. Unlike the first usability test, the second was done in a moderate way. Thus, it was possible to instigate users to explain more about their decisions and opinions. The parameters used can be seen below:
- Study type: Usability Study Online — Moderated.
- Location: Brazil and Europe, Remote.
- Participants: Five (5).
- Lenght: 15–20 Minutes.
- Metrics (KPI’s): Conversion Rate, User Error Rate and System Usability Scale (SUS).
Using the moderate test method together with the high-fidelity prototype, 5 main insights were obtained, described in the sequence:
- Map info’s: Write a label for the map (Guided Tours) and include an icon to show that is possible to zoom in the picture.
- Language selector: Inform the selected language in the login screen.
- Search filters: Include a filter to identify upcoming events and an advanced filter to select the events by type/theme.
- Helping elements: Add some visual cue that the content in the Events near you can be scrolled horizontally.
- Events information: Inform the date and time of the upcoming event in the picture’s shortcut.
Based on the two usability tests, there was an increase in the SUS score from 88.5 (lo-fi) to 94.5 (hi-fi).
Some transformations from sketch to high fidelity mockups:
Accessibility Considerations
Contrast was a highly prioritized element in building the app. Then, tools (such as Contrast Ratio) were used to check the contrast between the colors used on the prototype screens. The goal was to pass at least AA level for text of any size, user interface components, and graphical objects, in accordance with the Web Content Accessibility Guidelines (WCAG).
We also used some plugins in Figma to check the contrast, as well as a colorblind simulator to understand how some users with these disabilities would view the app. In the following image, it is possible to compare a screen seen by normal vision and others from the perspective of people with some visual impairments.
Other accessibility-focused implementations:
- Inclusion of audio players in artwork and guided tours.
- In works of art, options to change the font size and adjust contrast to dark mode were also added, helping those who have difficulty reading.
- Text has been added to the Main Icons so there is no doubt where the shortcuts would go.
- Language selection has been added to the login page, but if you make a mistake, they will still be visible (in the form of a shortcut) on all screens.
- All events have accessibility information like, guides disponible, available wheelchairs, curb cuts, wide aisles and more.
- On the event search page, there is a filter to search for events that have accessibility points.
Next Steps
- First, it would be necessary to test with the public in Portland. During the tests, users participated based on criteria such as age and interest in arts. However, in order to create a specific product for the Portland region, it would be essential to test it with the potential public and their customs.
- When handing off to the development team, a meeting would be interesting to align and explain the concepts and elements of the project. This is especially important in order to develop a homogeneous product, checking if the information present in Figma is sufficient for development.
- After launch, using some business metrics would be essential to continue ensuring user feedback to the product. It is important to point out that a project has an end, a product does not (if it is successful). And this will only be guaranteed if the iterations continue to occur according to the flow of users.
Takeaways
- Impact: Compared to competitors seen in the competitive audit, a solid application was built with lots of interesting features. Since this project is for a course and will not be officially released, it is difficult to use metrics to gauge future success. However, with the feedback received from users, it is possible to notice an interesting potential that will be applied in my future projects.
- What I learned: Throughout this project I was able to apply new concepts and develop a project centered on the user and guided by data obtained from them. Conducting a competitive audit was something especially positive, as studying the competitors it was possible to find points to stand out from them positively. Every design decision was based on studied concepts and mainly on the user.
