The Art Walk cover image

The Art-Walk is a fully customizable location-based mobile native app. Our app will allow users to plan, customize, and save a unique walking tour in a strange city, letting them navigate confidently by tracking their location in real-time. 

Duration
May - July 2022

Why is The Art-Walk a mobile native app?

Because this location-based app is designed to be used outside when users are walking in a city with which they are not familiar.

This app works independently. This app works with Google off-line maps so that it would work even if they don’t have a good wifi connection.

Problems
Lack of art & entertainment guide fits in user’s pocket.

Some tourist offices have a link to art/gallery walk maps, but it’s not comprehensive and lacks usability.

Objective
To design an art/entertainment guide that allows users to plan, and search.

Must be used as a GPS to track their location in the selected city while users are actively using the app.

To design to work with both iOS and Android. 

Target Users
Art and culture lovers. Adults who like to travel. Aged between 20 to 65. 

My Role
Sole UX/UI Designer, Visual Designer, Content Designer

Solution
I defined the product. I conceived the idea of the app and developed the contents.

I conducted Competitive Analysis, user research, and usability testing. Interviewed potential users. Found Pain Points and Solutions.

I determined MVP features, designed them, tested them, analyzed the results, and used them to improve the app’s functionality.

I designed the Mobile app from scratch to finish including creating paper wireframes, digital lo-fi wireframes, hi-fi Wireframes, and building prototypes.

Tools
Adobe XD, Photoshop, Illustrator, UsabilityHub, PowerPoint, Zoom

Design Process

  • 1. Empathize

    I conducted User Research and Competitive Analysis to understand users and to learn from competitors.

    User Interviews: I interviewed 7 potential users aged 24 to 63.

  • 2. Define

    Pain Points and Solutions: By analyzing competitive analysis and the user interviews that I conducted, I pinpointed Pain Points which led me to determine mvp features.

    User Flows: With these mvp features and how I wanted to use this app in my mind, I designed the User Flows.

  • 3. Ideate

    iOS/Android Style Comparison: I studied iOS and Android Style Guidelines in depth.

    Digital Wireframes: Since I had a clear idea of what this app would do and how it would look like, I started sketching with XD directly. I designed and created Mid-fi and Hi-fi Wireframes.

  • 4. Prototype

    Prototyping
    I prototyped Mid-Fi and Hi-Fi wireframes for both iOS and Android.

  • 5. Test

    Usability Study
    I conducted 3 rounds of Usability testing. After each test, I found problems and fixed them. A lot of Creative Problem-Solving!

  • 6. Iterate and finalize design

    I repeated Prototyping and Testing process untill I was happy with the final design. I redesigned and developed Final Prototypes accordingly.

Proposal

  • 1. Location Based

    The Art-Walk’s map shows walking paths and tracks users’ location while they walk. Provides interesting sites and things going on around the user in real-time.

  • 2. Customizable

    The app is fully customizable. Select a city, a date, interests, and length. Delete a site. Add a site.

  • 3. Voice Activation

    The Direction by Voice feature gives the direction of the walking path by voice. When the Talk to me feature was activated, the app reads user short descriptions of the art site.

  • 4. Save the Walk

    The user can save art walks for future use.

Competitive Analysis

  • Strada.com

    There aren’t competitors out there. That’s why I wanted to create the Art-Walk app. I found Strada.com the closest. 

    Pros: Good legend design 

    Cons: No instructions on how to use the app Confusing navigation system Since not enough art sites are listed, the search function doesn’t really work The direction function doesn’t work. It jumps to Google Map but doesn’t save any information you previously input.

  • yelp.com, uber

    Since there aren’t any real competitors, I looked for location-based apps with features that the Art-Walk should have.  

    Pros: The Map Navigation must work like the Yelp app.

    The Card includes a photo and a short description of the art. When the card is tapped, a detailed description appears.

    The Direction must be given on the map as Uber Map does with a walking path drawn on the map with an estimated walking time.

