AlteRealms Art
Designing a responsive website for a ceramics and mixed-media artist ・ 2022
-
My Role
End-to-end UX/UI Designer and Researcher
-
Timeline
80 hrs
-
Tools
Figma, Miro, OptimalSort, Whimsical, Maze, Surveymonkey
-
Prototype
Overview
I designed a website for a local ceramics and mixed-media artist who didn’t have an online platform to sell her art.
Background
Ali S is an independent artist in Southern California specializing in unique ceramics and paintings. After earning a BSci in Horticulture and Art from UMN, she left the industry to focus on her artistic passion for clay. Now, she runs a studio in Ocean Beach, teaching students of all backgrounds. Her work blends her scientific background with art, exploring form, glaze, and mixed media to create imaginative, emotional pieces that transport viewers to different worlds and timelines.
The Problem
How can an e-commerce website effectively showcase an artist’s work, while making it easy for users to book art classes and buy art directly from the artist?
Ali currently sells her art in person and needs a responsive e-commerce website to boost revenue, reach more customers, and simplify purchasing and class booking. Her portfolio is spread across social media, and she lacks a centralized space to promote her brand.
The Solution
I designed the website to highlight Ali's unique style while keeping it simple.
The main features are:
Product listings for all ceramics and mixed media artworks
An easy-to-use class booking system
Enhanced brand identity
Dedicated pages for her portfolio, biography, and contact information
Constraints
I needed to solve this problem by respecting 3 constraints:
The artist wanted her site built on Shopify, so I had to design a responsive website that could easily be translated to that platform.
The logo and color preference had already been chosen, although there was a little wiggle room, branding was pretty set.
I had 80 hours total to finish the project.
Research
Goals
My research aimed to understand the online purchase and booking process for art classes. Key questions included:
What motivates customers to book art classes online?
What discourages them from booking?
How do users find and buy art pieces online?
What do users expect when navigating an artist’s website?
Competitor Analysis
I compared direct and indirect competitors to get a better idea of what other ceramics artists were offering and how other online booking sites were formatting that process. I highlighted the strengths and weakness for each company.
Provisional Personas
After initial market research, I developed provisional personas to better understand my target audience. These personas helped guide interviews and included:
The Artist: Seeks to connect with other creatives
The Connoisseur: Interested in purchasing art
The Learner: Eager to take classes and learn new techniques
Research Findings
I found that artist e-commerce websites should:
Feature a simple design with high-quality product images to highlight the art.
Make the purchasing and booking processes straightforward and user-friendly, aligning with standards from popular sites.
Clearly focus on their main goals, such as purchasing or booking, with a hierarchy based on customer preferences, often highlighted on the homepage.
Surveys Findings
I surveyed 40 people to explore interest in buying art, pottery, and booking classes online.
Key Findings:
A responsive website for the artist would likely boost sales and attract more clients, as many people prefer shopping online.
Demographics: 42% were aged 20-29, 27% were 30-40, and 40% had incomes above $61,000.
Purchasing Trends: 35% buy pottery a few times a year, and 75.89% buy art directly from artists.
Class Booking Trends: 47% book classes online, with 50% of those booking a few times a month. 40% book classes through the artist's or store’s website.
Interest in Classes: 42% are interested in taking a ceramics class, and 37.50% might be interested.
Empathize
The User
Amy the Connoisseur
Amy loves handmade art and prefers buying directly from artists. She enjoys picking up new hobbies, like working with clay or cooking, and supports local businesses through art walks.
Card Sort
I wanted to know how users would rate features based on 3 categories; Very Important, Somewhat Important, and Not Important. To do this I used OptimalSort to create a Popular Placement Matrix Closed Card Sort. Participants sorted cards into these 3 pre-determined categories. They did not know which features were most important to the artist, and instead picked features based on their own desires and needs.
Very Important:
100% rated the Contact page as very important.
78% valued Pottery Available to Purchase as very important.
67% considered Discounts and Reviews very important.
Somewhat Important:
67% rated pottery events as somewhat important.
56% found the About the Artist page somewhat important.
44% thought booking a pottery class, commissions, and creating a profile were somewhat important.
Not Important:
56% deemed the newsletter and stickers as not important.
Designing with a fresh perspective
I led a workshop with the stakeholder to decide on which features to prioritize. I presented a chart outlining user and business goals, and together we reviewed overlapping features to determine the best focus for moving forward. This approach kept the stakeholder engaged in the decision-making process.
Define
Prioritize
Based on the entirety of my research, I set the following priority design goals:
1.
Design a unique and creative experience that portrays the artist and transports the user to a mythical world; including unique icons, fonts, and other visual design elements that compliment the art
2.
Create a pottery class booking flow that can be easily translated to Shopify; research available app integrations to get an idea of what’s currently possible on that platform
3.
Find the most effective ways to add a product to cart for this type of product, since there are already many successful ways to purchase products from an e-commerce site.
Site Map
Based on research and stakeholder feedback, I created a site map to outline the website's navigation and structure. I used insights from the Popular Placement Matrix and Competitive Analysis to prioritize features from most to least desirable. I also mirrored competitor sites to ensure industry consistency, which clarified the design approach.
Task & User Flow
I created a task flow focused on purchasing products, as this was more popular than booking classes according to my research. This flow was tested to ensure users could efficiently complete the purchase process from the "Shop" section on the homepage.
Additionally, I developed a user flow with multiple paths for purchasing products or booking classes to better understand user navigation. This included researching Shopify's capabilities to design within its constraints, considering that booking classes would require a plug-in.
Ideate
Lo Fi Sketches
After the Empathize and Define phases, I created basic low-fidelity sketches to brainstorm all necessary pages and ensure they included key features for both users and the artist. Once the site structure was clear, I sketched different screen variations and reviewed them with the stakeholder for approval. After getting the green light, I developed mid-fidelity wireframes for desktop and mobile views, which helped me refine the design and focus on creating visually appealing UI elements in the next phase.
Wireframes
I reviewed my sketches and created some mid fidelity wireframes in order to best portray the design elements and structure of the site. From there I moved on to creating some responsive wireframes for mobile.
Mid Fidelity Wireframes
You can also swipe on mobile or click and swipe on desktop to view!
Mid Fidelity Responsive Wireframes
Refining the Brand Identity
I started on branding and UI design using reference photos from the artist, who wanted to stick with dark backgrounds and colors like green, orange, and black. I designed pottery-inspired icons to match the brand's identity and created a Style Guide, UI Kit, and mood board to explore and share these ideas. We collaborated to incorporate the artist’s logo and color preferences while ensuring accessibility. To address potential issues with dark backgrounds and orange, I researched color choices and Material Design principles for better accessibility.
Visual Design
Putting everything together
With branding ironed out, I used Figma to create the visual design. There were a few things that I changed from my mid fidelity wireframes including:
1.
I replaced the custom section on the homepage with a portfolio section.
2.
I reduced the font sizes because the body text was too large and overwhelming, especially against the dark background.
3.
I added a dark overlay behind all screens with pop-up sections to make the pop-ups stand out more and to reduce visual clutter on the pages.
Visual Design
You can also swipe on mobile or click and swipe on desktop to view!
Responsive Visual Design
Test & Iterations
Testing
I created a prototype to test the product and identify any necessary revisions. The usability test aimed to evaluate the visual design, understand user flow, and find pain points in purchasing a product and booking a class.
I conducted the test both in-person and online using Maze with 4 participants. I favored the in-person format for more detailed feedback and natural impressions. I then used an affinity map to summarize the findings.
Insights
-
Overall users enjoyed the visual design and felt that the product imagery was very eye catching. The flows to purchase a product and book a class were straight forward and easy to understand. All participants successfully completed the tasks.
-
the majority of participants noticed that the “sort” and “filter” options included two separate sections to sort by price which added some confusion.
The commission section on the “about” page resulted in a few questions wondering how that process worked.
-
Overall the prototype was met with positive reviews. Some participants would prefer a lighter theme, but generally didn’t mind the dark background.
Product Revisions
Based on the feedback, I made the following revisions:
Simplified the filters on the "Shop All" and "Pottery Classes" pages to remove repetitive prices.
Moved the commission section from the "About" page to a future standalone page for better clarity, as I didn't have enough details on its format.
Since the artist preferred a dark background, I adjusted the light text to 87% opacity to reduce eye strain, following Material Design suggestions.
No other changes were needed, as all participants successfully completed the flows and liked the visual design.
Reflection
Conclusion
Before-and-after user testing confirmed I was successful in designing an appealing and easy-to-use website for AlteRealm Art’s customers.
Learning
1. Involve stakeholders early and often
It helped to have weekly check-ins after all of these design phases to ensure that we were both on the same page and to course correct if not.
2. Seek feedback
Working with the stakeholder’s preferred color palette took me outside of my comfort zone, so it helped getting feedback during the visual design process from my peers.
Next Steps
If I had more time, I would work with the artist to create a commissions page and add a flow for purchasing commissioned pottery items. I would also develop a flow for viewing portfolio images and their descriptions.
Since the artist hired me to design the website, I’ve handed over the designs for implementation.