Categories
Case Studies

Designing a complete solution for everyone curious about art — a UI/UX case study

View the original post

Designing a complete solution for everyone curious about art — a UI/UX case study

In this article, I talk about my process of designing an application that helps people explore art effortlessly.

Disclaimer

I designed this conceptual application as a personal project and not as a part of any organization.

Background

I was watching this video on YouTube by nerdwriter1, in which the narrator explains how to understand a painting using The Death of Socrates by Jacques-Louis David. Now the main aim of the video was to make the viewer realize the depth to which the artist delved to create the painting, but what I understood from his content, was that every person has their way of interpreting art and it always remains very personal to them.

The Death of Socrates by Jacques-Louis David

I read somewhere that “the viewer is the co-author of the artwork along with the artist”, hence it is very important that we ponder upon art because an artwork is often what you want it to be. Another very essential aspect of this activity of understanding is discussing your ideas with other fellow “co-authors”. What that does is, it helps you refine your interpretation and more importantly a conversation about such valuable things often creates a more creative and collaborative mind.

People appreciating good content together

Inspiration

The main point of inspiration for me here was that whenever valuable content on art is put out there, people always appreciate it mainly because it is very difficult to find relevant pieces of information on the internet and it is often a revelation for most as it brings them closer to the artist’s mind.

Goal Statement

The goal of the project was to design an application that creates the same level of engagement among people and makes life easy for a countless number of art enthusiasts who struggle to explore art daily.

As I begin my journey into User experience design, it is also very important that I classify myself as one of the users. Before understanding the basics of UX design, I wrote down a few steps of the process that I would adopt in designing the application without the design knowledge.

Pre-UX approach (Building is fairly Uninhabitable)

Placing UX design in the process

Why UX?

As I was starting my journey in UX design, I came across this very interesting article (read here) by Geoff Teehan (Director of Product Design at Facebook), wherein they had this hypothesis that companies that focus on delivering great user experience will see a significant increase in their stock price. Calling it the “UX Fund”, they invested a total of $50,000 in ten selected companies that they thought satisfied their criteria. The results were staggering, from 2006 to 2016 the fund returned around 450% of the invested amount.

Year 1: NASDAQ 29.1%, UX Fund 39.3%
Year 10: NASDAQ 93.2%, UX Fund 450.1%

This was convincing enough for me to understand and explore the field. Apart from the high returns and increased savings of the companies, there was also a significant amount of information about how UX design improved customer loyalty and the overall efficiency of the product.

Hence a few Google UX Design courses later, I reframed my approach towards designing the application.

I would like to thank Google and Coursera for giving structure to the process of understanding this profession. I highly recommend this certification to anyone who is trying to access valuable information on UX design from a well-founded source.

Refined Approach (The Building becomes livable)

Understanding the Problem

Stage I – Preliminary Research

The first step in the process was to identify the applications that existed in the market and had a diverse user base. Some of the applications that I identified were apps that I have often used in the past, namely Google Arts and Culture and the website Wiki Art.
The three main products that I shortlisted were:
1. Google Arts and Culture
2. Artsy
3. Wiki Art

Artsy, Google Arts and Culture and Wiki Art

Google Arts and Culture has a very modern and new-age feeling to it. The app is visually appealing with great use of colors, well-structured and familiar layouts.

Artsy has a design that is easy to use and highly informative. The main feature that the product focuses on is that the users can buy or sell artworks through the app.

Wiki Art is precisely what it claims to be, the Visual Art Encyclopedia. The website is designed specifically to cater to the users who want to be able to read and understand an artwork on the web.

Concluding the preliminary research, I identified some pain points from a personal point of view.

Personal pain points:

  1. Google Arts and Culture was relatively difficult to use as compared to the other apps and takes a sufficient amount of time to get used to, the reason being that I was overwhelmed at times with the number of options that I was presented with.
  2. Wiki Art has a very formal feel to it, which makes it seem like a website that I would use only to gather information when needed.
  3. Artsy does not have a clear feature by which the user can search for an artwork depending upon various factors like the era of the work or the region it originates in.

Stage II – Survey

To begin with the major stages of my research, I shortlisted a few potential participants. The shortlisted candidates were between the age of 15 to 49 years, from various educational backgrounds as well as people with varying degrees of interest in art.

