Street Art
Street art is an application that shows urban works of art through virtual tours, the app is aimed at those people who lack time and live far from these rural areas, so our main objective is to move them to the most remote places on the planet so that they live the unique experience of knowing street art from anywhere in the world.
Project overview
The Problem:
People lack time and money, they are also in remote areas or in countries other than those they would like to visit to learn about street art.
The Goal:
Design an application that allows users to visit the most emblematic street artworks in the world virtually and for free.
My Role:
As a general UI/UX designer, I was involved in a one-on-one project where I designed a virtual tour app. In this project, I used Design Thinking, so I started working on conducting interviews and define through exercises like user personas and emphatic maps, then I ideated using Crazy Eight and how might we, for later start to design high and low fidelity prototypes, paper and digital wireframes, UI kit, navigation schematics, design interaction, voice guidance, and product tone, finally I tested the app through usability test.
Understanding the user
User research - Personas
User research: summary
Conduct interviews and quizzes, and create empathy maps to understand user needs.
This user research resulted in the fact that most of the people interviewed could not visit the places due to lack of time and money, but not only was that the problem, however it was also difficult for them to travel to the streets where the works of art since most of the users interviewed were even in different countries.
User research: pain points
Time:
Users usually do not have the time to take a tour in person.
Distance:
The users were at a great distance from the places where the works of art were.
Accessibility:
The virtual tour apps do not have hearing assistance.
AI:
Virtual tour apps lack high resolution.
Persona: Angela
Problem statement:
Angela studies music during the day and works at night. Since he was a child, he has liked the visual arts and street art graffiti. Angela does not have much time to enjoy a tour of the streets and appreciate urban art, he would like to have the option of knowing more about art without having to leave home.
Starting the design
Paper wireframes - Digital wireframes - Low-fidelity prototype - Usability studies
Paper wireframes
I took the time to sketch the different pages of the app on paper, prioritizing accessibility, and easy and understandable handling to combat the weak points of the users.
Digital wireframes
I concentrated on designing pages based on the needs that users had expressed during the research at this phase of creating digital wireframes
Low-fidelity prototype
Create a low fidelity prototype using digital wireframes, the flow of users that you connect is destined to the realization of the virtual tour, so the prototype can be used to carry out a usability study.
User journey map
Angela's user tour mapping revealed how useful it would be for users to have an application that allows them to virtually walk through street art.
Usability study: findings
I conducted two usability studies, the first was to determine the needs of users in a virtual tours app, which contributes to the completion of wireframes and mockups; In the second study, a high-fidelity prototype was used, this showed that some aspects, such as navigation between screens, should be improved.
Round 1 Findings
Users want assistive technology.
Users want a back and exit button on every page.
Round 2 Findings
Users want a clearer navigation flow.
Users want a search button.
Users require more precise instructions.
Refining the design
Mockups - High fidelity prototype - Accessibility
Mockups
After the usability study adds a search engine on the homepage to speed up user navigation in the app, also add an assistive technology button for those with reduced visibility.
Mockups
The second usability study revealed that some users felt confused and frustrated by not being able to find a button to return to the instructions page once the tour started, so I added a button to return to the previous page and a button to go straight to the home page.
Mockups
High-fidelity prototype
According to the users' needs, the high-fidelity prototype offers improved accessibility, clearer, more precise buttons, and a cleaner user flow for navigating the application.
Accessibility considerations
1
Technical assistance was implemented for users with limited visibility.
2
Icons were implemented to make it easy to understand each page of the application.
3
A search engine was applied to facilitate navigation.
Going forward
Takeaways - Next steps
Takeaways
Impact:
The application makes the users feel included, excited, and satisfied.
A sample of application-related comments.
"I loved using the app because it made me feel like I was playing a fun video game and allowed me to view works of art that I had never imagined I would be able to see from a distance."
What you will learn:
Throughout the design process, you will learn how valuable usability studies are and how to adjust your application to meet user needs as a result.
Next steps
I'll conduct another usability study to find out what other needs the users of the application's updated version have.
To meet the needs of the users in terms of accessibility, I will conduct a specific usability study.