Michal Diškant
Michal Diškant (trener4you)
2019
Web Designer
QUICK NAV:
01 CHALLENGE
Understanding the Challenge
WHO IS IT FOR
This website should serve the customer to attract potential clients, who would have various reasons to start with the training. His range varied from personal motivation for condition training, shape-forming, through rehabilitation, up to professionals preparing for competitions, etc.
CHALLENGE
The biggest challenge here was that the communication with the customer. He picked certain elements of each website that he saw, and wanted to have it all on his. Some of them were hard to combine, others not very trendy.
GOOD NEWS
Good news was that he provided me with most of the content. However, the pictures provided (except for the one on top) were mostly in pretty low resolution, so I could make them only as big as they were in pixels in order to keep them sharp.
02 RESULT
Wireframing | Final design
I checked on websites of other personal trainers to understand how they motivate their potential clients and how the information structure looks like. I came up with a solution with unified elements that would work for him best according to me. I skipped some of them and explained why. Of course, there have been some adjustments, but most of it has been understood by him and the final result now looks good to me as well.
Wireframing
On Landing page, I definetely wanted to use the high resolution picture of the customer (all of the other trainers do that as well) and place the menu in some unordinary way, in order to differentiate the page. At the end, I used that picture on every other sites.
Important point was to briefly explain why personal trainer makes such a difference and what is the process.
I also considered a good idea to insert a small block with his "transformed clients, which would show "before and after" photos. This idea works very well in Muscle & Fitness magazines, so why not here? Those were originally supposed to be in the Gallery site only.
On Services page, I first wanted to use hover effect, which will view the type name of service after pointing coursor overt the picture. However, that would not work well on the mobile devices, so I went ahead with more straight-forward option (as seen on final screenshots at the bottom of the page).
Final design
Website will be released during November. For now, you can see the current stage of main pages below, or just on internal domain:
And of course, the mobile version:
Lesson learned:
At the beginning of every project, discuss the cooperation process with the customer to get a feel of how it will go, what is his/her ideal result. Does he/she want you to build the website exactly to his/her imagination, or will he/she also listen to your suggestions? What are the reasons behind? Communicate it out.
All projects