Building a digital product that bridges the gap between Driving Instructors and Students learning to drive.

One of MyDriveTime’s most frequently requested features was the ability for Instructors to share information with their Students. We’ve worked with the MyDriveTime team to design and build a cutting edge app that stands out from its competitors and delivers valuable information to Students learning to drive.

Taking data from the existing MyDriveTime for Instructors web and mobile app we’ve been able to create a clean and modern interface to keep Students up to date and on track. Displaying details on previous and upcoming driving lessons, progress reports, theory and practical tests we’ve bridged the gap between Instructors and Students outside of the classroom.

Designing MyDriveTime for Students

With lots of different features to consider within the MyDriveTime for Students app, we started off with some rapid wireframe to generate our ideas quickly.

We quickly moved these ideas into Figma to create clickable prototypes so that we could interact with our ideas directly on a device. The design of MyDriveTime for Students has been largely based on the Design System we’ve created. You can read all about how we built this with Figma and Zeroheight.

Working with a Design System meant that the base styles e.g. typography, buttons and colours were already set up and available. However, as MyDriveTime for Students has a different target audience compared to their other products which are aimed at Instructors, we wanted to design an interface that was more fun and engaging. After all, learning to drive is an exciting time!

Let’s dive deeper into some of the Student app features.

Dashboard & Driving Test

The dashboard is the first place that Students land after logging in to the app and it houses all of the important areas that users need to be aware of. It’s essentially a hub of information! Over time more bubbles will appear on the dashboard as new features are added. We’ll start introducing movement to the bubbles, similar to what you’ll find on the Apple Watch interface.

For now, though, we’ve kept things simple. The clean interface keeps Students focused and up to date with key pieces of information e.g. when their next lesson is and driving test date. Gone are the days where Instructors get no-shows and last-minute cancellations! We’ve also added some nice subtle movements to the waves in the background to add a bit of depth to the experience.

Let’s move onto the driving test day! It’s the end goal for every Student learning to drive and we wanted the app to put users at ease. We’re displaying information in a chronological timeline that details each part of what to expect on your test day. We’ve also added in celebratory illustrations for Students when they’ve passed both their Theory & Practical driving tests!

Progress Updates

At the end of each lesson, Instructors fill out progress logs of how their Student performed in the lesson. This covers anything from Basic Skills to Manoeuvres and Junctions. Students can then log in to the app and stay up to date with exactly how they’re performing on both an overall percentage basis but also a star rating system for smaller tasks within each category. Take a look at how this works below 👇

Now that we’ve shown you a few of the features available in MyDriveTime for Students we’re going to talk you through our build process.

Building MyDriveTime for Students

The build process involved deciding on whether to use Ionic3 or Ionic4 framework for building the app. We carried out multiple tests on Ionic4, which was launched recently, to make sure that it was stable and met the technical requirements of the app. Once we established that the framework was stable and met the apps needs, we decided to go with Ionic4 over 3 for a number of reasons.

The major reason was access to the latest features such as web components and CSS4 variables. Most of the major plugins were now being built for Ionic4, which meant less work maintaining plugins on top of benefits like performance improvements and quicker bug fixes. We did decide to stick to Ionic Angular instead of risking Ionic Vue even though at Hinge our framework of choice if typically Vue. Ionic Vue had not yet been released for production and due to our tight deadline, it would be too much risk to use this.

After deciding on Ionic4, we looked into the overall architecture of the app. This was made fairly straightforward using a highly opinionated framework like Angular. The basic architecture involved subscribing to HTTP Services to get the necessary data from the API, converting Observables to Promises and then populating the app with data or displaying the appropriate empty states. The app uses Cordova plugins for accessing native features like sending SMS notifications and checking network connection.

The app was built in an iterative fashion with continuous input from the different stakeholders who were given access to early alpha and beta versions. Their feedback was incorporated based on the priority and urgency along with fixing the bugs they might have found during the testing.

Technologies we’ve used

MyDriveTime for Students is available for download today in both the Google Play and Apple App Store!