In this 8 week long project, I worked as an intern UX designer, performing various activities including conducting usability test, creating paper and digital wireframes, creating low and high fidelity prototypes and iterating over designs based on user feedback
ArtMania Screenshots

ArtMania is an hobbyist app for art enthusiasts and students to pursue their passions and advance their career.

Research

I conducted usability studies and created empathy maps to empathies with the app users. While researching, primary group was identified to be art students while the secondary group were artists
Research revealed that the user group faced variety of problem in their art careers including time mismanagement, artisitic block, lack of resources, limited access to art community, and no access to art experts.

Research Goals

What are the pain points that user experience while using other art studio apps

How is the experience of viewing art digitally and can it replace the common way of experiencing art?

How is the easy is it to book an appointment with an expert? Is it affordable? Does it really help the customer?

How easy is it to find a desired eBook? Is all the modern art related eBooks available? How it can be further improved?

Pain points indentified

Artists usually faced artistic block, restricting their creativity. They usually require motivation or an idea to overcome that.

Not all art enthusiasts had access to art auctions and museums where they can buy or view modern art

Some users have lack of access to resources to advance their career

As an intern, I created personas which were fictional characters representing different users that will be using the product. Elizabeth Johnson is an art enthusiastic who needs an easy access to art resources and works because she wants to pursue her art hobbies and create a Udemy animation course

Persona Image

Mapping Elizabeth’s user journey revealed how helpful it would be for art enthusiastics to have an art-focused app like ArtMania

Persona Image

Design Process

I created a user flow of how the user will navigate through the app and complete their desired activity. The task was to use ArtMania app to have access to resource to advance art career.

User Flow

Paper Wireframes

The goal of creating a paper wireframe for the homepage of an art studio app that offers an art eBook collection and expert consultation is to establish a clear and user-friendly interface that effectively communicates the apps features and benefits

Paper wireframe

Digital Wireframes

After selecting the best possible design to offer better user experience, I created a digital wireframe using Figma. The homepage is designed in that minimise user searching time for their task as most of the user have time management issues. The homage is divided into clear section to improve user navigation

Homepage wireframe

In the intial stage of desiging I tried to made sure the content as explicit as possible to make it user friendly and base it on the user research I already conducted

Expert page wireframe

Low Fidelity Prototype

I connected all the wireframes to create an interactive prototype which can be used to for usbaility test to identify pain points and iterate over the design based on the user feedback

Prototype LinkExpert page wireframe

Usability Test

I conducted an unmoderated usability test containing 5 participants, three females and two male. One was artist by profession, two were students, one was expert and one was random person. A group of tasks were assigned to each individual and their behavior, feelings , and saying were noted.

The following tasks were assigned

  • Open the ArtMania app and sign up as a user
  • Go to the art section and open an art piece
  • Find a high-rated expert and book an appointment on 26 of May 9am
  • If I ask you to find and buy me eBook, would you able to know where to go and how to buy it?
  • How do you feel about the ArtMania app? What you like and what you dislike?

Expert page wireframe

Affinity Diagram

An affinity diagram was created based on the notes taken during the usability which was used to organise the notes based on their relationship

Affinity Diagram
Affinity Diagram
Affinity Diagram
Affinity Diagram

Two rounds of usability tests were conducted. First for the low-fidelity and the other for high-fidelity. The findings of the first round helped in refining the wireframes while the second round lead to refining the mockups

  1. Users had difficulty in searching for eBooks
  2. Signin and Signup lacked features like confirm password, see password
  3. Users wants to have expert ratings on home page
  1. Users want calendar for booking
  2. Users want to return to homepage after completing checkout

Mockups

After iterating over initial design based ojn user feedback, I craeted mockups by applying different Gestalt principles to make my design standout and help user complete their task without and setbacks. Large fonts and use of contrast color against a light background aims to attract user attention to features of the app

Paper wireframe

A search bar is included at the top of the page to make eBook searching easy. Hero image and text is provided to highlight to the user the section they are navigating in. I also revised the use of secondary color for each category and it will make the content feel overcrowded

Paper wireframe

High Fidelity Prototype

Based on the mockups, I created a high fidelity prototype that overcame the pain points user faced in the low-fidelity prototype. It represents the final interactive version of the project.

Prototype LinkExpert page wireframe

Takeaways

The app focuses on providing tools and means for art enthusiastics to pursure their passions and how it really thinks about its target users

“The app made art more fun. I would higly recommend this app to all those students who are doubting their artistic capabilities and rethinking about their career”

Future Steps

A new user usability study would be conducted to identify any pain points in the updated wireframe
Interview sessions would be held to get a more detailed view about user experiences and issues to avoid further setbacks
If there arent any issues, the design will be forwarded for development