Technical Build | Instructional Design
An interactive learning experience designed and developed in HTML and CSS for corporate executives using an executive operations dashboard. The course teaches learners to interpret information that requires leadership attention, open the appropriate supporting tool, and document decisions using a repeatable review process.
At a Glance
Corporate executives and senior leaders
Consistent executive review, routing, and decision documentation
Instructional Design
Learning Experience Design
Front End Development
HTML, CSS
Custom Interface Development
Interactive Course
Action Map
Visual Storyboard
Interactive scenario based web learning
The Challenge
Leaders had access to dashboard data, including alerts, readiness indicators, operational summaries, and approval requests, but not a consistent process for deciding what required executive attention or what action should follow.
The learning need was not another feature walkthrough. Executives needed a focused, repeatable process for reviewing dashboard information, opening the appropriate supporting tool, making a decision, and documenting the next step.
The Approach
Scan dashboard indicators and identify what requires executive attention.
Open the appropriate executive tool or supporting document before taking action.
Make the decision and record ownership, timeline, and follow up.
Experience the Course
This interactive learning experience was developed in HTML and CSS to mirror the executive review workflow. Learners move through dashboard orientation, guided interpretation, tool selection, an applied executive scenario, and assessment before returning to the operational dashboard with a process they can use on the job.
Open Full Screen →
Design Process
Before development, the course was mapped to observable executive behaviors and then documented screen by screen for implementation.
Performance Strategy
The map connects the business goal and performance goal to five observable executive behaviors, practice activities, and evidence of success.
Screen Level Design
The storyboard documents instructional purpose, on screen content, learner interaction, feedback, visual direction, and development guidance across 19 storyboard pages representing the 27 screen course.
Design Decisions Behind the Build
Dashboard screens keep the learning connected to the environment executives are expected to use.
The framework reduces a complex review process to a repeatable approach leaders can apply each time they use the dashboard.
A realistic executive scenario shows how dashboard information, supporting tools, and decision criteria come together in a cross functional issue.
The course distinguishes executive review and decision making from work that belongs to managers or operational staff.
Designed Performance Outcomes
This project demonstrates my ability to translate an interface heavy operational system into a focused learning experience that supports executive decision making. The design connects action mapping, applied scenario design, visual storyboarding, and custom HTML and CSS development to observable learner behaviors and practical application.
The course returns learners to the dashboard with a repeatable process for reviewing information, routing issues, making decisions, and documenting follow up.
Open Full Screen →