Flexrake® - Custom Shopify Site

Flexrake® - Custom Shopify Site

Project Overview:

  • Project Management
  • UX Research(Analytics Report, User Interviews, User Testing)
  • UI Design
  • Shopify Development
  • Magento to Shopify Migration

Goal

Flexrake®, a garden tool manufacturer based in Los Angeles, first approached me about adding a store locator on their extremely outdated site. After a series of discovery sessions, we collectively decided that extensive overhaul of their site would benefit them much more in the long run.

The Challenges

Flexrake is a family owned manufacturing company, and isn’t traditionally tech-friendly. This meant that I had to take lead of the project and work with Their national head of sales as my main point of contact to determine how could best help the company increase it’s sales without substantially increasing marketing cost.

Role

I worked with my main point of contact at flexrake to manage the project in addition to the UI/UX design, photography, shopify development, email marketing setup, and Facebook retargeting. In order to have a successful project that was on time and in budget, I had to set the correct expectations upfront, and schedule everything accordingly.

Process

As with most of the projects I work on, the first part of the project was intense Discovery. We didn’t even kickoff the project until after 4 initial discovery calls, and I continued asking the client questions throughout the project to ensure I know as much about their business and the project aligns with their long-term business goals.

Analytics Report

After our initial discovery calls, I kicked off the project by analyzing their Google Analytics metrics to see exactly how Flexrake’s customers were using the current site.

Here’s what we found out about Flexrake’s Customers:

  • Baby Boomers
  • Used iPhones
  • Spent a significant amount of time on the site
  • They went straight for the rakes.

I then used this information to start sketching out some ideas for wireframes, then used the wireframes to create iterations of high-fidelity mockups. Next, I used this mockup to develop a responsive Shopify theme.

Ecommerce UI Design

After doing a report on Flexrake’s existing website analytics, I found out that the majority of their visitors were baby boomers. This meant I had to pay extra attention to accessibility. Accessibility isn’t just making sure that the website will work correctly on a screen reader.

I had to make sure the important action items on the site were easy to see. At the same time, just because the site was mainly for older people, it didn’t mean it had to be boring. I utilized a healthy dose of white space and chose green colors to convey a healthy, natural, tone.

Product Photography

In addition to the design and development, I photographed over 50 new inventory items for their catalog and website in a studio environment. During the shoot, I also got an opportunity to shoot some hero shots that could be used on the front page of the site.

Shopify Development and Migration

I used the Shopify’s new Slate theme scaffolding tool to develop a custom theme based on the UI mockups I had created earlier. Liquid is a really intuitive language to code in, and I had almost no hiccups in developing the theme.

The bigger challenge, however was effectively migrating the products from the old site running on an outdated version of Magento to the new Shopify backend. Shopify’s CSV import is very particular, so I had to do some Excel magic and get a working CSV going.

Magento to Shopify Migration

Migrating 200+ SKUs from Magento to Shopify one product at a time would’ve been a tedious task. That’s where my excel skills came in handy. I exported the magento products to a csv file, then converted into a (link: https://help.shopify.com/manual/products/import-export#csv-files name: Shopify-friendly popup: yes)

Outcome

The end result was a fully responsive website that was designed from the ground up to help Flexrake® increase its revenue all while making its day-to-day sales operations much easier.

Next Steps

While I worked with my client to create an entire site, the works not over. I’m still planning on measuring effectiveness by user testing and Analytics reporting to make sure that I can see how the customers are using the new and improved site.

What did I learn?

The internet isn’t just for milennials. Its for people of all ages and backgrounds who have different hobbies other than drinking craft beers and small batch cold brews. I really learned about practicing empathy in my work and really putting myself in the customers’ shoes as much as I could and designing for what they need, not just what would look good on my portfolio.

Check out the live site here.

Looking for a Front-end Developer to create something rad like this?
Let’s Talk.

Get in Touch