How to iterate through website development using WordPress

How To's
Most designers will use Photoshop, Keynote, HTML/CSS/Javascript to prototype websites and share with InVision. Most developers will then start developing using their language of choice. Although I used traditional prototyping tools at first, I found myself dropping this in favour of prototyping, presenting live demos and user testing in WordPress — and found it just as successful!

Note that this post uses WordPress.com and not WordPress.org. I needed to create a site quickly and on the fly and WordPress.com makes things super-simple (standard templates, browser and device tested etc.) 

This post will also use a live example as basis; the project is not yet complete at the time of writing.

Backdrop

My mother approached me not too long ago and asked if I can create a website for her property development business. The mandate given to me from the outset was: 

I need a website for my property development business.” — your mother

Goodo! How very descriptive. Thanks mum :) 

And all I had to go by was one email that had pictures from the last property they developed. I therefore had artistic freedom to create a website based on this statement and sole email.

Pen and Paper, and a Mind Map

Where to start, where to start. 

My creative process always starts with the ‘ol pen and paper’ to ideate through everything that this website could potentially be.

 

The mind map as it appears in Evernote

 

A lot of these notes will not make the final cut, but it’s handy to list them all out at first.

It’s always easier to list out all possibilities you would want to explore before filtering out the noise with your client to create the final product.

Simple structuring using Keynote

I did not completely bypass Keynote for the bare bones site information, which is what I did here:

Simple structure using Keynote

 

The above structure was for my own personal benefit as it enabled me to visualise where things go.

Enter WordPress

Signing up

WordPress signup is a super-simple 3 step process of selecting a blog address, entering a name and an optional extra step for upgrading.

WordPress.com
 Sign up for a free account on WordPress.com where you can create a free website or easily build a blog.signup.wordpress.com

It would obviously help to know know your client’s requirements in advance before you upgrade e.g. will 3 GB free storage do? 13 GB for premium or unlimited business? Lucky, I know my mum well or this could have been a lengthier process.

Pick a theme

There are so many gorgeous themes to choose from out in WordPress-land:

Theme Showcase
 Find the perfect theme for your blog.theme.wordpress.com

Each theme has its own unique features so quite important to read each carefully to ensure client fit. I chose the Goran theme for its solid business like presentation which screamed ‘Property Development yo!’:

Goran
 The content of the front page template is displayed here. This is a great place to add your "call to action" with a…gorandemo.wordpress.com

Customisation

Pages

This is now part of the execution stage where I needed to create a few basic pages in order to present something that resembles as website. Here’s a couple of things I did to the Home page:

WordPress Home page with dummy text

 

Note that the page does not have a name (1) as it is the default static page. This is all explained in the Goran theme under ‘Front Page Template’. Subsequent pages were named and nested under (2) the parent element.

The end result of the above is as follows:

The current front page of the site (still subject to a few changes).

 

I have the link to Pages if you need more info.

Menus

Pages, links and categories can all be assigned as a menu item, it’s a simple drag-and-drop affair and all explained here.

The one thing I would like to call out is that by using WordPress.com, the client, and the world for that matter, will see the following by default:

Blog at WordPress.com. | The Goran Theme

A quick control + click, inspect element in Chrome presents the following footer element:

<! — .footer-navigation →>

<div class=”site-info”>

<a href=”https://wordpress.com/?ref=footer_blog”>Blog at WordPress.com</a>.

<span class=”sep”> | </span>

<a href=”https://wordpress.com/themes/goran/” title=”Learn more about this theme”>The Goran Theme</a>.

</div>

Although a footer like this can be modified and deleted in WordPress.org, it cannot be changed at all in WordPress.com:

Current Terms of Service:

11. Attribution. Automattic reserves the right to display attribution links such as ‘Blog at WordPress.com,’ theme author, and font attribution in your blog footer or toolbar. Footer credits and the WordPress.com toolbar may not be altered or removed regardless of upgrades purchased.

This is part of the T&C’s and honestly, neither my mum or I could care less at this point. It’s easy enough to move it to a WordPress.org or even to another platform later on.

Here’s more on menus if you need it.

Widgets

Widgets make a site look complete, particularly with most modern websites. Adding widgets is as easy as going to

Appearance > Widgets

or

Appearance > Customise > Widgets

(in case you wanted to assign widgets with the website on display).

I am still in the discovery phase of the site but have added a few simple widgets — Follow Blog, Contact Info, Categories — as a talking point when I iterate through with my mum:

Some widgets with dummy text

 

We might modify the above or even remove this later i.e. this part of the site will make more sense to shape as the site evolves.

You can find more info on widgets here.

Other site features

Of course this is not it; there are other website features like posts that I have not mentioned, and customisation of fonts, CSS, header styling, logo etc. that I still need to do. Perhaps I’ll post about going through these items in the next post.

Iterative Development with the client

Settings Reading Private

Because I am in the process of iterating through the site with my mum, I therefore need to mark the site as ‘Private’ to keep it between us.

The steps: Settings > Reading and click

I would like my site to be private, visible only to myself and users I choose

Make sure to remove this setting later when the site is live.

Granting access to the client

Here’s the WordPress magic of iteration: selecting Settings > Reading > Users. This provides the option of allowing others to access the site.

At the moment, only my mum has access to the site. So our workflow is: I change something and then call her to check it.

This Live Demo technique within WordPress is a such a powerful and not often used feature. In fact, I might even grant other users website access and collect valuable feedback with the intention of improving the site i.e. user testing. The more we learn, the better we can make things better.

There might be other website building platforms out there that that have this feature, and of course there are tools like InVision where live demos and collaboration are their bread and butter. But WordPress suits my requirements for this project as (a) I need to fire it up quick and (b) all my mum has to do is view it and give me back her feedback by phone or email.

My work is not done here

You would think that this whole exercise of building a website is easy — and sure enough I was able to fire up the site, with widgets and all, in a couple of hours.

But I am not finished by a long shot.

Having your family as the client can be harder than having someone that is not a family-member as the client. My mum doesn’t know what she doesn’t know and I therefore have to drive most of the requirements, design and development myself. She relies on that.

Here’s a few more things I need to do.

Gather as much information as I can

The more information I have, the easier I can see the whole picture. If I can see the whole picture, then I can structure my pages and content right. We are still going through this process at the moment.

Iterate until happy

The workflow at the moment goes like this: I tell my mum to view the site at a particular day. When that day comes, I talk her through the changes.

There are so many things that I still need to do:

  1. create a logo
  2. take pictures of properties they built
  3. write content for all pages
  4. write a sample post
  5. configure the widgets
  6. recheck the design (and possibly change CSS, fonts etc. if need be)
  7. check output on all devices
  8. user test etc.

All these require a conversion with my mum.

I might do a part 2 of this post to share info on our iterative development. For now, I thought it might be useful for some to understand that WordPress can be used to iteratively develop a site with a client.

Final Notes

I am happy to hear reader comments on other site building engines like Squarespace, Ghost, Joomla etc. Can you make a site private with these platforms and can you share the site with other users when marked private?

Always happy to hear what others are doing about in this space.


About this post

PC halved

This post first appeared in Medium but was copied here for completeness. Feel free to check out the Medium version of this post as it has more content i.e. there are side notes that have not been carried over here.

2 thoughts on “How to iterate through website development using WordPress

    1. I really think that WordPress.com is under-selling this great feature as it can compete with other prototyping tools and InVision’s of this world. I also intend to use a standard prototype site ‘ClientExample.wordpress.com’ (or something to that effect). This prototype site can then be reused for another client at a later stage.

      Thanks for writing in and the props :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s