.png)
Hop In is a EU co-funded Finnish startup launched in 2024 that connects users with sports clubs and other recreational activities near them. Their main products are their consumer and service provider facing mobile apps where users can find and manage services.
Prior to launch, they wanted to build a company website to showcase their platform to potential investors and users. I was the sole web designer on this project and built the site from start to finish using Webflow.
The specifications for the website were agreed upon with the business founder/CEO at the start of the project. The company was at a pre-launch stage at this point with the mobile application being still under development by the software development company Sarkain. The focus was on teasing the mobile app launch and showcasing the company to potential investors and partners.
The main goals for the website were to
- Highlight the main app features
- Use visual design to get people excited about the service
- Include information for business owners and service providers on how they can get started on the platform
I chose Webflow as the development platform because of its convenience, high quality, and high control over the design. This was my first project using Webflow, so I largely built the website by experimenting on the platform instead of using a design tool. Much of the final design was the result of testing different options and taking inspiration from existing websites.
Visual materials from an early sales pitch deck and snapshots from the app prototype provided the foundation for the website's design. These materials included preliminary brand colours, logo, and sales text, which I also used as a basis for the site copy.
As a starting point for the visual material, I created a device mockup and images to showcase the app features using snapshots from the prototype.
I also used stock images showcasing people doing activities as background to make the pages more lively. I overlaid brand colour tint on the images to make text legible and to make them less prominent so as not to distract from the page content.
-min.png)
After the preliminary website was finished and launched, I went back to update the visual design to align with branded visual materials that were provided by an external creative agency at a later point in time.
The main changes were that the orange and blue colour palette was made slightly more saturated and bright and the logo was changed to the speech bubble logo of the current design. I also incorporated the font they used and the graphics they had provided as a section background (see blue and orange exclamation mark graphic in the hero image of this page).
I also made slight visual improvements, like changing the front page feature section that showcases the app from a stacked vertical section into a horizontal carousel scroll.
The below screens illustrate the finalised designs. You can see the live website via the below link.Hop In website
.png)