The survey form included questions to understand their overall tone while using the application. The participants were then asked to enlist their pain points and also general challenges that they might have faced during the process. Suggestions as to how these challenges could be overcome were also enlisted by the users.

Finally, all the users were asked whether they would use similar applications in their regular life.

Snapshots from the Survey

Studying the Research findings

Survey answers

User Pain Points:

  1. Limited artworks with barely any exposure to the local and national artists.
  2. Google Arts and Culture is less immersive, difficult to use for a longer periods, and getting used to the application takes time.
  3. The navigation is confusing in Google Arts and Culture, there was no accessible way to land on the virtual tours page.
  4. The apps were not very inclusive towards all kinds of users.

Collating the insights from the participants, it was evident that most users faced problems in the navigation. One particularly interesting thing to note is that the users didn’t have any impactful opinions on apps other than Google Arts and Culture. I decided to understand this in some depth, and reached back to a handful of the participants. The overall idea that I gathered was that apart from Google Arts and Culture, the other apps did not have any striking characteristic about them. Although these apps are very well designed and easy to use but they don’t grab the attention of a new user.

Based on the research it was evident that users want a product that is easy to use and has an engaging impact on their art exploration.

What kind of people would use the app?

Based on the findings, certain types of users were identified.
A. Users who would want to use the app to gather artistic inspiration by reading about art and also use the app to visit various art institutions around their city.
B. Users who want to visit art galleries and museums from around the world as well as read about art from the comfort of their homes.

User Type A

Scope:
Art-related events and exhibitions are a major attraction for people who love to explore art. Hence a more accessible way by which users can register for events instead of having to switch between multiple applications.

User Type B

Scope:
While reading the responses, a bunch of people had recommended how an interactive forum could be a great addition to any such future applications to make the app more immersive.

Opportunity Space

  1. An interactive platform where users can interact with people from various regions and diversify their understandings.
  2. Help users locate events/exhibitions/workshops in their city and register for them without having to switch between various applications.

Introducing GAZE

Gaze is the one-stop solution for all your art-related queries. Be it reading about new artworks, navigating and registering for events or visiting museums from the comfort of your home, Gaze has it all!

Once the initial framework of the application was ideated, I designed the wireframes and tried to structure the design as appropriately as possible.

Low Fidelity Interface

My main aim was to understand how the layout of the application could positively affect the navigation of the application.

Snapshots of the Digital Wireframes

To further understand how the app impacts the user’s minds, I decided to test the prototype with potential users in a semi-moderated environment.

User Testing

The term semi-moderated was used because the process of understanding the user’s feedback on the prototype was through an interview in which I was there to help the participant in case they needed the guidance. This not only helped the user to efficiently participate in the interview but also helped me understand and recognize similar patterns of difficulty among various participants.

The key performance indicators for the usability study were:

  1. Time on Task
  2. Completion Rate
  3. Immersiveness of the features.
Snapshot from one of the usability tests

The participants were asked to explore each of the features at their own pace and the efficiency of the feature’s experience was analyzed using the KPIs mentioned above.

Results

Let us understand the results from a quantitative point of view, to begin with.
The features like Events and Virtual tours had significant room for improvement.

The discrepancies led to an obvious increase in the time on task and a decrease in the completion rate.
Due to the shortcomings in the navigation, the user engagement would be significantly affected hence making the app less immersive.

Let us summarize the major points of feedback given by the users:

  1. Most users found the iconography difficult to understand and certain user flows were much more time-consuming than others.
  2. Nested filters for a better experience while exploring artworks on the app.
  3. The number of vacancies in the various events that the user has the option to choose from.
  4. The user should be able to sort the nearby galleries/museums based on the popularity as well as the distance of the art house from their location.

The focus of the rebuild would be utilizing the feedback to simplify the features and maintain a familiar yet new approach to the design.

Branding

The main image of the brand was formulated through a logotype design using the font Arsenica Extrabold.
The colors and the shapes used here signify an unornamented and minimalistic approach to the project. As a person who has been an art enthusiast for the best part of his life, I have been fascinated by the Bauhaus style of design and especially the idea of not having a border between the artist and the craftsman. I feel Product design has a very similar approach, wherein skilled professionals from all verticals of the industry share a similar goal and collaborate for the best results.

