top of page

ecommerce Website

I created a website for my artwork in 2018. This case study is the evolution of this site and my growth as a designer and creator.  

The problem: My current website was not responsive and lacked a checkout screen resulting in low conversion rates. Old site

 

The goal: Add a proper checkout flow and design for all screen sizes, increasing traffic and sales. Current site

pain points

One of the most common pain points for ecommerce sites is not being optimized for mobile use. A user needs hassle free navigation to the product they are looking for and a quick payment process. 

Not responsive, the design breaks at smaller screen sizes, especially mobile

 

No checkout screen, users expect to checkout using card payment and shipping all in one step. Drop off occurs when online pay is not an option.

Design Stage

Site map

Hierarchical style site map used in both desktop and mobile design. The site has separate tabs for artwork on canvas and fibre art. The “shop” tab will be added at a later time when site traffic and sales increase.

Screen size variations: Paper Wireframes

Focus on making image viewing and checkout seamless across devices.

Digital wireframes

  • Retain accessibility and consistency while designing for varying screen sizes.

  • Home button and cart remain in navigation menu across devices. Page names get moved to the center of the screen in mobile view to optimize font size.

​

Link to lo-fi desktop

​

Link to lo-fi mobile

  • Clear, convenient way to order art through this website on both desktop and mobile.

  • Guest checkout that allows user to enter, save, and edit information before confirming payment.

Testing: Usability study

​

Study type: Unmoderated usability study

 

Location: United States, remote

 

Participants: 5 participants

 

Length: 10-15 minutes

Study Findings

​

Navigation buttons: The most common comments were about the back arrow and exit buttons not taking the user to the correct screen

 

Checkout screen: Include space for coupon/discount code and special delivery instructions

 

Homepage: Outdated/ did not engage user

Iteration

Checkout

I added an exit icon to checkout and confirmation screens. These buttons return the user to the previous page. Also, updated payment information to include promotional code and special delivery instructions.

UI

Improved design with updated artwork, font style, and color scheme. In addition, users can now access my Instagram from the home page. This makes it accessible if they don't visit the about page.

Screen Size

A majority of users locate artists stores from their social media sites, QR codes, tags, etc. My main concern was users not being able to view my site on their phones. 

​

ppcheck_edited.png
pppay_edited.png
Accessibility Considerations

 

  1. I used large, easy to read font styles in high contrasting color for easy readability.

  2. Alt text for images.

  3. Use of icons, specifically in checkout screen. 

Conclusion

Takeaways

 

Impact: 

As the owner of this website, I am very excited to see the impact of these iterations. Users have commented on the improved design and ease in checkout specifically. Responsiveness is increasingly important as devices ranging in screen size gain popularity for many users.

 

What I learned:

It is important in ecommerce to create a painless checkout process across platforms. 

Next steps

 

  • Grow and expand with additional merchandise.

​

  • Include animations to promote new artwork and draw attention to sales.

​

  • Continue iterating on accessibility and responsiveness across devices.

© 2022 Sam Trobaugh

bottom of page