Client & Brief

Masterfull Maintenance is a garden maintenance service that serves over 120 residential complexes in the city of Johannesburg, South Africa. They approached us to develope an integrated custom tasking, HR, fuel and fixed asset management system. The aim was to better internal controls and communication by managing tasks from accounts executives to junior management level. They needed a complete client reporting system that would not only save time & money, but offer complete feedback to their clients, the trustees of these residential establishments.

The app had to cross browser and cross platform friendly since account managers would capture entries using desktop computers, while managers would use mobile phones or tablets in the field. The capturing process had to be easy, quick and logical since hundreds of these are processed per day. One of the largest projects we had taken on and we had our work cut out for us.

Research Findings, Process & Solution

A lot of our research was based on observing and interviewing the potencial users of the system. In interviews the requirements set by management would not line up with the needs of the administration personnel. We thought it wise to have sessions with multiple users, ensuring we meet the needs of the users and not miss the basics of user experience because we were outcome driven. 

Although complete and correct reports were the end goal, every step had to be treated equally as important. You are after all the sum of your previous experiences. This project had a base system with add-on modules and development time was by far the most we had put into a single project. Planning the timing of module completion helped us to continue a new module while in field testing was conducted by the users.

We did however run into a lot of performance problems when we rolled out to all the users (more about that and what we did about it in the "Success in Driving Outcome" section). Solution was simple: Rebuild on a framework that could keep up with the amount of data that needed processing. So much should go into the choice of your tools and platform at the start of the project. A lot of time went into finding a css/javascript framework that could really make or break user experience. If time is limited, availability of core componants is very important, since you want to not spend days/weeks building your own. We modified quite a number of componants that comes standard with propeller.in to suit the needs of the system. It was mostly sufficient to cover most of what we needed for Masterfull Tasking.

m1m1

Early Concepts and Mockups

UX and design can be messy! That is usually where one starts, trying to make sense from the chaos you observe. User Experience(UX) Design is the process of bringing order from that chaos. Order can mean beauty, speed, ease of use or simply understanding the interface better. 

At pixl apps we build it easy, then fast, then beautiful.

sketchessketches
GroupGroup
ArtboardArtboard

Success in Driving Outcome

Forging a trust relationship with the client was a major driving force in our road to success with Masterfull Tasking. They had been misled by 2 previous developers with no product and a lot of money lost. Proper declaration of your intensions, sharing the development road map and keeping all the stakeholders consistantly updated on progress helped with building trust and ultimately a app that exceeded their expectations. 

We have a strong background in the financial sector and auditing. This helped with planning and building the correct processes and detailed reports usable by management from day to day. Spending a lot of time with the users and understanding their day to day needs drove a completely user centered user experience design.

Originally built with a jquery based front-end framework for , we realised, after thorough testing, that the system was slow and laggy due to the amount of information loading into the current view. Rebuilding with another framework meant we had to pivot and rebuild the core functions. Our plan was to take the app, a page at a time from most used to least and rebuild the core for speed improvements. Some duplications of functions could be merged on the task management page resulting in about half the physical page size with approximately 10 times faster loading times on most pages. There was a significant improvement overall with a major decrease in user frustration due to the waiting times.

Our success was definately due to taking user feedback, that could seem insignificant, seriously and using it to better every part of the app.

m2m2
m4m4

What we learned

During the course of building Masterfull Tasking, we realised how powerful the evaluation and research into personas can be. Even though this was not a marketing or commerce app, different types of users in the client's company had different needs and motivations and used the app vastly differently. We conducted the most user interviews for any project we had done. It was an ongoing process during development and after every launch of every add-on. We also saw how rolling out to more and more users had an exponencial impact on the feedback given and updates needed based on usage statistics. More statistics means more accurate decision making.

The best is to roll out to as many users possible after initial alpha testing.... and then be ready... Take the most negative feedback as positive, because your client is passianate about his product, and so should you be as development team. Let the product manager/UX Designer drive the process and provide feedback daily if you can. The more you and the client are on the same page throughout the process, the greater the change is of success.

Summary

Product Development - UI/UX Design
HTML5 & CSS3, Material Design
Responsive Development
Javascript using Vue.js & JQuery

Technologies & Tools

HTML
CSS, Propellor Material Framework
Vue.js, Javascript & JQuery
PHP for security & back-end
Sketch for UI Design
Subversion for version control