NDTI
NationalDriverTraining.com is an online driver education business that is accredited by the State. Their main focus is on parent-taught driving education. NDT has set the standard for how parents can become driver educators. They provide a digital Behind-The-Wheel guide and a comprehensive e-course for the teen student. Upon passing, the student will receive a TDLR approved Certificate which can be presented at the DPS, thereby replacing the DPS written exam. The teen student driver can learn at their own pace and receive a complete education.
Problem Space
My position was as a versatile designer responsible for directing and assisting in the creation of the 3rd version of our website, our web and native applications, and digital designs for our marketing efforts on Google and social media. The company was struggling due to its lack of a cohesive visual identity, resulting in poor sales performance and low conversion rates. The native iPhone application, which only generated $400 in monthly sales, looked like a rough prototype. Additionally, our Google ads lacked visuals and HTML. The task at hand was extensive, requiring me to cover a lot of ground in order to create a high-quality product.
2/9
Sketches
I grabbed a notepad and sketched out a few concepts for the landing page, top-level, and second-level pages. The main focus was on the pricing cards. This allowed me to explore different ways of interacting with the website, as well as getting some ideas for the visual design. Afterwards, I took those sketches and turned them into low-fidelity wireframes.
3/9
Mapping
Together with the marketing team, we utilized FlowMapp to create a streamlined process for customers to access the product pricing cart without having to navigate through any PDP pages. As the Drivers Ed class is simple and students are eager to start driving, they want to obtain their driver’s ed permit as quickly as possible.
4/9
Wireframes
I developed the website, web, and native applications using Sketch and a third-party UI kit to create a professional layout that surpassed the competition.
5/9
Design libs.
At first, I had a library that served as the core and I had to divide it into modules for the core, app, and web. This was important because native apps change at a different rate than websites and web-based applications, and modularization makes scaling across various designs easier. I have categorized my libraries as follows:
- Core
- Icons
- Web & Web Applications
- Native App
- Mockups
- Imagery
- Illuistrations
4/9
HTML UI Kit
After creating mockups for the national website and affiliates, I developed a UI kit with modular sections to easily build pages for future web design builds and landing pages. I coded the exact UI Kit to HTML for an easier hand-off to developers. I shot 2 birds in 1 stone. coded the interface to my exact specifications and our developers who are not fond of HTML and CSS could worry less about building front-end code; ass they put less emphasis on the aesthetics of every visual component designer strive for.
6/9
Visual Design
As the person in charge of creating the visuals, I aimed to give our online driver’s ed school a modern and professional look that would set us apart from our competitors. The design is clean and represents the best driving school in the country. The attractive appearance instills confidence in parents, who are more likely to trust us as the first state-approved online driver’s ed company. The design uses a 3-color palette, with 5 solid accent colors and 2 gradients.
7 / 9
UI Patterns
After completing the design, I search for any repeated layouts and include them in the kit. This enables developers to have a comprehensive understanding of all the sections that they can use to build the site in a modular manner. By creating a design kit beforehand, you can document the site’s construction and how information is stacked together for effective communication.
8/9
Affiliates
Our company, National Driver Training, has affiliated driver education schools that utilize our program for both teen and adult driving courses. Our native app and template affiliate microsites are also available for online sales. As part of my role, I developed two versions of our affiliate websites with a modern “education technology” feel. The new visual designs are consistent with our centralized design system, which was not the case previously. Once the visual elements were finalized, I utilized our current HTML UI kit to create the main templates. The website is designed to be scalable for both smaller and larger microsites.
9/9
Briefs and Handoff
Our company, National Driver Training, has affiliated driver education schools that utilize our program for both teen and adult driving courses. Our native app and template affiliate microsites are also available for online sales. As part of my role, I developed two versions of our affiliate websites with a modern “education technology” feel. The new visual designs are consistent with our centralized design system, which was not the case previously. Once the visual elements were finalized, I utilized our current HTML UI kit to create the main templates. The website is designed to be scalable for both smaller and larger microsites.
Solution
I designed a professional and modern product that competes with DriversEd.com and Aceable. Through numerous visual designs, I was able to create a product that is on the same level as our competitors in terms of design and development. The digital products are consistent with our brand across web and print, resulting in a new digital experience that has boosted sales by 75% since my collaboration with the tech team. 😃
Brainstorm