Sign in
•3 min read

From data to design: navigating product data in Shopify: building a Shopify store.

Side Project | Leo Vroegindewey | 2023

Overview of Side Project (2023)

Wholesome Books For Children – New Books | Online Bookstore – Big Sky Life Books
Your trusted source of wholesome books for children. Clean and uplifting book collections for your children and grandchildren.
Online Bookstore – Big Sky Life Books“I want Big Sky Life Books to be a trusted source of wholesome books for your children and grandchildren.” Lindsey

In 2023, I dove into Shopify, and helped the store owner redesign their Shopify store dedicated to children's books. This side project wasn't just about aesthetics but a learning journey into Shopify's capabilities.

Drawing on my time as a Principal Product Designer at Salsify, where I gained invaluable insights into how top-tier e-commerce organizations manage their product data for major marketplaces like Amazon and Walmart, I applied my experience to my Shopify project.

My product design and data management background allowed me to understand that managing product data was the center of this project. Once I understood how to manage the product data, I could overhaul the Shopify store and create a seamless and effective user experience.

During the project, I had to manage the following data:

  • 500 SKUs (products)
  • +10k store data points
  • +2300 images

After the redesign, the store transformed into a vibrant, user-friendly destination, overcoming Shopify's technical limitations. This experience has equipped me with the expertise to build any Shopify store, focusing on robust backend data mapping for scalability.

Goals

Goal 1: Build a robust store data infrastructure by leveraging metafields and metaobjects as much as possible.
Goal 2: Create different paths for customers to search and filter books to suit their preferences.
Goal 3: Develop a store design that reduces bounce rates and increases page visits.

This Project Taught Me

  • This side project was a deep dive into a data-first mindset, utilizing tools like Metafields Guru and understanding the nuances of Shopify.
  • I learned to navigate Shopify's technical constraints, finding creative solutions to enhance user experience.
  • This data-centric approach, I realized, is universal and can be adapted to any industry.

Roles and Processes

I teamed up with a great Shopify developer (Chris Dodd) and worked with him to make the new Shopify store a reality. Chris was an amazing dev to work with, and the months flew by as we checked off all the to-do items on my checklist.

Data Entry

Before I opened my design tool, I spent time looking at the product data of books. I wanted to understand what was relevant and which product data must be displayed.

Once I understood the data, I started thinking about the hierarchy of the data and how it might be displayed on the Shopify store and the individual pages. Then I started meticulous data entry into Metafield Guru, laying the groundwork for seamless integration with the new site templates.

Design

Once I fully understood the product data that I had to work with. I started researching, drawing inspiration from various e-commerce patterns I found on Landbook. If I saw a compelling pattern or page template, I would download it into Figma, copy the layout, and display it in my Figma file.

Identifying, copying, and adjusting e-commerce designs from Landbook in my Figma file significantly improved my design process. It's how I designed the PDP and book collection page.

Project Tasks

  • Curated images from Adobe Stock.
  • Integrated Flodesk for email collection and newsletters.
  • ChatGPT and Grammarly for copywriting tasks.
  • Canva for image manipulation. (A very promising tool but has terrible team/project management capabilities)
  • Used Air as a DAM to store all assets.
  • Consulted Ahrefs, and Semrush for SEO.
  • Integrated Ghost blog with Shopify site.

Development

Partnering with a Shopify developer, we worked together for several months. My designs were brought to life, with metafields and other elements expertly integrated, resulting in a store that's not only visually appealing but also functionally robust.

Outcome

The new store design received glowing customer feedback, praising its ease of navigation and book-sorting features.

  • The redesign led to an 8% reduction in bounce rate within three weeks.
  • Increased page views per customer.
  • Boosted partnership revenues.

This project didn't just redesign a store; it created a community and a memorable shopping experience.

***

I'm Leo, the writer behind The Triangle Offense Newsletter. Diving deep into UX, CX, and customer-centric business strategy, I provide insights into using timeless CX and UX techniques to attract and retain customers to unlock business growth. Join me on this journey, and let's reshape how to grow a business together.