Biking in Bergen

Brief

Create a logo, brand identity,  A3 poster and a four-page website to promote biking in Bergen. Emphasize biking as a healthy, economical, and eco-friendly transportation option in Bergen.

The website should include a map, detailed route information, and interactive features.

The poster should feature a logo, map, and contact details.

Design Process

I conducted thorough research on cycling routes in Bergen and studied competitor websites for inspiration. Three notable sources were Visit Norway, Bike Map, and Trek Bikes. After gathering information and inspiration, I created target market personas to guide my design decisions, ensuring a focus on environmentally friendly, economical, and healthy transportation options for individuals seeking alternatives to cars.
After testing the website’s speed and performance using Page Speed Insight, optimization was performed by installing the SG Optimizer plugin to enable dynamic caching, enabling Gzip compression, and optimizing images by using WebP files. These improvements resulted in a significant enhancement in the website’s loading speed and performance, providing a better user experience.

Picture 1: Target market persona 1

Picture 2: Target market persona 2

Picture 3: Poser design

Picture 4-6: SEO optimizing

Logo Development

To create a modern and cycling-focused logo, I chose a bold and legible sans-serif font. After exploring various typography options, I settled on a design that evoked the image of bicycle handles. For the logo’s color, I decided on a deep blue shade to capture the essence of the brand.

Mood board

I carefully selected a style that would resonate with the target audience, ensuring that it harmonizes with the colors specified in the brand style sheet. This approach aims to capture their attention through visually appealing images.

Brand style sheet

The brand style guide for Biking in Bergen carefully selected a color palette of pink, blues, and white.

Colours: Pink represents positivity and playfulness, blue signifies trust and professionalism, and white provides balance and simplicity. 

The logo was designed to be simple and modern, focusing on the cycling aspect, with a bold and easy-to-read sans-serif font.

Typography: I chose the Poppins font, a clean and modern sans-serif, for headings and body text to maintain consistency across design elements.

This process established a strong brand identity with consistent design elements for easy recognition and engagement across platforms.

Poster Design

For the poster design, I created an illustration by capturing a relevant portion of the Bergen map from Google Maps and tracing it in Adobe Illustrator. I customized the map and added the four cycling destinations. After experimenting with layouts, I refined the design until it accurately represented Biking in Bergen.

Wireframing

I created a low-fidelity structure using pen and paper to organize the content and establish an intuitive information architecture. I designed dynamic layouts, incorporated attention-grabbing images and illustrations, and followed accessibility guidelines. The brand guidelines were utilized to maintain a consistent look and feel throughout the website design.

Final design

For this assignment, I utilized WordPress with Elementor Pro plugin. Using the wireframe as reference, I designed the website, incorporating interactive elements, a map, and route information. The homepage focuses on showcasing the brand and encouraging users to explore cycling in Bergen as they scroll down. I implemented a parallax effect using Z-index and made the moon’s background transparent with custom CSS. Motion effects were added for a dynamic touch. Strategically placed CTAs prompt users to explore routes and book tours, while customer reviews build trust. A clear and user-friendly navigation menu ensures easy access to all pages and improves customer retention on the website.

Timelaps of the Pralax design
Click on the picture above to watch it.

Timelaps

I created a video timelapse demonstrating the implementation of the parallax effect on the website. By clicking on the picture, viewers can access the video and witness the dynamic design process. The timelapse showcases the use of Z-index for the parallax effect and the incorporation of a transparent moon background using custom CSS. It offers a behind-the-scenes look at the creative process and the interactive elements that enhance the user experience.