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.
PROJECT DURATION
August 2021 - September 2021
RESPONSIBILITIES
Lead UX Designer
UX Research
Usability Studies
Wireframing
Prototyping
User Journey Maps
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
High-Fidelity Prototype Images
.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.
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
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
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
Lynn User Journey
Design Process
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.
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.
Digital Wireframes
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.
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.
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.
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
The welcome screen initially featured all box buttons, and a blue Facebook sign-up button and grey Google sign-up button.
I added all icons, and most of the pictures for the categories, and included a top bar menu.
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.
Upon receiving input, I moved the 'Add to Cart' button up higher and made it bigger.
The review your order page allows users to confirm their purchase prior to making it.
Users can follow a standardized process of inputting their credit card and personal information to purchase event tickets from their mobile phone.
After making the purchase, users can share the event on social media and navigate to the livestream event by clicking on the link.
This is the livestream event page where the presenters would appear in the top section. Users have the ability to chat and ask questions.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.