User Personas

  • Dean 26

    ARTIST, TATTOO ARTIST
    New York City
    Single

    “No more getting lost in a mazed ancient old city!”

    Goals:
    I need a real-time art guide when I’m traveling to an unknown city.

    I can even use that one when I’m home. I live in New York City!

    Frustrations:
    When I don’t speak their language, I can’t even ask for a direction for a well known museum because I wouldn’t understand the answer.

    I get lost all the time when I go to an ancient old city like Paris or Barcelona, ended up missing the concert that I bought a ticket earlier on that day.

  • Vera

    Vera 42

    PARALEGAL
    Iowa City, Iowa
    Married with a teenage son in college

    “I hate missing out!”

    Goals:
    I want to have a local art & entertainment guide in my pocket.

    Frustrations:
    There isn’t one place to look for the local entertainment anymore.

    I don’t have time to do the research before I travel.

    I missed Monet’s Garden last time when I was in Paris because I happened to go there on the only day of the week it was closed! But I couldn’t go back there next day because I had to leave next day.

Pain Points & Solutions

  • Pain Points

    There is a huge shortage of web sites which offer art walks

    Users want to know what kinds of interesting things are happening now and where they are

    Getting lost trying to get to the theater where I already bought a ticket for in a strange city

    I don’t want looking at the Google map while I’m walking

  • Solutions

    Fully customizable art-walk maps

    Shows what’s happening around the user at real time

    Walking paths from where you are to the next art site

    Voice Direction tells you how to walk

iOS and Android Style Guide

I conducted design style research to fully understand the differences in design approaches between iOS and Material Design.

User Flows

I created a user flow chart for the core user flows: sign up process, planning a walk process, and walking the walk process.

 Usability Studies & Findings

  • 1. Liked

    The app was well-liked. Regardless of their ages, everyone was excited about this app and wanted to use it right away.

  • 2. Intuitive

    Most users felt It was intuitive to use.

  • 3. Be Social

    The majority of the 20-something participants wanted to have a social aspect added to the app.

  • 4. Comparability with Google maps

    Some of these 20-something participants desired more interactivity with Google Maps. For example, staring and Favorites on the Art-Walk map showed up on the User’s Google Map, that would be great.

  • 5. Voice Activation

    The Voice Activation function was confusing. What is the difference between the Speaker icon and the Microphone icon?

  • 6. Home screen

    Some of the first Usability Study participants thought the home screen is boring.

  • 7. Be real-time

    One of the first Usability Study participants said “I want to know what’s happening around me Now!”

Iterations

  • Home Screens

    Home/Select a City screen was divided to Home and Select a City screens to create a space on Home screen to add the Quick Icon Education section.

    Featured art carousel was added on the Home screen to suggest users interesting places to visit.

  • Voice/Speaker icons

    The Speaker icon with “Direct by Voice” was added to the map. The default state is on, which means the app gives the user direction by voice. The user can turn it off if s/he wishes.

    The micro copy under the icon was removed since the Educational section was added to the Home screen.

  • Legend

    Legend, a new feature, was added to clarify what the Art-Walk’s location icons mean.

  • Like icons

    Like icons were added on Art cards. Users can like art sites and mark them for their future use. Also if the user chose to share this information, other users can see it.

Final Mockups

  • 1. Welcome!

  • 2. Login

  • 3. How the Art-Walk Works

  • 4. Select a City

  • 5. The Walk-Map

  • 6. Do the Walk

  • 7. What's Around You

Final Hi-Fi Prototypes

 Takeaways

  • Speaker vs Microphone

    Choosing voice activation icons presented some challenges, as the Speaker and Microphone icons are often used interchangeably. For instance, Google Maps uses a Microphone icon for voice directions. Initially, I considered using a Microphone icon for both user interactions with the app and the app's voice guidance. However, during an interview, one of my interviewers asked, "Is this for me talking to the map or the map talking to me?" This question made me realize the need for a change in the icon representation.

  • iOS vs Android

    Studying both the iOS and Material Design Style Guides consumed a considerable amount of time. Sticking closely to these guidelines gave me a sense of restriction while designing.

  • Next Steps

    For the next steps, I plan to design another version with more vibrant colors and conduct A/B testing. Additionally, I intend to include short, informative, and fun videos about featured art sites. The Social feature, which allows users to upload and share cool art sites, will also be added.

    Once all the new features are integrated, I will conduct another usability study to ensure everything is intuitive and user-friendly."