Peg Baldassari - Sketchy P

BACKGROUND

Sketchy P is an artist that paints petite, abstract paintings. Her use of vibrant colors and rich textures of acrylics creates a story from paintbrush to painting - they may be small but they are impactful. Sketchy P is interested in building a brand and an e-commerce responsive website so she can sell original paintings and limited edition prints. Instagram is key for engaging her audience, but she would like a website to expand the user’s exposure to her work by having an intuitive and appealing experience while shopping for art.

Create a logo and responsive website for an e-commerce painting and print shop.

This is a website where you can buy framed petite paintings and prints in a variety of sizes.
‍

CHALLENGE

OUTCOME

timeline

80+ hours in two weeks.

The research process gave me a better idea of how other artists present their online shops and what users value when it comes to purchasing art online.

GOAL:
To understand the art industry and user experiences while shopping for art, so I could define the needs and wants for building a responsive website.

DELIVERABLES:
Competitive Analysis | Market Research | 1:1 Interviews

RESEARCH FINDINGS

Competitive Analysis
Researching direct competitors’ strengths and weaknesses, allowed me to find the pros and cons of online shopping for art and get ideas about improving user experiences.

Market Research
What I was looking for during this research is information on how users find art, and what key features are important for a successful website.
‍

Art on Social Media STATISTICS

80% of art buyers use Instagram to discover new artists.
75% of art buyers use Instagram to find art to purchase.
34% of art buyers said that social media has an increasing impact on their decision to buy art.

Statistics on Demographics

44.3% of young millennials (ages 18–24) discover art on social media.
33.8% of older millennials (ages 25–34) discover art on social media.
8% ages 18–24 purchase art online
23.8% ages 25–34
20.7% ages 35–44
17.9% ages 45–54
15.7% ages 55–64
13.9% ages 65+

CHALLENGES

Decisions can be harder to make when purchasing an art piece online rather than in person.
Users abandoning their cart at checkout because the checkout process is difficult or price points are too high.

Keys and trends

Instagram has been the most impactful on today’s art market.
Ease of navigation is key.
Having a cohesive branding.
Appearance is professional.
Showing that you’ve sold many pieces already inspires confidence in your buyers.

*Site Credits:
www.arttactic.com/product/49173/
www.ahfx.net/weblog/164

PRIMARY RESEARCH - 1:1 Interviews
I recruited five participants who occasionally buy art online and some of whom are artists themselves to get insight on their experiences, dislikes, and preferences when it comes to buying art.

I categorized the positive and negative experiences, features, and values from the collected information.

> View full interview guide here‍

POSITIVE EXPERIENCES

Discovering art on social media
Clever packaging
A variety of sizes for prints
Easy checkout

NEGATIVE EXPERIENCES

Wasteful packaging
Art arriving damaged
Shipping costs and taxes
Cart abandoned because of the price being too costly

FEATURES

Zoom in feature
Sizing options for prints
Images of the art hanging in a house environment
Multiple angles and closeups of the art

VALUES

Eco-friendly packaging
Free or low-cost shipping
Good quality
No color distortions in photos

Areas of Improvement
I was able to find areas of improvement which were: packaging and shipping details, having affordable art, making the website trustworthy, and making checkout easy and simple.

GATHERING INSIGHTS

Insight #1: Customers like quick and easy check outs

Insight #2: Customers want to see the art displayed in a real setting and be able to zoom in

" I like an easy and fast checkout process..."
" I feel sometimes when using my cell phone, it can be overwhelming and confusing during the checkout process."

" I like to be able to zoom in and see the texture of a painting when I'm buying an original piece."

"It's nice to see images of the artwork in a home or office setting to get a better idea of how it might fit into my space."

"I find artists that I'm into through Instagram."

"I fell in love with a painting that someone bought and posted on Facebook and then I looked up the artist."

Insight #3: Customers find art through social media

PROVISIONAL PERSONAS

Now that I have some understanding the users , I can begin to think what personas can be created based on these insights.

After synthesizing the research data, I created personas to more specifically understand users who purchase art online. Once I better understood the wants, needs, and frustrations of the user, I could define their problems and questions to be solved in the ideate process.

GOAL:
To define the wants, needs, and problems related to user experience for online art purchasing.

DELIVERABLES:
Personas | Empathy Maps

PERSONAS

Creating personas from research insights allows me to tackle the website from a specific point of view other than my own.

EMPATHY MAPS

Digging deeper into the personas' personalities, I created an empathy map expressing their pains, gains, thoughts, and feelings.

During the IDEATE process, I generated solutions for the users' wants, needs, and frustrations. At this point I wanted to come up with a lot of different solutions so that I could choose which ones would be effective for the SKETCHY P website. Once I prioritized features for the site, I was able to imagine the website as a whole and build the frame and flow.

GOAL:
Generate solutions for the defined problems and build the information architecture and flows.

DELIVERABLES:
Feature Roadmap | Sitemap | Task Flows | User Flow

FEATURE ROADMAP

After an overview of my research, I prioritized features that would be useful for the website.

SITEMAP

