My Approach

Phase #1: Discovery

This is the first phase. It’s essentially one big workshop where we deconstruct your project to fully understand it. The vision, problem and solution; business model, market and functionality required to build a viable product.
‍
It takes going through this initial process to create a full project plan and estimate.
‍
This workshop is included for free if we go ahead with the project. If not, it’s $1,000 AUD, as it takes a lot of time and energy to think things through. If this is an investment you can't make, your project is not an investment I can make. I've seen too many projects crash and burn from improper planning at the early stages and thus, I don't want to take people's money knowing it's going to waste.
‍
In any case, you will end up with a full project plan, feature breakdown and estimate that you can bring to somebody else if need be. Likewise, you will know if you project is actually worth pursuing after it’s been thoroughly reviewed from many angles.

1. Vision

WHAT

Your overall company vision and specific project vision.

WHY

It’s important that I understand where you want to take things and likewise it’s essential for me to see you actually understand what you’re doing. If your project doesn’t have a compelling reason for existing, there is no way I will be motivated enough to work together.

HOW

This is a simple conversation where I will get you to tell me about your vision, how the opportunity came about, why it inspires you and how you think it will have a meaningful impact on the world.

OUTCOME

A written mission statement.

2. Project overview

WHAT

This is an extension of the Vision where we look at your project more broadly — discussing the problem that exists, your proposed solution, the business model, the target market and the overall outcomes you want — all from a high level.

WHY

This helps me to understand your project as a whole from 80,000 feet, which leads into diving deeper on all the key areas later in the workshop.

HOW

Again, this is a conversation where I will ask a series of questions and take notes for future reference.

OUTCOME

A written high-level project description, that covers the key areas.

3. Key outcomes

WHAT

In this exercise, we walk through the key outcomes you want from the project.

WHY

Without clearly defined outcomes to aim towards, there’s little point in doing anything. Similarly, if your project is heavily oriented toward one type of outcome, e.g. profit, without consideration for other areas, then it tells me we’re not a good fit.

HOW

This process evaluates the outcomes you want based on the Triple Bottom Line framework: People, Planet and Profit. That is, what outcomes do you want to create for people, the planet and profits?

Furthermore, we go deeper to understand how each outcome will be measured. It’s insufficient to have nice-sounding yet meaningless goals like ‘make the world a better place’; what specific data points can we track to see if we are on the right path?

OUTCOME

Clearly articulated outcomes and KPIs that fit into the 3P’s.

4. Problem / solution

WHAT

In this exercise, we walk through the problem/opportunity and your proposed solution.

WHY

This is pretty much the most essential piece of the puzzle, from my view. If you don’t have a deep understanding of the problem you are addressing and how to effectively solve it via your product [the solution], then you’re just pissing your money away.

Through this process, I want to make sure there is a true problem that needs solving and an opportunity to create a solution that is better than anything which exists; not just that, but a solution that actually has the capacity to facilitate your business model.

HOW

We will map out a diagram of the current paradigm [the problem] — aka the process that people go through to get the outcome they desire. From there, we will map out a second diagram [the solution] that outlines a better way of doing things.
‍
Once we can see the old and new paradigms side-by-side, we will go through each step and quantify things: from the emotional experience people have to the time and cost it takes to execute the process.
‍
This will give us a more analytical perspective on how your proposed solution compares to the old paradigm and if the value proposition it’s enough of an improvement to be viable in the market.
‍
Of course, if we uncover that the solution needs to be more compelling, I will help work with you to come up with a more effective route.

OUTCOME

A visual, side-by-side comparison of the problem and solution as well as a quantified analysis of how they compare.

5. Business model

WHAT

In this exercise, we walk through the business model of your project in-depth. Whether you’re a Charity, NFP or Private Social Enterprise, it’s essential that the unit-economics make sense before investing in a full product.

WHY

Over the years, one of the biggest reasons I’ve seen projects fail is due to a weak business model and not understanding the boundaries the product needs to stick within to be viable, economically. I want to make sure we are working on a project that makes sense, financially, otherwise we are just building something that is set up to fail.

HOW

We will go through the Type of business model you want (e.g. Service Based, eCommerce, Subscription), the Cost Structure, outline key assumptions such as COGS (Cost of Goods Sold) and CaC (Customer Acquisition Costs), then plug it all into a spreadsheet to see what a 12-month forecast looks like.
‍
This way, you can see if the business model is actually viable, if you will make back your investment and by when as well as what boundaries you need to stick to in order to make the numbers check out.

