Image by RhondaK Native Florida Folk Artist

Inspire. Live. Create.

Discover & Connect with New Artists

SWANK

Project Overview

Swank is an interactive app that allows you to find new local and livestream art events and connect with the artists to learn more about them and their process. 

It's an app that features live stream events that you can access from anywhere in the world - including the comfort of your own home. You can also purchase tickets to local events, and use the RFID scanning feature to learn more about the presenting artists at the live events. 

You'll be able to read about the featured artists, as well as any other artist listed on the app. We make it easy for you to discover new favorite artists and works. Our aim is inspire your inner artist and get those creative juices flowing. 

Calendar

PROJECT DURATION

August 2021 - September 2021

Responsive Website

RESPONSIBILITIES

Lead UX Designer

UX Research

Usability Studies

Wireframing

Prototyping

User Journey Maps

Image by Amélie Mourichon

PROGRAM

Google UX Design Certificate

The Problem

Users want a way to connect with artists at their local art gallery to learn more about them and their work, so they can learn, grow, and feel inspired. 

Key User Groups

tania-mousinho-goMxTZWVOlE-unsplash.jpg

Creative Freelancer

Attends art galleries to inspire creativity to fuel their work. 

glen-hodson-NlHGKAZ3jCI-unsplash.jpg

The Nostalgic

Attends art galleries to make them feel alive and feel nostaglic.

High-Fidelity Prototype Images

Home Screen (1).png
RFID Scaner.png
Abstract Faces Event Page.png

Understanding the User

SUMMARY

I conducted virtual interviews with participants from all around the globe to gather data regarding the behaviors, needs, and wants of art exhibit goers. 

User Interviews

5 people who visit art galleries at least twice per year. 

Objective: to discover what challenges people face when trying to get additional information about the artists. 

Participants

Ages: 18-65

Lives in metropolitan or suburban areas

Visit art galleries at least twice per year

All genders welcome

Worldwide

All abilities

All ethnicities

High English proficiency

Persona Insights

SHYNESS

Many of the users were shy and didn't want to publicly ask a question. Others were unable to speak well due to conditions and didn't want to inconvenience anyone or try to speak in a crowd.

CONNECTION

Users wanted a way to connect with the artists outside of the gallery. They wanted to be able to ask questions and learn more about the artists, their processes, history, and who inspired them. 

NOISY

Others found that the art galleries where there was a larger show was quite noisy or had poor sound systems. They were unable to hear the presenters speak and they were not available after for questions. 

Competitive Analysis

Objective: To see what information each app has and what can be improved upon or what they should have. 

Competitive Analysis.png

I researched several different art learning apps during the initial research phase. Users' ideal product would fall somewhere between a selling app and an informational app. I also wanted the app to be able ot grow with the users, learning their likes and allowing them to be notified of any events of interest coming up. 

Personas

tania-mousinho-goMxTZWVOlE-unsplash.jpg

Alexandros is a 39 year old man from Athens, Greece. He has lived abroad and completed his degree in Architecture in London. He enjoys going to an art gallery by himself or with friends at least twice per year to learn more about the artists and to get inspired. He enjoys learning more about their work, how long it took them to make it, and who has influenced them. He is frustrated when there is no information or it's not easily accessible. He is shy and does not like speaking in public. 

 

PROBLEM STATEMENT

Alexandros is a 39 year-old freelance designer who needs to see and experience art to spark his creativity and make him feel inspired because it helps him to be creative and productive in his work. 

Pain Points

Inaccessible information about artists and their process.

Noise or large crowds that make it hard to ask questions or hear. 

Unorganized art galleries and information. 

Storyboards

glen-hodson-NlHGKAZ3jCI-unsplash.jpg

Lynn is a 65 year-old woman with ALS from a small town in Russia with English as her second language. She was diagnosed a few years ago and her health has steadily declined. She is now wheelchair bound and hard of hearing. She loves to get out and learn as much as she can. She used to do crafts at home, and still loves to find ways to feel inspired. 

 

PROBLEM STATEMENT

Lynn is a 65 year-old Russian immigrant recently diagnosed with ALS who needs to experience art to learn more about the artists because it helps her feel alive, connected, and nostalgic of times when she could be creative. 

