The client
Hop In is a EU co-funded Finnish startup that connects users with recreational services like sports clubs and other hobby activities near them. The company was in the pre-launch stage at the time of this project.
Project goal
Build a company website to establish an online presence and showcase the company to potential investors and partners.
Tools
The website was designed from start to finish using Webflow.My role
I was the sole web designer on the project and collaborated directly with the company founder/CEO.
Design stages
Collaborating with the client
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 outlined as below:
- 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
Foundational design
I chose Webflow as the development platform because of its convenience, high quality, and high control over the design.
I completed the first draft of the website based on materials from an early sales pitch deck and snapshots from the app prototype. These materials included preliminary brand colours, logo, and text that I used as a basis for the site copy.
The basic outline of the website was built around the following pages:
- Homepage: introduce the application, link to the app stores, showcase app features
- About us: include basic information about the company and the service for users
- To service providers: include basic information about the company and the service for service providers
- Contact: provide contact details to customer service
- T&Cs and other formal documents: include a separate section that's accessible through the footer that hosts all formal documentation
Visual design
The breadth of the website content was somewhat restrained by the available material, which put more emphasis on visual design. Since I was learning Webflow for the first time, I built the website by exploring the platform instead of using a design tool like Figma. Much of the final design was the result of testing different options and taking inspiration from existing websites.
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.
Sales pitch deck showing preliminary brand colours and logo
Mockup and Images that showcase the app features
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.
Background images with brand coloufcr tint overlaid
Homepage design
The about us, service providers, and contact pages had the simple function of providing information about the service. I therefore opted for a simple, mobile friendly layout of a single center-aligned text column for these pages.
The homepage, however, was less text-heavy and needed to be more visually engaging. I decided to separate into three main sections: hero section, features section, and a call-to-action section.
The hero section would include a device mockup of the mobile app, the company logo and slogan and a button to direct the visitor to download the app.
The features section would showcase the app features in three points using snapshots from the app prototype and text to explain it.
The call-to-action section would invite the user to either be directed to the app download page or to the contact page.
Incorporating new brand materials
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.
Final screens
Homepage on desktop
About Us page responsive design (desktop, tablet and mobile)
Thanks for reading!