BULLDOGS CASE STUDY

WordPress website and hybrid mobile application

development for American football team

2

THE CHALLENGEThe Team

Project Manager2 WordPress DevelopersFull Stack DeveloperQA Engineer

Technologies used

While creating the website and the app for the Bulldogs team we used technologies which proved to be useful for hybrid and web development:

HTMLCSSJavaScriptWordPressWordPress Sporting Club & Centre ThemeWPML WordPress pluginIonic AngularJS Cordova Node.jsActionHero frameworkInvision

At Mobilunity we tend to work with clients from Western markets, so the opportunity to work on an interesting local project does not come by very often. We were however recently given that opportunity. Our client - the Kyiv Bulldogs - an American Football team located in Kyiv requested that we create a website and a mobile application for the team and its fans. American Football isn't a very popular sport in Ukraine, and this website and mobile app project was designed to help raise awareness locally and abroad. The website and the application were planned to serve as a sort of information portal for people directly involved in American football and fans as well, still it had to clearly manifest the identity of the Bulldogs team.

The plan was to give users the ability to:

Get acquainted with the team members and coachesFind out information about the teamFind out how to join the BulldogsFind the team’s office location on Google MapsGet informed about upcoming events and match statsCheck out the Bulldogs’ communities on social networks Read interesting blogs about the Bulldogs team and American Football in UkraineDecorate photos with the Bulldogs icons and logo (mobile application)

So far the Bulldogs website is ready, as well as the mobile application, which can be downloaded from Google Play.https://play.google.com/store/apps/details?id=com.mobilunity.bulldogs2

“Yet again our team benefited from WordPress technologies this time in creation of extraordinary multipurpose website. This helped to optimize web development, though building a responsive hybrid application was quite a challenge. Still, thanks to considerable expertise and experience of our developers that didn’t become a barrier!”

Kate, Project Manager

3

THE CASE STUDY

The Bulldogs had a clear vision for the website and the application at the very beginning of our cooperation. So the only thing our team had to do was to offer the most optimal ways of executing the client’s requests. After the business requirements were clearly stated, our PM got down to defining technical specifications and consequently got them approved by our client. Other than the demands from the Bulldogs, our team here also suggested adding a few functions to the app to make it more entertaining and engaging.

BUSINESS ANALYSIS

TECHNICALREQUIREMENTS

The website was developed using WordPress and the mobile application is synchronised with the website as the content and updates for the app are constantly pulled from the website’s MySQL database.

The app is targeted at a narrow group of people - American Football fans and teams in Ukraine. Thus, developing a native app would be inefficient and too costly. Due to this and the fact that the app is going to be integrated with the website to get constant updates and content changes, the decision was made to opt for hybrid development. The app is compatible with Android 4.5+ and iOS 8+ devices.

Both projects (website and app) were planned in Redmine - the tool, which Mobilunity traditionally uses for project planning and progress tracking. Weekly stakeholders were updated by our PM on the status of the project, including the scope of work completed and planned, as well as the time spent vs time initially estimated.

4

WEB DEVELOPMENT Since the Bulldogs are an American Football team with its ready-made emblem, there was no need to create a logo from scratch and Mobilunity’s team of designers simply tailored the existing logo to fit the overall website and app design. To reduce the cost of the design WordPress Sporting Club & Centre Theme was purchased and customised for the needs of our client.

HYBRID APP DEVELOPMENT

To fulfill the specifications of the mobile application Mobilunity developers used the following technologies:

Frontend

Ionic for frontend visual partAngularJS for frontend logicCordova for building mobile web view

Backend

Node.js

5

Gallery

Images and video available on the website are displayed in the GalleryImages and video are opened in the pop-up windowGallery categories are displayed

Blog

All the articles from the website are displayed in the BlogSocial sharing is provided by the Cordova existing solution (the user can share an event through VK and Facebook social networks)All the comments from the website are displayed on the Article page

About us

The content for the About Us page is pulled from the corresponding page from the websiteSocial sharing function is provided by the Cordova framework (the user can share an event through VK and Facebook)

Contact us

Contact information of the Bulldogs team is displayed on the Contact Us pageTelephone number and Email addresses are clickable

Our team of frontend developers provided the application with the following functionality:

Splash screen

Splash screen is displayed during the application launching

Calendar/Events

The list of all events available on the website are displayed on the Calendar pageEvents are filtered by dates from the newest to the oldest by defaultFiltering events by dates is performed automatically by the user Social sharing is provided by the Cordova existing solution (the user can share an event through VK and Facebook social networks)The event can be added by the user to the calendar on his/her mobile deviceThe event location is displayed on the map on the event page

Team

The list of all team members and coaches available on the website is displayed on the Team pageEach person on the Team page is provided by the image, name and position

6

Stats

Stats page is provided

Selfie Composer

Filter can be applied to the photoBulldogs logo, icons and text can be added to the photoThe edited photo can be shared via all the sharing apps and APIs of the device

Push notifications

Push notifications are provided by Ionic push notification servicePush notifications are sent when New events or New blog posts are created

Multilinguality

The application is translated to English and Ukrainian languagesThe application uses the mobile device’s language English is default if the device uses the language not provided by the appi18n and l10n - AngularJS internationalization and localization services are used to translate application labels

7

TESTING & BUGFIX The Bulldogs website and application are already thoroughly tested. Every page on the website was tested on the most commonly used browsers: Chrome, Firefox, IE 9, 10, 11, Safari and different screen resolutions. Special attention was paid to 1366x768 screen resolution, as it’s considered to be the most popular and widely used.

The QA team tested the application on two Android and two iOS devices due to a big number of APIs engaged. The bug tracking process was much simplified, since the app was planned to be available only in portrait mode. The Mobilunity team continues the maintenance of both website and mobile application after their release and is sure to eliminate all the defects which might occur.

8

CHALLENGES & SOLUTIONS

Throughout the website and app development there immerged a few difficulties which were fully tackled by the Mobilunity development team. These problems were either connected with the compatibility of the WordPress themes and plugins or with finding the way to get access to device-specific hardware and software, given that the app is hybrid:

1. Localization

To translate content into English and maintain it, we used qTranslate X WordPress plugin. Unfortunately, after a few updates it turned out that this plugin was no longer compatible with the WordPress Sporting Club & Centre Theme we used in the Bulldogs website design. That is why, the team had to switch to the WPML WordPress plugin to ensure successful multilingual content management and maintenance.

2. Social sharing

Another problem was connected with social network integration, as VK plugin for social sharing was not provided. So we made use of the Cordova plugin which enables the user to share content via the native sharing widget of the device.

3. Usage of device features

As the app is hybrid, there were hardships using the native features of mobile devices. First, the client wanted the users to have the ability to add the upcoming Bulldogs’ events into the task-/time-management systems or calendar on the mobile device. There was also an attempt to build a photo editor with sharing ability into the application, therefore access to the camera, e-mail services and social networks was needed. The corresponding APIs were built to enable interaction of the Bulldogs app with the other applications on the device and give it access to native device capabilities, such as the camera.

4. Content integration

The major challenge was to synchronize the app with the website as we wanted the content of the application to be automatically updated in case any changes or updates are made in the website’s database. With the help of Node.js server-side platform and its API framework ActionHero, a REST API was coded by our team of developers to deal with this challenge.

mobilunity.com sales@mobilunity.com

Mobilunity is ready to build budget-friendly websites and highly compatible mobile applications specially built for your business!