LatticeWork is the creator of the Amber line of security and privacy focused personal cloud devices. This site is the third major iteration of the Amber website designed by Freehive, and the first built solely by the Freehive team. The objective of this iteration was to better represent the two products available and create a more intuitive overall site experience. The site makes use of animations and other visuals created for prior versions of the site, with some new content. The site was rebuilt from the ground up with WordPress, utilizing the Oxygen visual builder to expedite future refinements.
Lifestyle product imagery is an important part of telling a product's story. Beyond the practical benefit of showing a product with diverse perspectives and at scale, it fosters important emotional connections. The people and environments a product is shown with help potential customers envision themselves using it. It shows them what that experience would feel like. It highlights the benefits of a products use over just its physical appearance.
Unfortunately great lifestyle photography with diverse models and environments is expensive. Most brands end up with a limited variety of imagery, which limits the potential connection customers could have. Fortunately Freehive has a powerful solution. By pairing accessible stock photography with proficiency in 3D rendering and 2D image manipulation, Freehive is able to create diverse composite lifestyle imagery rapidly and affordably.
A before/after image demonstrating how a stock photo can become a personalized lifestyle image.
There are various ways to incorporate animation on a site. One of our favorites is to employ looping animated videos. When done tastefully these can add a premium feeling to the site without the browser specific limitations of other methods. When done tastefully, these can add energy to the site without detracting from the written word.
The goal with a looping video is to keep the repetition subtle and seamless. Often the length will be less than 10 seconds, but in some cases we may display lengthier videos, especially if we think the placement will allow us to capture attention longer. The examples show represent both approaches.
Keeping a website up-to-date in an affordable manner is an important requirement of many clients. That means enabling staff with little technical or design knowledge to make edits to that content which changes regularly, such as product promotions, pricing, blog articles, etc. It also means making changes to layout and creative content easier for Freehive staff in the long-term. To do so we utilize WordPress and a couple additional noteworthy plugins.
WordPress is a very popular content management system (CMS) which, when used properly, can provide powerful functionality in an affordable and robust manner. Since building our first WordPress site in 2011, we have refined our list of well maintained plugins that make WordPress the perfect tool. One of these plugins is Advanced Custom Fields, which provides a simple interface for any staff member to make edits to text and graphics on the site.
One reason WordPress is incredibly popular is a vast library of pre-built themes. While these have their purpose, we don't use them. For the greatest impact we shape designs to our client message, and not the other way around. However, bespoke WordPress themes can be time intensive to build and maintain by traditional methods. We do still build custom themes that way, but more often we are turning to a powerful plugin called Oxygen. Oxygen provides an interface for a skilled designer to compose custom WordPress themes, without extensive coding. This speeds the time to get a site built in the first place, and makes future changes much easier.
This project was completed using powerful Free and Open Source Software anyone can learn and use without a subscription or paid commercial license. Here is a brief showcase of how we created the composite lifestyle images for the site.
We're looking for stock photos that tell the story we want, but also have certain attributes that will allow us to convincingly place an object in the scene. The most important attribute is something in the scene we can derive the original camera's perspective from. We're looking for objects with parallel and orthogonal lines. Once we've selected the stock image, we bring it into a tool called fSpy which enables us to derive the information we need.
Once we have the data about the camera used in the image we import that information into Blender, a powerful 3D rendering application. Once we've done the work to ensure the 3D model of the product closely replicates the properties of the actual product, we need to match scale and create set objects and lights to simulate the original scene as closely as possible. Something as simple as the color of the table will show up subtly in the reflection on the device. Replicating the blur of a photograph;s depth-of-field is important as well. The product will be rendering with a transparent background. We'll render the shadow of the device itself as well.
Sometimes we can export the composite right out of Blender, but often we'll bring the original stock photo, along with the renderings of the device and shadow into the image manipulation program called GIMP. Here we can correct for colors that don't match perfectly, utilize overlay effects to help the shadow look natural to the scene, and do any minor touch-up that is necessary to sell the illusion that the product is actually in the scene.
We're happy with how this site turned about, but even more happy with the results. In one case, with the first batch of analytical data after site launch, we were able to rapidly implement changes that led to a substantial increase in checkout conversions. This was possible due to the site being built with WordPress and Oxygen.
We've also since heard reports of a surprising increase in customers landing on the site from paid campaigns to learn about their entry-level product, who are then purchasing their premium product. These are early evidence that the site isn't just beautiful, but it's working.
