Hannah Mananguit

SIKAD

Optimized navigation for cyclists

SIKAD

Optimized navigation for cyclists

Project Type

Conceptual app

Timeline

January-March 2023

Role

Product Designer

Tools

Figma
Photoshop

Overview

Sikad is a mobile app concept designed to help cyclists navigate efficiently and discover safer, cyclist-friendly routes. It addresses key pain points in urban cycling by providing better route planning, real-time navigation, and insights tailored to riders' needs.

Context

Despite the rise in cycling, Filipino cyclists face persistent challenges:

Lack of proper infrastructure – Limited bike lanes and unsafe roads.

Lack of proper infrastructure – Limited bike lanes and unsafe roads.

Inefficient route planning – No dedicated platform for cyclists to map their rides.

Inefficient route planning – No dedicated platform for cyclists to map their rides.

Additionally, I conducted interviews with two cyclists on their bike usage, their experience, and the challenges they face. Some notable findings are:

The Problem

From user research, the core question became:

💡 How can we help cyclists navigate efficiently to enhance their daily rides and overall lifestyle?

This led to the creation of three key personas:

Christian, a student, needs to effectively navigate routes in and out of the city in order to experience a smooth sailing bike ride for his essential and recreational activities.

Christian, a student, needs to effectively navigate routes in and out of the city in order to experience a smooth sailing bike ride for his essential and recreational activities.

Jackie, a newbie cyclist, needs to access beginner-friendly routes in order to help her navigate to scenic destinations.

Jackie, a newbie cyclist, needs to access beginner-friendly routes in order to help her navigate to scenic destinations.

Danny, an experienced bike enthusiast, needs to record his daily bike sessions in order to monitor his exercise activity.

Danny, an experienced bike enthusiast, needs to record his daily bike sessions in order to monitor his exercise activity.

Solution

Based on user research and a competitive analysis of cycling (Strava, Komoot) and navigation apps (Waze), I identified three key directions for Sikad:

Easy-to-use navigation – An intuitive map for effortless route search and navigation.

Community-powered insights – A crowdsourced system for real-time route updates.
Personalized experience – Features that adapt to different cycling styles and needs.

Prioritization Matrix

Information architecture
To build the structure for the app, I created an information architecture with four main navigation: map, routes, community, and profile

User flow
Using the information architecture as guide, I was able to create a user flow of a cyclist who is planning a route on the app.

Design progression
And after creating sketches, wireframes, and countless iterations, I ended up with the hi-fi screen on the right. One of my main goals here was to maximize the map view and minimize distractions.

UI Kit

Prototype

Login / Sign up / Onboarding

Find a route

Cyclists can simply search for their destination and choose among the different types of routes available.

Save a selected route

After selecting a desired route, cyclists may opt to save the route for later.

Navigate with ease

Conversely, cyclists may start navigating their chosen route. After which, they can save the ride.

Learnings

Cyclists need more than just routes—they need context.
A map alone isn’t enough. Factors like road safety, incline difficulty, and bike-friendliness influence whether a route is actually usable.
Design should anticipate hesitation.
Some riders, especially beginners, hesitate to explore new routes due to uncertainty. Features like real rider reviews, estimated effort levels, and checkpoints can help build confidence.
Efficiency and enjoyment aren’t always the same.
Not all riders prioritize speed—some may prefer scenic or less crowded paths. Offering route options beyond just "fastest" could enhance the overall experience.

Up Next

FLYING TIGERS EXPRESS

Revamped Booking Platform for Interisland Delivery

Redesigned the Flying Tigers Express booking app to simplify workflows and improve navigation, resulting in 200% increase in bookings.

FLYING TIGERS EXPRESS

Revamped Booking Platform for Interisland Delivery

Redesigned the Flying Tigers Express booking app to simplify workflows and improve navigation, resulting in 200% increase in bookings.

NATIONAL MUSEUM OF THE PHILIPPINES

Enhanced Digital Experience for the National Museum

A user-focused redesign of the National Museum of the Philippines website enhancing cultural accessibility and visitor engagement.

NATIONAL MUSEUM OF THE PHILIPPINES

Enhanced Digital Experience for the National Museum

A user-focused redesign of the National Museum of the Philippines website enhancing cultural accessibility and visitor engagement.

Thanks for stopping by!

Let's get in touch.

hnmananguit@gmail.com

Resume

Thanks for stopping by!

Let's get in touch.

hnmananguit@gmail.com

Resume

