Website for EchtFit

Marketing website for fitness app EchtFit, showcasing its features and concept

 

  • Client

    The client of this project was EchtFit, a fitness app that aims to revolutionise the formula by providing an always present fitness couch and dietician.

  • Target audience

    The website had two main target audiences: potential customers and potential investors. The goal of the website was to give people the feeling that EchtFit is a solid product that they should purchase, and to convince investors that it was a reliable product to invest in.

  • Problem statement

    The current website at the time was a somewhat simple Wordpress website that, even though it conveyed the information, did not really bring the message across that EchtFit is an awesome app that every Fitness enthousiast should definitely purchase. For that reason they needed a new website with custom visuals, animations and lay-outs.

  • My role & responsibilities

    While the EchtFit mobile and tablet apps were also designed and developed by YipYip, that was mostly done by a different designer. This website however was entirely my design.

    The client provided some basic sketches as wireframes, and from there it was my job to design a website with an “Apple-like” wow factor.

  • Context

    This was my first major project at YipYip. I worked closely with a front-end developer and a project manager, along with a contact person of the client.

  • Goal

    My goal for this project was to design and deliver a site that would blow both the client and their future customers off of their feet. To do this I wanted to lean a lot into using interesting animations and ways to display information. I had a lot of creative freedom, but I did have to take the planning of the project into account, as well as various technical limitations.

Process

Initial sketches

 

The client had provided a simple overview with a suggested wireframe, covering the type of content they would like to show and most of the copy they wanted to have on the website. Their request to me was to take these wireframes, see what I wanted to keep from it and where I thought I could improve it, and see what kinds of visual elements and animations I could think of to give the whole website a premium “Apple-like” experience. This set the bar quite high for me and I started scouring the internet for inspiration and ideas.

These ideas were then used as a basis for my first sketches. I began partially digital in Figma, and partially on paper, using paper mostly for things I wanted to get a quick feel for and using Figma to be able to see how it would actually work on a screen.

Improving the design

 

After getting some feedback from my colleagues I went back to my designs to increase the fidelity. My goal was to make the mockup & prototype look and feel as much like the final product as possible, so that the client would have a good idea of the direction I was headed in.

To do this I created small animation prototypes in Figma and where necessary, I annotated the designs with text to explain my vision.

I struggled quite a bit with the “VERE is here” section, as I had to show quite a lot of information, without it getting boring or visually uninteresting. The section was meant to act as an introduction to the AI named VERE, and also give an overview of all the things VERE would help with. However, because this was quite a lot of information I wanted to avoid it being a simple, fairly long list. Eventually I solved this by creating a card-like element where the viewer could quickly scroll past the section if they wanted to continue on to the rest of the website, or click through the content for more in-depth information about VERE.

  • Initial idea

    My initial idea was to minimize visible information, while still giving the option to read more. The model of VERE would be animated doing several exercises. Some of the information that would otherwise be shown here was either cut or moved to a different place.

    *The design of the character, VERE, and its animations were done by another company called Grendel (https://grendelgames.com/nl/)

  • After several iterations

    The client gave as feedback that it felt too much like VERE was floating on the background and that while the accordion did divide the text into two smaller parts it was still a lot of text. That's why I decided to try a different approach.

  • Final design

    Because of the client's wishes, the final design is different from how I originally imagined it. While I like the structure here, with the horizontally scrollable cards, I am not a fan of the video. And while I advised against the animations with the after-images, the client wanted it.

Adding more eye candy

 

Once the main structure and layout were mostly set, I began continued adding extra polish and eye candy. I did this by creating sections with interesting animations and making sure the page had enough visual variety. One of these sections was about EAT in the app. I wanted to really show the process of how food can be tracked in the EAT section, and how easy it is. To do this I created a small walkthrough, which the viewer scrolls through, adding small tooltips to highlight specific parts. This section was greatly praised by the client.

I also added some variety by adding some sections with full-width images on the background, and the front-end developer came up with the idea to use a parallax effect on images and text that lay over these background images to give it a bit of a 3D effect.

Final design

 

In the final design, some changes were made compared to what I had made, but overall both the main structure, as well as the most important parts were kept mostly the same. The reason for this change was a last-minute change on the client's side, while I had already continued to a different project. Because of that, I did not have enough time to also keep making changes to the design of this website, and the front-end developer implemented the changes as he thought would be best.

The choice was made to add more videos, which I believe adds to the flashiness of the site. The intro video for example definitely works well as an eye-catcher and functions as a good intro to the product. The choice was made deliberately to add many animations and videos, knowing that it would make the site run less well on older and less powerful devices/browsers, but overall I am very happy with how our front-end developer implemented my design. I feel like my goal of creating a flashy, premium experience was definitely met.

Outcomes and lessons

This was the first big project I worked on mostly as the only designer at YipYip, previous projects were all done along with another designer. So here I had a lot more autonomy and pressure on me to deliver. On top of that, the client requested an Apple-like experience, which added to the pressure on me. However, this also give me the opportunity to let my imagination go wild and try to come up with cool ideas to showcase the Echtfit brand and all of the information they wanted to bring across to their customers and potential investors.

Something I definitely learned during this project, was that it is incredibly important to pick your battles when communicating with a client. What I mean by this, is that it is essential to keep asking yourself “Is it really worth it to come up with a different solution to what the client wants because my expert opinion thinks so? Or would it be better just to do what they want and let them find out afterwards what's better?”. This happened a couple of times, where the client had some wild idea that seemed cool on paper, but wasn't a practical solution to the problem they had. An example of that is the final video that they decide to use for the "VERE is here” section. Adding loads of after-images makes the whole section feel incredibly messy and confusing, without adding to the narrative or branding. However, since it took some time to make it, and since the client really liked it, our team at YipYip decide to just implement it the way they wanted and be done with it. In the end, we are of course hired to create what the client wants, and if they don’t want to listen to our advice then that's also a valid way to go.

Something else I learned was that it is vital to communicate clearly with a client how and what type of feedback you would like to receive. This is especially the case when handling international clients that are used to different cultures and therefore working environments. During this project, I often received very positive feedback, which was followed a couple of weeks later by the client wanting to change it after all. If I had communicated to the client what type of feedback I was looking for, maybe we could have prevented this and that way saved some time in the process.