Creating affective mobile experiences

Nick Tomkin
Alpha Centauri
Published in
3 min readJan 19, 2012

When we started to think about building the mobile version of our site, we went with the basics. While designing a user experience, we always try to put ourselves in the shoes of the user. What would really frustrate us if we were just trying to get a phone number? Or an address to plop into our GPS? Bottlenecks between you and your client are never good.

The mobile version of our site trims the fat, so to speak, and allows the user to quickly find pertinent information without the frustration of zooming and swiping to get to what they need.

Menu

Our menu is condensed in the mobile version, but with one click, you have quick access to our phone number. Want to call us? Tap our phone number in the menu and you’re done!

GPS-Enabled Directions

Let’s say you’re on your way to Orbital, but you are so excited to get started on your project that you completely forget to write down our address. No problem, just visit our contact page on your GPS-enabled mobile device!

This great feature was made possible by an incredibly well-crafted API by Google. The Google Maps and Directions API provide mapping and coordinates routing. The coordinates are provided to Directions API through HTML5’s Geolocation API.

Just click on “Show me how to get to Orbital”. You’ll then be asked if our site can access your current location based on your coordinates. Note: We never store your location coordinates, or any other personally identifiable information.

Once you’ve allowed the site to access your location, a route between you and Orbital will be shown. We’re the O and you’re the smiley face. You look pretty happy!

When you’re close, the focus switches from road directions to helping you find our office on foot.

Well, you’re here! When the happy face overlaps the Orbital logo, you might be in the right place!

In Conclusion

We hope this little feature will help our clients find their way, but most of all, we hope it will offer an insight as to what is possible with a mobile app or mobile site.

“Colorful lines of code on a MacBook screen” by Caspar Rubin on Unsplash

--

--