Thanks for stopping by!

Let's get in touch.

hnmananguit@gmail.com

Resume

Thanks for stopping by!

Let's get in touch.

hnmananguit@gmail.com

Resume

SIKAD

Optimized navigation for cyclists

SIKAD

Optimized navigation for cyclists

Project Type

Conceptual app

Conceptual app

Timeline

January-March 2023

Role

Product Designer

Tools

FigmaPhotoshop

Additionally, I conducted interviews with two cyclists on their bike usage, their experience, and the challenges they face. Some notable findings are:

Additionally, I conducted interviews with two cyclists on their bike usage, their experience, and the challenges they face. Some notable findings are:

Christian, a student, needs to effectively navigate routes in and out of the city in order to experience a smooth sailing bike ride for his essential and recreational activities.

Christian, a student, needs to effectively navigate routes in and out of the city in order to experience a smooth sailing bike ride for his essential and recreational activities.

Jackie, a newbie cyclist, needs to access beginner-friendly routes in order to help her navigate to scenic destinations.

Jackie, a newbie cyclist, needs to access beginner-friendly routes in order to help her navigate to scenic destinations.

Based on user research and a competitive analysis of cycling (Strava, Komoot) and navigation apps (Waze), I identified three key directions for Sikad:

Based on user research and a competitive analysis of cycling (Strava, Komoot) and navigation apps (Waze), I identified three key directions for Sikad:

Easy-to-use navigation – An intuitive map for effortless route search and navigation.

Community-powered insights – A crowdsourced system for real-time route updates.

Personalized experience – Features that adapt to different cycling styles and needs.

Prioritization Matrix

Prioritization Matrix

Information architectureTo build the structure for the app, I created an information architecture with four main navigation: map, routes, community, and profile

Information architectureTo build the structure for the app, I created an information architecture with four main navigation: map, routes, community, and profile

User flowUsing the information architecture as guide, I was able to create a user flow of a cyclist who is planning a route on the app.

User flowUsing the information architecture as guide, I was able to create a user flow of a cyclist who is planning a route on the app.

Design progressionAnd after creating sketches, wireframes, and countless iterations, I ended up with the hi-fi screen on the right. One of my main goals here was to maximize the map view and minimize distractions.

Design progressionAnd after creating sketches, wireframes, and countless iterations, I ended up with the hi-fi screen on the right. One of my main goals here was to maximize the map view and minimize distractions.

UI Kit

Prototype

Login / Sign up / Onboarding

Login / Sign up / Onboarding

Find a route

Cyclists can simply search for their destination and choose among the different types of routes available.

Save a selected route

After selecting a desired route, cyclists may opt to save the route for later.

Navigate with ease

Conversely, cyclists may start navigating their chosen route. After which, they can save the ride.

FLYING TIGERS EXPRESS

Revamped Booking Platform for Interisland Delivery

Revamped Booking Platform for Interisland Delivery

Redesigned the Flying Tigers Express booking app to simplify workflows and improve navigation, resulting in 200% increase in bookings.

FLYING TIGERS EXPRESS

Revamped Booking Platform for Interisland Delivery

Redesigned the Flying Tigers Express booking app to simplify workflows and improve navigation, resulting in 200% increase in bookings.

NATIONAL MUSEUM OF THE PHILIPPINES

Enhanced Digital Experience for the National Museum

Enhanced Digital Experience for the National Museum

A user-focused redesign of the National Museum of the Philippines website enhancing cultural accessibility and visitor engagement.

NATIONAL MUSEUM OF THE PHILIPPINES

Enhanced Digital Experience for the National Museum

A user-focused redesign of the National Museum of the Philippines website enhancing cultural accessibility and visitor engagement.

Figma
Photoshop

Information architecture
To build the structure for the app, I created an information architecture with four main navigation: map, routes, community, and profile

Information architecture
To build the structure for the app, I created an information architecture with four main navigation: map, routes, community, and profile

User flow
Using the information architecture as guide, I was able to create a user flow of a cyclist who is planning a route on the app.

User flow
Using the information architecture as guide, I was able to create a user flow of a cyclist who is planning a route on the app.

Design progression
And after creating sketches, wireframes, and countless iterations, I ended up with the hi-fi screen on the right. One of my main goals here was to maximize the map view and minimize distractions.

Design progression
And after creating sketches, wireframes, and countless iterations, I ended up with the hi-fi screen on the right. One of my main goals here was to maximize the map view and minimize distractions.