OUTCOME

A written outline of your business model, key assumptions and spreadsheet that generates a 12-month forecast.

6. Market

WHAT

In this exercise, we map out your target market, from macro to micro.

WHY

It goes without saying, if you do not understand your customer and how to market your solution to them effectively, you do not have a business. This is actually a very tough step that a lot of companies struggle with. Even if you have a solid solution and viable business model, without a customer base who will exchange cash for the value they get from your solution, your project is not viable.

HOW

We will map out your Customer Persona’s: profiles of your ideal customers; Market Segments: a breakdown of the various segments and niches within the overall market that your product is applicable to; Pains vs Gains: pains each Persona is looking to avoid and gains they are looking to create and Jobs To Be Done (JTBDs): the “Jobs” the Customer is hiring your product [solution] to do, in order to solve their problem(s) and fulfil their needs.

OUTCOME

A matrix that maps out all the above in a clear manner.

7. Screens/Pages & Functionality

WHAT

Finally, the last part of the workshop is to outline Storyboards — aka all the Screens/Pages and Functionality of each Screen/Page.

WHY

This allows us to see all the Screens that need to be designed and Functionality that needs to be facilitated through each screen. In other words, this maps out everything that needs to be built in order to solve the customers problem and facilitate your business model. This is also known as a “User Journey Map”.
‍
Furthermore, the point of this step is to understand what Pages and Functionality are ESSENTIAL to create a product people will love and eliminate any bloat. Reducing complexity and keeping the first version very simple is paramount.
‍
All the bells and whistles can be added at a later stage once the initial version has traction.

HOW

We will walk through all the Screens and Functionality you envisioned for the project. The Functionality required can be generated from the previous Jobs To Be Done (JTBDs) step, as we know what the customer needs and thus what your product needs to do.
‍
This is described using “User Stories” — that is — describing the functionality from a Customer’s perspective: e.g. “As a User, I can fill out a Quiz which generates a report and shows me how I can reduce my emissions.” Said user stories are tied to specific pages.

OUTCOME

I will help to organise all of the information above into visual Storyboards (think mind map diagrams). This also gives me all the information I need to put together an estimate for the project.

8. Post-workshop project plan

WHAT

After the workshop, I will take a week to mull everything over and put together a full project plan.

WHY

Aside from the obvious reason of giving you a cost and time estimate, the project plan is put together to make sure we are on the same page and have a mutual understanding of what will be built.

OUTCOMES

A project plan that outlines everything we discussed in the workshop, in simple terms.
Accompanying outcomes and documentation for the steps we went through in the workshop.
A cost estimate and estimated timeline from start to finish.
An outline of what the first version of the project will look like and what has been moved aside for future versions.
Next steps to bring the project to life.

Phase #2: Your Story

After all the fundamentals are taken care of in the initial workshop, it’s time to craft your story — after all, what’s a product without a powerful brand image and story behind it?
‍
The phase is really about uncovering the Unique Value Proposition(s) of your product and brand (i.e. your Brand Promise) and articulating them effectively.
‍
Furthermore, this phase is about creating Brand and Content guidelines that ensures your communication efforts are consistent and spoken in a manner your customers resonate with.
‍
Then, once the above is done, it’s a matter of actually writing out the specific content and producing all the required media assets such as photos, icons and videos.
‍
This gives us everything we need to work with when jumping into the visual design.

1. Unique Value Proposition (UVPs)

WHAT

This exercise is all about uncovering the unique value your product and brand has to offer.

WHY

Without understanding your unique value in the marketplace and how to articulate said value to prospective customers — and without being able to differentiate yourself from competitors — you will struggle to capture a niche, gain a following and own a segment of the overall market.

HOW

We will walk through a framework known as Points of Difference (PODs), Points of Parity (POPs) and Points of Irrelevance (POIs) to uncover Unique Value Propositions (UVPs). In essence, this is simply understanding where you do better than your competitors, where you match them and where you fall short. What remains is your unique value.
‍
From this point, it’s a matter of matching your unique value with the needs of your prospective customers, to capture their interest and keep them as customers.

OUTCOME

A document that outlines your UVPs and written descriptions of how they should be articulated.

2. Brand Identity

WHAT

