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.
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.
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.
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.
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.
The source code for the Angular wireframe structure is on Github here.
In addition to the WordPress website, DiJiFi had a custom ordering system that needed reskinning in line with its new brand.
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 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:
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.