National Driver Training
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.
UX/UI
IT & Marketing
Role:
Sr. UX Designer
Date:
2018 - 2022
Problem Space
In my role as a versatile designer, I had the exciting opportunity to lead and collaborate on the development of the 3rd version of our website, as well as contribute to the design of our web and native applications and digital marketing efforts across Google and social media. The company was facing challenges due to the absence of a cohesive visual identity, which impacted sales performance and conversion rates. The native iPhone application, generating $400 in monthly sales, was a great starting point but had room for improvement in terms of design. Our Google ads could benefit from stronger visuals with HTML animated ads. This presented a fantastic opportunity for growth and innovation, and I was energized by the extensive challenge ahead, focused on elevating the overall quality of the product and making a meaningful impact on the business.
1/9
Brainstorm
The first step is to brainstorm my thoughts fast and quickly. I create a personal strategy and lay them out. First, I use a sketchpad and several note-based applications. I use EverNote to type notes and lay out my thoughts with no format. Note-base applications help ease my creative anxiety and focus on the solution. I use my favorite brainstorming tool, MindMeister to jot down ideas and categories that lead me down creative thinking. I use the Spyfu application to generate an idea of what the competitor might be spending and other data-driven information.
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.
examamples
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
examples
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.
samples
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. 😃
