Freelance Project: Jacko & Co

UX/UI Design

Project Overview

Jacko & Co is an e-commerce site that specializes in pet accessories for small to medium dogs. They are a small business in Toronto distributing goods on their site and Amazon with hundreds of loyal customers and followers on their platforms. I was onboarded as a designer to help make small changes onto the site to improve the overall UX and drive sales. Since I’ve started, I learned the infrastructure, features, and limitations to Shopify. I’ve conducted research, learn best e-commerce site practices, business fundamentals to drive results, and gained feedback from other designers to add to this site. The biggest challenge I’ve encountered during the start of this project was incorporating creative freedom while working with the limitations of Shopify.

 

Project Duration

September 2022 to current

Initial Problem

When first meeting the owners of Jacko & Co, they presented me with these two components that they wanted me to work on.

 

2. Site popularity

1. UX/UI

Step 1: Research

 

Competitive Analysis

The first step in my research was conducting a competitive analysis. I aimed to identify reputable e-commerce businesses operating within the same space as Jacko & Co. My general criteria included:

  • It had to be powered by Shopify

  • It had to be within the first few pages of the Google search

  • It had to be of similar niche (pet products or services)

Interview

Although doing the competitive analysis was really helpful. I wanted to do interviews to gain insights on how users felt while they were exploring the site. I was able to interview two users who were avid shoppers but were also fellow UX designers who gave insight on best practices when designing. What was revealed was:

  • The ‘Above the Fold’ wasn’t captivating

  • Content layout didn’t flow and some photos were poor resolution

  • Typography was not consistent

  • Product item had too many pictures, page was too long

  • About us/Contact Us pages were incomplete

  • No footer

Step 2: Empathize

 

Journey Mapping

To better understand users, I created a journey map that traced their experience from arriving on the site to completing a purchase. This map was informed by my interviews, where I asked users to explore the site and describe their thoughts and feelings while attempting to make a purchase. I captured key moments of heightened emotion and used a series of targeted questions to gain deeper insights into their experience.

Step 3: Learning, Compiling & Improving

 

As this was my first experience working in the e-commerce industry, there was a significant learning curve. With a clear understanding of the owner’s goals, I aimed to generate ideas that would enhance usability while also driving traction to the site through new strategies. Improving the site’s layout would optimize user interaction and boost customer retention, while implementing Search Engine Optimization (SEO) would refine content by identifying the most commonly searched keywords for specific products.

Improving the Layout/Content

Search Engine Optimization

Starting with Layout/Content

 

Step 3.1: “Above the Fold”

I began by focusing on layout and content, making several changes while awaiting final confirmation. The first key update was to the “Above the Fold” section. Originally, it consisted of two separate sections without a compelling quote. I redesigned it into a bold, full-width image featuring a product, enhanced with color and an eye-catching phrase. My goal with these changes was to ensure that users immediately understood what the company offered upon landing on the site while also showcasing a best-selling product to capture their interest.

Before

After

 

Step 3.2: "Below the Fold”

The next change I wanted to work on was the material below the fold. Some changes that I made were:

  • Including social proof to help drive sales

  • Resizing and rewriting content so it would work different platforms (e.g. Mobile devices and tablets)

  • Changed font characteristics (e.g. font weight and size) to show text hierarchy

  • Adding color palette to enhance visual appeal and distinction

 

Before

After

 

Step 3.3: About Us Page

The "About Us" page was empty when I first started. To create meaningful content, I collaborated with the owners to understand their vision, gathering details on the desired images and descriptions. Using this information, I crafted a compelling page that aligned with the brand’s identity. Additionally, I applied the design elements from the main store page to ensure consistency across the site.

Before

After

Learning Search Engine Optimizing

 

As previously mentioned, the shop owner wanted to increase the site's popularity. They had experimented with paid ads on Facebook and Google but saw little success. Since paid advertising didn’t yield the desired results, I shifted the focus to keyword optimization. Using a keyword search volume checker, I analyzed the most frequently searched keyword combinations—regardless of word order or punctuation. This data guided me in creating more effective and targeted content to improve the site's visibility.

Keyword Implementation

Search Keywords

Step 4: Test

 

After implementing some of the changes, I conducted a usability test. I invited the same individuals from my initial interviews while also onboarding a new participant—a first-time user who wasn’t a designer and had no prior experience with the site. To align with the target audience, I ensured this user was a pet owner. Additionally, I intentionally chose someone less tech-savvy to observe how a user with minimal digital experience navigated the site. This allowed me to gather valuable feedback and explore the potential for reaching a broader audience. Overall, the user testing yielded positive feedback, but some of the same issues remained since only a portion of the design updates had been implemented.

  • “I like how the images are nice and large, very easy for me to see the product without having to click into it.”

  • “I’m not sure if the ‘Help Us, Help Others’ section in About Us quite fits there.”

  • “The sizing of the content is better. It’s not all in my face.”

  • “The addition of social proof is nice, the testimonials helps better making my decision if purchasing”

  • “The dog slideshow is cute, but seems unnecessary.”

Results & Reflection

After all the work that has been done, I think working for Jacko & Co has provided me a great experience. With it being a very small e-commerce shop with a larger customer base on Amazon meant it had few staff. It also meant there was more on the plate for me to think about and more responsibilities. It was definitely challenging learning things outside my certifications and surely there is still lots for me to learn.

Working here also showed me that even though you spend hours designing and thinking of ideas. Not every idea you get will pan out. I was able to have my own version of the website to work with and get creative but not every single design was implemented. It isn’t a negative experience for me but it comes to show that working in a business for someone can be tough because they have a vision and theme for the site and you’re there to help them work towards that vision.

The results were typically very positive. Knowing that some of the designs and ideas I had made it onto the site while it’s still growing was extremely satisfying. Getting the approval of the owner and other designers is definitely a win in my books and knowing that I contributed to the site growing even if isn’t by a drastic amount. We were able to boost the site traffic around 5% and to confirm, we observed it’s traffic and conversion rate for an entire month. Till this day, I still work with Jacko & Co, although now it is a lower commitment but the relationships and experience I built here are forever. I hope to see one day more of the designs I create make it to the official site, but as for now. It was truly a fun experience.

Next
Next

Case Study: Kidcare Net