SchwingShop
Designing a Shopify website to streamline an e-commerce business from multiple sales channels to a singular, intuitive website
Context
SchwingShop is a small business in Hoboken, NJ designing custom, hand embroidered apparel and items. I was tasked with designing a new website to streamline the business from multiple sales channels - Etsy, Instagram, and Squarespace to a singular Shopify website.
Problem
Operating on multiple sales channels is not sustainable as a small business. The owner spends a lot of time communicating with customers on different platforms which can lead to losing track of orders and payments, along with high operating costs for hosting multiple platforms. The current website design, branding, and copy needs to align more closely with their brand presence on Instagram and Etsy to increase adoption and ease of use for users.
Role
Sole UX/UI Designer
Time Frame
2 months
Goals
Design an intuitive and user-friendly website that offers direct ordering and payments
Improve usability and navigation; eliminate unnecessary back-and-forth between customers and the business
Create clean, minimal branding that matches the brand identity on Instagram and Etsy to increase sales and engage users
Solution
Streamline multiple sales channels to Shopify which will accept orders, calculate taxes, and track inventory for the owner. Design a clean, minimal website that includes product collections, items, descriptions, pricing, and customizations offered to improve the communication between the business and users. Thus, giving the owner more time to spend fulfilling orders instead of communicating with users and providing users with a simple, delightful shopping experience.
Competitive Analysis
I conducted a competitive analysis of direct and indirect competitors identified by the client, along with my own market research of other home goods, ethically sourced, and handcrafted small businesses. This gave me a clear understanding of what was successful and wasn’t successful before beginning the website design. The main competitors that I identified were Hawkins NY, KaeKooShop, and the Margo Market.
Hawkins NY - A homegoods store founded in 2013. Clean, minimal, accessible pricing.
Minimal color palette, similar to SchwingShop’s existing branding with slight pops of color in CTA’s
Large collection images with featured product thumbnails to the right are effective
Copy is a good mix of conversational and professional
The Margo Market - handmade and ethically sourced home goods and clothing store based in Hoboken, NJ
Too much negative space, could be improved with content blocking
Product page is clean with professional photography
CTA’s have poor contrast
KaeKooShop - ethical, one of a kind, hand crafted goods
Nice, professional photography and slideshow
Process section is effective
Every item “out of stock” could lead users to exit. After reviewing this website, I suggested to the client not to track quantities for custom items
Sketches
Below are some initial sketches I created to gain an understanding of the information architecture and visual hierarchy.
Usability Testing
The client didn’t have a budget for user research and testing so I was confined to testing with personal connections. If we had the budget, I would have preferred to test with actual users. I conducted user testing with five participants to gain an understanding of user flows, pain points, task completion, learnability, and overall usability.
Ages 25-35
2 males, 3 females
All users were familiar with e-commerce websites and online shop regularly
Overall, the feedback was very positive and users liked the clean, easy to navigate design. Below are a few of the pain points and the improvements I made to improve the user experience.
Final Design
Below are some of the key improvements I made to the client’s existing website to improve the navigation, ease of use, learnability, and overall experience.
01. Improved Navigation and Visual Hierarchy
02. Enhanced Usability, Learnability, and User Engagement
Custom Seasonal Collections
I crafted custom sections for the Holidays and special events that the client can swap out as needed, since the company generates a majority of sales from Holidays and Bachelorette parties. This will generate more sales for the business and improve the learnability for users. In the previous design, it wasn’t immediately clear to users what products were offered. This will also gives users ideas of how to style pieces in their home, along with sizing references and descriptions for easy ordering.
Results & Next Steps
Results
Improved learnability by redesigning the information architecture and visual hierarchy
Enhanced usability and navigation by adding content blocking, clear categories, and featured collections
Designed a cohesive brand identity to engage users
Streamlined sales channels; cutting down costs for the client and merging business and user needs by eliminating back-and-forth between the shop owner and customers
Next Steps
Work with professional photographer to shoot flat lay photography for all inventory
Rotate content seasonally and as new products are released