UI/UX Design

Art Place

Overview

Art Place is a versatile mobile platform dedicated to the world of art sharing. This art-sharing platform is packed with useful features such as a ranking list, chatting function for artists, and an advanced search function. This is a design that caters to the needs of two types of users — artists eager to showcase their creations and art enthusiasts who relish exploring the digital galleries.

Try Prototype Visit Project

My Efforts

My Role
UX/UI Designer
Tools Used
Figma
Scope
3 Weeks, Personal Design/Prototyping Project
What I Did
UX Design, Mobile UI Design, Low-fidelity & High-fidelity Prototyping

Design Process

Discover

Interview Insights

As my app caters to both artists and art enthusiasts, each with distinct usage patterns, I conducted separate interviews with representatives from each group. Based on their feedback, I arrived at the following conclusions

*I recognize that a user can be both someone who posts artworks and views other’s art (an artist and a viewer at the same time), but they will be categorized differently each time they interact with the app.*

I. Artists

Can you describe the ideal process for you to share and manage your artwork?

People like to have ways to label their works, because they will increase their works’ discoverability by helping visitors to find them more easily.
Artists want their most successful artwork to be the first thing to be seen by other people.
Some artists like to share art pieces in batches, such as an art series or a short comic story.
Artists enjoy expressing themselves, showcasing both their artistic identity and the nature of their artistic pursuits.

II. Art Viewers

Can you show me how you usually use your current art-sharing app?

People like see the lasted work made by their favorite artists.
People like to discover amazing arts and artists more easily, so they can follow the artist and see more cool art.
Sometimes people want to find a specific type of art.
People like to interact with other users, especially with the artists.
People like to collect art that they enjoy, and they like to organize the collected art according to their liking.

Competitive Analysis

DeviantArt

By DeviantArt

Strength:

Easy to upload new artworks.
Groups function that builds communities.
Easy to make connections with other users.
Beginner friendly, less intimidating to amateurs.

Weakness:

No sorting function after search.
Cannot upload images in batches.
No regulations on AI-generated content.
Hard to search/join groups.
Mobile version lacks complete functionalities.
Aggressive mature content protection.

Pixiv

By pixiv Inc.

Strength:

Top arts listing.
Can upload images in batches.
Search by popular tags.

Weakness:

Intrusive advertisement.
Pay-walled access to better quality artwork.
Mandatory Login to get access to the app.
Very basic filter function.
Lackluster profile customization.
Lacks direct message functionality.
Difficult to share an art post on mobile.

ArtStation

By Ballistiq

Strength:

Offer browse options (grid view vs. feed view), and it is easy to switch between the two views.
Advanced sorting/filter function.
Help artists to advertise themselves.

Weakness:

Un-clickable tags.
Confusing login process.
No sense of community
Daunting process to add artwork to collection.
Cannot easily get access to the new works posted by followed artists.

Twitter

By X Corp. (Indirect Competitor)

Strength:

Network effect, a lot of users.
Easy to reach many communities.
Easy to interact with artists and other users.
Bigger chance for artists to establish popularity.

Weakness:

Not a dedicated platform of art-sharing.
Difficult to search for artists and art.
Basic collection function called “bookmark”.
Limited batch upload.
Hard to customize the profile according to an artist’s need.

Define

Persona

Emily Tanaka

Background

Name: Emily
Age: 25
Gender: Female
Occupation: Freelance Graphic Designer
Location: California, USA

"Immersing myself in the vibrant world of visual storytelling, and connecting with fellow artists is what fuels my artistic journey."

Challenges and Behaviors

Balancing her freelance design work with her passion for creating art and engaging with the board art community.
Finding a platform that effectively recommends art that aligns with her tastes, interests and preferences.
Ensuring that her art gets noticed and appreciated online.
Establish some levels of popularity on a new platform.

Goals and Needs

Discovering Inspiring Art: Emily is always on the lookout for fresh and inspiring artworks.
Sharing Her Creations: Emily wants a platform where she can showcase her anime-styled art pieces and short comic series to a community that appreciates her work. She desires a space where her art can be easily organized and viewed by others.
Engaging with the Art Community: Emily enjoys engaging with fellow art lovers and artists. She values the ability to make connections with other artists and have meaningful discussions.
Personalization and Expression: Emily wants a better way to use her artworks to express herself.

