The Brief

Introduction

Malagana Design is an industrial design studio based in Bogota. Their flagship product is a beautiful, cantilevered bookshelf that comes in several sizes and materials. We were hired to help them rethink their branding, and then redesign their site based on the new brand. Every project brings unique considerations along with it, but we were primarily concerned with these issues that needed to be solved:

• The branding needed to reflect the price point and the buyer profile more accurately. The shelves were high quality, high-end modern furniture. Malagana’s target market was primarily young but established professionals, aged 26-45. They are well aware of modern design trends.
• The site needed to handle international online orders. The previous Malagana site was static and didn’t provide a way to buy other than via email. The interesting part was that they were actually getting orders that way, so we knew that a well-done e-commerce component would increase sales dramatically.
• The site needed to be fully responsive. We studied traffic from the previous six months and saw a steady but rapid increase in mobile users on the site (as of right now it’s up to a 50/50 split between mobile and desktop).

For Reference

Here’s what the original site looked like. It was created using site building software–completely static, actually broken on mobile, and very dated looking.

The Rebrand

Research

During the kickoff, we discussed where we thought the brand needed to go. Sometimes it’s easiest to identify another industry that has a similar clientele in order to communicate how a brand should be perceived. We started talking about NYC and San Francisco coffee shops as inspiration for the mark. As soon as we started talking about it this way, it became clear that we wanted to focus on a wordmark that could stand on its own, with any additional mark being supplementary.

Here are some examples of the references we pulled:

• 

• 

• 

• 

• 

• 

• 

• 

Designing the Logo and Palette

Based on the conversations we had with the client around the reference materials, we created Style Tiles to help Malagana visualize their options. After a review session with the client, we had a really strong picture of where we wanted to go, and were fully confident that the client had the exact same expectation.

From 30 initial possible typefaces, we settled on one that we all agreed conveyed Malagana’s message most accurately. In this example, you can see how closely related the versions we were looking at were; we were at the point where we knew what needed to be said visually, and just needed to find the typeface that said it most articulately.

Here’s a workup with the typeface that we ended up selecting. We create these once we’ve narrowed down to two or three options, so that we can get a better feel for how things will feel in context. You can also see versions of the “M” logo that ended up making it’s way into the final branding.

The final branding that we took with us into the website redesign looked like this: very clean, very modern, and clearly establishing Malagana as a high-end brand.

The Website Redesign

Site Specifics

The site had some well-defined requirements going in. For starters, they wanted the site to be primarily a marketing vehicle for the company, and the e-commerce aspects would need to be secondary in the hierarchy of importance. They also needed the site built on a CMS that would allow them to both alter the site content and products as needed, as well as track orders. Lastly, everyone agreed on the need for the site to be fully responsive so they could better reach their increasing number of mobile users.

Based on their needs, we recommended building the site using Shopify. Though it’s primarily an e-commerce platform, Shopify has several built-in tools for managing content that made it attractive. It also handles international orders in a way that made sense (most of our other options did not). With that agreed upon, we set out to design and build a custom, responsive Shopify theme.

Carrying It Over

The nice part about coming out of the rebrand phase is that we’ve already taken several of the steps that we normally would when designing a site. We had done our research, we knew who we were trying to reach, and we were well-aware of the shortcomings of the old site. We had also done Style Tiles in the branding phase, so everyone was on the same page there. We dove into the information architecture and wireframing.

Early wireframe:

When we present wireframes to a client, we typically start with a very representative page—usually the Homepage. In InVision, we showed three options for the homepage and showcased some of the more interesting animation options.

My belief is that in the same way that whitespace can convey quality, subtle animations and interactions can accomplish a similar effect. There are sites that use an animation as the crux of the entire site (parallax scrolling, for example), and then there are sites that use small, well-placed animations throughout to help the user to navigate or to give context. These were the types of interactions we were after with Malagana. InVision gave us the ability to convey the importance of these early on, because we could show them happening without having to write any code.

For instance, on Malagana we animated an unexpected little flourish on the logo when you hover it. We want users to associate the fact that if we sweat the details on the site, then Malagana is surely sweating the details on their furniture. For a company whose primary product is a “floating” cantilevered bookshelf, we were very intentional about those sorts of things.

A Note on Process

After getting an approval on the initial homepage wireframe, we wireframe the remainder of the site. We then do a round of user testing, and get a final thumbs up from the client. At this point, I like to run design and development concurrently. It speeds things up dramatically, avoids the dreaded waterfall workflow, and lets designers see their ideas in motion while still in the same project headspace. Developers build based on the wireframes and then adjust CSS when the final designs are ready. Usually wireframes and a finished homepage is enough to get 90% of the CSS in place.

Into Design

After a round of user testing, we felt confident moving into applying styles to our wireframes. Again, our style tiles had roughed in most of the unknowns, so at this point we’re really just pinning down final details. Here are some of the iterations we worked through:

After getting a styled homepage approved in InVision, we carry out the approved style to the remaining wireframes. Development is happening at the same time, so we schedule work through this stage very tightly, with the designer often just a step ahead of the developer. It sounds high stress, but it actually works much better when the designer is still involved in the project when a developer inevitably has questions about how something should work.

To that end, we also take time at this stage to do short videos or gifs for any animation or interaction that we think might be confusing for a developer. We’ve found it really cuts down on miscommunication, which used to happen too often (in my opinion).

Addressing Tablets and Mobile

I’ve found that with the rise of CSS frameworks, it’s becoming less and less necessary to mock up mobile versions of a responsive site. If the site is primarily geared for a mobile audience then that’s something different, but in most cases there’s enough predictability built into the framework that both the designer and developer have a reasonable expectation of how something should behave across different device sizes.

For Malagana, we built out the site and tested thoroughly on the desktop, and then addressed smaller sizes. We always do mockups for how the menu will function on mobile, but the rest is better to handle case by case. We have several devices for testing, and we address problem areas on the site with specific media queries as needed. There’s always a little bit of cleanup, but it’s a significantly shorter path to completion than if we had mocked up mobile versions. A round of desktop QA and a round of mobile QA will get us there with few problems.

Release, and After

When a site is released, we do two things: send over documentation and set up analytics.

Because Malagana’s site was a custom Shopify theme, we needed to create a guide for the client that:

• explains how to use Shopify to manage their site and products
• explains all of the custom back-end work we created for them, so they’ll have a reference if what they’re seeing doesn’t match Shopify’s documentation.

In addition to the guide, we also train them via Skype so that they feel absolutely confident about managing their site.

Regarding analytics, we set up Google Analytics unless the client has a strong preference for something else. Analytics are particularly important to us, since we gauge our success on them. We scheduled follow-up meetings for one month and 3 months after release, to review the analytics together.

With Malagana, we saw improvements almost straight away. Site traffic increased 5x, but the site was picked up by several “site of the day” type design sites, so lots of referral traffic was coming from those initially. By the 3-month check-in, their bounce rate had gone from 70 to 43. But the most satisfying indicator of all was sales volume. As of May, they were making more online sales per month than their site had made the entire year before we released the redesign. And e-commerce wasn’t even the primary function of the site.

Final Thoughts

I always think the best sign of a job done well is being re-hired by the client. Since we released the initial redesign, we’ve been contracted twice more for Malagana–once to add language translation to the site, and again to help plan and design an email marketing campaign.