A couple weeks after the 2015 New Year was rung in, I received a web design inquiry via email from a Facebook friend. We had attended the same university and even run on the same cross country team together, although it had been some time since we’d caught up. Thanks to my Facebook marketing efforts, she had been exposed to some of my web design and photography work, which led to our recent collaboration. The success of this project reminds me of the basic fundamental lesson of networking: never neglect your personal network, especially the one on Facebook. You never know who might be checking your profile out and what kinds of opportunities may present themselves.
Objectives
- Convert website to responsive web design
- Keep existing e-commerce solution intact
- Photograph the whole product line
- Keep the website simple but informative
Skills and Tools Used
- Product Photography (Canon DSLR and Studio Flash)
- Web Design (WordPress, WooCommerce)
- Project Management (Trello App)
About the Company
zBeest, a registered trademark of Wildebeest, Inc., is a small company based in California that produces insoles for shoes. Affordable and biodegradable, the insoles allow for individuals to wear shoes without socks as part of the “sock-free” lifestyle. The company originally debuted in November 2014 when it successfully raised over $4,500 on Kickstarter to produce these unique insoles. A few months after the funding achievement, they brought me on board to help them create a new e-commerce website before they went public with their products. [/tw-column] [tw-column width=”one-half” position=”last”]
[/tw-column] [tw-column width=”one-half” position=”last”]
Key Element: Responsive Menu
The biggest goal we had for the website design was that it be responsive, or look good and function on any mobile device. It took some experimenting to find the right resolution and ensure that the images and blocks of content scaled properly on different devices, but the biggest challenge came in the form of the responsive menu. Most of the web designs we were considering were fantastic in all elements except for their mobile menus, which tend to take a drop-down form in mobile devices. At last, we found a design solution that nicely placed mobile menus on the left side of the device in a format similar to Gmail or Microsoft Outlook.
[/tw-column] [tw-column width=”one-half”]Key Element: Call-to-Action Buttons
Another area of importance was on the first, main section of the homepage. Since the website and business have the ultimate intention of getting web visitors to buy the product, the Shopping page was where we wanted to focus attention. Two buttons encouraging visitors to Shop Now or Shop All were placed first in the right hand side of the header, as well as in the middle of the header image.[/tw-column] [tw-column width=”one-half” position=”last”]
Key Element: E-Commerce Store
Speaking of the call-to-action buttons leading to the Shopping page, let’s talk about that e-commerce store! Since the website was built on WordPress, we decided to stick with WooCommerce, one of the most trusted and highly developed commerce plugins. In this case, the WooCommerce store had been set up by an outside web development firm, so my only role was to ensure that my responsive design fit into the shopping cart that they had built.
[/tw-column] [tw-column width=”one-half”]Key Element: Product Photography
Since zBeest products are relatively new, they were in need of professional digital photography for use not only on their own e-commerce website, but for possible use on other commerce platforms such as Amazon. I conducted product photography of the zBeest insoles in my photography studio against a white background using Canon DSLRs and Speedlite flashes.
[/tw-column] [tw-column width=”one-half” position=”last”]
The Result
zBeest was an ideal client to work with. They provided lots of specific details and direction while also allowing my own design skills and creativity to shine through. All communications were smooth and speedy and I received all necessary information and data on time to complete the project within the projected timeline.
[tw-button size=”medium” background=”” color=”green” target=”self” link=”http://www.zbeest.com”]View Completed Site[/tw-button]
[tw-button size=”medium” background=”” color=”orange” target=”self” link=”http://www.intrepiddesigner.com/portfolio/zbeest-sockless-insoles/”]See Portfolio Site[/tw-button]
