Select Page

MEND Muslim Engagement and Development Case Study

Apple iOS Mobile App, Significant Web Server Upgrade & Migration, IMAP to Exchange Migration with 250,000 Emails & more

MEND LogoMEND (Muslim Engagement & Development) are a not for profit organisation working towards enhancing the active engagement of British Muslim communities in our national life, particularly in the fields of politics and the media. They achieve this through a variety of methods including;

  • Running seminars on how to engage productively with media and politics
  • Training Muslims how to effectively respond to derogatory news stories via media resources
  • Organising forums for journalists allowing a closer connection with local Muslim communities at the grass roots level
  • Working with organisation to ensure Islamophobia is regarded as socially unacceptable as anti-Semitism and other forms of racism and xenophobia
  • Highlighting the work of journalists and other public figures that undermine social cohesion in Britain and foment anti-Muslim prejudice
  • Encouraging voter registration and civic participation in British Muslim communities.

 

Challenge

MEND originally came to us with an idea of what they thought they wanted, a mobile app for the Apple iOS platform. After previously using another web development agency, only to find that half way through the project, they couldn’t actually finish what they started, we were handed a half-baked, extremely poorly built iOS application written in the Objective C language. This is where the challenges began.

We often pick up projects when another agency, freelance web developer or inexperienced person has bitten off more than they can chew and this was no different. MEND are a national organisation working with local Muslim communities throughout the UK and hence they needed a platform that was going to suit their needs both now and in the near future as the organisation grows further.

Working with Content Management Systems powering web applications and various websites, we wanted to see if we could push the boundaries with mobile applications too. And we did just that, utilising extremely cutting edge technology to power the mobile application, giving the team at MEND the full power and control required to change content within the mobile application on the fly as they desire. All without ever requiring a technical boffin to make any changes to do so, saving significant time and money in the long run.

As with many technical pieces of work, the requirements of the mobile app for Apple iOS included some interesting points for some unique functionality. Thankfully, MEND are a forward thinking organisation and were open to providing us free reign for the technical bits in the background which meant we could implement some really cool technology. The solution outlined below is very much a summary of the work that happened after starting the project.

 

Mobile Application Requirements

The requirements for the iOS mobile app included the following core components and more;

  • List news stories from the website both as a main list and individually
  • Allow users to comment on news stories via the mobile app
  • List all Local Working Groups within the mobile app so that users can view this data on an interactive map, view details about the individual Local Working Groups
  • List events within the mobile app and allow users to book onto the events as simply as possible from within the app
  • Allow users to donate to MEND as they are a not for profit organisation, donations are hugely important, using the PayPal payment gateway
  • Allow users to download relevant resources from within the mobile app
  • Track user behaviour within the app via Google Analytics
  • Use Geo-Location to automatically identify relevant content for the user

Along with various other bits.

 

Solution

Knowing the background of the project, the solution we found was a little more complex than we had first anticipated. Working towards a fixed budget for work on technical projects just doesn’t work due to the inherent unpredictability of software development and technology in general, which MEND understand. Below outlines the various stages of the project which was a little like a Russian doll from start to finish.

 

Apple iOS Mobile App Version 1.0

Being handed a half-developed piece of code was a challenge in itself. Upon review, it was clear this wasn’t going to be fit for purpose in the long run. The entire codebase wasn’t built to scale effectively so needed restructuring in the short term. A bad design pattern within code is not a workable solution. When reviewing the code, it was clear basic error handling hadn’t been built in which left the mobile app open to crashing when a user made the slightest error outside the normal fixed set of rules, which users always do.

The solution to this was that we had to look at doing this project in stages as the mobile app had been delayed quite significantly previously due to the previous developer being unable to complete the work. As such, we set about finalising and patching Version 1.0 of the iOS app with bandages and sticky tape the best we could to make it function. This is where we uncovered a few more challenges with the technologies in use.

 

WordPress RESTful JSON API

The iOS mobile app is being powered by the extremely new WordPress RESTful JSON API, meaning that the backbone of the mobile application is hugely reliant on the underlying technology of the website and web server. When working with such a brand new technology, which just came out of Beta at the time of starting the project, naturally this does have its own challenges as not everything is fully supported with new features and functionality added over time. Although MEND were confident in our recommendations to stick with this approach and were extremely happy that they were able to implement a lot of the functionality that can be seen on the mobile applications in use by the multi-million pound companies mobile apps such as Sky News, the BBC and Facebook – all without the enormous investments, years of development by teams of extremely skilled people that these other companies were investing in.  Big brand functionality without the big brand budgets.

 

Web Server Upgrade

What we found when we released the iOS mobile app Version 1.0 was that it was dog slow. To the point whereby it would just end up putting people off from using the app as it was taking 30 seconds to load the main news stories from the website. People just aren’t going to wait that long. Looking into this further, we found the old web server that was powering the website, and hence the WordPress API, simply wasn’t suitable for the job. So we set about significantly overhauling MEND’s web server technologies to boost the performance enormously. Web servers are just like cars, you get what you pay for and the results speak for their self.

 

MEND Website Loading Speed

 

Spot the point when we migrated them from budget web hosting to industry leading web hosting, if you’re struggling, it’s the point when the site speed increased by almost 1000%. This is the homepage loading, the API was taking previously around 30 seconds, now it takes around 1 second, pretty cool;

 

MEND API Loading Speed

 

IMAP to Exchange Email Mailbox Migration

