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.
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!
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?
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.
- 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.
- 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?
- 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.
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:
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.
The prototyping phase is divided into three steps: Wireframing, User Interface Design, and Interaction Design.
The user flow and low-fidelity wireframes were made on Sketch. I also wrote down every interaction on the user flow.
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.
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.
Here’s the end result of the project:
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.
this screen serves as a reminder and warning for wizards. It will show them dangers around the vicinity.
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.
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.
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.
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.
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.
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 firstname.lastname@example.org.
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!