This exercise is all about creating a brand image; a personification of your company, what you stand for and how you want to be perceived by the world.

WHY

Without a strong identity and a personality that people can get on board with, as an organization you will be unable to appeal to people on a crucial emotional level — unable to stand out in a highly competitive marketplace.

HOW

Establishing a brand identity is in and of itself a whole Branding workshop, where we walk through a series of exercises.

Note: This is not a workshop I will run, personally. I like to stay focused on the areas I have the most experience in. These workshops will be run by a colleague of mine who’s branding workshops I’ve sat in on before.

OUTCOME

A full Brand Identity guideline, produced from the exercises in the workshop, as well as all the raw information collected for reference.

3. Tone of Voice guide

WHAT

A simple guide that outlines the communication style of your brand and more specifically a guideline around how content should be written.

WHY

You need to speak the language of your customer — so to speak — and similarly carve out a communication style that makes your brand feel authentic and aligned with your identity.

HOW

This simply involves you filling out a Tone of Voice guide for each persona, as well as a generalised guide that combines all your persona’s.
‍
For example, your voice for Persona X is: “Community Driven”; your voice sounds like: “Barack Obama”; you should write like X and not like Y.

OUTCOME

A Tone of Voice guideline that will be used as the basis for all your content.

4. Content

WHAT

All the specific text, video and imagery that goes on each screen/page, word-for-word.

WHY

Without any content, there’s not a lot to say. Compelling content that tells a story and articulates your value propositions effectively will make a huge difference when it comes to converting prospects into customers.

HOW

Content writing / copywriting and media assets will be provided by you. Ideally you draft all the content and get a professional copywriter to finesse it; likewise, when it comes to photography and videography, it’s highly recommended that you hire a professional and create your own content. People can see stock images and footage from a mile away and these sorts of shortcuts will damage your brand image.
‍
Note: once I’m provided all the assets, I do post-production work to make the imagery, for example, align with the style of your brand.

OUTCOME

A full document that has content for every single screen/page, which will be used to inform how everything is designed, visually.

Phase #3: Design &
User Experience

Ahh, the design phase. This is the phase most people seem to think is the first step. In reality, design is quite invisible. Once you understand the problem you’re solving, who your customers are, the journey you need to take them on to solve their problem, your value propositions, brand identity and content, the design is quite easy.
Design just brings everything together in a practical, usable and visual manner.
Design is very much about taking people on what Joseph Cambell describes as the “Hero’s Journey”. This is an experience where you act as a guide to your customers, taking them from a state of challenge [the problem] to a state of transformation [the solution], where they come out the other side having conquered the thing it was they were up against.

In any case, you will finally start to see your project come to life in this phase, as all the prior steps will become far more tangible through visualisation.
Note: during the design process, you will receive regular updates (weekly/fortnightly) to see how things are unfolding.

1. Wireframes

WHAT

These are simple sketches of each screen/page, that provide a rough outline for how things could look and what elements go where etc.

WHY

Wireframes are a way to rapidly iterate the layouts and positioning of elements on each screen/page. Once everyone is happy with the concepts, it makes translating them into high fidelity visual designs much easier.

HOW

I will gather documentation from all the previous steps and figure out the best way to visualise all the information in a user-friendly way. This includes making sure each screen has the required functionality and content, as well as facilitates the user journey the customer needs to go through to solve their problem.

OUTCOME

Sketches of each page will be photographed / scanned and shared for review. These usually go through several rounds of iterations before signing off.

2. Styleguide / Design System

WHAT

This is a more practical version of your Brand Identity. It transforms your brand assets into Web/App/Print friendly guidelines. From the fonts and font-sizes to colours, button shapes and spacing between elements, the Styleguide acts as a reference point for the visual design.

WHY

The Styleguide ensures the visual design of your website/app is consistent with your Brand Identity — it also ensures the visual designs are consistent with each other, between Desktop, Tablet and Mobile versions.

HOW

I will go through the Brand Identity and transform the guidelines into a web/app friendly styleguide.

OUTCOME

A styleguide guideline (PDF).

3. Visual design

WHAT

User Interface Designs (UID) of each screen/page in their full glory!

WHY

Without the visual designs, there is no style, no brand, no high fidelity experience. Compelling visual design not only solves the problem for customers effectively, but also brings about positive emotions via creating a memorable experience.
‍
Visual Design also eco’s your brand identity into the forefront of people’s minds, building trust and loyalty and even a desire to promote your brand to others.

