Navigacio: an app for traveling wizards

How many times has Harry Potter been in danger when flying on his broomstick?

If you ever watched Harry Potter, you might have noticed how convenient it is to have a flying broomstick. Just hop on & fly. However, I think there could be some dangers in flying recklessly without knowing what might be in your way.

What if there’s an app that could help wizards choose the best route, and have a safe flight — on a broomstick?

Navigacio is an app to help traveling wizard to navigate safely, and be aware of risks that are in the vicinity.

This is a weekend project; a fictional case study, mainly to improve my visual & interaction design skills. The context won’t make sense at all… Unless you love Harry Potter.


Design Process

Here is the design process used in this case study.

Note that Step 5: Validate is not applicable since I couldn’t find any wizards to do some testing. Damn those wizards!

Design process used for this Case Study — excluding step 5.

1. Observe

Problem Assumption

As a wizard, a broomstick is one of the most convenient vehicle to travel with. However, there are risks in flying with broomsticks. Here are my initial thoughts about potential problems:

  • When flying: Flying animals, bad weather, drones & air vehicles, dementors & other flying magical creatures.
  • Upon landing & departing: How can wizards fly without being seen by humans — I mean, muggles?

2. Define

Validation

As this is not a “real” problem, there are not much way to validate this assumption (can’t do interviews / no data). I mostly search for references from Harry Potter Wiki, and the movies. So, I guess this counts as a qualitative research.

Pain Points

  • Bad weather: It’s pretty obvious. If a broomstick (or the person riding it) got struck by lightning, they would most likely fall. See the video below.
  • Visibility: Harry came across dementors because of the bad weather & low visibility. They also don’t have navigation systems like an airplane, that can go through this kind of visibility level.
A clip from The Prisoner of Azkaban.
  • Creatures & Flying Things: Dementors, obviously. Dragons maybe, from the Goblet of Fire movie. But a flock of migrating birds could also be a problem. And, muggles these days use drones a lot don’t they?
Imagine just chillin, playing Quidditch, then got chased by a dragon. Right? Source
  • Potential of being seen by muggles: Fortunately they already have a way to deal with this magically — Disillusionment Charm.

So, with those problems in mind, I moved on to the next phase.

3. Ideate

Concept Model

I use concept model to ideate about what would be on the app, who are the users, and what can they do? Here’s the result:

Concept model

Paper Sketches

I always use paper sketches to gather and scribble quick ideas. The user flow & a couple of rough sketches were made on paper. On this stage, I decided to create only the search & navigate flow.

Rough sketches

4. Prototype

The prototyping phase is divided into three steps: Wireframing, User Interface Design, and Interaction Design.

Wireframing

The user flow and low-fidelity wireframes were made on Sketch. I also wrote down every interaction on the user flow.

Ok I lied, I didn’t create any user flows at all. I wish I did. Is there any spell for this?

User Interface Design

There are a few steps taken in the UI process:

  • First, I gather visual references from various sources, like dribbble, behance, etc.
  • Second, I create the base components for my design system using the atomic design concept. In this case, the very basic (or atoms) components are: colors, icons, and card bases. I am also using the iOS 11 Atomic UI Kit made by Buuuk. This would make the UI design process quick and easy.
  • Third, I began to create other components and combine them together to make complete screens.

As you can see here, even after I finished third step, I still can’t find the perfect color combination. I wanted to have something “wizardy”, but couldn’t really find it.

What the hell am I doing???

Interaction Design

Initially, I wanted to use After Effects for the interactions, as it is my most preferred animation tool. However, as this is a project to enhance my skills further, I decided to go with Framer.

3. Result

Here’s the end result of the project:

Welcome Screen

I wanted the welcome screen to act as a “gate” that separates muggles and wizards. When muggles tap the screen, nothing will happen. On the other hand, wizards would know that this should be tapped using your wand, not your fingers.

Wand activated.

Information Screen

this screen serves as a reminder and warning for wizards. It will show them dangers around the vicinity.

Warnings about current condition.

Home

The home provides information that I think would be essential for wizards to know before they fly. There’s rain readings, visibility readings, and heat map of muggles around them.

Weather, Visibility, and Muggle conditions.

Search

Like a common search bar, there would be suggestions. There are also two types of cards that shows attractions for muggles and attractions for wizards. To be honest, I haven’t think about the differences between the two.

The card was made to slide from the top, as if it came from the search bar. And when you tap on a suggestion, it would have a nice animation that shows a change in the search bar. The idea is to give an impression of coherence, that the card is a part of the search function.

When you open the search bar, this happens.

Location Detail & Calculating Route

Well, obviously I referenced Google Maps for the location detail. When you tap on Fly Now, the app will calculate the best routes.

Calculating Routes

Route Choice & Navigation

Just like Google Maps, you can pick a route of your choice. There will also be information whether you should walk or not before you fly.

The idea was to fly in a hidden spot, as hidden as possible. However, since there is the disillusionment charm, I am pretty sure it’ll be ok even if you fly right away.

Pick a Route & Navigate Screens — oops I forgot to create the interaction for this page!

4. Conclusion

So, that’s the app. I don’t know what to conclude since it’s not based on a real problem, it’s fictional, and I can’t test it. But I love how it turned out, I even designed an Apple Watch app for it.

An Apple Watch companion app for Navigacio.

To be honest, I had doubts about this idea. Why the hell did I made this? But the main reason of the project is to improve my UI and interaction skills. And in that order, I think I did well.

What I learned

In this project I learned to write a case study, re-think about my design process, improve my visual design, and learned Framer from scratch. I learned more than I wanted to learn.

And as for the app, if you are a wizard-investor looking to create an app like this, please hit me up at briandito.p@gmail.com.

What would I do differently, knowing what I know now?

After all that I have learned in this project, I would change a couple of things.

  • Create more paper sketches of the screens. I got stuck on my first idea, and just went along with it. I didn’t try to do something out of the box.
  • Create user flows & possible interaction in the wireframe stage. I didn’t, and it slowed down my interaction design process. I had to figure it out while doing it. If I did it earlier, I would already have a to-do list of interaction.
  • I would love to try designing everything in Framer. It’s a pain to switch between sketch-framer-sketch-framer. Would it be easier had I designed everything in framer? I might try this next time.
  • I need to learn about color combinations and spend less time thinking about them. I suck at this, spent like 2–3 hours deciding about colors — just to change it to another set of colors that just pops up in my head.
  • Animate the information illustration. Definitely would make a better experience had I add some subtle animations to the illustrations.
  • The project should’ve been a weekend project, but I couldn’t make it in time. It ended up taking 2 weekends & a couple of weekdays. I fail to estimate the time it takes to finish the project.

Thanks for reading, here’s a little background…

I made a pact with a couple of friends; we wanted to improve our skills. We’ve been investing our weekends to create something every week, and I really think it helps to have a like-minded people to push you forward. I am going to continue this positive activity and maybe you should try too!

Better Experience Design

Better Experience Design is a collection of arbitrary encounters with everyday things that have given us either delightful or stressful experience.

Thanks to Nav Pawera

Briandito Priambodo

Written by

https://briandito.co - Product Designer and Writer

Better Experience Design

Better Experience Design is a collection of arbitrary encounters with everyday things that have given us either delightful or stressful experience.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade