PORTFOLIO

Servflo

ENHANCED DINING EXPERIENCE

scroll

discovery

Servflo is a startup-business located in Toronto, Canada.
It begun with an ideea and a desire to help restaurants and other businesses that serve food to customers speed up their response to orders, allow them to manage restaurant flow and assess their overall productivity.
This means that faster servers translate to happier patrons, and happier patrons translate to better business. We end up with more than 30 user cases. It's all quid pro quo.

Project analysis

Servflo was intended, from the very beginning to be a condiments serving app that had to be available on iOS for iPhone users and on Android for smartphones.

It was a strong project that had to be developed over 3 platforms: PHP for the web app & web-service, iOS C# for the iOS and Java for Android.

The solution was to create two native apps: one for iOS and one for Android. They are connecting a restaurant client to the waiting staff.

In the back-end, the management system offers restaurant owners the opportunity to measure the effectiveness of their staff, the traffic of requests for their tables and various other metrics and reports to help make their business more effective.

Planning

The first step was to study the product specification document with the client, and make the necessary amendments and revisions after the Discovery phase. After the document was ready the first wireframes and flow for the iOS app were created followed by the wire-frames for the Android application. The flow is identical but the menu had to be different to comply with the Android best practices.

Kickoff

The first meeting was over GoToMeeting and involved the client, our project manager, the art director, the mobile technical lead, the web and back-end technical lead and the QA manager.

It was important that all the teams involved in the project synchronize therefore the first meeting was followed by emails to all the team members, as is always our procedure.

3rd party tools integrations

  • Braintree
  • Facebook
  • Crashlytics

SETUP

Listen better. Plan better. Build better.


A phase in which the staging sub-domain is created and the first frameworks are installed. For Servflo we used Zend as a base for the back-end and custom html for the front-end. Also different accounts were configured, the Mixpanel integration and the Braintree payment system, first the sandbox and then the actual account, and the Facebook app that would manage the Facebook Connect.

Technologies

Web:

  • PHP
  • MySQL
  • CSS
  • HTML
  • JavaScript
  • jQuery

iOS:

  • JSON
  • C+
  • Cocoa Touch

Android:

  • XML
  • Java

Versioning server

For versioning we used a SVN app, and each programmer had an account for the repository.

Development & testing environment

For the development environment we have used a local Apache server running PHP 5.5.15 and MySQL 5.7.

After finalizing the first stage we had moved the app to a staging server from which we served the API calls. Mobile apps were developed under xCode for iOS and Eclipse for Android.

Framework

For each platform we have used different frameworks. Zend Framework was used for all the backend development, for the frontend of the admin area we choose a Bootstrap environment. Cocoa Framework was used for the iOS application, and an Android SDK for the Android app.

user experience

In order to deliver an unique and interesting experience for the users, the primary objective of the app was to ensure that a client receives in time his orders and the waiting staff are serving them as efficient as possible.

For this we have used easy-to-access features, and placed the menu of the apps at the bottom of each page, so that users can access everything quickly and easily. This is true for both the server (restaurant staff) and for the customer of the restaurant.



Wireframing

Wireframing is the process that reveals how individual elements form an actual screen for the user to interact with. iFly has some interesting particularities for each of it’s functionality.

User Flow

Servflo is user oriented and it facilitates ordering condiments for the clients and also allows the staff to manage their orders quickly and smoothly.

design

Servflo is an app for the end-user, therefore it needed to be friendly, it needed to be easy to use and also it needed to be easily recognizable. Starting with the wireframing we developed an environment where, literally "Service is at your fingertips":

  • Big buttons for the menu, each with a custom icon for easier recognition make all the features in the app stand-out.
  • Ordering is easy: the search option helps navigate through the offer, adding more means just a simple tap, and communicating with the staff is done via the same order, by adding a note to the request.
  • The bright but minimalist, flat design, gives the users a warm feeling, but also allowing them to read easily the elegant, white font-types.




backend development

The backend server was developed on Apache servers with the latest PHP and MySQL versions.

Every request is tracked and later can be analysed by the business owner or by the chief staff through the analytics section offered for each business-manger. In order to not delay a request the mobile apps have to get data every second from the server for the restaurant staff to know that a request was made.



applications server

The web-applications is a hub, concentrating everything going on in the mobile apps, but also offering more features to the Business Owner.

We have created a Super-Admin for managing the entire Servflo Business, Business Manager accounts that can add components, manage their staff and analyze the data recorded by the apps.

The Business Manager can set-up their whole business: add tables, add staff-users, add condiments (menu items), add categories for the menu, and of course edit anything that needs changing.

There are several analytics offered in the CMS: time waiting by table, time waiting by staff, number of requests and ratings for the business.

ios application

Servflo is a dual-way communication between the customers of a business/restaurant and their server staff.
This means that the apps are built with two user interfaces: one for the business staff, one for the staff.

We have followed the clean & crisp lines of the iOS 7, keeping in mind the app will be launched as users were getting to know iOS7.

Servflo is a colorful yet minimalist approach to focusing on function & content.

android application

We added-in custom icons sets for both sides of the app, to tie things together for the users, and allow them to easily understand the apps.

The use of QR code recognition software inside the apps was an important part of the user experience, since each QR code tells the server the exact location of an app user inside a particular business, at a particular table.

Having this knowledge allows us to create very accurate reports on request completion, table and server turnover of requests, and so on.

All the data collected by the apps are sent over a custom-built API and processed in the web app for the business-owner's use: they are an interesting analysis of how a certain restaurant is behaving in real-time.

quality assurance

Quality assurance is an important part before delivering the product to the client or before launching an application. it is important that in the first version (even if it is still in Beta) for the app to not crash. For that we use Crashlytics, an app that tracks crashes in the app during the testing period. It is available for both platforms that we develop for and the alerts are easily integrated in Jira, our bug tracking system.

We take this part very seriously! Besides equipping the team with the latest devices on the market, they are part of the project from the beginning, helping defining the use cases for the project. This way, they stay engaged throughout the project!

deployment

You can download Servflo clicking on the App Store or Google Play download buttons below.

Or by scanning the QR codes available in the partenaires restaurants.

support & maintenance

We built a support and maintenance plan for the Servflo app that included:

  • Full support for bugs and errors that may appear on different devices
  • Updates for future operating systems
  • Integration with new and improved 3rd party APIs