I also created server-side code for two of the 2013 course pages that restricts access to course attendees. These pages feature downloadable documents and mobile-friendly embedded video which is delivered by Amazon Web Services.
A very simple and clinical page was needed to quickly catch the attention of busy hospital CEOs and persuade them to watch a video. Originally envisioned as a series of pages, I edited the content until only essential features were left, then created a responsive design using HTML and CSS. The page features an embedded icon font, a download button created entirely with CSS, and an embedded YouTube video of a renowned subject expert.
The intro page features an overview of how the course works and how results from practice tests administered on a separate website are included. The process can be confusing, so I created a workflow graphic to show each step. Introduction videos also demonstrate different aspects of the course.
The faculty page includes photos and a short bio for each video presenter. I added a common background to each of the presenter’s photos for consistency and style.
The Course Modules page is designed using an outline format that mimics the written registry examination. I wrote a script to reveal links to course videos and printable slide presentations when a section title is selected.
Selecting a video’s title opens a video player on a separate page that was designed to be simple and distraction free. The videos are served from Amazon Web Services. I wrote a script that marks a video as viewed then reveals a pop quiz when a video has finished playing.
There is also an Exam Results page that shows a student’s progress by displaying practice test results.
This page is an association membership application form. The design challenge is how to quickly and simply inform the user about the different levels of association membership without displaying a lot of text.
To make the process as simple as possible, I designed three large buttons that convey the main differences in membership levels: price, and what format association publications are received. If a user chooses to have one print and one electronic publication, an additional button is displayed that allows them to select which publication to receive in print.
This is landing page for a membership campaign called “Kate Makes the Case” and describes how a busy therapist named Kate uses the benefits of her professional association.
The page features an embedded YouTube video, printable infographics, and a design I created to tie everything together. I originally sketched the design on paper, then created a color mockup in Photoshop and produced the final page with HTML and CSS.
Some healthcare professionals must provide continuing education transcripts when renewing their license to practice, and surveys have shown that the most popular professional association benefit is continuing education tracking. This app makes it much more convenient for members to create and share their transcript and track their continuing education credit totals. Other features include showing continuing education requirements for each state, a list of available courses that can be taken for credit, and notifications that remind members of transcript due dates.
I started with pencil sketches to quickly record my ideas. After some research, I created task flow diagrams in Illustrator to map out the key functions of the app. Wireframes were created with Balsamiq Mockups to get feedback on features and content, then tight Photoshop mockups were created to show how the app could look.
Source files for this project are available for download:
These images were all featured on the home page of aarc.org, a site maintained by the American Association for Respiratory Care for respiratory therapists. I created each image in Photoshop and they represent common tasks I perform when designing—selecting, retouching, editing, and masking photos, creating logos, icons, and graphics, creating color palettes, and choosing fonts.
AARC University is an online learning portal where students can browse, purchase, and view courses, then take examinations for continuing education credit. I created this logo in Adobe Illustrator to have a collegiate feel.
Lecture Lab is a project that encourages people to become presenters at an annual meeting by giving them a chance to audition in front of a panel of experts. A logo was needed that could be printed on a large banner and also be legible at small sizes online and in print. I created this logo with Adobe Illustrator.
The 2004 Elections that were held at the association where I work needed a logo. I created this design in Adobe Photoshop and it appeared online and in print.
Lunch & Learn is an ongoing series where I train staff members on subjects ranging from typography to computer software. I created this logo in Adobe Illustrator, and it contains the three elements that make up the events: the staff, free pizza(!), and new ideas. The logo is used in Keynote presentations and HTML email invitations.