Lifecoaching

Responsive Web

Lifecoaching landing page on desktop and mobile.

Project Overview

My roles: UI/UX Designer, Copy writer, Coder.

  • Zero-cost
  • Self-advertising
  • Booking system
  • Responsive web

Client is a neuroscience graduate who needs a website to advertise their services. The client wished for the site to have an upkeep cost of £0 and make it possible to book an appointment through the website.

Design Suggestions

Zero-cost

To make the upkeep £0, I suggested to deploy a static site with Eleventy to Netlify. I would write the code in a way that would be easy for the client to understand where to change text or images should they want to. I also suggested to use the client's email as a booking system so they would not have to pay for a database.

Self-advertising

I offered to do competitive research to find out how life coaches most commonly advertised themselves online. After such a research had been made, I would present the results and let the client decide whether or not they wanted to follow those results, or if they had another vision for their website.

Research

Competitive Analysis

I did competitive research on 4 life coaching websites in Sweden and 2 in UK. Findings showed that:

Competitive analysis findings. 2 of 6 had pop ups on entering landing page. 4 of 6 have a lot of paragraph text on landing page. All have an image of the coach on the landing page. All have testamonials. All have the following pages: about, contact, services, about their type of coaching. 5 out of 6 have a book an appointment button. 2 out of 6 have blue as primary colour. 2 out of 6 do not have a well adapted responsive website for smaller screens.

Following the same pattern as the websites in the competitive analysis, I built an IA for the lifecoacing website. I included the most common pages as well as added some such as "Explain TPP" which was unique for the client.

Site map. Home links to About, Services, About TPP, Contact, Book. About contains education and work history. Services contain coaching services, mindfulness services, prices, book appointment, and contact. About TPP contains explanation of TPP. Contact contains contact info, location of office, and a mailto form. Book contains a mailto form and available times.

Problems & Solutions

The first thing I brought up with the client was their choice of colour. I conveyed that, in my professional opinion, green or blue might suit their need better than lavender as those are more comforting colours. We agreed that I would deliver examples in both colours from which the client then could choose.

The booking system would have to be simple without any need of a database to limit costs. Because of this limitation, I suggested a simple mailto form so that the users would have a guided way to send the client all the information they needed to schedule a meeting.

I offered to do a logo for the client based on their name, which according to research would do well if it was their own handwriting, but the client did not want a logo (with or without their handwriting). I opted for just having their name and title in place of a logo with the fonts already used on the website.

Wireframing of landing page and book appointment screen.
3 iterations of hi-fi mock-up design of landing page.

Final Design

After providing a couple of iterations, we both agreed on the final iteration with blue as the primary colour. Since it was a zero cost project and mostly for people looking to find help with managing stress and anxieties, I tried to keep the website simple and straight-forward at the advice of the client's professional knowledge as a lifecoach.

I did a quick usability study of the final iteration of the website with close friends and family who had suffered from anxieties, and they all reported favourably. Especially on the ease of navigation and quick access to the information they wanted.

Currently, I have helped the client to publish it with Eleventy, git, and Netlify offering to add their personal domain and any changes when they are ready.

3 screens of the final design: Landing page, About, and Services.
3 screens of the final design: About Tpp, contact, and book appointment.
The final landing page design on a mobile screen.

What I learnt

Tackling the problem of making a website cost close to nothing was a great challenge, one which required me to present the client with the options in a way they understood the trade-offs they had to make. Such as needing to navigate HTML and CSS themselves if they wanted to change any images or text. I found that the client understood my reasoning and explanation.

I also learnt through the competitive analysis that a lot of lifecoacing is filled with self-advertising. The pop-ups and links to their published works almost drowned out their users' needs. It certainly came off as a field that could use a little more user-centric design, ironically enough. With advice form the client, we tried to create a visually pleasing experience that was focusing on why the user came to the website rather than throwing all of the clients accomplishments at them at once.

Any Questions?   

 Let's talk about it.