I am the client and I am the developer; Now What?

How To's
I have been entrusted by my mother to develop her company’s online site and I have had to iterate development pretty much on my own.
And so what should I do and where do I start?

This is a continuation of my original post on iterating web development with WordPress. In the first post, I concentrated on firing up a site in order to refine the requirements by viewing a live website.

In this post, I will focus on squeezing blood from a stone — or coming up with the requirements and developing a site at the same time.

Let me start with the client-developer relationship conundrum.

Empathy

I can’t come up with requirements if I don’t know the problems I am trying to solve. I won’t know the problems, if don’t know the client and the situation they are in.

Lucky for me, my mother is the client. But that’s where my luck stops as my mum is one busy woman and not the most tech-articulate person out there i.e. she struggles to tell me what she wants with the website.

The first step in the process of documenting the needs is to therefore one of empathy; literally removing myself as the developer (and her son) and placing myself in her shoes. These were the facts I established:

  1. She’s in her 60’s
  2. Her company wants to establish a website to win new business, win repeat business and to attract funding needs
  3. The site must present past, current and future work plans but concentrate it’s focus on promoting where the business wants to head
  4. The site should provide company information and contact details
  5. I must do some wordplay on S&M or at the very least, build a logo
  6. It must be user friendly and scales easily to any device.

Next, we have yet another step that should always be part of the development process.

Research

I have 2 objectives to this research:

  1. Research leading website designs and compare it with our website; and,
  2. Research like sites to gather content and page structure information.

I need to define the ‘What do I need?’ and ‘What works out there in the market?’ at the end of the day. I will put together all the information collected here in a plan later on.

Leading website designs

Just because the company happens to be in the property industry does notmean the research has to stop there. I also like checking out other sites for bleeding edge look, like:

I have two main questions when I check designs outside the industry:

  1. Do these meet the client’s requirements?
  2. Is the design better than ours and should we consider changing ours?

Based on that criteria, I was able to rule out designs where the format andstyle clashed. In addition to this, the 2nd criteria check also meant that I was able to cross out other designs that I thought were subpar compared to my current WordPress theme.

That being the case, I was still left with a fair few challenger designs. What I did next might be a strange choice given it required a drastic change, but I chose to go with a Squarespace design. More on this later.

Industry Comparables

I went straight to Houzz > Find a Pro and sorted on either Building Designers, Home Builders and other like filters.

Here are some sites I thought was worth baselining against.

Uniq Building Group

Site: http://www.uniqbg.com.au/index.html

What’s in the content?

Surprisingly, not a lot.

Clean and simple design landing page on the left. Services page has right amount of copy on the right.

The owners here have opted more for visual oomph over descriptive content. The Services page, for example, lists the services with descriptive text kept at a minimum.

What’s the structure of the site?

Page navigation is quite simple; no nesting and all pages are kept at the top of the page.

There are no surprises with the pages themselves with the only comment being the Projects page only has pictures for content.


Campbells Building Company

Site: http://www.campbellbuilding.com.au/

What’s in the content?

Actually, quite a lot if you dig around.

The Residential page for example, has a lot more content than the entire Uniq website.

A lot of pages, H1, Logo, social media icons, img’s and text here

Icon, H1 and 2 with summarised text looks almost like our current design.

A lot of busy words.

What’s the structure of the site?

The pages once again are quite modular with no nesting. I am quite glad to see though that the format used here is quite similar to the Goran theme I used in my design.

That’s pretty much my process.

In addition to this, I checked out a few more sites to get a better gauge of what’s out there.

Now that I have those empathy points and research established — which resulted in opening a Squarespace platform — I was now able to build shit out.

Building shit out

I built shit out last time around but needed to expand on it even more. First things first, I had a foundation established:

WordPress site as it was with my first post. I used this. ‘Live Demo’ technique in WordPress to talk through and iterate the requirements with the client.

Sometimes the client knows exactly what they want. Other times, they don’t. If they have no idea, then I need to lead by getting to know them, doing my homework on their industry and checking out great web designs.

Incorporating Empathy

Yellow highlights denote actions I must do — some of which are based on Empathy.

Incorporating Research

Leading designs

I previously used a free trial of WordPress.com to work through a design pattern the client liked. Using the information gathered from that iteration with the client, I went to check out a few sites and landed with Squarespace account.

Squarespace

I am not married to a platform but I am tied to the client needs.

Although my mother was quite OK with the WordPress theme, I convinced her to try a different look with Squarespace. Why? Because the templates passed my client requirements and bleeding edge design criteria.