Pain Points

She's hard of hearing so it's hard to hear presenters if she's not up close. 

Has vision issues and needs larger font that what's usually offered. 

Has ALS and is unable to speak as quickly or clearly as other people. 

Storyboards

Alexandros User Journey

User Journey Map - Alexandros.png

Lynn User Journey

User Journey Map- Lynn.png

Design Process

IMG_5971.JPG

EVENT INFO PAGE

I’m a paragraph. Double click here or click Edit Text to add some text of your own or to change the font. Tell your visitors a bit about your services.

EVENT CHECKOUT PAGE

I’m a paragraph. Double click here or click Edit Text to add some text of your own or to change the font. Tell your visitors a bit about your services.

IMG_5972.JPG
IMG_5975.JPG

ARTIST BIO PAGE

I’m a paragraph. Double click here or click Edit Text to add some text of your own or to change the font. Tell your visitors a bit about your services.

CHECKOUT PAGE

I’m a paragraph. Double click here or click Edit Text to add some text of your own or to change the font. Tell your visitors a bit about your services.

IMG_5974.JPG

Digital Wireframes

RC_Home Page.png

I wanted the home page to feature horizontal and vertical scrolling, with the ability to choose between looking at artists, different categories of art, as well as upcoming in-person events and livestream events.

RC_Event Purchasing Page.png

The event checkout page would have a description of the event, as well as the ability to choose how many tickets and to share the event on social. 

RC_Events Page.png

The event page would talk about the event, show the presenting artists, give a map of the location, and allow you to contact the event and lead you to the checkout page. 

RC_Artisti Bio Page.png

The artist biography page would give a description of the artist, when they were born, and provide additional ways to contact them. It would show other pieces of their art, who they were inspired by, and similar artists. 

Low Fidelity Wireframes

RC_Welcome Sign Up.png

The welcome screen initially featured all box buttons, and a blue Facebook sign-up button and grey Google sign-up button. 

RC_Home Screen.png

I added all icons, and most of the pictures for the categories, and included a top bar menu. 

RC_RFID Scaner.png

I included an RFID scanning section where the user can scan an RFID image and it will automatically take them to the artists' biography page. 

RC_Event Page.png

Upon receiving input, I moved the 'Add to Cart' button up higher and made it bigger.

RC_Review Your Order.png

The review your order page allows users to confirm their purchase prior to making it. 

RC_Payment Details.png

Users can follow a standardized process of inputting their credit card and personal information to purchase event tickets from their mobile phone. 

RC_Confirmation Page.png

After making the purchase, users can share the event on social media and navigate to the livestream event by clicking on the link. 

RC_Live Stream Page.png

This is the livestream event page where the presenters would appear in the top section. Users have the ability to chat and ask questions. 

RC_Menu.png

The menu is easily accessibly on nearly every page and allows the user to easily navigate to other pages in the app, as well as their profile page. 

RC_Artist Bio Page.png

The artist bio page allows users to read up on the artist, contact them, see their other works and upcoming events, as well as similar artists.  

Usability Study

Patterns & Insights

CART

PATTERN:

4 out of 5 participants didn't know where the cart was or felt that it should be somewhere else. 

INSIGHT:

The cart icon is not in an assumed location. 

CHECKOUT

PATTERN:

5 out of 5 participants had issues with the checkout button.

INSIGHT:

The checkout button is not large enough and in a position where most people thought it would be. 

TICKETS

PATTERN:

3 out of 5 participants didn't know how to add multiple tickets to an order. 

INSIGHT:

Most people didn't know how to add multiple tickets to an order. 

OVERWHELM

PATTERN:

2 out of 5 participants felt overwhelmed by the amount of information on the event checkout page. 

INSIGHT:

The amount of information on the event page needs to be addressed. 

High-Fidelity Prototypes

WELCOME

I wanted the welcome screen to be as easy to use as possible. There are two versions - the sign-in and sign-up page. They both look the same, however vary in function. They are consistent with the design materials as well, using the red to indicate call-to-action buttons and yellow to add variation. 

RC_Welcome Sign Up.png
RC_Home Screen.png

HOME SCREEN

