My Farrier Supply Design Process
As you might have read, we here at RoleModel are working to help farriers with the day-to-day process of ordering supplies. (Farriers are the people who trim and shoe horses' hooves – don't worry, I'd forgotten that too.) We're creating a site, of course, but then we're taking that site responsive for mobile devices, as well as building a native iPhone app – so design has been quite a challenge.
When I came on board with the project, we were ramping up development again after putting it on hold for quite some time. The bare bones of the site were in place, with a basic template and some custom icon work, but the project scope had changed significantly since its inception – it was time to step back and rethink. Because Farriers tend to be a group in which computer literacy varies widely, we needed to make sure that the ordering process was extremely simple and easy to follow. We also needed to develop a visual language that would build out naturally and consistently across multiple platforms as many of our users would be switching between building their orders on a desktop and on a mobile device.
The first decision we made was which of the design metaphors from the then-current template to retain. The site featured a beautiful, dark wood background, on top of which sat a skeumorphic leather pad containing the page elements. There was no color hierarchy to work with, but if we lightened the wood background, we realized it could become a good field on which to develop a highly typographic style with a vibrant color hierarchy.
For headers, a strong serif typeface (Huerta Tipográfica's Bitter, served via @font-face and Google's Web Font directory), would play nicely both directly on the wood as well as in content containers, and it would take color well. For content, a basic sans-serif (Bigelow & Holmes' Lucida Grande), whose letterforms represented well at small sizes.
From there, the challenge revolved around developing button and icon conventions which would extend naturally across iOS and other device standards. Simple, flat buttons did the trick, with flat black or white icons, and allowed the color scheme to pop without competing for textural attention with the wood-grained background.
If you're a farrier, you spend most of your days in the field – and if you find yourself short of supplies for a given task, being able to order those supplies quickly and painlessly can save untold amounts of time and money. It's because of that that we knew taking the myfarriersupplies.com experience to mobile devices was absolutely crucial.
Having just wrapped up the basic design of the desktop site, our first priority was to maintain a high level of consistency across platforms – users needed to be able to access myFarrierSupplies from any device and engage in a familiar experience. We would be designing a native iPhone app, as well as a responsive website for non-iOS devices, so both interfaces needed to allow for the constraints and conventions of their target device, while keeping the same brand experience, as well.
We made the decision very early on not to focus on keeping the UI layout consistent between responsive web and native iOS. Because they are intended for different devices, maintaining the same platform-specific UI conventions would confuse users and ultimately be counterproductive. That decision made, the rest was a fairly simple process of identifying which visual patterns should carry over into from one instance to another.
The iPhone app is still in development, so the images below are simple mockups, but they should serve to represent how we carried visual metaphors across platforms – shifting their function, perhaps, but keeping their visual purpose.
The native app uses standard iOS toolbar-type navigation, with a conventional table view hierarchy:
On mobile web, though, an expand/collapse menu let us use the familiar navigational structure of the main site.
It's been a great project to work on, and being able to shepherd consistent design thinking across all platforms has been especially successful. Keep that in mind on your next multi-platform project!