Title sperator

Web & Native Apps

To create a design that could compete with industry disruptors like Aceable, iDriveSafely, and DriversEd.com, I used Sketch, which is an industry-standard. Upon reviewing our competitors’ applications, I noticed that they seem to treat teenagers as children rather than young adults. However, teenagers aged between 14 and 17 prefer minimal, desirable, and appealing cultural trends. They don’t necessarily need to be coddled by a mascot like Aceable’s. What teenagers desire are the latest gadgets and trendy shoes like Nike’s.

website
Journey
Invision

Problem Space

This problem space had its challenges, knowing the history of our company’s reputation with the financial losses it had in the last two years. From 1998 to 2012, National Driver Training was the first company to publish an interactive and informative course during the new “worldwide web” era, with enormous revenue coming in. At a critical point last decade, they lost the opportunity to develop a mobile application. In 2014, a new competitor in Austin, TX became the new disruptor and bought two national online driver’s ed companies. NDTI was on its knees. The solution to our woes was to come in and design the best visuals and attract the new youth via new marketing strategies and “fanatical support”. Our system is robust because our parents can interact by inputting driver evaluations for their kids, that other similar apps do not do.

1/7
Title sperator

User Flow Examples

This is an example of how our lead-to-user flow works for our Online Drivers Ed program. First, we allocate a budget to run ads to promote the program to parents or high school students who are interested. Once they purchase the program, they will receive their credentials via email. They can choose to use our web app or download the native application to take the course. The user must complete all seven sections of the course to download their certificate. They can then take their final written exam at DPS or online using our app. After completing our state-approved driver’s ed program, the user can download their certificate and present it to DPS for their permit/license process.
Next Slide
Flowmapp Example
Visual Design Sample
2/7
Title sperator

Light Mode

Our aim was to keep up with the latest device-setting trends, so we made light and dark modes available. The light mode is sleek and simplistic, and it offers features that rival products lack. For instance, it has driver evaluation gauges that allow instructors to score and provide feedback on their students’ driving tasks. Our in-house teacher instructors have developed this feature to make it user-friendly and intuitive for driver training and state driving exams. The design includes a course mode and driver evaluation mode, which parents and instructors can use.
Open Sample
Next Slide
3/7
Title sperator

Dark Mode

There are three different dark grey color palettes in Dark Mode, each designed for varying levels of contrast to create depth and layering. The layout is vibrant and has been tested to ensure readability when reading long educational paragraphs.
Open Sample
Next Slide
nativeapp-visualdesign-img-04-3x
nativeapp-visualdesign-img-05-3x
nativeapp-visualdesign-img-06-3x
4/7
Title sperator

Wireframes

After brainstorming and sketching, the next step is to create wireframes. Wireframing is a way to quickly map out easy transaction pathways and highlight crucial content to stakeholders and marketing teams. We analyzed our competitor’s website and data, and found that teenagers often skip the PDP page and go straight to the transaction. Our wireframes are designed to be clean and simple, making it easy to digest content.

Sample 1
Sample 2
Journey
Next Slide
5/7
Title sperator

Web app

The web application is currently undergoing its second revision since my arrival, as it was one of the last applications to receive modernization. The initial version, which was not developed by me, had responsive issues. I am currently utilizing Sketch to design the visual aspects, while the HTML build will be updated to Boostrap 4, along with its design library. Unfortunately, I only have access to samples of the first version.
Open Sample
webapp-visualdesign-img-01-3x
webapp-visualdesign-img-02-3x
webapp-visualdesign-img-03-3x

Our web application. However, lacked responsiveness and usability, resulting in a loss of customers and revenue. While it was performing poorly in the native mobile competition, it was even worse using and outdated bootstrap version. The company failed to recognize user data trends during this mobile era, which was a significant mistake.

Next Slide
Invision
Journey
6/7
Title sperator

Course Media

The course materials feature graphics and diagrams, which are key to student comprehension. We replaced outdated files that were published two decades ago with new graphics. Our main libraries include custom street signs and driving diagrams, all stored in Adobe Cloud. Please note that these libraries are not suitable for use in Sketch due to their size and number of individual graphics.

Invision
Journey
Next Slide
7/7
Title sperator

Handoff

Handoff between designers and developers is very important in the design process. As a designer, I work well with developers and understand their technical jargon. In my experience, the most effective way of sharing assets with developers is through tools like Invision, where assets are located and available for download. However, nowadays, most developers prefer Figma, or I create a repository for all the visual assets. For a smooth handoff, it is crucial to have early discussions about where the assets will be exported and what type of assets the developers need. Although it’s easy to upload an asset via Slack, it’s not recommended as a permanent storage solution. This could lead to confusion and disorganization, which is not good for the design process.

Next Slide
Title sperator

Solution

Our app boasts a consistent brand and design, with modern functions that surpass those of our competitors. It offers a comprehensive course for students, and allows parents to evaluate their child’s driving progress. We’re constantly improving the app, with upcoming features to enhance parent administration. Our newest addition will be a Driver Instructor dashboard, allowing for easy access to student driver evaluations and appointment scheduling. Since its inception, the app has seen a tremendous increase in revenue, going from $1400 monthly to an average of $12,000 daily. This is a testament to the growing demand for our app, as there are 400,000 new student drivers every day.
website
Journey
Invision
Arrow Icon Left

Prev Project

Next Project

Icon Arrow Right