# ArtEra, An Audio Tour App (2023) > Art Through the Eras: An Auditory Journey Awaits - Page: https://narvitaa.com/artera/ - Role: UX Researcher & Designer - Timeline: May – September 2023 - What she did: User interviews, Paper & digital wireframing, Low- and high-fidelity prototyping, Usability studies, Accessibility, Iterative design - Tools: Figma - Outcome: Opened gallery tours to visitors who aren't fluent in English or can't read wall text, letting them explore local art at their own pace. - Prototype: https://www.figma.com/proto/WdX8nzXPDc73qaK1IEF5Ci/ArtEra---Audio-Tour-App-for-Art-Gallery%2FMuseum?type=design&node-id=639-4&t=pDH20x6IjLAiGYmj-9&scaling=scale-down&page-id=639%3A2&starting-point-node-id=639%3A4&show-proto-sidebar=1 ## Project Overview ArtEra is a communal organization dedicated to fostering appreciation and understanding of local art and heritage. With a mission to inclusively educate and inspire individuals of diverse backgrounds, ArtEra introduces its latest endeavor: an audio tour app designed to enrich the art gallery experience. Now, enthusiasts can immerse themselves in the vibrant world of local art and culture, enjoying self-paced tours anytime, anywhere. ArtEra welcomes all to embark on this journey of discovery! - **The Problem** — Visitors who are not proficient in English and those with reading disabilities encounter barriers when following along art gallery tours and understanding the descriptions. - **The Goal** — Design a user-friendly audio tour app for ArtEra, featuring multilingual options, to facilitate immersive art gallery experiences at users’ preferred pace. ## Understanding the User ### User Research: Summary Through interviews, observations, and empathy maps, I gained valuable insights into the needs of the users I’m designing for. A primary user group identified during research comprises adults with visual impairments or disabilities who may feel uncomfortable in fast-paced settings. While validating assumptions about local art galleries/museums, the research revealed additional barriers beyond disabilities. Users expressed concerns about the absence of multilingual tour guides, uncertainty regarding tour starting points, and limited awareness of gallery locations. These insights will inform the design of an audio tour app aimed to overcome these pain points, and encourage enthusiasts to explore more local galleries. ### User Research: Pain Points - **Language Barrier** — Visitors whose first language isn’t English find it difficult to understand and follow along art gallery tours. - **Accessibility** — Visitors with visual impairments or disabilities aren’t able to read art descriptions in galleries. - **Time** — Visitors prefer tours that align with their schedule and pace, favoring flexibility over rigid schedules and lengthy durations. ### Personas & Problem Statements #### Problem Statement - Primary Persona **Jean Thomas** is a **student and a recent immigrant to US** who needs **audio assistance and translation options in the art gallery tour app** because **he isn’t fluent in English and looking for a way to learn it while having fun**. [Image: Jean Thomas] **Persona: Jean Thomas, Full time student** “I love adventures, and I'm ready to explore the world around me!” Jean is a recent immigrant to the United States who is enrolled in online college classes and is also taking classes at a night school for learning English. He can read English well, but sometimes encounter difficulties when people speak very quickly and limited translation options are available. Jean wants to explore what his neighborhood has to offer, while balancing his studies with fun. - **Age** — 20 - **Education** — Online College - **Hometown** — Nairobi, Kenya - **Family** — Parents & 1 sibling - **Occupation** — Full time student #### Goals - To learn something new the neighborhood has to offer. - To do activities that are both exciting and knowledgeable. - To improve and be able to converse well in English. #### Frustrations - “As someone who isn’t fluent in English, I find it difficult when there are no translation options at art galleries.” - “It’s overwhelming to learn so much from a tour since I easily miss out things when spoken quickly.” - “I wish there were texts to follow along audio tours. I think I can pick up new words that way.” #### Problem Statement - Secondary Persona **Eryn Frost** is a **busy paramedic** who needs **to experience new things at her own pace** because of **her reading disability and tight schedule**. [Image: Eryn Frost] **Persona: Eryn Frost, Paramedic** “Working around the clock in a fast paced environment, I appreciate taking things slow whenever I can” Eryn is a paramedic who lives alone but shares custody of her daughter with her ex-partner. Eryn works both day and night shifts, and her schedule changes week to week. She has dyslexia, which makes it difficult to read text quickly and process information in fast-paced settings. - **Age** — 40 - **Education** — UNT College - **Hometown** — Lakewood, Colorado - **Family** — Daughter - **Occupation** — Paramedic #### Goals - To enjoy my free time with interesting and fun activities. - To fully experience new things at my own pace. #### Frustrations - “I find it difficult to often read texts or process new things quickly when I’m at museums or art galleries.” - “I’d like to embrace art galleries at my own pace and even after a tour, so that I don’t miss out any interesting information.” ### User Journey Map **Persona:** Jean Thomas **Goal:** Visit local art gallery and use the audio-tour feature in app. [Image: User Journey Map] *Mapping Jean’s user journey highlights the impact an audio tour app can have on users when they tour at their own pace.* ### Competitive Audit Compared the audio and supporting features of each competitors’ touring app. [Image: Competitive Audit 1] [Image: Competitive Audit 2] ## Starting the Design ### Storyboard **Big Picture:** An immigrant museum goer’s journey to embrace local art and culture at a local art gallery with the usage of an audio-tour app. [Image: Storyboard - Big Picture] **Close Up:** The usage of the audio-tour app to consume art gallery content in different languages, at the visitors own pace and preference. [Image: Storyboard - Close Up] ### Sitemap [Image: Sitemap] ### Paper Wireframes Iteratively sketching each screen of the app on paper allowed for thorough exploration and refinement, ensuring that the elements transitioned to digital wireframes effectively addressed user pain points. The home page design focuses on displaying current events and all local art galleries in users’ area to enhance the likelihood of visits. [Image: Paper Wireframes] ### Digital Wireframes Throughout the early stages of the design process, I ensured screen designs were informed by feedback gleaned from user research. [Image: Digital Wireframes 1] The primary focus was on the audio tour, with language select options added to tackle language barriers. [Image: Digital Wireframes 2] ### Low-Fidelity Prototype Utilizing the finalized digital wireframes, I designed a low-fidelity prototype, primarily focusing on connecting the main user flow of playing or planning an audio tour. This prototype was then employed in a usability study. The final low-fidelity prototype is available for viewing at [ArtEra-LoFi](https://www.figma.com/proto/WdX8nzXPDc73qaK1IEF5Ci/ArtEra---Audio-Tour-App-for-Art-Gallery%2FMuseum?type=design&node-id=54-18&t=HK0VfJaji5cVMD9J-9&scaling=scale-down&page-id=0%3A1&starting-point-node-id=54%3A18&show-proto-sidebar=1). **First Iteration compared with Second Iteration:** [Image: Low Fidelity - First Iteration] [Image: Low Fidelity - Second Iteration] ## UX Research ### Research Study [Image: Research Study] ### Usability Study Findings **Affinity Diagram:** Feedback gathered and organized from 5 participants, identified as Participant A, B, C, D, and E, from the usability study. [Image: Affinity Diagram] #### Pattern Identification - It was observed that **3** out of **5** participants **hesitated to change language**. This means that **quite a number of people are confused about the specifics of language change on tour**. - It was observed that **3** out of **5** participants **were able to navigate smoothly across features**. This means that the **navigation is simple for most users, but not all**. - It was observed that **4** out of **5** participants **mentioned buttons in this app**. This means that **there are inconsistencies/unclarity in buttons across design for most users**. - It was observed that **2** out of **5** participants **asked about map to route features**. This means that **few users are expecting a routing from Maps option, but not an overwhelming majority**. #### Insight Identification - Based on the theme that: **language change option is uncertain for most user populations**, an insight is: **users need a clearer indication on where in the app or tour will the language changes be applicable**. - Based on the theme that: **navigation for this app is simple for most users, but not all**, an insight is: **users are good with the current navigation but can be improved with consistencies to familiarities of current trend to suit a larger user population**. - Based on the theme that: **a large number of users are confused about the buttons of the app**, an insight is: **users need a consistent button with clear indication of what it does**. - Based on the theme that: **map-to-route is a feature that is expected in the component**, an insight is: **users may need a way in which they are able to locate the gallery distance to their current location through this app**. I conducted two rounds of usability studies. Insights gathered from the first study informed the progression of designs from wireframes to mockups. The second-round of study used a low-fidelity prototype, pinpointing areas within the mockups that required further refinement. #### Round 1 - User wants translation options - User wants tour planning flexibility - User wants pace control of the tour #### Round 2 - User unsure of language change applicability while on tour - User wants more consistent interface - User wants route feature in app to find nearest galleries ## Refining the Design ### Mockups Following each round of usability testing, alterations were implemented primarily to enhance the language switch options. Additional changes include refinement to color schemes, map and route features, layout for saved items, and consistency in buttons and the overall design scheme. [Image: Mockup] ### Key Mockups **Light** [Image: Start Page] [Image: Sign In Page] [Image: Sign Up Page] [Image: Home Page] [Image: Maps Page] [Image: Tour - About Page] [Image: Tour - Comments Page] [Image: Tour - Saved Art Page] [Image: Tour Plan - Create Page] [Image: Tour Plan - Saved Page] [Image: Tour - Start Page] [Image: Tour - Content Page] [Image: Tour - Content Page with Options] [Image: Tour - End Page] [Image: Profile - Language Page] [Image: Profile - Saved Page] **Dark** [Image: Start Page] [Image: Sign In Page] [Image: Sign Up Page] [Image: Home Page] [Image: Maps Page] [Image: Tour - About Page] [Image: Tour - Comments Page] [Image: Tour - Saved Art Page] [Image: Tour Plan - Create Page] [Image: Tour Plan - Saved Plan] [Image: Tour - Start Page] [Image: Tour - Content Page] [Image: Tour - End Page] [Image: Profile - Language Page] [Image: Profile - Saved Page] ### High-Fidelity Prototype The refined high-fidelity prototype showcases cleaner user flows for an audio tour that is smooth and useful to visitors of different backgrounds. It also meets the user needs for a clearer language changing option, consistent buttons and labels, as well as planning tour options. The final high-fidelity prototype is available for viewing at [ArtEra-HiFi](https://www.figma.com/proto/WdX8nzXPDc73qaK1IEF5Ci/ArtEra---Audio-Tour-App-for-Art-Gallery%2FMuseum?type=design&node-id=639-4&t=pDH20x6IjLAiGYmj-9&scaling=scale-down&page-id=639%3A2&starting-point-node-id=639%3A4&show-proto-sidebar=1). **Light Mode** [Image: Prototype - Light Mode] **Dark Mode** [Image: Prototype - Dark Mode] ### Sticker Sheet The color palette selected for ArtEra embodies its core values: culture, creativity, calmness, and customization. The logo aims to captivate the community’s interest by highlighting sound waves for audio-tours, paint brush symbolizing art and history, and an origami humming bird for grace and agility. Additionally, a slogan is integrated to symbolize the passage of history through time and place. [Image: Sticker Sheet] ### Accessibility Considerations - Provided multilingual audio and content translation options during audio tours for foreigners or non-English speakers. - Utilized labels, icons, and consistent buttons to ensure navigation and features are understandable for people of all age groups. - Incorporated directional features in maps to display nearest art galleries, their opening hours, and entrance fees for visitors' convenience before their visits. ## Going Forward ### Takeaways **Impact** ArtEra has made a powerful impact on its visitors and community by prioritizing accessibility. This inclusivity ensures that individuals of different ethnicities, as well as those with visual impairments or disabilities, feel acknowledged and encouraged to explore local art and culture without any setbacks. A quote from peer feedback: *“It’s a really cool app that makes art tours fun and engaging. It’s like a podcast for my favorite arts!”* **What I learned** Throughout the design process for this audio tour app, I realized that creating a good design is a gradual journey. By incorporating feedback and ideas from diverse sources, I gained the ability to empathize with users' pain points and view the project from different perspectives. This iterative approach allowed for continuous growth and improvement, leading to refinement with each iteration until the final product was achieved. ### Next Steps - Conduct another round of usability study using the high-fidelity prototype to validate the effectiveness of addressing the identified pain points. - Conduct additional user research to identify any new pain points that may have arisen or been overlooked.