A group that strongly affects our lifestyle are representatives of the fitness industry – for example, nutricians. Along with the growing recognition of their personal brand, the range of services they offer also grows. There are dietary plans, menus, books, ebooks and many other products they can offer to their clients. The websites are becoming a kind of hub of all this and they need to manage between presenting the necessary information, selling products and services or establishing cooperations.

Project context

We started working on the Patrycja website because of a recommendation from our client – Marek Bis from the Sports Training Centre. We have worked with Marek on many occasions, and once again we had the opportunity to create something new together.

Sprint One: Kick-off workshops & solution development

A kick-off workshop

Our process virtually always starts with a stationary kick-off workshop. (more about our kick-off workshops can be found here). This time, we had to face a new reality due to the COVID-19 pandemic and run such a workshop remotely. During the workshop we had a chance to get to know Patrycja and her business better and together we went through the previously prepared materials to understand the context of the project more precisely.

During the workshop it is essential to identify the goals that are to be achieved. We wanted to learn about the business goal of the website for the fitness industry and expectations towards our cooperation. This allows us to better visualize the client’s business and his needs related to it. We developed the aspects of Patrycja’s business that need to be considered, divided the offered products and developed an action plan for the rest of the project.

After the workshop, we updated a document which contained information about everything we had managed to work out together, and which – to date – contained only information that had been provided to us before the launch of the project.

Research

The next step was to move on to the research stage. At this stage, we focused on a thorough analysis of the competition concerning the websites and the stylistics used. The main role of Patrycja’s website was to present a wide spectrum of her activities – starting with dietary consultations, preparation of various menus through own e-book products ending with a themed profile on Instagram. Patrycja wanted the website not only to support the sales of her products, but also to be a neat and transparent showcase of her personal brand. We have prepared the competition analysis in terms of twin solutions for Patrycja’s business. This gave us an overview of what the current patterns in the industry are in relation to specific services. After confronting it with Patrycja’s mode of operation and needs, we were able to start developing suitable solutions.

Information architecture

Due to the limited time available for developing the entire project, we have limited the information architecture to presenting the basic user flow and the content of subpages. This was supposed to be useful mostly for developers at a later stage of the project. Note that the development team participated in the project from the very beginning. It turned out to be very valuable, due to the fact that we were able to discuss the suggested solutions from the very beginning, and the developers were able to emphasize their needs even before the project started.

The information architecture was based on all the data obtained so far and on our competition analysis. An interesting aspect of its development was using a free library of elements offered by the creators of Figma (more free libraries of Figma can be found tutaj). As a result, everything we worked on could be included within one project and under one link. The client was able to observe the work progress and comment on everything within the tool at any time. 

UX Design

Another part of the sprint was the design of the mock-ups. We have already mentioned many times that at Project: People we do care about the user’s natural experience, which is why we try to create mock-ups so that they do not look like traditional drafts, but are more pleasing to the eye. Such techniques bring good results during the presentation of mock-ups. This allows the user to focus on their real purpose, which is the suggested construction of specific subpages.

We have prepared mock-ups showing the main elements of the website structure for the fitness industry. We did not focus on individual states or standard flow such as signing up, but only on what was important in terms of the content of subpages and their sections.

Initially, the website was supposed to be a typical one-page with the functions of an online store. However, as we worked on the project and learned more about the next aspects of Patrycja’s activity, we decided to specify two extra subpages, describing key services in detail – ready-made menus and dietary cooperation. As a result, we will be able to index the website in search engines better and describe the services offered in more detail.

Eventually, the following mock-ups were created:
– homepage
– dietary cooperation subpages
– the menus subpages
– online store subpages
– single product cards
– FAQ subpages
– contact subpages

Moodboard

The last part of this sprint before moving on to design was to prepare a moodboard. An important aspect was to discover Patricia’s taste, the colors that are close to her and that can be associated with her brand. Our moodboard gathered projects that often differed a lot from one another. This made it possible for us to exclude directions that were wrong and direct our attention to the direction in which we really should be heading when it comes to design.

Sprint Two: UI Design and preparation for implementation

Once again, Figma was our main tool in the design phase. Using all the materials previously collected there – information architecture, mock-ups, moodboard – we managed to smoothly transform our work into the final design of Patrycja’s website.  

Throughout this week, we worked with Patrycja and Marek on an ongoing basis to ensure that each element we prepared meets their expectations. This was also efficient for us, as we were able to implement the feedback we received from them on an ongoing basis. We also tried to discuss the so-called “microcopy” – simple content such as CTA on buttons. The whole content was to be prepared on the basis of the sections we suggested and other elements of the website.

When designing, we kept the mobile aspect in the back of our minds the whole time. Nevertheless, a large part of Patricia’s activities involve Instagram, so a major part of the traffic on the website will probably come from mobile devices. Therefore, to avoid problems after implementation, we prepared a mobile view for each subpage we designed.

The last thing was to prepare the whole project for implementation. The file was properly formatted, the screens were arranged according to their purpose, and the whole was shared with the developers. Because of the built-in Figma option – “Code”, there was no need to share anything but a link to our project. This function allows developers to get the necessary css code based on the prepared design.

So as to refine the whole content prepared by Marek and Patrycja, they were supported by Katarzyna Golonka from our marketing team. As a result, they managed to create a coherent and tailored content that adequately conveys all necessary information.

Summary of our work in numbers and more

Each website is different. Each one needs special approach regardless of whether it’s a corporate website, a website of a florist or a website of a nutrician. We treat each project individually so that we can create the best solutions possible. We make sure that our projects meet the needs of users and clients.

The website is currently under construction and will be launched in late June. We are still in contact with Patrycja and the developers to supervise the implementation.

Tools used in the project

Figma