Windhunters is a website that provides real time weather forecasts to kitesurfers and windsurfers in the Republic of South Africa. The data is taken from a variety of weather stations at different beaches. Users can use the application in their mobile devices.
In August, 2012 Stephen Young, an entrepreneur from Capetown, published a job with very detailed specifications. Stephen wanted to grow the project in stages, develop comprehensive unit tests and follow other methods which would allow him to get a high-quality product. There was even a proof of concept attached to the job - a demo application developed in C# by Stephen personally.
Thus, the job was well thought out. The customer was confident that his idea was able to work. At the same time he had a clear vision of the best technologies that could be used. In particular, he wanted the application to be developed in Ruby on Rails and deployed to a Heroku server because he believed that Heroku service could facilitate maintenance of a few different application versions.
The description looked like it was created specifically for Anadea team. We liked the idea as well as the customer's attitude. After a few exchanges of emails we met with Stephen in Skype, talked a little and "shook hands".
The project was started with a team of two people: a back-end engineer Maxim Tsaplin and a front-end engineer Anton Borsch. This solid team proved to be very effective. It never changed since the first day of work until the day the Windhunters project was released to the public.
The application also needed a clever design and a designer Maxim Dovbenko was assigned to the project. His task was to create a modern attractive application style which had to look splendid on desktop computers as well as in mobile browsers.
Mobile-first responsive design was a part of the requirements provided by Stephen. Since the application was targeted at mobiles, the screen mockups had to be done, first and foremost, in the mobile format. This way they would look more natural than if they were designed after the full-screen mockups. Also, designing for mobiles approach supposed to make the designer focus on keeping the screens simple and stop him from adding unnecessary controls.
After the small-sized screens were ready, we were to draw graphic mockups for the same features as they would look on a big screen. The small-sized pages were to lead the engineers the right way.
While we used to create responsive websites before, the mobile-first approach was new to us. The designers followed the general rules and created graphic mockups of unique style which represented logic of the application on both platforms.
As the main front-end engineer, Anton Borsch installed the responsive design and verified its work on all platforms. He gathered information about the requested front-end approach, reviewed it thoroughly and put it into practice.
After the project was completed, he expressed his thoughts about the mobile-first method the following way:
"The idea is gorgeous! It helps one to focus on the right things. He can envision the front-end clearly when going from small-sized pages to big-sized ones. I could feel how the approach was making usability better when we followed the rules. Furthermore, the work would turn less effective whenever we tried to deviate from the strategy. My personal experience in Windhunters proves that the idea really works. And I know that many people start using it in their projects".
The engineers applied some other patterns common to responsive design development methods. Pages of Windhunters contained many icons which represented weather factors and some other things. A set of special HTML characters was created and saved in a special font. Then we integrated this font into the website in order to save some traffic and make the pages look the same way on mobiles and desktops.
This pattern helped to make the pages look better and improve user experience. The special HTML characters remain distinct on small screens as well as on big ones. They look good even if a user zooms in on the webpage.
Windhunters project was pretty straightforward, but it still had to be done accurately and precisely to guarantee that users will be receiving correct data right in time. The service was to get weather factors, process them and show the featured data in real time. The data had to be updated in browsers and mobiles every five minutes, hence the server had to send updates without any delays. The weather forecasts are taken from two servers - wunderground.com and worldweatheronline.com - while the current weather is pulled from a number of private servers at the beaches.
While doing the job the engineers faced several tasks that required smart solutions. The APIs of all services return XML documents with a lot of information. The engineers created a variety of background processing procedures that were to keep the information up-to-date. While doing this, they came across the amazing fact that feeds with the day-time weather had a structure different from feeds with the night-time weather.
They took care of both formats and parsed them separately. The background procedures in Windhunters were designed to process day-time feeds as well as night-time documents.
After this processing the front-end had to be refreshed in order to show the combined information. The engineers found the common way to refresh pages inefficient because of a large amount of queries that could result in a server overload. In order to avoid unnecessary AJAX-queries, it was decided to take advantages of the PubNub.com. This service sends push notifications to the clients and removes extra load from the server.
After these tasks were solved, the application was prepared for a big number of live users. They could register using their Facebook account (OmniAuth authentication framework was used), select a preferred payment plan and start following the weather. To be notified about any changes, they could select beaches they were interested in and subscribe to notifications.
The application has several payment plans (a free payment plan with a shortened set of features has been made as well). The payments are processed by the 2Checkout payment gateway. The engineers installed a state machine to safely control the payment process at all steps. This way they ensured that no issues with payments would occur because of a broken connection or another error of the kind.
At the moment of release (December 12, 2012), the Windhunters project had the following stack of technologies:
- Ruby 1.9;
- Rails 3.2.7;
- MongoDB 2.4 (we used Mongoid as an ORM);
- HAML and SCSS in the front-end.
After five months of working together Stephen said:
"I have been involved with software development for 13 years and Anadea has been by far the best experience I have had with any vendor. Their developers are extremely knowledgeable, their designers are great and all in all the experience working with them has been fantastic. I can recommend them to anybody who needs a modern, responsive web application".
The Windhunters project was released in December 2012 and started gaining its users. All ideas and technical input provided by Stephen proved to be efficient. They helped us to get a useful experience. We wish the project to win the market among all competitors.