The UX Crash Course

Project Background

The UX Crash Course is an eLearning module that I created leveraging Coassemble’s library of online training modules. This project was developed for a graduate school course that I participated in focused on developing pedagogical solutions for enhanced instructional design. This most recent project I created was my first attempt at leveraging an eLearning resource to implement an instructional design solution. While I still want to keep myself focused on UI design and Front End development growth, this particular assignment gave me an opportunity to broaden my technical skillset. 

Coassemble is an open source framework that gives its users an opportunity to design and implement various commercial or business oriented training programs. The tool itself is flexible in the sense that you are able to either build a training from scratch or with assistance from a template. For this assignment, I had a chance to create from scratch using Coassemble’s site builder. For more info on this resource, check out their landing page by clicking here! 

For a site demo on my completed eLearning module click here.

Project Requirements

Below is an excerpt of our eLearning module development assignment. All action items were performed in an iterative fashion over the span of two-weeks:

  • Design, develop and implement the e-learning/training module. Each student will develop and implement approximately 30 minutes of instruction using EITHER the technologies covered in your Technology Deep Dive Project (recommended but not required) OR some other technology covered in this course: Note: You may choose to implement more than 30 minutes of instruction, depending on the size of your project, but 30 minutes is the minimum. Implement means “live” and working so that a learner can complete the instruction, including some form of learner evaluation (e.g., tests, knowledge checks) and interaction (e.g., link to external communities of practice, discussion board). Even self-paced modules must include these elements.

Notes/Lo-Fidelity Wireframes

  • Brainstorming

    Before jumping straight into the wireframe building process of this project, I had to take some time tp brainstorm potential options for how I could efficiently go about building this deliverable. Below is a rough screen capture of how I ordinarily try to jot down courses of action.

  • Initial Sketch

    Taking a look back at all of the recent projects I’ve built, including this portfolio, I’ve noticed that my go to interface layout is the ‘hero image’, ‘3 card list’ convention. I do my utmost to think out of the box and avoid unnecessary repetition, however this structure is a personal favorite.

  • Fleshed Out Concept

    Once I had an idea as to how I wanted to break down the content of my training module, I began to incorporate more detailed element placement for the training home page. The biggest challenge here was determining what I wanted my content to convey to the end user.

Progression

  • First Electronic Wireframe

    Once requirements were identified and my interface layout was determined, I was able to quickly move into getting an electronic wireframe implemented. This gave room to the foundation of the final deliverable.

  • Iterated Mockup

    With inspiration drawn from my DIBNet landing page layouts, I wanted to see if that same format could be applied in the UX Crash Course landing page module. While I did see potential in this, I really wanted to try and build something a little different.

  • Final Draft

    With help from Coassemble’s online framework, I was able to develop a new and more streamlined training interface. This particular iteration gave me an opportunity to build out a more streamlined and intuitive UI for others to interact with.

Top Project Playlist:

In alignment with the previous two projects I’ve showcased, this playlist in particular was comprised of different tracks that helped me get the creative gears turning for The UX Crash Course. Whether I’m working with or without music in my ear, pushing through the design/development process is always fulfilling (although, I tend to have more fun working on projects with music in my ear).