User Personas:
Line 1Line 28 17 1
Emily
Michael
Lara

“Wow this is bautiful, I wish I could learn more about the artist.”

Emily is a art student at SCAD who loves enjoying the world of art. She often admires street art when she is walking to classes. She wishes she could fnd the artist and follow them on social media so she could see more of their work and learn more about them. She is hoping to be mentored someday.

Problem Statement:
Problem Statement:
Problem Statement:

Michael wants to showcase his art at a event, but it is hard to know when events will be in the area without doing extensive Google research. Michael would like to know of upcoming events easily so he can make sure he gets on the list. He also wants to add his art to the app and have a short bio of himself to help him get more exposure.

Lara is a blogger who loves writing about artwork in different cities. She enjoys traveling to new places and going to events. She needs a easier way to find artwork in a new city and she wants to be able to save it to her library categorized by places she has been, so she can easily share it on her blog.

“I wish there was a way to show case my art.”

“I’m in town on vacation, where could I go for a art  event?”

Age: 20
Occupation: Student
Age: 28
Occupation: Blogger
Age: 35
Occupation: Artist

Emily is a art student at SCAD who needs a easy way to find artist of particlar art work around her city, because she inspires to be a artist and wants a mentor.

Michael is a artist and needs a easier way to showcase his art, because he needs to reach a larger audience that will generate more sales.

Lara is a traveling art blogger who needs a easier way to find art in the areas she travels to and ways to save the artwork, becasue she is not familiar with all the places she travels to and wants to save artwork work to share it later on her blog.

User Journey Map:
Screen Shot 2021-06-17 at 10.10 1

Mapping Lara’s user journey revealed how helpful the Mastery app would be to her.

Ellipse 23Ellipse 24Ellipse 26
Refining the Design
Line 5
Mockups
High-Fidelity Prototype
Accessibility
Paper Wireframes:
IMG_2804 1IMG_2808 1IMG_2806 2IMG_2802 1

Drawing out paper wireframes helped me quickly get ideas out and infront of me qickly while still maintaining the users needs as the number one priority.

IMG_2803 1IMG_2805 1IMG_2807 1
ImageImageImageImageImageImage
Easy Set Up

Made accessible for users who speak different languages

Language Preference

Made easy for users who would like notifications

Notification Prompt
Notification Set up

Made easy to understand and straight forward

Art Preferences

Made for customization of the type of artwork the user enjoys the most

Made easy, but users have a choice to continue as guest

ImageImageImageImageImage
ImageImageImageImageImageImage
Key Mockups
Image

Easily access artwork in app by scsnning QR code.

Art Quiz
Calendar
Favorites
Scan QR Code
Member Passes and Tickets
Perosnalization
Artist Bios

Easy to find artwork, art events, and art museums in area.

Test your art knowledge in a fun quiz.

Personalize your homepage with your art preferences.

Read artist bios with easy.

Keep up with your upcoming events.

Add your favorite artwork to your library.

Easily access museum passes and tickets.

Locate Artwork
Image
App Features
ImageImageImage
June
2021
Vector
Vector
Upcoming Events
+
M
1
2
3
4
5
6
7
8
9
10
11
12
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
S
T
W
T
F
S
Vectoricon-heartVectoricon-location_pinicon-homeVector
Today
July, 10 2021
Tomorrow
Vector
Museum of Art
12:00 pm
Art Festival
Vector
Museum of Art
12:00 pm
Art Festival
Vector
Museum of Art
12:00 pm
Art Festival
ImageImageImage
Ellipse 15Ellipse 16Ellipse 17Ellipse 18
Starting the Design
Line 4
Paper Wireframes
Digital Wireframes
Low-fidelity Prototypes
Usability Studies
User Flow Map:
Screen Shot 2021-06-18 at 2.36 1
Digital Wireframes:

Once paper wireframes were completed, I had an understanding of the layout of the app. However during creating the digital wireframes, I did change some layouts to better fit the user experience.

Low-Fidelity Prototype:
Low-Fidelity Prototype:
Screen Shot 2021-06-18 at 12.30 1

Low - Fidelity Prototype

Once the digital wireframes were created, I created the low - fidelity prototype, in which connected the user flow for finding art and reading artist bios.

Wireframe to Mockups:
New Pages Added:
ImageImageImage
Before Usability Study
Before Usability Study
User Guide
Notification Opt Out
Artist Bio
After Usability Study
After Usability Study
Arrow 5Arrow 6Arrow 8Arrow 7

On the original design, the search was on the map and the results popped up underdeath it.

The new deign has the search bar above the map and search results pops up on a popup module.

This allowed users to easiliy use the app without being hindered by too many visual distractions.

ImageImage

A home icon and user icon have been added to the bottom nav bar so it is easier for users to understand where they are in the app.

A user guide was added for users who are not full familiar with icons and shows how to use the app.

A separate page was added for the artist bio to leave room for artwork descrption. This allows users to have the entire screen to read the artist bio and artists can make their bio however long they would like.

A are you sure and benefits of notifications  screens pop up when user chooses to opt out of notifications. This can lead more users to opt in.

Name of artwork and artist with profile photo was added underneath to give better access to artist bio.

The logo profile picture and back button was removed to leave more room for the artwork at the top of page.

ImageImageImage

This was the begining of the high-fidelity design with regards to the need changes that were found in the usability test.

These pages were not in the original design but were added after usability testing to give users a better user experience.

Brand Name:
Brand Logo:
Rectangle 166

Branding

