New Website for a New Brand

Lotsherpa was looking for a custom wordpress theme, that could eventually be repurposed as a reskinnable theme for their syndication efforts. As a B2B company, we focused on making the site well directed in both the calls to action as well as the informational capacity.

After user, competitor, and keyword research as well as stakeholder interviews, we resolved on goals for the owners and users of the site while also nailing down the scope of functionality and content. Some requirements were: flexible and fully customizable content from the wordpress backend, a blog, and use of engaging animations.

In trying to keep the project budget low, we resolved to just use wireframes and mockups to forego the prototyping phase in favor of a more open and iterative development phase.

Mockups

Lotsherpa already had a great branding package which made styling the site and adding in the special touches all the easier. We came up with an engaging 'follow the footsteps' approach to the homepage playing with the theme of the brand.

Development

The theme was developed using the Roots Sage 9 framework, which is a modern npm laravel/blades wordpress workflow utilizing SASS, ES6 JS, and MVC routing. Some functionality developed for the theme were: inlining of svg files, full SVG integration into wordpress, an image gallery, Wordpress Customizer options for the entire theme, and Advanced Custom Fields integration for full control of the content.

The SVG integration is key as the primary stakeholder is a graphic designer and now can easily export illustrator graphics and utilize them without needing additional development. Utilizing both images and svgs in the gallery posed quite a challenge, but a wonderful result was produced as well as a very useful codesnippet or two. Utilizing both SVG and traditional images was a requirement for all of the content areas, and as such a src-set directive was created to aid the site's responsiveness.

Wordpress UI