Navigator's Coaching

Website Design / Website Development
Project Overview
A website for a coaching business that coached individual clients and trained coaches. The website delivers information for events and courses available as well as a members area for other coaches.
My Contributions
  • Information architecture design.
  • Prototyping in Sketch.
  • Website development in Webflow.
  • Website animation.
  • CMS integration into Webflow design.
  • Implementing a members area in Webflow.
The user wanted to create a website that contained information about his coaching business to clients, which could see what he other coaches in his network offered. He also wanted it to show what paths and training people could take if they wanted to become a coach, as well as upcoming events. He also wanted a private members area that his coaches could access for more more detailed documents. The client supplied a word document with all of the information they wanted to display, an image that would act as the main intro and set the mood for the site, as well as logos that they wanted to use in the site.
User's Brief
Large word document and lots of wants.
Aug 2017 — forever
There were a number of problems to address with the site:
  • How to display large amounts of information that is easy to navigate.
  • How to clearly define areas for different site visitors.
  • How to create an aesthetic design with dated logo designs that could not be changed.
  • How to allow the client to easily update content on the site.
  • How to create an easy to use member's area.
User's Problem
Breaking things down into clear objectives.
Aug 2017 — forever
Prototyping was conducted over several phases, with consultation with the client during and after each one to confirm progress to the next step.
  • Determine the flow of information - dividing it into sections, headings and pages in a text document.
  • Paper layouts to determine how images and information would be blocked together and to begin thinking about visual hierarchies.
  • Sketch mock-up, visualising the layout, where images would be placed, hierarchies and colour tone.
  • Sketch mock-up, incorporating fonts.
  • Sketch mock-up, incorporating colour, the client's image and mock-up images.
  • Due to the ease of implementing animations in Webflow, these aspects were left until the implementation phase.
Chunking design to allow for multiple client changes and input.
Aug 2017 — forever
The final site included several pages of content, with a number of CMS integrations. Every element was designed to work in multiple screen formats.
Design Solution
Aug 2017 — forever
The site exceeded the clients expectations. It provided a clear destination point for their clients and had an integrated back end that allowed them to easily update the sites information.
End Result
Aug 2017 — forever