top of page

User Experience

Below are two navigation scheme examples. Project 01 is a screenshot of a custom Moodle navigation. Project 02 is a template for an interactive resume. 

Much of my academic research has focused on web interface design. Below are two interface examples. Project 01 is navigation that guides graduate students through a treatise project. The navigation is a multicolored circle with labeled sections. The design is unexpected, which is appropriate because the assignment demands that students think creatively. The multiple bright colors not only organize the information, but also attract attention, stimulate the eye, and inspire the energy needed by the students during the long, complex project. Project 02 follows the typical grid pattern, with the navigation on the left and some standard and mimetic icons. For example, a house indicates the home page and a person pointing to a screen/blackboard suggests instruction. Project 02 is a template intended for use in many situations. It quickly communicates information in a traditional, limited-palette grid structure. The appeal of this design is that it matches what users have been trained to see for navigation. 

Project 01: Treatise Support Center

Project | 01

Software Used

  • PowerPoint

  • Moodle

 

Treatise Support Center

Goal: To create navigation that engages and motivates the viewer and can accommodate future additional content.

 

Process: I was both the main instructional designer for this course and the lead instructional designer for the program. The client requested custom Moodle navigation for the students' treatise projects. I collaborated with the co-instructional designer and the client to search for appropriate images that could be modified for navigation. The client chose the one below. Clicking on each colored sector of the circle took the student to a corresponding page with information and resources. (Note: The image below does not have live links.) I delegated the storyboarding to the co-instructional designer, a new hire whom I was onboarding, and guided her through the development process. The media team then used the storyboard to create the custom navigation for Moodle. 

Result: Below is a screenshot of the custom Moodle navigation: Treatise Support Center. 

Project | 02

Software Used

Adobe Captivate Portfolio Template

Goal: To create a portfolio template so that sections become navigational tools for the user.

Process: I used the new fluid boxes in the original Adobe Captivate so the project would be responsive. The seven icons allow for a variety of portfolio options that give the portfolio developer maximum flexibility.  

Project 02: Portfolio Template
  • Adobe Captivate

  • Web Clipper

Result:  Please click on the image below shows the template. 

screenshotforportfolio.PNG
bottom of page