The Relationship Between UI and CRO in Web Design


Many of us in the SEO industry think that once a website gets designed and developed our job starts. This way of working couldn’t be more wrong.

We now have to wear many hats and specialize in different fields like:

  • CRO (Conversion Rate Optimization)
  • SEO (Search Engine Optimization)
  • SEM (Search Engine Marketing)
  • SMM (Social Media Marketing)
  • SMO (Social Media Optimization)

By getting involved in the early stages of design and development, we as SEO’s can make sure nothing gets missed in terms of on-site optimization and everything is setup for off-site optimization.

For example, we have to make sure the navigation, breadcrumbs and content are optimized correctly in the wireframes before it goes to the design department.

I’ve worked in agencies where wireframes have no meaning and the only goal is to maximize on profits (no wonder they had a huge turnover when it came to clients).

Wireframe Example

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Microsoft PowerPoint Presentation Templates

What do you mean UI is related to CRO?

What do you mean UI is related to CRO?

Let’s emphasize the fact that we’re creating sites for users and our clients are paying big bucks for us to do this. Wouldn’t it make sense to have your teams synchronized? A CRO/IA (information architect) expert will wear many hats including an SEO hat, which designers should have some knowledge of.

I look and analyze each and every project with the user in mind. I really don’t care if the site looks amazing and can win awards. The end in my mind is to maximize conversion and lead generation numbers for my clients. By watching and closely monitoring each design stage, we can make sure the wireframes are put into good use.

I’ve also seen designers steer way off and go really fancy with the wireframes where the CTA (call to action) is not even easy to find.

What is a UI Designer To Do?

What is a UI Designer To Do?

Or better yet, what can everyone else do to make sure the designer does a great job with CRO/SEO in mind.

A web designer that creates great work needs to pay attention to great detail. All designers (just like SEO’s) must reeducate themselves on a little marketing when it comes to UCD (user centered design).

There are great resources out there to stay on top of your game. A simple Google search will yield expert posts on how to optimize your website for lead generation. Here are some basic things to look for or search for when designers are working:

  • How users read websites (do they scan or read everything?)
  • Based on the color palette, what colors should be used for the CTA
  • Does the value preposition get included on all landing pages
  • Are headlines presented correctly?
  • Are signup forms intuitive and easy?
  • Are all <h1>, <p>, <ul> etc… applied correctly?
  • Is the site easy to navigate in general?
  • What kind of format is used for forms etc…

Online Marketers, Its On!!!

Online Marketers, Its On!!!

As much we would like to think we’re different from the design and development team, we’re not. Where would we be without a UI designer or the code monkey down the hall?

We tend to think that online marketers take on the job later on and blame another team when something isn’t done correctly in terms of CRO/SEO implementation into the design. If you simply sit with the designer and go through the main landing pages and spend just a couple of hours trying to get the wireframes designed correctly, everyone will be happy.

I actually ran an experiment where I did wireframe an entire site including:

  • Usability Factors
  • Human Factors
  • Conversion Rate Optimization
  • Search Engine Optimization

In the experiment I worked with the best designer in our agency. The first steps I took were to explain a few pages and how I wanted everything to pan out. My next steps were to leave the designer for a few pages and see what he came up with.

You can guess what happen right? When I sat down with him and worked everything out together, the pages we were working on looked amazing and we optimized correctly. They had amazing UI (user interface design) and UX (user experience). We talked about how user centered design could be used on every element from the global navigation to the footer. It was a match made in heaven. I knew I could get great conversion with what we were creating. Plus it was actually fun to see him in action.

UI and UX Experiment

I then decided to leave the designer to do the rest of the site and see how he coped without me. All the pages he took on his own were dismal. My wireframes weren’t being applied correctly, design was lacking where it shouldn’t and even the design (where he specialized in) was in conflict with what we created earlier. I am not saying every situation will be like this, but obviously this designer needed a little education when it came to how wireframes needed to be designed.

I know spending the extra few hours might get your boss raddled but remember, who are we really working for? Is a better product worth it? I tried to convince my boss it was and even went as far as trying to convey a new way of running the web design/development team. You can imagine how that ended!

What It All Comes Down To?

In the end, it’s all about working together. When a project manager is in tune with the design and online marketing team you’re bound to get a site that works for the user. Get this process down packed before anything gets started. Meetings can take care of this. And for Gods sake, don’t put people into cubicles where they can’t work together. Open it up and have fun folks!

Editor’s Note: This article is written by Puya Turkiyan, an SEO Specialist and information architecture expert helping various companies around the lower mainland in beautiful British Columbia.
A Collection of Christmas Resources and Inspirations
Authored by: Designrshub.com

This post is published by a Designrshub.com staff or a guest contributor. If you'd like to guest post for Designrshub check out our Write for Designrshub page for details about how YOU can share your tips with our community.