The focus while selecting the colors for the application was to keep the artworks and the images at the center of attraction, hence I used various versions of the primary colors. All Call to Action buttons use a combination of a modified Blue, Red, and Yellow.

The font used for the project is Montserrat, a font that signifies the impact of indigenous art and artists. Julieta Ulanovsky wanted to preserve this urban typeface that emerged in the neighborhoods of Montserrat in the early twentieth century.

Interface Design

Onboarding and Sign Up

The onboarding screens provide a summary of the app and what it does through illustration and prompts.
The illustrations consist of simple colors and shapes to uphold the brand identity.

The bottom and the top navigation were focused specifically to minimize the navigation discrepancies that users faced while testing the low fidelity prototype. The iconography was reduced and navigation was improved by using typography instead.

Designing the ‘Home’ Tab

Making the navigation hassle-free was the first objective while designing the high fidelity interface. To understand the process better, I have documented the iterations that led to the final design.

Exploring Artworks on Gaze

The explore tab was given a lot of importance in the designing process as the feature creates the maximum amount of engagement in the user base for those who are looking to view and read about artworks.

The purpose of explore:

  1. To simplify the way users search for an artwork on the internet.
  2. To provide a variety of art recommendations to the user through the bottomless feed scroll.

While exploring through the artists and the regions menu, the user flow becomes longer than usual as the user is now shown a variety of artworks from each of their selections, hence a distinct page for each of the artists and the regions was conceptualized.

Advanced Filters

One particular insight gathered from the user testing was the introduction of nested filters in the explore section. Each of the primary choices of Artist, Region, Color, and Era have an advanced set of filters to make the process of searching for an artwork simpler.

Viewing Art on Gaze

The design of the page was kept familiar with the primary element being the artwork on display. One of the most important additions to the project was the introduction of the interactive forum making the experience more personalized.

Participating in Events through Gaze

This was honestly the sweet spot for Gaze, as most celebrated competitors did not have a unified platform for exploring artworks as well registering for art-related events, customized as per the user’s location.

The purpose of Events:

  1. To explore nearby events based on the user’s interests
  2. To register for the desired events directly through the app without having to switch between multiple applications.

Navigating Art Galleries in the City

The navigate feature allows the user to locate nearby art galleries and museums based on their location.

User Profile

The user profile page has a personalized feel to it with the content on display being dependent on the user’s activity. The user can check updates on events and also review their favorite posts with ease.

Virtual Tours

In today’s technology-driven world, an information driven app must include features that fascinate the user. Virtual tours is one such feature that has an innovative and futuristic feel.
Hence, this feature was conceptualized in a way that the user notices it first to create a lasting first impression.

That’s that ❗️ 😄

I hope you had a good time reading this case study and reviewing the design. Every point of feedback and questions regarding the project shall always be appreciated. Drop a few claps and show some support! 👏

Where to from here?

  • The next step towards improving the product would be a more detailed system usability study with a wider user base, to better understand the discrepancies.
  • As a product designer, I would also be interested in understanding how the product is portrayed in the market. Hence, working with the marketing team to help them with the insights that we gathered from the research to come up with an optimum marketing strategy.
  • One thing that I learned and found typically interesting about the product development life cycle was that it is a never-ending process. Hence another important step would be to analyze the design decisions with quantitative data and conceive better solutions.

Reflecting upon the Project 💭

  • The biggest takeaway was, realizing how important research is in the process of developing a product. Most importantly I learned never to assume!
  • Good design is not only about how it looks, but how useful it is for people.
  • It was almost revolutionary for me to understand how users think and feel while using a digital product. The research insights not only helped me improve the product but also motivated me to come up with better solutions.
  • I understood the importance of iterating your concept, there is always an opportunity to improvise and improve.
  • As a product designer, it is very important to conceptualize your design in every step of the product process.
  • One challenge for me was not to be too emotionally driven while designing and making sure that I used research findings to the fullest.
  • Ultimately I would say that it is essential to document your work, I only realized this while I was approaching the end of this project. For future projects, I would want to document after every stage of the product process.

I am currently open to job opportunities in Product Design. One thing that I particularly realized was the importance of collaboration and discussions.
Feel free to reach out to me on Twitter or LinkedIn.

Thank You!


Designing a complete solution for everyone curious about art — a UI/UX case study was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.