Landing page + Shopify Store

Fairweather Fish Co
View live website
Branding
Adobe XD
High Fidelity Prototype
Shopfiy
pROJECT yEAR
2021
role
Brand Strategist, UX Designer
TEAM:

1 - UX Design / Brand Strategy: Kalee Eversole

1 - Front-end Developer: Daniel Wallace

TARGET AUDIENCE

The bulk of their target market was based locally out of Boise, Idaho, however they also had many loyal customers who reside in neighboring states like Oregon, Washington, and even some reaching as far as Texas, Colorado and Arizona.

The problem

Fairweather was looking to give their website and eCommerce experience an upgrade, as well as make their sustainable seafood box pre-ordering process easier for customers to understand so they could focus on their craft instead of fielding so many questions manually over email, phone, or DMs. For a small team of two, they needed an updated landing page they could send customers to for all information on pre-ordering and a human-centered, easy-to-use ordering system for their seafood boxes that could account for local and nationwide orders as well as give the option to pay half upfront. They were using Wix previously and wound up doing a lot of manual work to process custom orders. They wanted to switch their system into a more robust platform, so we helped them transition into Shopify to get the job done.

About my role

My role on this project was brand strategist and UX Designer. I worked with my partner Daniel Wallace who took my designs and UX requirements to develop the custom Shopify theme and pre-order system. I worked with my clients over Zoom and used a brand questionnaire to uncover their brand values, aesthetic preferences, etc. After gathering this set of information, it was take to get to work on moodboarding.

Process

I began the project first by following an onboarding flow I created to establish transparency on expectations, roles, communication preferences, etc. My partner Daniel and I had a kick off call over Zoom where we could listen to the client’s goals, preferences, and hurdles they had been up against due to their current system not serving them in a scalable, efficient way. To get even more of a granular, clear idea of their brand vision, I sent them a branding questionnaire that helped me better understand what they were looking for in their brand messaging, aesthetic and overall vibe.

Moodboarding

With these two components, I was able to get to work in Adobe XD where I created 3 moodboards. Each board was a curation of colors, typography and website elements that they resonated most with. I worked together with them to take their most loved elements of each board and put them in the context of a designed website element, thus beginning the design of the landing page itself.

Landing Page Design

I created 3 versions of a landing page design in Adobe XD along with some prototyped elements to drive home the user experience. In addition to the design I helped them craft landing page copy and calls to actions that spoke to their target audience in the context of where they were on the page, and built trust in the seafood and process through transparent, no nonsense explanation. After several iterations of final design elements, type and imagery choices, we had a landing page that felt solid! From here I finished designing the Shopify store pages (hero page with sea food boxes, product page and checkout flow; all prototyped with Adobe XD so the client could preview the experience prior to it hitting development.

Custom Shopify Development

Once the client signed off on the Adobe XD designs and prototypes, my partner Daniel began to build out a custom Shopify theme. From an internal client experience, I worked with him to note the areas of the landing page and eCommerce store that needed to be easily editable in the Shopify CMS. We both researched a plugin that would help enable the checkout to accept partial or full payments depending on customer preference. I assisted in making sure all assets, product information gathered from our client’s Dropbox was added to the respective areas in the theme. Since our client needed customers to have the option to either pick up locally or ship nationwide, I helped ensure that all shipping zones were set up in respective states accordingly and had correct shipping options selected (with seafood being easily perishable, it is paramount that the seafood reaches customers doorsteps ASAP, wherever they are in the most cost effective way. Lastly I made sure that the confirmation emails included partial payment amount, balance, and language that made it clear what was expected as soon as seafood boxes became available for pickup or shipping.

Full case study
coming soon!

End result +
lessons learned

Overall, the first two months since launch in June has been a great success for the brand new Shopify system. We did learn that in the future, we should extend our timeline by at least 3 weeks for this level of custom development. However, with this being the first Shopify project my partner Daniel or I ever dabbled with, we feel like we learned a world of knowledge right out of the bag, especially because we chose to create a custom theme from scratch as opposed to starting with a template. In just less than 4 months since the Shopify site launched, the online pre-order system has generated over 220 orders, $88k in revenue and a 4.14% overall conversion rate.

View live website
< Back to all projects

Image 1

Description

Image 1

Description

Image 1

Description

how this process led to conversion

We had to do these three things in order for this to work the way we need it to. We had to do these three things in order for this to work the way we need it to.
Read full case study

Next case study

Parachut

Earner Onboard Wireframes / Earner Portal

Dashboard for Parachut Earn partners. Earn partners who submitted their camera gear for subscription rental onto the marketplace could submit gear to circulate, check earning potential, monitor earnings, make transfers to bank and request gear back at any point.

view project
Project preview thumbnail