Six Steps to a Successful Website Design Project

You’ve been awarded a custom website design project.

Fantastic!

Now what?

You could follow your old process. You know, the one with lots of trial and error mixed with some hoping and praying. Or, you could listen to Red8 Interactive. We know a thing or six about custom website design projects. It’s what we’ve been doing for almost ten years.

A Successful Custom Website Design Project Starts with Planning

We provide a lot of the detail about planning website design projects in Website Discovery. At a high level, a clear understanding of the website’s functional requirements and architecture, and the resulting technical requirements goes a long way to helping website design projects be successful. Basically, if you know where you are going, you are more likely to get there.

After you define the functional requirement, what you want the website to do, you should define the technical requirements, how the website will deliver the functional requirements.

Don’t Design in a Vacuum

All the planning in the world is pointless without great design. But utility is what makes one design great and another, not so much. An effective website works hard for its users and for the business.

For the business, understand the needs of all stakeholders. What does Marketing need the site to do? Sales? Human Resources? There are lots of constituents who take value from the site. Understand what they need. This list will be your functional requirements.

The connection between functional and technical requirements is an often overlooked link. There are many thousands of plugins available via the WordPress ecosystem. Most of the plugins are free but even the premium plugins are inexpensive when you consider the cost of building the functionality from scratch. The technical specifications doc will make the connection between functional and technical requirements and where it’s appropriate, it will list the plugins that will be used to deliver the needed functionality.

Understanding how a plugin’s screens flow tells the design team what they need to design. Review the demos on the plugin’s website or ask the dev team to put the plugin on a demo site so that you can see how it behaves. Designing in a vacuum means the dev team will have to either bend the plugin, which is risky and inefficient, or they will need to build a custom solution. Did I mention how inexpensive it is to use a pre-built solution?

But most important, understand what users are looking for and make it easy for them to find. Keep the Five-Second Rule in mind. Tell them that they are in the right place, give them a benefit-oriented reason to stay, and make it clear what they should do next.

Keep it simple. Simple equals useful.

Consider the User Experience

Great website design delivers functionality with great UX. Don’t make me think. Utility and pretty need to be in balance. Great website design is customer-centric, it keeps the website’s objective in mind and it creates value for users. Remind yourself that website users are there for a reason. They are looking for answers. For users, the utility is more important than the design. Then again, great design is easy to use so…

Design using the five-second rule. Make it crystal clear that users are in the right place, that there’s a good reason for them to stay, and that it’s obvious what they should do next.

Don’t get in the way of their objective. Design the website to be easy to navigate. Keep the Home Page and navigation landing pages simple. Consistency is key to an effective website. Craft them understanding where users are in the information funnel. If content doesn’t support the website’s objectives, remove it. The deeper they get into the site the more information they are looking for and will accept. This is why sliders on the home page aren’t a good idea. And why they can be a good idea on secondary pages. On the Home Page, sliders can be a distraction. On a secondary page, a page that’s deeper in the site, they can be an effective way to deliver more information.

Consider eye tracking. Most users will scan from the upper left corner to the lower right corner. Don’t place a call to action in the lower-left corner of the viewport. Higher on the page, the image should go on the left and copy on the right. As users engage and scroll through the page they are more willing to scan back and forth, but content above the fold should be laid out with the CTA in the lower right corner.

Mobile First

Design from the outside in. Design from the user’s perspective, not the client’s perspective. This means that an effective website design should consider the mobile experience first. This is how more and more people will be accessing the website. Then build out the design for desktop users.

Consider ergonomics. Design buttons and links so that there is air around them. Place action buttons where will the user can use them easily, with one hand.

The mobile navigation doesn’t have to be the same as the desktop navigation. For example, if the primary objective is conversion you could consider placing the phone number as a call-to link at the top of the mobile navigation. This isn’t going to be as useful in desktop navigation.

Design All the Pieces

Home pages are awesome, So are product pages and navigation landing pages. We all want to spend our time on what people see but the secondary, more admin pages are also important. But consider all the required pages.

If a user has a bad link and gets a 404 page, well that’s annoying, so don’t compound the pain by presenting a poorly designed page.

Or an engaged user is searching for something that they know is available on the website. Give them a well-designed search results page, not a hodgepodge or worse a generic template that hasn’t been designed at all.

The Contact Us page is another opportunity to engage users and reinforce the brand’s image. There are there because they want to connect. Give them a friendly place to do this and make it easy, give them all the options. Ask Kori has an excellent video on Contact Us pages. She shows a bunch of examples and explains why each is a good solution: 10 Examples of Successful Contact Page Layouts.

If functionality is being delivered with a plugin, understand the flow and provide design direction. Most professional plugins have a degree of flexibility over how data is presented but in the absence of design direction, users will get the default screens. Don’t miss this opportunity.

Don’t forget the footer. It’s not sexy but users often go there to find what they are looking for. It won’t be a large percentage, but it likely that they are more engaged, and therefore more valuable, than most users.

Design the Backend

Clients spend most of their time in the WordPress dashboard. This is a design opportunity. For example, use the login screen as a chance to remind your clients who designed their wonderful website. Consider the dashboard UI. Use tooltips and clear labels for custom functionality. It doesn’t take much, WordPress’ dashboard is pretty good out of the box, so a little effort goes a long way. Our custom website development projects are frequently complimented for their finely crafted backends. Make the website easy to use and your clients will appreciate it.

Successful Custom Website Design – Conclusion

A successful custom website design project starts with a plan. Consider all the constituents’ needs, customers and users inside of the business. Focus UX on making it easy for users to find and appreciate the information they seek. The Five-Second Rule rocks! More than 50% of website visitors will get there using a mobile device. Design for this. Don’t forget the utilitarian pages. They need design love too. And finally, apply some design time to the backend. A thought-through dashboard UI will be valued by your most valuable asset, your clients. For a more detailed look at this, consider our series on successful custom website development – the Oreo Cookie Strategy.