Justin Cooke

September 18, 2014

Jon Myers has done a killer job in bringing our new design to life. We wanted to bring him on our blog to give his perspective on the project and give a bit of insight on what it was like working with us both virtually and face-to-face. Alright, Jon! All yours!

Redesigning a website can be painful, if not dangerous, to the health of a successful business. Getting it wrong can be costly and getting it right can better support its customers to grow a business.

Last week, Justin and Joe debuted the redesign of EmpireFlippers.com. So far (fingers crossed) the response has been phenomenal.

As the lead designer on the project, they asked me to put together a detailed post on the design process, the thinking behind our design decisions, and how the redesign will support the road ahead.

The Foundation for Transformation

I first met Justin and Joe through the Dynamite Circle, a private community of location independent entrepreneurs. I was already aware of their brand and business, so I was thrilled when they approached me to discuss the project.

Their business is in a mature stage, where a redesign could radically alter the course and have a positive impact on their growth. The perfect client for a redesign.

  • Open-minded, with no sacred cows
  • They had documented their needs and the intricacies of the business carefully, which is essential.
  • Their design brief consisted of their present and future business goals.

This thorough document formed the basis of our approach toward the design process. Details of all pages that needed to be created, their likes and dislikes, etc. With it, we were able to establish a mutual taste level for the redesign.

I’m convinced that this kind of pre-planning sets the stage for success when working with a designer.

Why?

Design isn’t simply decoration.

Design supports how you’re perceived in the marketplace, how your customers interact with your brand and products, and what your customers’ opinions are toward you and your business.

Planning for these details in the beginning helped define our mission to create a marketplace that is easy to use for both website buyers and sellers.

They had taken this mission seriously, and I was happy to help.

The Road Left Behind

Empire Flippers' Old Logo

The old Empire Flippers logo. We had to send this guy to an early retirement.

The existing EF brand and site supported the company well in the early stages. Justin and Joe’s voracious appetite for creating high-value content, on both the blog and podcast, really put them on the map as website brokers.

However, as the company matured, these existing traits became a liability when customer tastes and expectations changed along with the focus of the business. There was more of an expectation for a polished image when dealing with high-dollar transactions.

We wanted the new brand and website to be more professional, yet remain unpretentious to capture the true spirit of the Empire Flippers team.

First, some major housecleaning was in order.

So, we had a kick-off meeting to brainstorm the road ahead. Aesthetic tastes and positioning were discussed. What sites and brands did we like, who did we feel we could be inspired by? Why do we like these sites?

It’s important to discuss the specific attributes of ‘why’ or ‘why not’ by breaking them down to a list of exact attributes, and making a case that extends beyond “I think” or “I feel.”

The insights generated from this meeting helped form the basis of our strategy moving forward. Our focus honed in on deconstructing the business, brand, and customers we want to support.

We had a direction.

Going to the Drawing Board

Once our project management and communication infrastructure were in place, we went to the drawing board. We considered what logo mark, typography, and colors would best communicate who Justin and Joe are, what they do, and how they want to be perceived by our target audience.

This started with some simple sketches of logo concepts:

Empire Flippers Logo Sketches

 

Then, those sketches were turned into digital concepts:

 

Empire Flippers Logo Sketch 1

Empire Flippers Logo Sketch 2

Empire Flippers Logo Sketch 3

 

Joe hated the embroidered concept.

In the end, we settled in on the second image with the simple crown. A simple icon that conveys an important message about the business.

We then blew that idea further out, and created some tighter concepts.

 

Empire Flippers Sketches Rough

We were getting closer, but weren’t quite there yet.

We all agreed that a serif font was too stuffy for the word “Empire.” A sans serif font would instead be younger, fresher, and more approachable.

Furthermore, the points on the crown were giving Joe anxiety.

It may seem silly, but these are the types of conversations and feedback that are important at this stage. I wanted to create something that Justin and Joe would be proud of for the foreseeable future.

Here’s what we came up with:

 

Empire Flippers New Logo

 

A cleaner, simpler version from what we started with. The design could stand on its own throughout the site, and reinforce the brand.

Images of Empire

Setting the tone for the site

Stylistically, for the design of the website, one of the first things we all agreed on was the use of bold, powerful imagery.

As the age old cliche goes:

A picture is worth a thousand words

In the early days of the web, and even more recently, images played second fiddle due to the cheap screen resolutions and lousy bandwidth available to display them.

Site creators would simply get poor-quality stock imagery, throw it on a page, and call it a day.

Times have changed.

Designers are embracing these new trends and unleashing bold, minimalistic, photo-heavy designs.

We wanted the new Empire Flippers brand to capture people’s imaginations and reinforce thoughts of empire building.

So, we focused on page layouts with feature images. We tried to avoid any heavy use of lorem ipsum text and laid out the pages with the business’ message prominent in our minds.

Good design means good copy, and we designed page layouts with real messaging and images together.

By designing with real copy, it forced us to think through what was of utmost importance to the user on each page.

Kicking Off the Visual Design

We did site planning, page sketches, and some wireframing, but I prefer to work in high-fidelity mockups.

In the time it takes to wireframe, I can fully produce a high-fidelity mockup. It’s an especially preferred method for marketing sites where, sometimes, you just have to see it.

This means getting the design of page layouts into a workable form—a bonsai, which we could prune to perfection.

I like to start with the homepage, which acts as a doorway. The entrance to the site. Of course this is not true for all sites, but in general, the homepage sets the tone and steers the ship.

We probably went through 30 iterations of the homepage, constantly making little corrections on the visual design of the concept until it was in a form we were satisfied with and that accomplished what we wanted.