Mastery (7) 1191120-WorkAc-Beirut-Model-001-1600x1600 14_-_Night_Rendering_High_Res 12 5641575Image
Beruit
Miami

I wanted the brand name to be related to art, but I did not want to use the word art. I came up with Mastery. It does not scream art, but you would know it was a art app if someone mentioned it. It is also easy to remember.
The choice of font was also used to portray a artsy vibe.

When designing a logo, I wanted it to be very unique and have a artsy vibe. I researched unique art museums architechture and came across a few in Beriut and Miami.

Usability Study: findings
Screen Shot 2021-06-18 at 2.38 1

A study was conducted using the low-fidelity prototype. The study revealed changes that were helpful to increase the user experience. This helped guide the designs from wireframes to mockups.

Ellipse 7Ellipse 9Ellipse 8Ellipse 10
1
4
3
2
Opting Out of Notifications
Artwork Location Screen
Passes and Tickets

Users are not able to view artwork with ease and read artist bios.

Some users didn’t understand this screen but understood more after knowing what the apps goals were.

Some users believed they would not use the notifications and go to the app by themselves.

Some user had a hard time locating museum passes and tickets.

Color Pallet:

The simple pallet allows for the user to focus on the colorful artwork more than the app. However, the pink helps categorize its own brand for the app.

When choosing the colors, there was a bit of trial and error. Once I began building the high fidelity prototype, I realized my original color pallet was very destracting to the art work being displayed. I decided to wipe the pallet clean and only keep black, white, and gray. It looked better, however there needed to be some form of color. I choose one bright pink color inspired by Andy Warhol’s Marilyn Monroe. This is the final color pallet below.

#FFFFFF
#313131
#414141
#FE1D7E
Screen Shot 2021-06-18 at 3.20 1
High-Fidelity Prototype:
High - Fidelity Prototype

View the Mastery Artist Bio App

The final prototype presented a clean user flow for searching for artwork and reading the artist bio. It met users needs for being fun, beautiful, and convient.

Accessibility Consideration:
1
Ellipse 11Ellipse 13Ellipse 14
1
3
2
Zoom
Use of Icons
Screen Reader Friendly

Able to zoom on bio for users who are visually impaired

For visually impaired individuals, alt text was added to images for screen readers.

Used icons to help make navigation easier.

Next Steps:
Ellipse 27Ellipse 29Ellipse 30
1
2
3
Dark Mode
Admin Options
More User Research

Incorporate dark mode for users who find white backgrounds to be strenuous on the eyes.

Conduct more user research to determine any new areas of need.

Create a admin app so artist can post their art work and create art events.

Ellipse 23Ellipse 24
Going Forward
Line 5
Takeaways
Next Steps
Ellipse 6Ellipse 11Ellipse 12Ellipse 13Ellipse 14Ellipse 7Ellipse 8Ellipse 9
1
3
Ellipse 10
Pain Points:
Accessibility
Conviency
Time
Understanding the User
Summary:

I conducted a research study at the High Museum of Arts. I ask a few people a series of questions and came up with user personas. The primary personas were users that were educators, tour guides, students, artist, bloggers, who needed a easier way to search for artwork in the area.



Users are not able to view artwork with ease and read artist bios.

Non famous artist have a hard time showcasing their art outside of museums.

Users see amazing art in area but not able to read about artist

Art lovers can waste time trying to find artwork and art events in area.

Line 3
User Research
Personas
Problem Statements
User Journey Maps
4
2
icon-bar_chart
Arrow 9Arrow 11Arrow 12Arrow 13

Recommened art for user preferences

Notification slider for upcoming events and more

Easy access to app’s main features.

New Home Page
Image

The app made exploring art in their area and learning about the artist easier and fun.

Impact:

I learned when designing this app that a great idea is only good when it is user friendly. I put users ahead of all features that would make their user experince great.

What I Learned:
Takeaways:
Ellipse 26Ellipse 25Imageicon-check_mark
Product Overview
Producut:
Duratiation:
Ellipse 1
apps-sharp
ImageImageImageImageImageImage

The Artist Bio app is made to make art exploration easier and fun. It is meant to help art lovers navigate through a museum or through the streets(street art) and make it easy for users to learn about the artist and the art itself.
Users do not have to be present to enjoy these features. They have the option to explore virtually. The app also allows for personalization of the user preferences and daily art notification. There are also fun quizzes the art lovers can use to test their knowledge.

May 2021 to June 2021

Ellipse 3

Art lovers need a easy and fun way to explore art museums and street art in their current area and artist need a way to show case their art and themselves to the public.

UX / UI Designer and Researcher for the Mastery art app.

Conduct interviews, paper and digital wireframing, low and high- fidelity prototyping, conduct usability studies, accounting for accessibility, and interacting on designs.

Design a app for art lovers called Mastery that allows users to search for art in their area and learn about thhne artist who created it.

The Problem:
My Role:
My Responsibilities:
The Goal:
icon-clockicon-staricon-userImage
apps-sharp5 1
Mastery

UX + UI / Research / Visual Design / Branding

A artist bio app that helps art lovers explore artwork easily in their city.

Thank You!

Thank you for your time of reviewing my work on the Mastery Artist Bio app! If you’d like to see more or get in touch, my contact information is provided below.

Connect
Let’s Get In Touch!
Contact
kerahjones@gmail.com
770.658.0290
Download Resume
LinkedIn

Designed from scratch, Made with ♥️ Love,  By Kerah Jones

Kerah Jones UX Designs 2021

2 5641582

Available for questions, collaborations, projects, and coffee.

Image