Mobiloud is a premium WordPress plugin that allows publishers and bloggers to turn their WordPress site into a beautifully stylish mobile app

 

 

My Role

Update the user interface of the app for iOS7 and include a design for the Android platform. Create high fidelity mockups displaying the study of typography and layouts to support phones and tablets.

Wireframes

When I joined the company, the Mobiloud app was already taking shape but the stakeholders were not happy with the current UI. My first task was a layout study, which involved creating mockups to find the best layout to represent the blog posts for different clients.

mbiloud_wireframesmbiloud_wireframes

Interface for iOS7

I chose the simplest layout possible to fit all current and future clients of Mobiloud. My aim was to design and upgrade the app from iOS6 to iOS7. Iconography was the main component that had to be changed, moving away from the fulfilled icons, and achieved a stylish linear approach of a minimalist feel. The colours used in the app were chosen by the client. 

mobiloud_iosmobiloud_ios

Android Navigation

Running Mobiloud on an Android platform was a big step for the company, as they could attract a wider target audience. After polishing all of the UI for iOS app, my next goal was to keep consistency between the two platforms without breaking either of their guidelines. Below, you can see what I achieved by moving the app from iOS to Android. In order to adhere to the guidelines and brief given, the menus, search features, and icons were aligned appropriately to each platform. This allows the Android user to have confidence in their approach to navigating through the app. 

mobiloud_androidmobiloud_android

Before and After iOS 7

Iconography was the main component that had to be changed, moving away from the fulfilled icons, and achieved a stylish linear approach of a minimalist feel.

iOS Tablet

Very identical UI from the phone view, tablet layout is very clean and simple to display all the blog posts that the website has. One new feature was supporting websites instead of just supporting blogs as the initial business strategy was outdated. 

mobiloud-tabletmobiloud-tablet