The design of the homepage dictated our use of typography, color, button styles, and visual photography style used throughout the rest of the site.

Color came up as a small internal debate, which is common in the design process. I have a particular philosophy about color for websites:

In web design, color must simply shoulder a job. It must occupy a psychological context within the mind of the user, sending them a visual cue to do something—a call to action. All other uses of color can distract the user from their purpose on a webpage.

Which, in most cases, is: reading content

We tested many colors, trialed many variants of specific colors, and discussed what associations our audience might form in relationship to the colors.

Our mindset regarding the new brand was that it should resemble an investment house. We looked stock brokerages, investment houses, and banks, many of which employ a conservative blue tone that communicates trust and security.

We knew we didn’t want to use a stuffy color, so after testing out a few others, we settled instead on a progressive blue that represented our calls to action.

Empire Flippers BlueThus, we settled back in on a more progressive blue that we wanted to represent our calls to action.

We worked out color and issues of composition and typography, pruned and pruned and pushed out with the design of the rest of the site.

It’s in the Cards

Showing the cards

 

Laying out the homepage of the marketplace was important. It’s the entryway into the EF services and we have to give people what they’re looking for — opportunities to invest in profitable websites.

For the layout of the marketplace, we decided on a card-based approach:

 

Marketplace Card View

 

We wanted the cards to have a visual element—an image which draws the visitor in, captures their attention, and provokes them to view the listing.

In other words: We wanted them to click.

We opted to use hollowed-out buttons as solid buttons gave the cards too much visual weight. The buttons looked too heavy, especially laid out three across.

In addition to the cards, we also have a list view for users who prefer scanning.

You can toggle between card and list view here:

 

List : Card Toggle

 

Suddenly…

 

Marketplace List View

Bringing It All Together

Working Together in Davao

We pushed on through the design of the remaining site pages. Constantly evaluating their purpose and if the layouts accomplished that purpose.

We used Slack to discuss the designs and Google Hangouts when we hit points that necessitated conversations.

Even with all that communication, some in-person time for polishing the layouts was still essential. So, I hopped on a plane from Ho Chi Minh City and flew to meet the Empire Flippers team in person.

Joe graciously hosted me at his home, and the day after I arrived, the team and I hit the ground running.

Justin, Joe, Vince, and I went through every page for about three days.

This process revealed some pages that we had not considered, identified inconsistent elements from layout to layout, and finally became our front-end development and integration.

Then came the heavy lifting.

We met with the Empire Flippers’ development team right before I left the Philippines to begin instituting a plan for coding and integration.

These are not easy layouts to bring to life and we had also planned for a lot of dynamic user interactions. There was a lot of work to do, but soon enough we had created our development plan.

After I left, the coding began.

The Empire development team went to work coding up the page layouts, and we were able to continue discussing these coded versions in Slack.

My job at this point was to provide guidance on front-end development, review all completed tasks thus far to assure they’d been correctly implemented, and provide any last-minute graphic assets.

Serving You Better

This rebranding and redesign is about you.

To make it easier for sellers to list high-quality, profitable websites. To make it easier for buyers to buy these websites. To make it smoother for visitors to learn about the information Justin and Joe have to share on their podcast and blog.

As with all designs, this is a constant work in progress as we learn more and more about what YOU want.

When working in business, you are the servant, and your job is to serve customers the best possible way.

That’s what we have hoped to accomplish with the redesign: To serve you better.

Ask Me Anything

I’m happy to hang out in the comments and answer any questions about the redesign or design in general that you may have.

Feel free to ask me anything and I’ll answer to the best of my ability.

What questions do you have and how can we improve?


Make a living buying and selling websites
Sign up now to get our best tips, strategies, and case studies
Discussion
Leave a comment
  1. Joe Magnotti says:

    Thanks Jon! I love the redesign and think you did a fantastic job. Now on to the next version? ;-)

  2. Pleasure working with you, Jon!

  3. Jon says:

    Thanks guys, was a blast.

    Joe, looking forward to V2. :)

    Cheers,

    -j

  4. I gotta say, Jon, you did a KICK ASS job on the design.

    When I saw the new design, I fell immediately in love with it and wanted to know who designed the website .. now I know ;)

    Cheers from the lava fields in Iceland,

    /Siggy

  5. Matt says:

    Good work guys, I really love the new design. I’ve been following your journey from the very beginning and it’s great to see you continue to go from strength to strength!

  6. Tung Tran says:

    Congrats guys! The design looks even better on a big screen!

    I’m curious on how the new design has helped to boost the traffic/conversion/bounce rate/time on site/ podcast downloads as well.

    Is it a good idea for a followup post?

    • Good idea, Tung! We actually expected conversions to drop slightly as we removed the sidebar, our biggest converter, and focused more on our marketplace. Fortunately some of our paid funnels like AfterOffers has been increasing in volume to make up the difference.

      Here’s a quick screenshot of GA from Sept 8 (redesign launch) through the 22nd compared to the previous period:

      http://i.imgur.com/SA9KumB.png

  7. Dudes, awesome job all-in-all with the redesign. Jon’s designer chops are unrivaled, and the site turned out awesome. Love it that so much of the design is focused on function, and not just making a ‘neat’ looking site. It definitely gets people going, and lightly encourages them to do and go where they should be. Just makes me feel good to use it!

  8. […] Don’t get me wrong, competition can be a good thing. It can motivate you to work harder and make you strive for bigger goals. It can also be a learning tool, as in business, the competition is often ahead because they found a new or improved way of doing things. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Have a site to sell?
Sell Your Site

Click here to find out how much your website is worth

Share
Tweet
Share
+1
Reddit
Email