top of page
Case Study:

Artist Bio App

gingerbread-final-logo

This artist bio app is a case study project for a Coursera course. The app is designed for Gallery Gingerbread, an art gallery that exhibits the work of new artists. The app provides detailed artist bios and helps connect users and artists to events at the gallery. Through user research, it became clear that there was a need for more specific and accurate information about the artists. The app aims to address this need and also assist artists in showcasing their work and finding new opportunities.

I made sure to only use pictures with free copyrights from the internet for this app. I believe in respecting intellectual property rights and ensuring that the app does not infringe on anyone's creative work.

artist bio app UX Case Study, Hifi prototype, figma

Project Overview

The Product:

The Gallery Gingerbread app provides a comprehensive artist bio for each exhibition, fostering a deeper connection between the user and the artist. Users can stay up-to-date with gallery events and exhibitions, enhancing their overall experience.

Duration:

About 2 weeks.

The Problem:

Our current website lacks the necessary features to attract and engage users, including clear sections to display artists' bios and information.

The Goal :

We aim to provide a more comprehensive and specific artist information in each profile through our app, catering to the needs of our gallery users. Furthermore, we seek to assist artists in displaying their work more effectively and offer them greater opportunities.

 My Role :
Responsibilities :

General UX Designer, UX Researcher

Design the App from scratch, making wireframes, mockups, prototypes.

Iphone XS mockup

Understanding The User

User Research Summary:

Through my user research, it became clear that galleries like Gallery Gingerbread exhibit a large number of new artists' works. However, with limited information available online, it's essential for the gallery to provide comprehensive details and reach out to the audience to attract visitors and create a better company culture. Additionally, the app can help new artists showcase their work and find new opportunities, making it a valuable asset for all parties involved. That's why I created an artist bio app to fulfill these needs.

1.

 

No detailed information about artist, so user can’t decide whether it worth to go

Pain Points:

1.

 

No detailed information about artist, so user can’t decide whether it worth to go

2.

 

No detailed information about the artist so the artists who exhibits there can’t use it as a tactic to attract more opportunities.

3.

 

With current dysfunctional website, it helps nothing for the gallery to attract audiences 

4.

 

Not consider of a normal phone user’s need.

Persona # 1:

User Story: 

artist bio app persona #1
Persona # 2:

User Story: 

artist bio app persona #2
User Journey Map
Gallery Ginger User Journey Map

Start Designing

The Logo

I designed this logo using Keynote.

Gallery Gingerbread is a space that showcases new and intriguing artists who express themselves freely. The logo combines the iconic image of "the girl with the pearl earring" with the playful and funky concept of gingerbread to reflect the art-inspired and imaginative nature of the gallery.

gingerbread-final-logo
Paper Wireframes
the wireframe Artist Bio App

To improve user experience, we aim to create a detailed artist page for each artist, showcasing their bio and related exhibitions. We also plan to have a separate page for each exhibition. To make navigation easier, artists can be categorized into different categories.

Digital Wireframes
Home Page

My goal is to create a main page that effectively showcases the exhibitions and artists, providing interesting introductions and easy-to-use navigation with buttons and links. I want users to have access to enough information about the exhibitions and artists on the main page

artist bio digital wireframe 2
Low-Fidelity Prototype
artist bio digital wireframe
Artist Bio Detail Page

On the artist bio detail page, I would like to have all the necessary information presented on the first page. Users should have the option to choose what they want to explore further about the artist, such as social media links, other exhibitions, or similar artists.

aritist bio lofi
Usibility Findings:
Round 1 Findings:

1.

 

Some links are wrong.

2.

 

Some buttons don't work.

3.

 

Page-to-Page animation not on the same direction.

Round 2 Findings:

1.

 

The fixed links are correct now, buttons are working too.

2.

 

Good user flow. 

3.

 

Could have more than one way to let user navigate

Refining The Design

From Wireframe to Mockups:
artisit bio wireframe
Main Page mockups

Before Usibility Study 

After Usibility Study 

I didn't change the overall appearance of the app significantly; instead, I focused on improving its functionality, which has resulted in a smoother and more efficient user experience. However, I did make some minor adjustments to the design, such as increasing the roundness of the rectangular buttons to ensure a consistent look across all pages.

wirfeframe before usibility

Before Usibility Study 

Artist Categories After UsibilityStudy

After Usibility Study 

I made some changes to the Categories page, including increasing the button size and adding more space between each button. These updates have improved readability and made the buttons more clickable for the user.

Artist Bio App Welcome Page
Welcome Page
Artist Bio App Main Page
Home Page
Home Page
Artist Bio App artist detail
Artist Detail
 Artist bio detail page
Artist Bio
High-Fidelity Prototype:
Accessibility Considerations:

1.

 

To enhance user experience, the app now features floating notifications that appear when users interact with certain areas, such as saving an artist to a list or updating profile details. These notifications provide convenient functionality without the need to redirect users to other pages.

2.

 

The animations are simple and follow a logical flow when moving forward or going back within the app.

3.

 

The design features big and clickable buttons, with a modern look and feel. I opted for bright, cheerful colors to create a pleasant user experience.

Going Forward

Take Aways:
Impact:

Very good design, modern and chic” 

- Quote my friend Ivy

 

After the hi-fi prototype was built, it opened up numerous possibilities for users to better plan their visits based on the information they can easily access in the app. Additionally, it provides an opportunity for galleries to promote their exhibitions and artists more effectively.

What I learned:

Building a prototype using Figma was both enjoyable and beneficial. It allowed me to organize my thoughts and put them into action. Working with different panels and processes helped me to learn more about design thinking, transitioning from theory to practice.

Next Steps:

1.

 

Conduct another round of usability studies to address more user pain points.

2.

 

Conduct more user research, to see what’s more to make the app easy to the user and the gallery owner.

bottom of page