How to Make Stronger Website Design Choices

How to Make Stronger Website Design Choices

How-to-Make-Stronger-Website-Design-Choices

A few months ago I was approached by a client. She had previously worked with another company on her website and was unhappy with the results. When she showed me the “new” design, I could see right away why she was unhappy with it. I immediately started picking out the choices the previous designer made and tried to think of how I could make stronger and more compelling choices.

Before I go on, this is not meant to bash the work of the original designer. I use the word “stronger” instead of “better” because design is always subjective. And it’s just plain mean to point out what you think is “bad” about someone else’s design. I’m writing this case study to show how design is about choices and you always want the make the strongest one that will help you achieve your goals.

Identifying the Key Concepts

I believe good design – especially design that is used in marketing – is about communication. The client, any client, wants to communicate something to visitors. Something that will make them think, “Wow, I really do need this product/service!”

With this client in particular, here are some of the things she wanted to communicate to visitors about herself and her interior design business. These are the main concepts that I felt here imperative to bring through with the design:

  • High-end
  • Customizable
  • Amazing customer service
  • Attention to detail
  • Creative out of the box thinking

These were the key concepts I got from our first few chats and from the questionnaire I had her fill out. There were other details, like the fact that she has a background in architecture in addition to interior design. But overall, the 5 key concepts above are what got my gears turning.

When I looked back at the original design, none of the 5 key concepts were communicated.

The design didn’t feel high-end. It looked like something anyone could put together and the colors, fonts, and shapes did not have that high-end, luxury feel. It didn’t scream “customizable” because the photos that were chosen to show her work all blended together; I felt that the photos on the homepage all could have come from the same home. The client can promise impeccable customer service because the business is just her, one-on-one with her clients. But the headings and colors were cold, distant, and impersonal. The attention to detail in her business should be reflected in the design, but the details such as spacing and sizing were all over the place. And last, I could count nothing about the design as creative; it all seemed like something you would find in a template.

With these ideas being clear in my mind, I was able to find a way to piece together a new design and layout. To me, this project wasn’t just about providing a good design but directly addressing the areas in which the previous design fell short.

The Wireframe

In reexamining the layout of the site, we decided to go with fewer pages. The initial design had 12, but here we only wanted 4 and a pop-up for the contact form. Elegance comes hand in hand with simplicity. It would be a stronger choice to declutter and put the images front and center.

In the original design, the above-the-fold area left much to be desired. It was just a slider of photos without any text to greet the visitor as they arrived at the site. When I think of walking into a high-end or luxury storefront, I would expect someone to greet me and cater to my needs as soon as I arrive. Leaving the visitor to fend for themselves as they enter the site was contradictory to that idea. So we added a warm greeting that also communicated what the company actually does, along with some static imagery.

I wanted there to be a simple balance between text and imagery. I didn’t want the copy to overtake the images, but I didn’t want it to get lost either. Most people tend to skim website copy and won’t read everything word for word. The sections had to be small enough, yet compelling enough to be interesting and answer every single question someone may have.

The original design only had some Learn More buttons that were lost to the eye. It was imperative to me to have a CTA (call-to-action) at the bottom of every single page that gently but clearly ushered the visitor into taking some kind of action.

I wanted to get creative with presenting the client’s process. The original site had her processes laid out across multiple pages and in full left-to-right full-screen paragraphs, which are very hard on the eye and extremely uninviting to read. For my design, I opted for short and sweet blurbs that show just how fun and stress-free it would be to work with this company.

I also wanted to add some creativity and delight to the page with a fun functionality that would gently fade in and out with new answers to the question: What do you get with Lotus Interior Design?

The original About page was dull, just text on a page. I wanted to be more creative and elegant. I broke up the copy in a way that was consistent with the homepage. I also used 2 subheadings to break up the message so you could skim, or even not read the bio at all, and still get the bigger picture.

Overall with the wireframe, I aimed toward a more airy and elegant layout and a more creative approach to presenting the information. The other 3 points came in when it was time to design the Mockup.  (Click on these links to view my original homepage, services, about, gallery wireframes.)

The Branding

Now that I had a strong baseline for the layout, I could actually look at imagery and color and design a basic branding board.

The original design didn’t use a color scheme at all. Everything – from links to headers to backgrounds – was the same navy blue. I try to never make links and buttons the same color as anything else. The visitor needs to see clickable things and know, 100% that they are there to be clicked on. There were also no strong font choices made. It seemed that they used a large, basic, run of the mill font like Arial without thinking about how it might impact that overall feel.

I worked hard to establish a color scheme that would help direct the visitor’s attention the way I wanted to, while also providing warmth and variety. The final set of colors that were approved were a deep blue, Kate Spade green, and a pinkish pearl. These colors were meant to preserve the high-end luxury feel while also providing a tiny splash of warmth and whimsy to complement the client’s ability to provide a high-end service in a warm, one-on-one manner.

I chose the same font from her logo for the heading. It was perfect for communicating the feel I wanted and provided consistency. I chose a thin Montserrat font and even selected a classy hand-written script for any accent text.

With the branding board I put together, I was able to target and achieve the high-end feel, the attention to detail, and more creative thinking.

The Mockups

The mockups were my chance to really hone in on how I would make stronger choices than those implemented in the previous design. Take a look at the homepage mockup below to see how I implemented each idea.

  1. Varying color vs. one color throughout
  2. Shadows on images vs. flat images
  3. Full-width images vs. smaller ones
  4. Green reserved for buttons vs. white buttons
  5. Varying fonts vs. identical fonts

I was able to pay more attention to the idea of good customer service by writing and laying out the copy in a way that guides the visitor through the process and answers every one of their questions without overwhelming. Attention to detail entered the design in my careful use of negative space and making sure sections were consistent throughout. And I was able to communicate the idea of customization by showing just how versatile my client is in what she does by using as many different photos of different spaces as possible.

(View the other mockups here)

The Build

The final product is not far off from the mockups. The client did decide to go back and make the color scheme all one color, as well as a few other changes, out of personal preference. If it’s what she feels is right, that may have been the strongest choice all along. I also wasn’t able to achieve the fun little animation I wanted on the processes page, but I am still incredibly proud of what the design achieves overall.

When you look at how the site is built and how it actually functions when a visitor arrives, I believe it does still communicate my 5 key concepts.

  1. Even with the changes to the colors, the spacing and fonts still provide the high-end look and feel.
  2. Images accompanying the text, a link to the gallery on each page, and full-width images at top and bottom communicate how you would be able to achieve whatever interior design you’d want with this company.
  3. You get the feeling of amazing customer service given how smooth and easy it is to navigate the site. Even though the buttons are not a stand-out color, they are large and dark enough to be easy to see and use.
  4. There is attention to detail everywhere you look, from how the fonts are chosen to the subtle image animations.
  5. Without being too “out there”, the site uses creative ways to share information by avoiding the full-paragraph sections of text.