Mobile Guardian: Protecting Children,Enabling Technology

Redesigning the platform and marketing site to help maintain and encourage a safe digital environment in the home and at schools.

Overview

Mobile Guardian is a platform that lets teachers, IT administrators and parents control and monitor the digital devices their students and children use. The interactive dashboard provides users with features that enables them to see where devices are located, how they are being used as well as block and permit access to apps, the camera and more. Mobile Guardian is aimed at both the South African and international market and helps to maintain a safe digital environment in the home and at schools.

Mobile Guardian initially tasked Drafteq with redesigning the company’s marketing website. We then proceeded to help with UX and UI improvements to the current desktop application. We reworked various screens to align with the new design style and improved the user experience. Drafteq has also assisted with designing various marketing collateral and iconology to support the brand.

Services

mobileguardian.com

A screen design displaying the Mobile Guardian Application

UX Process

We started off by holding various workshops with the Mobile Guardian team to better understand the product and its positioning in the market. Thereafter we proceeded to restructure their existing website and new content into basic wireframes for the marketing site. We worked on better ways of demonstrating key features, separating out content and getting users to sign up for a free trial or demo.

Mobile Guardian Web Screens showing the UX design process

Marketing Site

With clearly structured wireframes we were able to make use of Mobile Guardian’s existing colour palette and logo to design a fresh, clean website with improved typography, bold call-to-action areas, custom designed iconology and animations to better market the product and its features.

Mobile Guardian Web Screens showing the final UI designs

Iconology

In the process of helping to expand out the brand’s design direction we felt it important to illustrate the many product features. We therefore designed simple line icons with pops of colour to fit seamlessly into the clean interface.

Animation

Many of the app features are communicated most effectively in a demo format. We animated out key features so that users could better understand how the product works. These animations also add more of a dynamic feel to the mainly static website.

"Drafteq has been a fantastic UI/UX partner. They have taken complete ownership of the front-end which allowed us to concentrate on ensuring the core product is functionally superior. We are continuing to work with them to ensure that visually our new products are vastly better than our competitors and a delight to use for our customers."

Patrick Lawson
CEO of Mobile Guardian

Application

With a clearly defined design direction from the marketing website, we were able to update the current dashboard in a similar style. We crafted designs for multiple UI elements and applied them across various sections of the application. We also reworked a number of screens which needed UX tweaks for a better experience.

Print Collateral

Mobile Guardian distributes marketing content such as flyers and brochures to potential clients. We helped redesign their brochure and other collateral to align with the updated design, helping to further promote the product and its offerings.

Mobile Guardian: Protecting Children,Enabling Technology