HOW

This process basically involves me putting the Styleguide on top of the Wireframes, then realising there’s still so much to improve upon — iterating time and time over until I’m happy with how it all flows and looks.

OUTCOME

Visual designs of every screen/page. These will be exported and put into a simple prototype for you to test out and get a feel for.

Note: There are 3 rounds of revisions included for free. Beyond this point, each round of revisions will be estimated ahead of time and billed hourly.

4. Prototype & Testing

WHAT

A simple prototype where you can click through each screen/page and get a feel for the flow of your product, end-to-end.

WHY

First impressions and very important. If you go through the screens and something feels off or you realise something fundamental has been missed (e.g. a step has been missed, important info has been left out or it’s not intuitive enough), this is a great opportunity to provide feedback so that we can iron out any kinks.

HOW

This simply involves you accessing the prototype online and giving it a spin. The best way to give feedback is to record your screen the very first time you go through the prototype and speak your thoughts aloud to gauge initial reactions.
‍
From there, you can comment on each screen/page individually.

OUTCOME

Feedback from you that will allow me to improve the designs and overcome any hurdles.
‍
Note: I will very carefully review your feedback and make any changes I see fit. I’m not always going to agree and at the end of the day if I am not aligned with certain feedback it’s up to me to make the final call.
‍
Note: There are 3 rounds of revisions included for free. Beyond this point, each round of revisions will be estimated ahead of time and billed hourly.

Phase #4: Development

Now it’s time to put the designs into motion!
‍
The development phase involves all the frontend-design: the screen/page layouts and elements you interact with; and the backend design: all the behind-scenes functionality that makes everything work as it should.
‍
If this is a simple static website, CMS-driven website or eCommerce store, then it’s likely I will do the development, as I use Webflow which makes all this possible, as a designer.
‍
If the project requires technical functionality or it’s a full blown mobile application, I will refer you to one of my colleagues to do the development. In this case, I will walk them through everything and assist them throughout the process to make sure the project is delivered to a high standard.
‍
Alternatively, you can find a developer and I can pass the development work onto them.
‍
Note: If the project is passed off to a colleague of mine or a third party, I charge an additional project management fee. This will be estimated ahead of time and billed hourly.

1. Prepare design assets

WHAT

Organise and export all the design assets into a developer friendly format.

WHY

It’s important the Styleguide and assets are organised in a way that software engineers understand, otherwise things quite easily get lost in translation. Likewise, it makes life a hell of a lot easier for developers when they have a simple design system they can refer to.

HOW

I use an application called Zeplin to export all the designs from Sketch into a web-friendly styleguide.

OUTCOME

A web-friendly styleguide that can be accessed by the developer of the project.

2. Basic Documentation

WHAT

Documentation that explains how each screen/page works and nuances in regards to the responsive design (mobile and tablet versions).

WHY

Again, so much can get lost in translation between the Design and Development phases, thus I like to put together thorough documentation that explains everything in simple terms.

HOW

I put all my developer notes in Zeplin, in the form of in-context annotations per screen/page.

OUTCOME

Functionality notes in the form of Zeplin annotations for every screen/page.

3. Build

WHAT

This is the nuts-and-bolts programming of your project.

WHY

Without code to bring life to the designs, your project cannot exist.

HOW

Simple static websites, CMS-driven websites or eCommerce stores will be built in Webflow; advanced applications will be built in React/React Native if you go with my colleague or whatever the preferred stack of your chosen third party is.

OUTCOME

An (almost) fully functioning version of your project, end-to-end. Once you receive the working version of the full project, it’s time to test it, break it and provide feedback.

4. Test & Revise

WHAT

This involves thorough testing and feedback from myself to the developer (me or a third party) as well as thorough testing and comments from yourself.

WHY

To ensure everything flows and functions properly, to deliver a high standard user experience.

HOW

This involves going through each page and testing all the functionality on various devices (desktops, laptops, tablets and mobiles) as well as a range of browsers (Chrome, Safari, Edge etc.) to make sure everything is working properly across all use cases.
‍
Whenever an issue is found, it’s a matter of taking a screenshot (or recording a video), annotating and commenting on the issue, then logging it in the relevant project management application (e.g. Asana).
‍
These bugs will be reviewed and put forth for the developer to fix.

OUTCOME

