About the project
Trans4mix offers personalised workout plans and daily motivation boost through different communication channels from professional fitness coaches. It bases on the idea that each person and his/her fitness goals are so different, that fitness plans need to be individually designed in order to meet the wished goals. Each new person that joins trans4mix needs to fill in a specially designed survey, on which bases a basic program will be created. Next, a first individual session with a coach is scheduled to demo the platform and explain the designed program.
After that, customers can log in into a platform and follow 'hand-crafted' programs in forms of videos.
Since trans4mix is a brand new product, the entire brand identity & website needed to be created at first.
In this project, I worked as a freelancer to create brand vision, & guidelines. Next, I created the entire webpage in Webflow.
Customer expectations & vision for the brand
In order to create a brand & webpage that meets customers vision, intro sessions have been scheduled.
In these sessions we discussed what shall be the brand look & feel. We talked about the mission statement, brand name & tone of voice.
Together we defined that trans4mix
- shall be perceived as a modern, energetic, powerful, professional & inspiring brand
- brand name relates to transformation & growth
- brand statement will be: "trans4mix - Your personal fitness coach - every day - with hand-crafted workouts"
- tone of voice shall be empowering, but not technical
Benchmarking
After the basics have been defined, I did a benchmarking of webpages that offer similar services. We then looked at them together and I gathered feedback on which sections were particularly liked or disliked.
Let's start with the brand!
Setting up the foundations
When I joined the project, the initial webpage already existed. However, no brand foundations have been set yet.
In order to create basic brand guidelines, I needed to create a logo, as well as define colors & typography. Once this was defined, I designed basic UI elements, like CTAs, input fields, etc.
Logo, colors & typography
In order to define the logo, mind map was created and user personas were defined. Together with founders of trans4mix we defined key words & brand key values which were than the basis for creating first versions of the logos.
We used Miro in order to exchange ideas and share feedback.
Creating brand guidelines
We iterated on different versions of color palettes and typography, having a goal to create a re-freshing, modern & inspiring brand identity, which would be associated with transformation, energy & growth.
Once stakeholders were satisfied with the outcome, I then created a basic brand guidelines document.
Webpage in Webflow
As a next step, I defined all the different colors & typography as styles in Webflow.
I then started with creation of Hero section, followed by 'how it works', 'pricing plans', 'customers quotes' etc.
Hero section
Once the first drafts of a Hero section have been ready, I shared them again via Miro and asked for feedback.
After asking stakeholders and existing customers for feedback, we figured out that version 6 with a clear, prominent statement has been the favorite one.
How did it look like vs now?
After we defined the Hero section, I then iterated on all the other sections of the homepage.
Taking as a basis the sections of the existing webpage (displayed below), I tried to revamp them so that they feel more modern, powerful & inspiring.
The result can be found below.
After desktop version has been ready, I also focused on making it work for tablets and mobile phones. Click here to watch a video of a final outcome for different device sizes.
Customers feedback
Feedback of a customer after the first drafts of brand guidelines were ready.
