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.
UX/UI
IT & Marketing
Role:
Sr. UX Designer
Date:
2018 - 2022
Problem Space
From 1998 to 2012, National Driver Training pioneered the world of online driver education, becoming the first company to offer an interactive and informative course in the emerging “worldwide web” era, achieving remarkable revenue growth. While we faced a challenge in 2014 with the rise of a new competitor in Austin, TX, who expanded by acquiring two national online driver’s ed companies, it presented an opportunity for us to innovate. We responded by creating cutting-edge visuals, implementing fresh marketing strategies, and offering unmatched customer support to attract the next generation of drivers. Our robust system stands out with features like parent-driven driver evaluations, a unique offering that many similar apps do not provide, ensuring our continued leadership in the industry.
Examples
1/7
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.
3/7
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.
4/7
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.
examamples
5/7
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.
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.
6/7
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.
for chapter levels
7/7
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.
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.
Light Mode