top of page
Sliuser Studio
Designing a responsive website for my online art shop to enhance visual appeal and easy navigation.
Overview
My small business, Sliuser Studio, is where I get to combine my love for sculpting and spreading joy in the form of tiny clay trinkets and charms. While I currently sell on Etsy, I’ve been imagining how I could design my own shop. Based on sales and social media engagement statistics, I’ve gathered that my main audience consists of kids and young women who love cute and aesthetic accessories. So, my goal for Sliuser Studio’s website is to create a shopping experience that’s not only visually pleasing, but also accessible to all age groups.
Challenge
The challenge is to design a website that not only reflects my brand’s identity but also resonates with my target audience, creating an engaging, user-friendly experience that meets their needs and expectations.
Research
I conducted user interviews and developed empathy maps to better understand users of artist shops. Many are drawn in through social media, viewing online shopping as a relaxing and inspiring activity. However, complex platforms often frustrate them, and they frequently struggle to find the option for custom orders, a feature they highly value.
Goals
— Make the website visuals more aesthetically interesting
— Include filters for items that are sold out
— Include the size and materials of each product in the item description
Frustrations
— "It's unclear if the artist takes commission requests"
— "I hate when I look at a website and everything at the top is sold out"
— "I want to know what size and materials were used for each product"​​​​
Pain Points
— Users want to place custom orders but they can't find where to do it
— Users can't browse the artist's most popular products
— Users can't filter out products that are sold out
— Visual elements of the website do not look good with the products
Sitemap
Users expressed a desire to explore small artist shops for relaxation and enjoyment. Therefore, the aim of this site map was to establish a simple and straightforward navigation flow.
Wireframing
Paper Wireframes
After gaining insight into the user's feelings, I came up with a design to reduce some common paint points.
— Don't know where to place custom orders
-
​Commission order option included in the website menu​
​
— Can't easily browse most popular products / best sellers
-
Homepage will feature a section where users can directly access the best-selling items, as well as a filter option
​
​— Can't filter out products that are sold out​
-
Filter option for items that are sold out, as well as sold out items being shown at the bottom of the product list
— Visual elements of the website do not look good with the products
-
Ensure visual elements are simple and enhance the product instead of taking away from it​​
​
Screen Size Variation
I designed layouts for various screen sizes to ensure the website's responsiveness. Here's an example of how the home screen adapts from desktop to mobile devices. Notably, I turned the horizontal menu on the desktop version into a hamburger menu and I stacked the section categories to be on top of each other.
Digital Wireframes
Here are a few examples of the paper wireframes translated into digital wireframes. The home page below includes categories, one of which will be "Best Sellers" so that users can easily view popular items.
Users will also be able to apply filters to their shopping page, including the option to filter out items that are sold out.
There will be easy access to the commission page so users can conveniently submit custom orders.
.png)
Digital Screen Size Variation
Here is an example of the shopping page transformed from from desktop to phone. When tapped, the filter options expands from the right side of the screen to reveal filter options. After the user selects their preferences, the number of filters selected will show.
Usability Studies
I conducted unmoderated usability studies lasting 15-20 minutes each, involving a total of 2 participants. The objective was to assess how effectively users could complete core tasks within the app prototype. Key Performance Indicators such as time on task and task completion rates were used to evaluate the app's usability challenges. Two main findings were uncovered by the usability studies:
Insights
— To view items more closely, users needed to click on the item and go to the next page, which can be inefficient.
— Users wanted the option to share items through text and social media.
High Fidelity
Mockups
Here are some mockups I made based on the findings from the usability studies. I added a quick view button that allows users to gain a closer look at the product without being taken to a new page, making the shopping proccess more convenient.
Before
.png)
After
I also included a share button with a widely recognized sharing icon on each item, allowing users to easily share the listing via messages and social media platforms. The left image is the iphone screen variation and the right is the desktop variation.
Mobile
Desktop
Takeaways
I am passionate about art and aim to create small moments of happiness through my work. Designing my website is a major step toward expanding this goal. While I currently sell on Etsy, I’m excited to transition to a self-designed platform that offers a more personal, immersive shopping experience. One study participant mentioned, “exploring art is so fun, and the website has a personal touch," which reinforces the emotional connection I strive to create with my audience. Some valuable takeaways from this project:
— I learned how to balance visual aesthetics with usability. Users wanted a relaxing experience with simple navigation, so while it was tempting to create a more playful UI, I realized it could distract from the products and make it harder for young children to navigate. Keeping the design simple helped focus attention on the product.
— Designing a responsive website was a rewarding challenge. I enjoyed the creative process of reorganizing features to work smoothly across desktop and mobile.
— Working with Adobe XD gave me confidence in adapting to new design tools, even though it’s no longer supported. I was able to explore Adobe Illustrator for logo work, learning how to use the pen tool effectively. I learned that YouTube tutorials are my best friend when learning new tools.
— Looking ahead, I plan to make my website more accessible by adding language options, so people from different backgrounds can enjoy my work. I’m excited to eventually launch my shop, allowing customers to purchase directly from my site, not just through Etsy!
bottom of page