User Stories

Story #1

As an artist who wants to express personal feelings, I want a personalized profile that reflects my unique style and personality, allowing me to express myself within the art community.

Solution:
Users can customize their profile according to their personal taste. Customization would include banner image, description, and featured artworks section.

Story #2

As someone who enjoys engaging with the art community, I wish to connect with fellow art enthusiasts and artists, so that I can share my thoughts, and engage in meaningful conversations about the art I love.

Solution:
Add an extensive interaction functionality that allows users to chat under the comment section of art posts, or message directly to other users/artists from their user profile page.

Story #3

As an art enthusiast who wants to be inspired, I want to easily discover top-quality art pieces to stay inspired.

Solution:
Have a top arts and top galleries lists in the app that shows some of the best art pieces and art series.

Story #4

As an artist, I need the ability to add descriptions to my artworks, so that I can provide context to viewers and make my artworks more discoverable.

Solution:
Artists can write descriptions and add tags to their art pieces when uploading.

Story #5

As a user interested in anime art, I wish to have a platform that recommends new art pieces and artists aligned with my specific preferences and tastes.

Solution:
Have a recommended section that shows art that the user might like.

Story #6

As an artist who often creates short comics and art series. I need a convenient way to upload my work, either individually or in batches, so that I can share my work more easily.

Solution:
Allow artists to upload their work individually or in batches (called “gallery” inside the app).

Story #7

As an art lover who has a specific taste in art, I want an easy way to find the art I like, so that I can waste no time on finding art.

Solution:
Incorporate a detailed search functionality that allows users to search for art by category, tag, subject and medium. And after search, users can further sort the result based on relevance, added date and name.

Story #8

As a first time user of the app, I want my art to be easily seen by others so I can quickly build my popularity and feel welcomed by the platform.

Solution:
Uploads by new artists on the platform will be recommended on the first page.

Information Architecture

I have created an information architecture to ensure Art Place has a clear hierarchical structure. It helps me to organize different screens and information, and reminds me how users would move through my app by certain orders or steps.

Develop

Low-Fidelity

I. Hand-Drawn Wireframe

I used hand-drawn sketches as my first step in the development process. Even though the sketches are very rough, they serve me well as a low-commitment way of getting my ideas out quickly. It also allows me to establish a foundation for iterations and improvements in later development processes.

II. Digital Wireframe

Based on the sketches, I made the following digital wireframe. Digital wireframes helped me to focus on the functionality and the structure of the app. It also allows me to easily share my design with others to get feedback.

III. Low-Fidelity Clickable Prototype

Interactivity is a major component of all digital products. So to ensure Art Place has a smooth interaction experience, and not missing any screens or features, I made the digital wireframe into a low-fidelity clickable prototype.

Try Prototype Visit Project

High-Fidelity

I. High-Fidelity Design

After pinning down the functionality, structure, and interactivity of my Art Place app, I moved on to a high-fidelity design. During this part of the process, I am focusing on the visual aspect of my app, including color, iconography, typography, and images, to make it look as close to the real product as possible.

Home

Explore

Following

Art Posts

My Profile

Other's Profile

Add New

II. High-fidelity Clickable Prototype

I refined the interactions in the low-fidelity prototype and made this detailed fully interactive animated clickable high-fidelity prototype. Try out the prototype here on this website or visit my prototype and project with the following links.

Try Prototype Visit Project

Deliver

Tests and Iterations

I. Feedback To Solutions

Feedback:
"Too many steps to get to the page for uploading new artwork, not very convenient."

Solution:
A floating bubble button on the bottom right corner of the main pages that leads to the upload page on-clicked.

II. Observation To Solutions

Observation:
Testers quickly scroll through all the art posts feed in the following section. It prompts me to consider the issue of running out of fresh posts to engage with.

Solution:
Add in recommended art posts in the “Following” section, so it can bring in more content for the users, and it also helps users discover new artists to follow.

Features Showcase

From needs to features, each feature within the Art Place app is designed according to a specific user need to ensure my design stays user-centered. A couple of notable examples are listed below.