Case Study - FoldaBox

Foldabox came to us in September 2015 with a request for assistance in redesigning their online stores. The initial brief was one of the most comprehensive we've received and from the get-go, we had a clear picture of what the owner, Nicole's high level objectives were.

Foldabox

They were certainly not new to Shopify when reaching out to us with two versions of their stores already having served their roles. The first of which being built around 2009 and both having become dated and ultimately reaching their expiry date.

So we were in for a third generation build of the FoldaBox brand's UK and USA stores and Nicole had done her homework. She'd investigated the option of using a "theme" for her store since the previous two projects had been custom made front-ends. Being Out of the Sandbox themes specialists and the fact that 'Responsive' was the theme she had her eye on, we were suggested to her as a potential design & development partner.

One of the primary reasons for the redesign -as is often the case with existing stores- was the lack of mobile responsiveness. An absolute necessity in online trading nowadays.

The approach we agreed on was to break the project into logical 'phases' that allowed us focus on the objectives of each phase and execute them to the best of everybody's abilities. This allowed us to split the project into a number of mini-projects, each with a clear conclusion and or deliverable on completion. This turned out to be a very good decision and a very effective method of running the project as a whole.

At a high level, the phases were broken down as follows:

  1. Discovery
  2. Design
  3. Development
  4. Customizations
  5. Deployment
  6. Enhancements

Phase 1. - Discovery

To start things off, it made sense to firstly critically analyse the requirements. As detailed as they were, it was important that based on our industry experience, we engaged in really unpacking what needs to be done, what should be done and what would be nice to do.

Once we were more familiar with the brand, the clientele, the products and the specific ways in which they need to be sold we were able to advise an approach that would meet their objectives.

It was decided that a 'customized theme' approach was viable for them although the choice of theme would be an important factor. For this reason we trialed the full catalogue of Out of the Sandbox themes and ultimately decided that Parallax was the best option for their business.

Phase 2. - Design

Having conducted the necessary research in the discovery phase, we had a clearer idea of what needed to be done visually on the store. Using the chosen theme as a base, we set out to design the store with enough visual differentiation to have the store stand apart while still retaining the strong points of the theme.

We worked in conjunction with the client's brand designer who produced a brilliant brand identity including a new logo, typefaces and colouring.

The process included a fair deal of Photoshop time but ultimately there were minimal revision rounds and we got through this phase fairly quickly.

Phase 3. - Development

With a development environment set up, a completed design approved and all the required resources to import into the developmen store to simulate the live environment, we could then tuck into the theme development.

As with most aspects of this project, the development went very smoothly. Our brilliant team of developers meticulously coded the customized theme design into the development store environment and we collaboratively tested as we went with the client.

This stage culminated in what was essentially a completed and tested theme ready for deployment, but there was still one phase remaining.

Phase 4. - Customizations

Once the theme had been coded, we were ready to begin implementation of the customizations to the normal function of the store that were already existing in the previous version of the store.

There were a number of clever bits of functionality in the previous build that did things like automatically presented a 'Buy a Sample' link on the product page if a product with the same handle and the suffix -sample existed.

There were also some trickier bits where the transplanting of the existing customizations needed to be re-written to work in the new theme. 

This was a fairly incremental phase with a number of realizations along the way about how the previous customizations worked and whether they were usable or not.

Of course testing was a heavy aspect of this phase and almost every customization had some implication on the working of the site. Ultimately the transition of the functionality went quite smoothly and without any major headaches.

Phase 5. - Deployment

Phase 5.1.

Launching a redesigned Shopify store can be a somewhat daunting task. It's usually an existing store that is likely receiving a good number of orders per day. Launching at the wrong time loses the merchant sales during the deployment and any major mistakes can cause a drop (or even flatline) sales for the period until which it's fixed.

We therefore made a data based decision based on the store's analytics and chose to launch the store very early morning on a day that normally has the lowest number of sales.

A good deal of pre-planning was paramount for the deployment. Every aspect of the deployment was listed in a comprehensive set of Trello cards that allowed us to tick items off as they're done. This allowed us to execute the actual deployment task in a surprisingly short period of time (under 2hrs) and thanks to our pre-tests, almost everything went as planned and they were back up and selling sooner than we actually expected.

Phase 5.2.

Content here.

 

Phase 6 - Enhancements

After the site went live, there was an immediate positive response from FoldaBox's clients and some of the pain points mentioned in the brief were very effectively addressed by the new theme. The number of 'how do we do x' phonecalls slowed down almost to a halt and there were only some minor issues that we managed to resolve before they were even seen by clients.

Being in a much better position now with a fresh looking storefront and with a list of 'nice to have' enhancements to the site, we cherry picked the ones that would have the most positive impact (ROI) and set out to scope them out and ultimately build them.

One of the more notable enhancements was the hover-cart that we designed and developed that allows visitors to view and manage their cart from any page on the site. We also completely overhauled the footer of the theme which was actually done prior to deployment but it was part of a list of things and was regarded important enough to do before launch.

Summary