Creating a Rinse & Repeat Web Design Workflow

Posted By Gin McInneny on

Welcome to another episode of Silence is Golden where Simon and Gin (this week) give away invaluable tips for your business. 

Today’s main topic is web design workflow and how you can create a repeatable process that efficiently gets results. We also take a look at tools in MailChimp that can help you boost your WooCommerce store as well as a few photos from WordCamp London.

Today the internet went down, so check out how well the team does on the fly - the show must go on, and does so beautifully!

Watch the Video

Stuff That Happened

Theme Review Changes Place More Onus Onto Theme Authors

The WordPress Theme Review team has implemented changes that simplify the process and places more responsibility onto theme authors.

Simon tells us that he thinks this is a good move because it will make the review process faster and help with the backlog of themes that are awaiting approval. The authors will need to fill out checklists to validate their theme before it gets submitted, so hopefully not too many errors will slip through the cracks!

For more information have a read of this article from WP Tavern. 

Six MailChimp Tools to Build Your Brand and Sell More Stuff

Once you integrate your WooCommerce store with MailChimp you can personalise your marketing and sell more stuff. MailChimp seems to be focussing on becoming a marketing automation tool rather than just a newsletter. They released landing pages not too long ago as well. There are some great features such as gentle reminders for customers and segmenting your customers into different types of leads. Check it out!

WordCamp London 2018

WordCamp London was on last weekend with a lot of Elevators getting together for a catch-up.

If you were like us and had FOMO, make sure you check out the highlights on Twitter.

Keith knows how to get the crowd going - @keithdevon

This Pisses Me Off

People copying websites really grinds Simon’s gears! Unfortunately, it seems that it is quite a common problem - people steal graphics, text and even code. Don't do it! You don’t know the business or the model behind it and what you’re building won’t be sustainable. Inspiration is ok, but make it your own.

People get scared to put information out there because they don’t know how to protect it. There are some things that you can do though. Lucky we just published an article which explains how to do this - The WordPress Consultants Guide to Copyright for Websites. There are some great tips in here to deter people from copying your content.

Don't lose sleep over it though, because if someone really wants to plagiarise your stuff, there are always ways to do it. A lot of our members use Copyscape which is an awesome plagiarism checker.

Let’s Get Unstuck

One of our Elevators in the Facebook community asked about getting approvals and controlling revisions and unlimited feedback.

Simon's advice is to do rounds of revisions. The first round will be a single email with a list of all of the changes that the client wants to make.

Simon then sends a design to a client with a short video explaining it and then he asks for feedback. (But if there are more than a few things, it is better to arrange a meeting.)

If you are interested in using a tool to manage feedback and workflow, Simon recommends InVision. It allows the client to click straight onto the mock-up and make comments. It saves time and minimises miscommunications.

PorjectHuddle is also a similar tool, but it is a plugin that allows the client to make comments directly onto the website instead of a mockup.

Simon allows for two revisions within the design stage only. The client gets told well in advance that this is the process and if they want additional changes it will cost more and potentially impact the schedule.

The Golden Nugget

Let's talk about design workflow... why do we even need a design workflow?

According to the book of Simon, you need a repeatable process that efficiently gets results. You can use it to deliver consistently to your clients, scale your business, become profitable and grow a team.

Take what exists and map it out. What are the key steps that you work on? Put them into a document.

The following is what Simon works through with his team (tweak and adapt to suit your business)...

Know The Purpose

Why are you doing this? What is going to make this process a success?
Is it for more email sign ups? If so, how many?
Is it for more credibility? What does "more credible" need to include?

See the project planning episode of Silence is Golden for more information about planning a website and getting clear on the purpose.

Do Your Research

Understand the client's goals, brand guidelines, inspiration and the industry then design the site for the purpose of the business.

Pay close attention to project goals and what will make this project a success. Keep your resources organised.

Draw The Layout

Simon starts off with a piece of paper and pen and maps out a few rough layouts which include the key elements.

Digital Wireframe

Put the elements in the right places. Simon uses Sketch as his tool of choice. Or see the previous Silence is Golden episode on prototyping using Beaver Builder here.

Add Real Content

Use the client's actual content in the design so you are working with the real text, images, logo and resources that will be used.

You need the proper content at this stage because placeholder text will affect the design if it isn’t the same length.

Design Mockup

Time to make it look good! Choose fonts, colours, and design unique elements. Design for business, not art. It must be at a standard comparable to, if not better than the competition. It must focus on achieving the business objectives.

If you’re not a designer, it’s time to hire one. You can seriously harm your business credibility if you design a site that looks like it’s from 1992.

Present to Client

Include a brief and the reasons behind design decisions, linking back to the original brief and purpose of the website. Use Invision or Dropbox. For the brief use Google docs for text or Loom for videos to talk through it and tie it back in with the goals that were in the brief.

Manage Revisions

As discussed earlier, do the revisions in rounds with a maximum of two revisions for projects. The revisions should come in a single email with clearly numbered feedback or a phone call where you create the numbered feedback with the client.

Client Approval

Get a signature – it’s important to get this before you launch the site. The tool of choice for Simon is Better Proposals to get approvals.

Handover to Developer

Give the details to the developer such (including animations, hover states etc.). Use Google docs and Zeplin.

Get Simon's workflow document here.

Tool of the Week

The stand out tool for this week is Sketch. It’s easy to use and better than Photoshop to make wireframes and mockups and they recently introduced prototyping into Sketch so you can click on different screens and move between them in a presentation.

The price is around $90 per year with Sketch Cloud and prototype included. The Sketch prototyping plugs into Invision so you can move each project over to Invision easily.

Wrap Up

Well, there you go! Now it's time to tweak this process to suit your business and document it.

We want to hear from you! Tell us what you want us to discuss in our upcoming shows. Or tell us what you like and what you don't like about our show. If you subscribe to our YouTube channel, comment and let us know.

If you want to keep up to date with the latest news in WordPress and learn some cool things, then make sure you're subscribed to our newsletter.

Troy Dean at WP Elevation

Tell us where to send your Prospectus

Learn how WP Elevation can help you take your WordPress consulting business to the next level.

Tell us where to send your Prospectus