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.
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.
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:
- She’s in her 60’s
- Her company wants to establish a website to win new business, win repeat business and to attract funding needs
- The site must present past, current and future work plans but concentrate it’s focus on promoting where the business wants to head
- The site should provide company information and contact details
- I must do some wordplay on S&M or at the very least, build a logo
- It must be user friendly and scales easily to any device.
- Research leading website designs and compare it with our website; and,
- Research like sites to gather content and page structure information.
- WordPress theme examples
- Squarespace theme examples
- Siteleaf theme examples
- Shopify ecommerce examples
- Unbounce (for landing page designs).
- Do these meet the client’s requirements?
- 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.
I went straight to Houzz > Find a Pro and sorted on either Building Designers, Home Builders and other like filters.
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.
There are no surprises with the pages themselves with the only comment being the Projects page only has pictures for content.
The Residential page for example, has a lot more content than the entire Uniq website.
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.
I built shit out last time around but needed to expand on it even more. First things first, I had a foundation established:
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.
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.
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.
- I needed more pictures
- I needed testimonials
- I needed to understand the linkages between each page
- I needed to work on content
- I needed to work on copy
- I needed to create the logo etc.
I tossed around with a few themes and settled for the Bedford template:
- 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.
And on a final note, I did sign up for a free account with Siteleaf too but crossed this off as a web platform.
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.
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).
- 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.
About this post
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.