The COVID-19 pandemic transformed how we interact with art by the year 2021, making traditional galleries less accessible. This project aimed to bridge the gap by creating a virtual gallery experience that replicates the allure of physical galleries, transforming smartphones into virtual galleries at the fingertips of art lovers worldwide.
The project envisioned a future where users could interact more directly with art using intelligent search functionalities and image recognition, enabling them to delve deeper into the stories behind the artworks and gain a more profound appreciation for the artistic process.
As the lead interface designer, throughout the two-month project tied to the Federal University of ABC Human-Computer Interaction course, I was responsible for turning research findings into real-world design elements. This meant carefully reviewing the results of user research and using them to guide the design of the virtual gallery's interface. I worked closely with Amanda and Vinicius throughout this process, and their expertise was essential in shaping the direction of the project.
Amanda's excellent question-crafting skills helped us understand what users wanted and needed from our virtual gallery. Her insights into user behavior and preferences were crucial in deciding what features and functionality to include. Vinicius, with his exceptional prototyping skills and sharp design sense, was key to turning these insights into user-friendly interfaces. His contributions were especially valuable in developing the persona dashboard, a tool that helped us understand our target audience.
We employed the double-diamond methodology, ensuring systematic progress from ideation to delivery. The case study's unique aspect lies in its ongoing evolution, with continuous refinement to deliver an exceptional user experience even after finishing the discipline.
We performed a quantitative user research, through Google Forms, two types of personas were validated against what we were discussing about the potential target audience.
The validation results on Google Forms were based on questions about: age, cellphone use, city, state, if the person used AR technologies before, educational level, galleries and museums trip frequency, monthly payments, sex and if the person wanted an app to simulate a museum trip.
Below there is a dashboard with the data regarding our persona analysis, keep in mind that it is in portuguese.
In this evaluation of virtual art gallery apps, we analyze Arte - Virtual Exhibitions and Smartify: Arts and Culture, comparing their features and usability. This assessment aims to assist users in selecting the most suitable platform for their art exploration needs.
As we explore these two rival apps, Arte - Virtual Exhibitions and Smartify: Arts and Culture, a few key points become clear:
Arte - Virtual Exhibitions offers a unique 3D art tour experience but lacks accessibility and a strong brand identity. Smartify: Arts and Culture presents a comprehensive platform with strong accessibility features and a clear brand identity. The choice depends on individual preferences.
When considering our competitors, their usability problems, and at times, their lack of objectivity, we thought it would be best to keep our interface very straightforward and simple. We focused on our primary goal of presenting artworks in museums and art galleries by utilizing user geolocation. To achieve this, we aimed for an objective and uncluttered user experience, directly showcasing the most frequently visited art galleries and museums. We also included the option to expand to a second page with a complete list of available art galleries and museums.
This approach resulted in a very simple sitemap with as few screens as possible. Ultimately, this strategy proved effective in meeting user needs and simplified the delivery process as an MVP, given our time constraints.
Below, you'll find a series of interfaces, arranged in chronological order from the earliest versions at the top to the latest version at the bottom. The initial prototype, created with Adobe Photoshop, is an image, while the last two are interactive Figma presentations.
As you examine these interfaces, you'll notice significant enhancements in the mobile interface, specifically tailored to improve usability for users interacting with the app using their fingers. The later versions feature optimized touch targets, intuitive gestures, and streamlined navigation, ensuring a seamless and engaging experience on mobile devices. Additionally, the latest version introduces a captivating loading animation, further enhancing the overall user experience.
The initial interface was created using Photoshop by one of our group members in the discipline, Vinicius, to serve as a proof of concept for our project. It represents the action of browsing an infinite collection of art, in line with our project's name, "InfinityART," via an infinite scroll.
Our color scheme aims to convey a sense of creativity, with orange as our primary color.Each artwork included details such as the work's title, artist's names, dimensions, location, date of creation, material, technique, and a brief description that contextualized the work's main visual features along with its creation history.
In addition to the enumerated reasons for the interface's design, its simplicity was also driven by our team's time constraints due to other activities and disciplines at our college.
This was the second iteration of the interface and the first high-definition interactive prototype on Figma.The story behind this version is that our group felt that having only a static image of the interface without any interaction was detrimental to our project. Therefore, our teammates, Amanda and Vinicius, decided that it would be best to create an interactive prototype on Figma. Since I was already working professionally with Figma at that time, it was decided that I would be responsible for creating the interface.
Due to the approaching end of the quadrimester, the prototype was designed with very basic live functionality. We also decided to adopt a grayish-blue color as our primary color, because it conveys an idea of trust, credibility and professionalism according to color psychology.
To meet the user's needs for accessing museums, art galleries, and viewing a list of available artworks in the city, we created a grid of images for each of these specific purposes. The grid had an eleven-pixel spacing between each image in a row, but the distance between the row and the margin did not adhere to this guideline, resulting in non-uniform spacing.
We also incorporated a hamburger menu to guide the user to perform additional actions, although it was not the most user-friendly choice in terms of ease of use. Additionally, we attempted to limit the amount of artwork information available to prevent users from becoming overwhelmed. Finally, by mutual agreement, it was decided that each artwork's page would include the name of the artwork, its description, and an interactive map displaying its location.
As expected, our interface, quantitative research, and conclusions were approved by our discipline's professor, and we successfully passed the quadrimester's final evaluation.
The story of this interface version begins after the conclusion of the course. I had a strong affinity for this case study, and I firmly believed that the interface had the potential for visual enhancement. In this section and the next, I'll delve into the reasoning behind my design choices, which were not constrained by time limitations.
I've always been an enthusiast of vibrant colors and their tropical vibes. Here in Brazil, it's quite common to use colors that might be considered less conventional for corporate design compared to what you find in North America or Europe. Two examples of well-established companies using vibrant colors are Alice (a healthtech insurance provider), which employs magenta as its primary color, and Nubank, a young fintech that has already surpassed Santander as the fifth-largest bank in Brazil in terms of the number of account holders, using purple as its main color. Drawing inspiration from these examples, I believed that adopting a more vibrant and feminine color scheme would better embody the application's ethos of being avant-garde, artistic, and more assertive in its presentation.
Pink was chosen as the primary color because it evokes a sense of playfulness and femininity while creating a sharp contrast with our previous interface, which was perceived as too serious. This new color scheme aims to make a more impactful impression. In line with this vision, orange was also incorporated to convey a sense of excitement and align with the overall app concept.
Additionally, I implemented an 8px grid to enhance the alignment and arrangement of elements within the app, ensuring consistency. As for the interface, I replaced the hamburger menu, which contained all major interactions, with a bottom menu bar to improve usability and accessibility for users' fingertips. To further enhance user experience, I attached descriptive text to the icons in the menu bar to provide context and prevent any potential misunderstandings.
For this new brand logo, the proposal was to create something much more closely linked to the concept of infinity and that, in some way, was also an artistic creation.
The logo consists of two interlinked "infinities" placed side by side, symbolizing an embrace that we wish to extend to our users, connecting them with art and boundless possibilities.
The chosen typeface includes serifs, reminiscent of the early days of typography following the invention of the printing press. This choice aims to evoke a sense of timelessness, aligning with the theme of our museum services. Lastly, the words "Infinity" and "Art" are interconnected, mirroring the embrace depicted in our logo
After conducting usability tests using an artificial intelligence tool called Visual Eyes, it became possible to draw conclusions and generate the following heatmaps of user interactions. I am analyzing only the start screen because the other screens, the left and right ones, are nearly identical to each other.
On the left side is the start screen of the second version of the interface, and on the right side is the current final version of the interface."
It is possible to see that the second version (on the right side) has improved access to the major actions that a user would perform—going to the start screen and checking available art galleries and museums. The buttons in this version have also been improved because the action of expanding available museums and galleries, represented by the infinity icon inside a button, is more visible compared to the previous text button (on the left: "mostrar todas as galerias").
It's also worth noting that the previous top bar with a hamburger menu had very few user interactions, indicating that the final version, with the most frequently used actions at the bottom, offers better ease of use.
It was a very interesting project to work on, enhancing a prototype created years ago by applying my current UX/UI knowledge to deliver an experience that retains the core concept but with a fresh design approach.
As mentioned in one of the subtitles, this is the final version for now, as everything can improve in light of new knowledge gathered along the way.