The home screen of the app is where you can access all of the information that you would need. You can browse all livestream events, all events that are coming up, artists, and categories. 

I used the light blue to draw attention to the RFID scanner, so that way users can immediately use that feature upon signing in when they're at an event. 

The home screen features both vertical and horizontal scrolling. I also changed the buttons from square to rounded edges to add a little design variation.

RFID SCANNER

The look of the RFID scanner is still the same, however I did add more copy to make how to use it much clearer. This better takes into consideration someone who isn't as familiar with technology and more clearly instructs them on how to use it. 

RC_RFID Scaner.png
RC_Confirmation Page.png

CONFIRMATION PAGE

During the first usability study, I received feedback that it wasn't clear how to navigate to the livestream event. The user(s) clicked on the 'Back to Home' button because it was more prominent. Taking that feedback, I added in another red button to show users that they can also navigate to the livestream event from there. From a digital marketing standpoint, this would also integrate into the email function and the user would receive a direct link - as well as notifications - to the live event when the event was getting ready to go live. 

LIVESTREAM PAGE

To the livestream page I added a closed-captioning as well as full screen button that will allow for easier viewing options. 

RC_Live Stream Page.png
RC_Menu.png

MENU

From the menu you can access all the main pages that you'll need to. Some feedback that I received during the second usability study was that it was difficult to navigate back to the livestream event without going through the entire sequencing again. Although users would have the link to the livestream event in their email inbox, I also added a 'My Tickets' section that will easily enable users to view their tickets - both current and old. This will allow them to easily navigate to the livestream event from the app as opposed to having to go to their inbox to find the link and then back to the app. 

ALL ARTISTS

The 'All Artists' page follows a vertical scrolling pattern with large images of each of the artists on the app. When the user hovers over the image, a yellow overlay will appear with the artists' name and a clickable link to their profile. 

RC_All Artists.png
RC_All Events.png

ALL EVENTS

The 'All Events' page follows a vertical scrolling pattern with large images of each of the events on the app. When the user hovers over the image, a yellow overlay will appear with the event name and a clickable link to the page event. 

ALL CATEGORIES

The 'All Categories' page follows a vertical scrolling pattern with large images of each of the categories on the app. You can see here that when you hover over the image, a yellow overlay appears with the category style. You can click on the overlay and it will take you to the category page. 

All Categories_Overlay.png

Design & Accessibility

TYPOGRAPHY

Since I was keeping the background mostly white to ensure that the colors from the art popped on the page, I wanted to use a font that was a little more artsy. I chose Advent Pro and used varying styles and sizes to signify hierarchy and importance on the page. I used bolder fonts for the buttons and headings, with lighter fonts for the text. I also made the icon text bold, as it is the smallest font and I wanted to ensure legibility. 

COLORS

The red is used on the call-to-action buttons. Yellow is used in the artist header section as well as in the overlays on the 'All Categories/Artists/Events' pages. Water sprout blue is used to draw attention to the RFID scanner on the home page, as well as the social media area on the confirmation page to help break it up. Black shades is used for the font, and white as the main background for a clean, crisp look. 

HEADING 1

Advent Pro Bold

56

HEADING 2

Advent Pro Semibold 32

HEADING 3

Advent Pro Bold

36

BUTTON

Advent Pro Bold

36

BUTTON 2

Advent Pro Medium 22

TEXT BOX

Advent Pro Regular 18

TEXT BOX 2

Advent Pro Regular 14

ICON TEXT

Advent Pro Medium 11

Group 109.png

BACK BUTTON

Each page features a back button that allows users to easily navigate back to the previous page. I wanted to use the word "back" in it so it would be screen reader accessible.

Group 108.png

MENU

Each page has a menu button that allows users to navigate to their profile, tickets purchased, log out, and to other pages on the app. 

Group 135.png
Group 136.png

BUTTONS

Since this was only designed for an app, there are only two versions of the call-to-action button: default and pressed. The default button has an outward shadow, and the pressed button has an indented shadow. 

Group 107.png

DROP DOWN

This drop down menu appears on several pages - the event ticket pages to allow the users to add additional tickets, and the accessibility menu which allows the users to switch languages and increase the font size.