Taking the results from research and the feature roadmap, I created a sitemap visualizing what the navigation interface could look like, and what the categories and sub-categories would be.

Task FLOW

Task flows were created to help visualize what a user might view and click on in the website.

Task 1

Heather found about Sketchy P through another Interior Designer she buys from. The task is to purchase an art painting.

Task 2

Chuy came across Sketchy P on Instagram and clicked on the link to the website. The task is to purchase a 8x10 print.

USER FLOW

User Flow is used to see the user’s actions and decision making starting from the homepage to completing a purchase. Seeing the two scenarios I used, helped me make decisions on what is needed and not needed for the website.

Scenario 1

Heather is in the styling stage of her job, and she is looking for abstract painting pieces to go with her designs. She remembered another designer mentioning Sketchy P. So, she goes to sketchyp.com.

Scenario 2

Chuy is on a road trip with his dog, and he was scrolling on Instagram when he came across a post of a painting that caught his eye. He saw that there were prints for sale on Sketchy P's website, and remembered that he needed to get a present for his Mom. He clicked on the link in the profile to take him to sketchyp.com.

Once I established the information architecture and flow of the website, it was time for the DESIGN process. I created the layout, visual hierarchy and built wireframes to see how everything would interact.

GOAL:
Sketch and build wireframes to put into perspective the structure of the homepage, then build out the rest of the pages. Then, apply UI elements to enhance the overall look.

Low-Fi wireframe Sketches

Drawing out sketches of the homepage gives me a rough idea of how to place the hero image, headers, CTA buttons, and special features. I wanted to make sure that “Petite Paintings For You” is strong in the visual hierarchy, ensuring the user knows what they are shopping for.

MID-FI WIREFRAMES

From sketches to mid-fidelity wireframes, it allowed me to better structure the website’s interface based on my sketches, task flows, user flows, and research.

LOGO

When coming up with logo ideas for SKETCHY P, I wanted a natural and creative feel. I started out with sketches, then made vectorized options. I then narrowed it down to one logo, finding a font that mimics handwriting.

BRANDING

For branding, I created a style tile to make the color, tone of photography, and font decisions, keeping the overall look creative, natural and vibrant.

HIGH-FIDELITY DESIGN

After the style tile, logo, and branding stage, I implemented the UI design elements and color palette into my wireframes. This allowed me to visually see everything come together in a fun and cohesive look. I then can move on to prototyping to make sure everything functions properly.

UI KIT

The UI kit is a valuable manual for designers and developers moving forward. It guides every step of application across the website. Updates, changes, and add ons will be made to this UI kit over time.

Using a prototype, I conducted usability testing using InVision and collected data. During testing, I got feedback about how to improve the app for optimization and also what worked for the users.

GOAL:
To conduct usability testing on a prototype in order to find out successes, problems and wins to discover new solutions for iteration.

DELIVERABLES:
Prototype | Usability Testing

ProtoType

A prototype was created in InVision to see the frames interact and to see if any UI elements needed changing before testing.

USABILITY TESTING

I recruited six users and had set them up with a laptop and used MAZE to track and record their clicking actions and I could observe their behavior while doing the tasks. The tasks given were:

Add “Coral Reef” painting to your shopping cart.
Purchase an 8x10” print of Sushi.

TEST OBJECTIVES

Observe to see if users could identify what "ORIGINALS" stands for
Observe the users on seeing which "PRINT" button they click on
Observe how users respond to "LOOK WHAT'S NEW..."
Observe the users during the checkout process
Observe users overall reaction while navigating through the website

TEST GOALS

Understand how users interacts overall with the SKETCHY P website
Identify pain points and pleasant experiences when navigating through the website
Collect feedback to make improvements on specific areas

the results

The testing of SKETCHY P was successful. All users completed both tasks without the need to give up. The area that had the most confusion was the "SHOP ORIGINALS" CTA button, and identifying the "ORIGINALS" button and what it stood for. Users didn’t understand that “ORIGINALS” stood for original paintings as opposed to prints.

Using the data from the usability testing, I identified more areas of imporovement and made revisions for the next iteration of the high-fidelity wireframes.

GOAL:
To identify areas of improvement and create solutions for iteration of the high fidelity prototype.

DELIVERABLES:
Affinity Map | Revisions and Final Hi-Fi Wireframes

AFFINITY MAP

I organized the results from the usability testing, combining each users’ successes, problems, and wins based on how they did and felt. This helped me determine areas of the feature that needed improving and what the solutions would be.

Revisions

I applied the solution and improved the high-fidelity frame by renaming the CTA button "SHOP ORIGINALS" to read "SHOP ALL PAINTINGS" and changing "ORIGINALS" navigation button to "PAINTINGS".

This project was personally gratifying as I am the artist bringing to fruition a long time dream of my own. I have always imagined what the interface of the SKETCHY P website might look like but in this project, I learned the value of primary research as my participants brought up unique positive and negative experiences.
‍

Final takeaways

Next Steps...

Build out the "ABOUT" and "CONTACT" page.
Continue further usability testings and iterations.
Handoff to developers.