I’m In Love With My Genius: A Tech Perspective on Web Apps

The two ruling platforms – iOS and Android – have kept the process of submitting an app for approval for each device and platform a uniquely irritating experience. For example, Apple requires all apps be designed in Xcode and submitted for approval through the stringent guidelines of the App Store. Just as platforms have set up guidelines for how to create and distribute native applications, they have also set barriers for users who want to save web applications to their phone (Android’s Jellybean does not offer the ability to track when a user saves a bookmark to their desktop, giving an inability to have an install screen like on an iOS device).

These challenges make the strategic decision of how to create a product tricky. Each platform has its own particular interaction patterns and stylistic characters, and creating native applications allows an experience to preserve some of those unique qualities, like incorporating Android’s back button or iOS push notifications. But as technology becomes more and more flexible, and user’s expectations shift, moving service experiences from native apps to web apps is becoming the best comparable tool to unify experiences for all users and access a wider audience.

Part of the elegance of web apps is the ability to streamline the process of updating content without worrying about becoming outdated on multiple browsers and operating systems. Additionally, access to content is separated from the device itself, allowing users to access information without downloading anything to their device. There is also something to be said about stronger analytics.

BMW & Big Spaceship

When Big Spaceship began the BMW Genius App project, our first concern was to make sure the project plan allowed us to do it the right way. Our goal was to make an app that was designed for elegance and usability instead of a specific operating system or device, with the understanding of some key conditional interactions based on OS. Using bleeding-edge technology, we are able to provide BMW with a solution that was simple to update and fitting across devices.

Working Agile-ish: Adapting a New Process to Tech and Design

BMW Genius app was a unique attempt at an “Agile-ish” process at Big Spaceship. While not truly Agile, our project framework borrowed from its collaboration and iteration tools, shifting technology and development from a final building stage to an integrated component of the design process. From pitch to detailed development, a representative from each discipline was accounted for. In contrast to siloed disciplines tackling features separately in a Waterfall process, the Agile-ish approach was flexible and able to tackle holistic challenges before they became problems. From initial whiteboard sessions that established navigational structure to real-time conversations about technological constraints, the team was able to move the project along quickly and with common understanding internally and with our BMW partners.

Our Agile-ish process opened the door for high-fidelity rapid prototyping. At Big Spaceship, we believe there is value in prototyping early and often. The ability to test and iterate on navigation and high-level structure shortly after whiteboarding can ensure that the product works. Additionally, technologists are able to create a high level framework to build on in preparation for detailed development.

Trust your user testing.

It’s important to define clear goals and some rough time-oriented objectives in order to keep the project on track from whiteboarding to QA. We ran into a dilemma of almost reorganizing the way a BMW owner would find a car, not because users struggled during user testing, but we started second guessing our designs from iterating and prototyping. It’s critical to note the difference between interaction design flaws and playing with something too much. This can turn into a pitfall of constant iterating, pushing timelines and some extremely late nights.

Don’t Forget the Details

But what about the unique details that come from a native app? We wanted the BMW Genius App to feel native in a way that many web apps are unable to. To do that, we created the Genius API with our agile backend partner Williams Forrest, who curated our content from a variety of BMW outlets into a custom Genius CMS. We also decided to use the javascript library ‘Backbone’ to handle the Genius API and store (via HTML local storage) the variables and features with a custom lightweight Model View Controller layer on top to achieve scalability and organization. This means a BMW Genius app user would receive a custom experience upon each visit to the app based on the car they initially saved. As we developed the app along these guidelines, local storage along with template caching became our best friend, lover and soulmate. We were able to save and access cars quickly, and recent and undiscovered features would update through a locally stored rest API based on use.

The Big Spaceship team wanted BMW Genius to feel customized and accelerated. More importantly, we did not want BMW Genius to feel like a website. The front-end was a challenge because of a high number of transitions, and with a luxury brand like BMW, the front-end needed to feel truly polished. We developed custom, lightweight algorithms and CSS3 browser accelerated transitions to create the optimal front end experience rather than slow, memory-hogging animation libraries. This approach made the app fast and light, allowing for the web app to have the complexity and feeling of structure of a native app. When users forget that they did not purchase BMW Genius in the App Store, we have accomplished our goal.

Web apps have opened the door to a new kind of lightweight, flexible site that can mimic native applications or stand alone as unique experience on the web. The BMW Genius App was an opportunity to introduce our process to BMW and push the envelope with a robust web app that will continue to grow. Taking advantage of improved tools and workstreams can make web apps not only an economical alternative to designing multiple products for multiple platforms, but can offer users a clean, unified experience no matter what device they use.

What's Next?

Context-aware web design can take…


A genius in your pocket