And so I signed up for a 2 week free trial with Squarespace and if worse came to worse and we agreed to switch back to WordPress, then so be it — I will close Squarespace and go back with WordPress. But we need to agree within the 2 week free trial period.

Industry Comparables

After checking out what other businesses were doing, I knew that I had gaps:

  1. I needed more pictures
  2. I needed testimonials
  3. I needed to understand the linkages between each page
  4. I needed to work on content
  5. I needed to work on copy
  6. I needed to create the logo etc.

This is only week 2, and I have a couple more weeks to go before Squarespace trial expires. After this period, I expect to finally confirm the platform, i.e. the design, with my mother.

Squarespace

Current design

I tossed around with a few themes and settled for the Bedford template:

Nothing permanent once again — this is all dummy text for now.

If beauty is in the eye of the beholder, then we might to-and-fro about whether this design is more pleasing than the WordPress example.

But if I refer back to the core client needs, then this design passes the key criterias of empathy and research.

Squarespace and WordPress comparison

I’ve made some quick notes on about the 2 platforms to date:

  • Learning curve is approximately the same as a website and content management platform. I spent a good day fiddling around Squarespace without reading help notes and picked up the core basics.
  • HTML and CSS will cost you more at Squarespace. Squarespace pro is double the amount of their regular plan, a big premium over WordPress.com’s premium account.
  • Typography is easier to configure at Squarespace. UI is very user friendly whereas WordPress is done via HTML text editor or CSS.
  • There’s more power in design at Squarespace. But I will also point out that designing can be more (or less) flexible depending on the theme.
  • There’s limited set of HTML tags allowed in WordPress and locating <class> and <id> selectors is a challenge. This might not be a fair point to make given that I don’t have a Squarespace pro account but if this helper is anything to go by, CSS appears to be straightforward.
  • Squarespace has this cool ability to easily add extra power to pages (refer below). This is all config and a whole lot of stuffing around in WordPress.

Squarespace Blocks. Add this for extra oomph! Note that this list is not extensive.

There are more differences between the 2 but these are the ones I’ve noticed to date.

And on a final note, I did sign up for a free account with Siteleaf too but crossed this off as a web platform.

Client iteration

I’ve always worked with the motto, “The closer the better”, and so here’s what I did:

I sent my mum an invitation to write content in the Squarespace account. By doing this, I am explicitly giving her access to the development site i.e. a Live Demo. I am chuffed that both Squarespace and WordPress have this awesome feature which, if used within the 2 week trial period, can be used as a tool to iterate through development while the client watches the full site take shape.

This process is literally: work on design, work on content, call my mother and talk through what she likes and what she wants changed. Make the changes and repeat.

Close feedback loops always work wonders.

User Testing

As in “Inviting someone other than my mum to check the site out”.

I should be doing this but I am time bound by 2 weeks so I am not so sure I can do this step at this stage.

What I might do is launch after 2 weeks and get user feedback straight after launch and incorporate the feedback after that. I appreciate that some call this ‘production fix’ or a ‘patch’ (if you’re really old school).

I really have to work with what I have, which is a 2 week trial period and some intense content and design work — pragmatic tradeoffs must be made.

The Process breakdown

Here’s the low-down on the important steps I’ve taken once again:

  • After mind-mapping and creating basic structure, I went straight to designing in a web platform bypassing wireframe process
  • Signed up for a 2-week trial on WordPress, Squarespace and Siteleaf in order to test out best designs
  • Within the 2 weeks, I worked on the copy, content and designs iteratively with the client
  • The not-often used sharing feature in WordPress and Squarespace is really a live demo feature in that it provides the client with access to the site in development
  • I might be able to scale this process developing and deploying for other clients using WordPress since creating site is free.

I am not throwing away the need for Photoshop, Balsamiq, HTML + CSS + JS and other wireframing tools/techniques out there just yet, nor am I discounting the need for InVision for the iterative live demo. This process simply works for this situation and it may, or may not, work in other cases.

My important takeout here is that it is more important to build a process that works well for each given client-developer relationship rather than using a tool or technique that the industry dictates and imposing it on the client.
I have kept my sanity and I am quite content that I can still think outside the box.

The journey continues

I wasn’t expecting to write a sequel at all for this post, but I’ve learned so much and I feel the need to write about it.

I do hope that someone out there might get something out of this — and if you do, I would love to hear from you.

Until, part…3?


About this post

PC halved

First appeared in Medium and posted here for completeness. It’s a continuation of How to iterate through website development using WordPress and this side project is really keeping me busy. 

If you do have the spare 5 minutes, please do check out the Medium version as it has added comments/notes on the side which makes the post a little bit more complete.

2 thoughts on “I am the client and I am the developer; Now What?

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