Another challenge we had to overcome as part of the web server migration piece of the work included was related to emails. The size that MEND had grown to over recent years in terms of staff both paid and voluntary, yet they were still using the old IMAP email technologies which simply isn’t suitable for an organisation the size of MEND for so many reasons. So we set about migrating all of their email accounts and emails over to the leading Microsoft Exchange technology which involved migrating around 250,000 emails with virtually zero downtime when accessing email technologies. When migrating web servers, when your emails live on your web server, this is not a good situation. Strategic division of technologies is essential when it comes to ensuring an on-going line of communication should there ever be any disruption anywhere.

Any business or organisation should be running Microsoft Exchange these days.

 

Website Upgrades

As part of the various work outlined so far, we identified serious security vulnerabilities with the WordPress website which we set about fixing. Working with their web developer to implement the relevant solutions to upgrade the technology to what was needed to be safe, secure and stable for powering the mobile application. Cyber security is a serious threat today and WordPress is an enormous target which is why it was essential that the platform was upgraded accordingly.

 

Apple iOS Mobile Application Version 2.0

Now we get to the good stuff. After upgrading virtually every major digital system within MEND, we set about rebuilding the mobile application in the right way so it was suitable for future growth. MEND now have a fully featured mobile application that allows them to build on these solid foundations which was re-built in the latest Swift programming language which Apple is moving towards. With Google Analytics tracking implemented within the mobile application, MEND are able to analyse the user data for the people using the app on a daily basis, allowing this information to feed into future plans for the application.

 

Results

What better results to show for a mobile application than the features and functionality that have been built within this. In addition to transforming MENDs digital technologies throughout the organisation, after what originally started out as a mobile application based project, they are now in a great position to add further features and functionality to the mobile application over time.

 

Welcome Screen

Designed to welcome people to the app while the news feed is loaded in the background for the split second.

MEND Welcome Screen

 

News Screen

Listing latest news items, pulled in directly via the WordPress API so content is automatically updated within the app as new content is added to the main website.

MEND News Screen

 

Individual News Screen

Showing the news item with featured image, again pulled in directly via the WordPress API.

MEND Individual News Screen

 

Comment on News Items

Designed to engage users to comment on news stories and MEND as an organisation. The comments are posted via the WordPress API, allowing full management and moderation of comments by the MEND team prior to being published within the app.

MEND Comment on News Item Screen

 

Approved Comments

Once comments have been approved within the WordPress interface by one of the team at MEND, these are then automatically reflected within the mobile app.

MEND Comments on News Item Details

 

View Events

Users can browse upcoming events from within the app.

MEND Events Screen

 

View Individual Event

Full details for the individual event are pulled into the mobile application, allowing users to view the required information including date, time and venue for the event.

MEND Event Screen

 

Booking on Events

To allow ease of booking onto events, Eventbrite is the technology platform powering the bookings engine which has bene integrated within the app to allow users to book onto events without leaving the app.

MEND Book Ticket to Event Screen

 

View Local Working Groups

To allow users to connect with their local working group, details provided for the local working group based on the users GPS signal. Also allowing users to browse around an interactive map of the UK to select their local working group and view details for the group. All of the data in the background is powered through WordPress and the WordPress API, meaning that as new groups are formed over time, anyone from MEND can add Local Working Groups via the WordPress Administration area and these will automatically be reflected within the mobile application. Likewise, when information about a group is updated, this is automatically reflected within the mobile application, providing full control and maximum flexibility to the internal team at MEND, allowing us to build on this solid foundation to enhance the mobile application with even more cool features and functionality.

MEND Local Working Groups Screen Large MEND Local Working Groups MapMEND Local Working Group Individual Screen

 

Action Alerts

MEND as an organisation is keen on engaging with their community, hence it was important to have the functionality to highlight to users when they need to do something. For example, this could be when a local or national election is approaching, the technology is available to alert users when they need to take action and do something.

MEND Action Alerts Screen

 

Downloadable Resources

One of the key aspects to MEND is to help Muslim communities in the best way possible. To do this they provide useful resources which can be used in situations when needed which is why it was essential that these resources could be updated on the fly as required by the team at MEND. The technical aspects to this includes Custom Post Types being created for Resources with added Custom Fields for the structured data which could then be added to the WordPress API via the WordPress REST API Enabler plugin so the mobile application could retrieve this data as needed. When a user downloads one of the resources, to save on storage space on the users device, this file lives on the web server meaning that we managed to keep the overall size of the mobile application core file installs as small as possible as we didn’t cram it with documents and data which weren’t absolutely necessary.

MEND Resources Screen

 

Slide in Menu

To provide a space to link out to external websites, a slide in menu was added which can be added to over time as more important websites are required to be linked to. This was designed to be a menu which included content that wasn’t used on a daily basis but was important to be accessible.

MEND Slide-In Menu

 

Sub-Menu

Within any mobile application, space is limited on any kind of app-wide navigation. This is why we added an additional sub-menu which could allow users browse the additional content which is useful to them from within the application without the pages being in their face all the time when they aren’t required every time the user opens the app.

MEND Sub-Menu Screen

 

PayPal Payment Gateway Integration for Donate Functionality

To allow donations to take place from users of the app, Apple has specific guidelines in place which prevent this from being opened within the mobile app itself, so we had to implement this in the Safari browser which allows users to donate to MEND at a time like.

MEND Donate ScreenMEND PayPal Screen MEND PayPal Pay by Card Screen

 

Android Mobile App

Alerts Screen

Working Groups Screen

Resources Screen

 

News Screen

 

Individual News Screen

Events Screen

Donate Screen

Comments Screen

 

Summary

The MEND mobile application project was certainly an interesting one to work on. Implementing cutting edge technologies is always a great to be working on and upgrading their entire systems as part of a wider digital transformation project is going to see them well suited for the next few years and beyond.

Download on Apple iOS App Store Button

Google Play badge_new

 

Get in touch if you’d like to implement some of the cutting edge technologies you’ve just read about in this case study.