Overview

I began working with DiJiFi in late 2013, and to this day it has been one of my favorite projects. I was given ultimate freedom to exercise my design and development knowledge, and the budget was such that no shortcuts had to be taken.

At DiJiFi, we wanted a total site redesign while maintaining the complex order system that already existed within the site. From our first interaction, Lara has been one of the most professional and creative people I've had the pleasure to work with, and she adapted perfectly to our needs. Our site is not only beautiful, fast, and future-proof, but easy for anyone in our company to edit through a customized WordPress system. On top of that, 6 months after the new site launched we are so busy that we have cut our advertising spending in half for the last three months, while continuing to grow.
Jesse Crowder, Founder at DiJiFi
Post thumbnail
DiJiFi's website responds wonderfully to devices of all sizes.

Research, Design, and Wireframing

User interviews, feedback, and style tiles resulted in an informed re-branding.

I wanted to approach DiJiFi’s redesign the “right” way, that is, rather than creating a pretty layout in Illustrator, or jumping straight into code and desiging as I develop (usually my method), I wanted to begin with research and go through an iterative process to hone down a design we know customers will enjoy.

User Interviews

Before beginning any design or development, Jesse and I first determined five or six categories for DiJiFi’s customers, and he provided contact information customers fitting these categories. I interviewed each customer over the phone or via Skype to test certain assumptions Jesse and I had made about their expectations from Dijifi. I kept in touch with these customers throughout the design and development process, getting their feedback at every critical step.

Dynamic Style Tiles

Using this information, I designed and coded three style tiles. Using a little bit of PHP, a URL query, and the powers of Sass, I created a theme-like infrastructure for displaying the different style tile options over a single set of markup.

The templates contained logic for the URL query that determined the adjectives to show at the bottom of the page, as well as a body class to determine the set of styles to use for each theme.

Using a query string to identify the theme being used.
PHP renders the body class based on the query string, and CSS styles are applied accordingly.
Additional functionality is added within the PHP templates to vary characteristics per theme.

You’ll notice that these designs aren’t all that different from each other, as well as the fact there is a “Version 2” indicator in the top right. Version 1’s designs were more different from each other, but after applying feedback from both Jesse and the customers I interviewed, the designs began to morph into a single winner, “PressPlay”:

See a live version of the style tiles here:

The source code for these interactive style tiles is on Github here.

Content Reference HTML Wireframes

Using Angular for quick prototyping (and for the sake of learning it), I created a set of “content reference wireframes” in HTML. These wireframes not only served to inform the structure of the WordPress database, but also helped Jesse know what content he needed to collect in terms of both images and text. Content for the wireframes was stored in JSON files and was easy to map to Advanced Custom Fields when the time came to move to WordPress.

HTML wireframes built with Angular and using JSON for data storage.

With the help of the customers who volunteered their time, I tested the information architecture of the wireframes, making sure everyone knew where to find information on what.

Launch “Dijifi Wireframes”

The source code for the Angular wireframe structure is on Github here.

Development

A highly custom content management experience along with re-skinning an old ordering system.

In addition to the WordPress website, DiJiFi had a custom ordering system that needed reskinning in line with its new brand.

Built with a ton of custom PHP and JavaScript on a very old WordPress instance, it was not feasible to recreate the ordering system or to integrate it into the new WordPress installation. My solution was to refactor the front-end code where possible and to link the stylesheet from the main WordPress install to ensure a consistent look and feel.

jQuery Order Helper

One challenge in DiJiFi’s ordering system for customers is the nomenclature used when referring to different service levels. Using jQuery, I created a “Service Recommendation Tool” that recommended a service package based on a customer’s answers to a few baseline questions.

DiJiFi’s Service Recommendation Tool.

Timber and Advanced Custom Fields

DiJiFi was one of the very first WordPress projects I built using Timber, a WordPress plugin that enables the Twig templating engine for development. Along with our extensive design and content planning, these two tools made developing the site a pleasure.

See this video for a look at Services custom post type on the front-end and back-end of DiJiFi:

Launch & Maintenance

A successful launch followed by sale of the business not long after.

The launch of DiJiFi’s website went quite smoothly, and it has been online and healthy since late 2014. About a year after the launch, Jesse sold DiJiFi and the business has since taken a different direction. Some of the brand choices we made and conclusions we came to are not in line with the new owner of the business, thus the content on the site currently does not 100% fit the architecture we initially created.

Unfortunately, this is often the case with client work; something out of a developer’s control changes and they are no longer able to keep a site healthy and operating as intended.

That being said, the site I created for DiJiFi is still in use, so feel free to browse the site here.