A revised, tried, tested and well oiled final version of the product which is almost ready to see the light of day.
‍
Note: There are 3 rounds of revisions and fixes included for free. Beyond this point, each round of revisions will be estimated ahead of time and billed hourly. Any major bugs that are the developers fault are obviously free of charge, indefinitely. But smaller fixes or changes will require extra out of scope work, thus additional fees.

5. Go live checklist

WHAT

This is a standard checklist that needs to be ticked-off before the project goes live, to make sure nothing is missed.

WHY

Much of the time a project goes live and only after launch are crucial issues found. This checklist is an effective way to mitigate such a scenario.

HOW

This involves me going through each item in the checklist and doing a thorough final test before the product is published live on the internet for all to see.

OUTCOME

The stamp of approval from myself and you to hit the publish button; a big group hug and kombucha bottles popping like Christmas has come early :)

Beyond: Optimisation

As you will know from running a business, nothing is ever finished. Once the project goes live, there’s always more to be done — things to optimise, features to add, bugs to give the flick.
Below are a few examples of things that you might want to consider after launch.

Optimise on-site SEO

Optimise the content and keyword density on your website so that you rank better on Search Engines like Google.

Optimise website performance

Though this is a given, advanced performance optimisation can be a great addition. It helps improve the user experience via faster loading and as a result helps you to rank higher in Search Engines.

CRO & A/B testing

Ongoing Conversion Rate Optimisation and A/B testing involves experimenting with design and content changes on a regular basis. Though the classic example is trying different button colours (e.g. 50% of traffic will see a red button and the other 50% will see a green button), to see which version gets a higher % of clicks, proper CRO goes far deeper.

Ongoing updates

Generally adding new features or updating existing functionality etc.

Project Management

I try to run projects as openly and simply as possible, with tight feedback loops so that issues can be resolved quickly.

Below is an outline of how I manage projects.

Fortnightly sprints

Every two weeks we will catch up in person or on a video call to check in. I will discuss where I’m at with everything, when to expect the next milestone and if there are any roadblocks we need to resolve. If a milestone is hot off the press, I will present it to you.

Bi-daily check-ins

On the days I’m working on your project, I will check in and let you know what’s happening. I very much try to communicate as regularly as possible, even if it’s news you don’t want to hear, as it means we can resolve things quickly and know where things stand.

KANBAN task management

Kanban is the practical implementation of the “AGILE” methodology. In simple terms, it’s a horizontal task management system that takes tasks through various stages, down a pipeline.

Tasks generally start in the “Backlog” column, then get moved into “In Progress” when they’re being worked on. From that point, they’re moved into “Review” for you to review, at which point you will either approve and move to “Done” or provide feedback if something was missed.

I use Asana for this. Everyone that is involved in the project will be added to a project board where they can track all the tasks and progress.

Interested in working together?

// 2018 John. My beard is now bigger, but I'm
going bald. 0% net change, I guess.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Homepage

discovery

your story

Design & UX

development

optimisation

From zero to a hundred real thoughtfully

discovery

your story

Design & UX

development

optimisation

1 - 2 weeks

Phase #1: Discovery

1. Vision

WHAT

WHY

HOW

OUTCOME

2. Project overview

WHAT

WHY

HOW

OUTCOME

3. Key outcomes

WHAT

WHY

HOW

OUTCOME

4. Problem / solution

WHAT

WHY

HOW

OUTCOME

5. Business model

WHAT

WHY

HOW

OUTCOME

6. Market

WHAT

WHY

HOW

OUTCOME

7. Screens/Pages & Functionality

WHAT

WHY

HOW

OUTCOME

8. Post-workshop project plan

WHAT

WHY

OUTCOMES

1 - 2 weeks + revisions

Phase #2: Your Story

1. Unique Value Proposition (UVPs)

WHAT

WHY

HOW

OUTCOME

2. Brand Identity

WHAT

WHY

HOW

OUTCOME

3. Tone of Voice guide

WHAT

WHY

HOW

OUTCOME

4. Content

WHAT

WHY

HOW

OUTCOME

4 - 6 weeks + revisions

Phase #3: Design & User Experience

1. Wireframes

WHAT

From zero to a hundred
real thoughtfully

Phase #3: Design &
User Experience

A little about me, outside
the office

// 2018 John. My beard is now bigger, but I'm
going bald. 0% net change, I guess.