EchtFit website

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.

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.

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.

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.