CMF Redesign

Year
2015
Client
CM&F
Project Type
Waterfall
CM&F is not such a big name compared to some of the other clients I worked with at Tigerspike, but they still had some complex challenges to solve. As a family business, they have a trusted client base and positive reputation, but pretty old school systems. A lot of phone calls, paper forms, and yes, even faxes.
My Role
I was the lead designer and primary client contact. I directed two junior designers and led the handoff to development.

Discover

They knew that their current website wasn't working. They received a lot of phone calls from people looking for information that was already on the site, but hard to find. They also had trouble keeping it up to date, because only part of it was behind a Content Management System, and an outdated one at that.

They had only limited analytics, but we knew that a solid percentage of people accessed their site on mobile devices, which the site was not optimized for at all. They also needed to a CMS that would allow them to keep their information up to date, expand different parts of their business grew, and funnel clients through the right portals.

Technical
The decision to make the site responsive was an easy one, but our technical lead also had the challenge of choosing and setting up the CMS that would fit their needs best. Based on their current tech stack, our own skillset, the client's budget, and a comparison of well-supported systems, we ended up choosing Umbraco.

User
From interviews and workshops we knew of two major user groups: Brokers and Group Buyers, though we also needed to cater to invidual buyers. A small but also important user was the actual staff as well, who would also use this site to find forms for clients, and direct them to the relevant URLs for documents and information.

Define

Like many small to medium family based businesses, branding doesn't take up much of their budget or consciousness. Instead they are focused on servicing their clients. This wasn't the right time for us or them to undertake a complete branding exercise, but that doesn't mean we couldn't deliver a contemporary looking website that met their user needs.

We created an initial site-map based on our understanding of CM&F's needs as well as the user's. While this would change throughout the design process, it gave some solid ground to start designing the experience.

We also produced a few style tiles for them that would give them the freedom to help choose the visual direction or their site. I had my own thoughts on which direction might work best for them, but wanted to make sure the decision was there's. When they chose, we had a very basic visual foundation in which to build the components of the final product.

Create

Design
Starting with the sitemap as a baseline, we began working in two streams: translating the sitemap and user flows into some very low fidelity pages, and identifying the key components that would be needed throughout the site.

This was the first time that our team officially started and finished a project using Sketch, which was really exciting. Having both UX and UI using the same tools was a game-changing experience, and was a big improvement to our workflow. We ended up with some pretty messy files throughout the project, but by the end had a clearer idea of how things could be structured. I even created a base Sketch template to be used across other Responsive Web Design projects in the future, which you can see here.

We slowly built up the fidelity of the designs, using inVision prototypes to present to the client twice a week. We hit a few slightly larger than expected bumps along the way, which is to be expected. As the client sees the product come to life, it is natural that they start to realize its potential and begin looking forward to future business plans that had not yet been discussed. It became clear to us that the site could not be as focused as we initially thought. While healthcare related products made up the core of their business, they were looking to expand their other lines much sooner than we had originally thought.

This pivot didn't throw off the whole design system or flow, but definitely changed the home page and imagery being used. We now had to get rid of the medical visuals, and keep things a bit more conceptual. In the end we stuck a bright simple sky, a few feathery clouds floating above. It kept in line with some of the brand colors, and provided a warm, if unspecific feeling.

Document
In the past few years I have become obstinate about designing systems, not pages or sites. So rather than designing all the pages and then speccing them out, we simultaneously designed components and pages, and updated the library as we went. While this can be onerous at times during the middle of the design process, it keeps us disciplined, and makes the final task of delivering documented designs much easier.

We had even more ambitious plans to create an online living style guide, but unfortunately this relatively quick and budget conscious project did not allow us the time or resources. You can see the skeleton of the idea though, which we would love to update if we continue working together.

View Pattern Library

Evaluate

The site recently went live, and the client is very happy. The team received a customer satisfaction score of 100%, and analytics are showing positive results. We have a backlog of features and enhancements that we hope to tackle in a future engagement, but the project finished on a positive note, with everyone involved quite happy.

Visit Site