@dustythesnowman

Custom Product Shop and Work Portfolio Website

 

ROLE

UX designer

DELIVERABLES

User Research
Wireframes
Prototype
Usability Testing

TOOLS

Figma
Whimsical

TIMELINE

5 weeks

 

CONTEXT

 

BACKGROUND

The client, Destin @dustythesnowman, is a game developer and illustrator that creates personal content and commissions and works with other content creators and event organizers. He has an extensive archive of artwork and recently began selling stickers, so he’s looking to build a website that serves as both his portfolio and shopfront.

 

PROBLEM

The client currently showcases his work through his social media platforms, Instagram and Twitter and runs his sticker sales on Etsy. He wants his brand to be more centralized without losing engagement with his community. Additionally, Etsy continues to increase transaction fees, making a custom online storefront more desirable.

 

RESEARCH

I began my research with a kickoff meeting with the client to identify a few pain points with his status quo and goals for his website. His top goal was prioritizing his business, which shaped my goals going into user interviews.

 

USER INTERVIEWS

Through user interviews, I uncovered four participants’ insights on shopping with small, independent businesses. While not all insights relate directly to user experience, these were also helpful to and shared with the client.

 

needs

Affordability or reasonable pricing

Frequent activity or updates on sellers’ platforms

Easy, low-effort checkout

Detailed photos and description

frustrations

Overwhelming visual design and general poor UI

Lack of customer service or follow up and simply forgetting the brand

motivations

Niche or custom products that are unique to seller

Connection to artist, artist presence

Intention or desire to support small businesses and makers

 

USER PERSONA

I developed a persona around someone who actively supports small businesses, and as an artist herself, appreciates works by other artists. As a freelancer running her own business, she expects the quality and efficiency that she also strives to provide her clients, but also empathizes and enjoys connecting with creators.

 
 

EMPATHY MAP

Many people shop online and have had experience with e-commerce, but shopping with small businesses can still be quite niche. Putting myself in Elizabeth’s shoes through the empathy map reflected some ways that shopping with independent artists and businesses might seep into her life.

 

DEFINE

PROJECT GOALS

With my research, I used a project goal diagram to clarify some goals that align with both the client and user. While some common goals ultimately depend on the client and manufacturing end, it still helped me understand the content that users might see on the site and shaped my design decisions.

SITE MAP

I developed a sitemap, with the shop as the home/landing page, based around task and user flows that aligned with most online shopping flows. Since the client has a very limited product selection at the moment, it won’t be overwhelming for users. Overall, the site was meant to be simple and straightforward and the sitemap reflected that.

 

IDEATE

SKETCHES

Since the site wasn’t meant to be too complex and the client had expressed what kind of work he wanted to showcase, for the most part, I had an idea of what each page could look like. I spent more time working out the navigation and identifying where I could implement more of the artist’s personality. I also consulted with the client on the navigation to see If the icon navigation was feasible for him.

 
 
 
 

LOW FIDELITY WIREFRAMES

Low fidelity wireframes allowed me to better visualize my sketches and start building my foundation with grids and spacing. The client chose Big Cartel as his site-builder that suited his needs, so responsiveness will not be a big concern but I mapped out two mobile wireframes to check how elements would stack, to ensure desktop versions are consistent.

 

LOGO + UI KIT

I worked closely with the client on the logo and UI Kit as he is the artist so I wanted to make sure it visually reflected him. I created two color palettes that complement his art style and type sets with readability in mind and presented them to the client as options, and we ultimately landed on this kit.

 
 

PROTOTYPE

With solidified UI, branding and additional assets I need from the artist, I developed the high fidelity wireframes and prototype. In hopes that test users would have a seamless experience, I made sure the prototype did not have any disruptive interactions while staying within the scope of my usability test.

 
 

USABILITY TESTING

The usability test plan was created prior to prototyping to make sure I made the screens necessary for the tasks. I had five users, who shop with and support independent artists, navigate through the website. I then consolidated my findings using an affinity map then and prioritized with an impact/effort matrix.

 

USER TASKS

1. Check out artist’s work

2. Purchase a sticker

3. Discover how to contact artist for commission

 

AFFINITY MAP

 
 
 

KEY INSIGHTS

successes

1. Design is straightforward, with clear information hierarchy

2. Logo and icons are practical and unique

3. Artist personality and style are present throughout 

 

pain points

1. Work page lacks feedback and information about content

2. Product page lacks shipping cost information

3. Contact information placement may be unintuitive for some

 

IMPACT-EFFORT MATRIX

I placed user concerns on a priority matrix to prioritized iterations within the client’s and my scope. Lower impact improvements tended to be things that were more objective and high effort improvements tend to require more assets from the client, which is out of our scope for the time being.

 
 
 

ITERATIONS

PROBLEM: LACK OF FEEDBACK

Illustrations are static, but 4/5 testers noted wanting more information about or interactivity with them.

 

SOLUTION

Illustrations have a hover and light box states that includes some general information about the piece, while staying minimal and true to the client’s preference.

 
 
 
 

PROBLEM: UNINTUITIVE CONTACT LINKS

The movement of content from the About blurb on the right side of the screen to contact links on left can be unintuitive or disruptive, as 2/5 users noted.

 

SOLUTION

Contact links are centered to minimize eye movement and be consistent with links on the Illustrations page.

 
 
 
 

ADDITIONAL REVISIONS

shipping cost

There was no indicator that there would be additional shipping costs. While it’s difficult to estimate the shipping costs, I added a note next to the product price so users account for it when deciding whether to purchase.

 

back to top

Due to limited content, the website doesn’t have a long infinite scroll, but as the navigation isn’t sticky and for user convenience, I added a button to take users back to the top.

 
 
 

REFLECTION

NEXT STEPS

I’m looking forward to circling back to this project and building it in our agreed upon site-builder, Big Cartel. At the moment, the client and I agreed upon a prototype, but for the client, I hope to get a live site up and running for him. Given more time I would love to test the interaction feedback for the illustrations. Out of my own curiosity, it would be cool to use an eye tracker to see if the contact links placement on the About page actually make a difference.

 

FINAL THOUGHTS

This project was a bit challenging for me in terms of research as there are already many existing best practices and standards for e-commerce. However it was very insightful to see how people have different expectations from small businesses or independent artists. 

Working with a client also gave me an additional perspective that I needed to bridge with users through design. Figuring out how to communicate efficiently and organize any asset requests from them is surely going to take practice, but this was a great start. 

 

FINAL PROTOTYPE