Vane: A case study
When I returned to redesign Vane, a lot of things had changed since I released the first version (when it was called iWeather) in the whole mobile application section. Phones had gotten bigger and more powerful, the screens have gotten taller, the processors have gotten faster, storage has increased in capacity and so on. So in order to keep a weather app relevant in 2018, I had to start from the ground up. Rewriting every line of code and rethinking everything I knew about weather apps. This is a case study of the rethink.
The first version of Vane was a barebones weather app, written in HTML, CSS and JavaScript and wrapped in a native wrapper and distributed for iOS and Android. Even for such a poorly built app, it was well received, with over 30,000 downloads overall. Sadly, the app was neglected for a long time until I revisited it a few years later to realise that Apple had put a notice everytime you launched the app that the app would work very slowly and that the developer needs to recompile a new binary of the app. This put me down and I got down to rewriting the app, in Swift, the brand new programming language by Apple. But this was merely a rewrite of the code and the design remained pretty much the same, growing older by the day.
When I finally got down to a fresh design, the iPhone X had already been released, with its extra tall, edge-to-edge display that oozed awesomeness, along with other phones like the Samsung S8, Google Pixel 2 XL and the One Plus 5. This brought me to think about using a user interface based on a scrollview of cards. This brought a bunch of advantages to the table:
- The UI didn’t depend on screen size or aspect ratios. Content would flow seamlesssly along the page and would work just as well on tablets.
- Similar content could be grouped together and dissimilar content put in other cards.
- Cards could be used as a collection view, to show a collection of repeating content one after the other.
- The UI could be modular, with each card being designed independently of the other. It would also help the code become more modular with each card being subclassed, but this was a happy byproduct.
So with the UI paradigm set, I had to think about the backend. With a lot of weather API providers closing down, not giving enough data or having high pricing, I decided to go with Dark Sky. They have an amazing API, at really good pricing and have tons of data that could be used to populate the app.
I also had to think about other features that are pretty much standard for apps released in 2018 —
- A widget for iOS that showed a bite sized version of the weather at your current location.
- Out with background images and in with background videos. With videos becoming so prevalent, to the point that they are all you see when scrolling through your Facebook news feed, it was time to incorporate the dynamic effect that videos bring to the app. So we scoured the web for beatiful videos that really bring your weather to life everytime you open the app to check up on the weather.
Both of these were implemented, and with the help of my friend Ashiq Muhammed, who rewrote Vane for Android using Facebook’s React Native library, we are releasing the redesigned version of Vane for iOS and Android. I do hope you will download it and give it a shot. And if you enjoyed it, please do rate it on the app store. It will go a long way in supporting our work, cheers!
