Visual Voyage
The Product
Visual Voyage is a project that is designed to provide social good to the community around me and others. Visual voyage allows users to explore their community and discover new exciting art around them.
The Problem
Most applications and websites do not accommodate a wide range of users and their needs when discovering art in their community.
The Goal
Design an app and a responsive website for Visual Voyage.
My Role
UX designer, designing an app for Wicks from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project Duration
September 2023 - October 2023
Understanding the User
User Research
The initial phase of the user research was geared towards discovering how we could create a solution that would be designed for a social good. Through the user research conducted initially, we uncovered multiple pain points that users currently experience with similar experiences. This allowed us to develop insights and formulate benefits that our users would gain by designing for these problems.
Lack of Information
Current art exploration apps do no provide content about the art piece.
Apps are not Intuitive
Art should be enjoyed by all but lack features that include a wide range of users.
Poor Navigation
Existing platforms don’t allow users to create their own path.
Problem Statement
Emily is a marketing manager with a degree in art history who needs to learn more about the art on display in the city and seek detailed information about the artists because she struggles to find a platform that helps her manage her art adventures more efficiently.
Starting the Design
Paper Wireframes
Taking the time to design paper wireframes allowed us to rapidly create wireframes and brainstorm different concepts on how we would address the users pain points.
Digital Wireframes
As the initial design phased continued, I made sure to base my screen designs on feedback from my user research.
Having nearby art as a category, all users type can explore and find something new.
Descriptive page is a great way for users to learn more about the art installation and artist.
Low Fidelity Prototypes
The low-fidelity prototype connected the primary user flow of selecting and ordering candles so the prototype could be used in a usability study with users.
View Visual Voyage prototype:
Usability Study Findings
Due to the large scale of this project, I conducted 1 round of a usability study to understand if the solution was on the right track. Based on the results some insightful comments provided some significant changes to the initial design.
Round 1 Findings
A bottom navigation bar would be more beneficial, reducing interaction costs, and allowing users to see exactly what they want to access.
Transcription of the page should be applied to the entire page and not just one tab.
Developing an onboarding process at the start of the initial login would help users’ expectations of what they can do within the app.
Refining the Designs
Mockups
Initial designs allowed to create a strong framework for how pages were going to be designed. Once the usability testing was complete, certain features were no longer needed such as the menu or QR code scanner at the top of the page. It was replaced with a bottom navigation menu to allow better access to the features across the app.
When it came to creating a more accessible application, the initial design for a transcription of the Art piece was a great idea, however it didn’t translate well when it came to other parts of the page. Applying this feature to the top of the page instead insures every aspect of the page can transcribed for the suer regardless of the tab they are on.
Responsive Design
Within the scope of this project, I was also tasked with creating a responsive design for users who want to utilize it outside the app. Three different breakpoints were taken into account 320px-599px for mobile devices, 600px-840px for tablet devices in portrait, and screen sizes larger than 840px accommodate the remaining device resolutions.
High Fidelity Prototypes
The final high fidelity prototype resulted in clean animations a beautiful design and a user flow that gives users the freedom to explore their community to their hearts’ content.
View Visual Voyage for yourself:
Takeaways
Impact:
Visual Voyage is an all-encompassing tool empowering users to explore and learn about art within their community. It’s also worth noting that certain features such as QR Code scanners and text-to-speech enable another often look-after group of users to enjoy the art and culture within their neighbourhood.
What I learned:
Designing to include a wide range of users can be quite challenging especially when we factor in certain impairments that users have and we over look daily. It gave me a greater appreciation for what I have but also showed me the importance of creating a design that allows all users to have a similar experience.