Arrow icon

Happy Pedal

Interactive Map

This project demonstrates my proficiency in creating brand identities and intuitive interfaces, optimizing user experience, project management skills, and executing seamless development processes.

Launch Website

Objectives

Create an interactive map for a specific location, catering to the unique needs of the target audience. Ensure seamless navigation, easy access to points of interest, and enhance user experience.

Challenges

Navigating our daily lives heavily relies on maps to guide us to cities, campuses, buildings, and beyond. To design and to develop an interactive, non-linear map that seamlessly assists people in finding their destinations with speed and ease is a challenge.

Goals

  • Interactive map
  • User-centric interface
  • Content creation
  • Brand design
  • Identifying a unique target audience

Solutions

Design and develop an interactive map specifically tailored for creative enthusiasts and urban bikers. The map should present information in the most intuitive way possible. Users should be able to filter the category of their interest and view parking spots, as well as access additional information about the spots that interest them.

Design Process

User Persona

Inglewood is known for its bike-friendly neighborhood, with ample parking lots along its main and side streets. It offers easy access to various bike trails, adding to its charm as a haven for local cafes, art galleries, and unique shops for artists and creative people.

Branding

The Happy Pedal logo merges creativity with functionality, incorporating a location pin icon with a bike inside. The location pin suggests the mapping aspect of the app, while the bike icon captures the essence of the target audience—bike enthusiasts. This combination cleverly reflects both navigation and the biking experience.

The logo's green color represents eco-friendliness and sustainability. Salmon pink, turquoise blue, and brown are the secondary colors for creativity, innovation, and adventure. These colors are used in the design's illustrations and icons to reinforce the brand values.

Wireframes & Mockups

A simple and clean layout was designed to draw attention to the map. To make it easier for users to navigate. A filter by category was added, allowing them to quickly find cafes, shops, galleries, and bike racks on the map. Each pin on the map is interactive, providing users access to detailed information about the location, including a photo and video gallery. Likewise, direct links to the official websites and social media pages of locations are included on the page.

Final Thoughts

Initially planning manual coding, the project shifted to Webflow due to time and resource constraints. Despite the single-page limitation, a successful solution was found by creating a pop-up design for location details, improving overall user experience and site interaction.

Launch Website

See more projects