-
MY ROLE: UX Design, UI Design, Prototyping, User Research, User Testing.
-
METHODS: Competitive Analysis, Desk Research, Contextual Inquiry, User Interviews, Usability Testing.
-
TECHNOLOGY: Ionic Framework.
-
DELIVERABLES: Responsive Admin UI, Cross-device mobile app.
1. Empathize: Getting to Know the Problem
When I first heard about indoor positioning, I thought it was just like GPS, but indoors—no big deal, right? Well, I was so wrong. The client’s vision was much more exciting:
-
Real-time tracking of multiple people inside a venue.
-
Adding social features like messaging, friend requests, and even group games.
This felt like something out of a sci-fi movie, so I dove deep into research. That’s when I discovered IndoorAtlas, a platform that uses geomagnetic fields for indoor tracking. It even offered tools for deploying custom apps for specific venues.
We pitched the idea of a Control Panel to help venue owners monitor foot traffic in real time, and the client loved it.
Workshops, brainstorming, and user research sessions helped us shape the app’s identity. We called it inFi, inspired by “indoor” + “fidelity.”
And since the client was a big FC Bayern fan, the very first non-negotiable request was that we used their iconic colors for the branding, while the rest was inspired by maps and navigation softwares iconography.
Below you can check the process from pencil to vector, and some color tests:
2. Define & Ideate: Coming Up with Solutions
We wanted inFi to be the ultimate companion for anyone exploring airports, museums, or conference halls for the first time. To get there, we focused on three big things:
Building Personas & User Flows
We imagined how different people would use inFi and sketched out their journeys, like:
-
Finding their way using indoor maps.
-
Checking into venues.
-
Exploring points of interest (POIs).
-
Seeing nearby users and connecting with them.
Handling Privacy the Right Way
Privacy was a huge concern. We didn’t want it to feel like a creepy “Big Brother” app where admins could spy on everyone. Instead, I came up with a mutual visibility switch: you can only see someone’s location if they’ve shared theirs with you. It created trust and gave users control.
Keeping Admins Happy Too
For venue admins, we designed tools to make their lives easier, like:
-
Sending bulk messages.
-
Viewing real-time traffic on floor plans.
This way, we made sure both users and admins got what they needed.
3. Prototype: Bringing Ideas to Life
Here’s where the fun really started—turning our ideas into something we could actually test.
Sketching It Out
I started with low-fi wireframes, keeping everything simple. This let us focus on how things worked, not just how they looked. Mapping out interactions and catching errors early saved us tons of time later.
Teaming Up with Developers
Since we were using IndoorAtlas, we chose the Ionic Framework for the app—it’s perfect for building cross-platform solutions. For the admin side, we went with the Foundation Framework to keep things stable and responsive.
Testing the Prototype
Using Sketch and InVision, I created clickable prototypes. We handed them to stakeholders to play around with on their devices. The feedback was super helpful for refining the design and fixing any hiccups.
4. Test: Making Sure It Works for Real People
User testing was key to making inFi something people would actually want to use. Here’s how we approached it:
Usability Testing
We brought in people to test the app in realistic scenarios, like navigating an airport or exploring a museum. Here’s what we learned:
-
Navigation was mostly intuitive, but first-time users needed clearer onboarding.
-
The mutual visibility switch was a hit—it made people feel in control and safe.
-
Fun touches like the proximity compass made the app feel more engaging.
A/B Testing
We also tested different versions of key features, like how to guide users to Points of Interest (POIs). The results? Minimalist cues and helpful text worked best, boosting success rates by 23%.
Iterating on Feedback
We took everything we learned and made changes. For example:
-
Adjusting font sizes to make them readable in dimly lit venues.
-
Adding tooltips to make admin features easier to learn.
5. Design: Making it Beautiful and Easy to Use
inFi was a tricky balance—it had to be both a navigation tool and a social app.
Gamifying the Experience
We added playful touches to make it fun, like:
-
Proximity compasses for nearby users.
-
Navigation elements inspired by dating apps (yes, swiping works for more than just matchmaking!).
Keeping It Simple
I followed Steve Krug’s golden rule: “Don’t make me think.” Everything—from colors to button placement—was designed to feel intuitive. If you didn’t have to stop and think, I knew I did my job right.
Polishing the Details
We took inspiration from FPS games to offer users familiar views, like:
-
First-person perspectives.
-
Bird’s-eye layouts.
This mix of familiarity and innovation made the app feel just right.
6. Implement: Helping Developers Get It Right
Building a Style Guide
To keep everyone on the same page, I documented:
-
Components and their states.
-
Typography and color hierarchies.
This worked great for our team, but when the client wanted to scale inFi globally, we needed something even more robust.
Introducing Interactive Guidelines
Thanks to an open-source plugin, I created an HTML-based style guide. Developers could see every detail—sizes, colors, interactions—all in one place. It saved tons of time and reduced mistakes.
Final Thoughts
The journey to build inFi wasn’t just about creating a navigation app—it was about designing something that connects people and makes exploring fun.
By focusing on user needs, testing our ideas, and collaborating closely, we turned a futuristic vision into something practical and user-friendly.
Check out the interactive prototype and final designs to see how inFi brings people together in new and exciting ways!
