Design & PHP Development

As the in-house designer and Drupal themer for Illumeo, an on-demand video training platform, Kevin’s fingerprints are all over this website, which he made mobile-responsive.

Organization: Illumeo

Home Page and Other Upper-level Marketing Pages

Design Problems Addressed: Quickly communicate Illumeo’s benefits and features, addressing the needs of four key segments: Finance, HR, Marketing and Sales. Ensure all pages are accessible by mobile device and remain effective.

Measuring Success: User acquisition and retention metrics.

Process: Marketing structure was proposed by the CMO with CEO oversight. There would be quite a few pages to make appeals to a number of different potential audiences. The CMO provided original content. Kevin wireframed new header navigation structure and a few sample pages, then produced prototype pages and and iterated on feedback from the CEO, CTO and CMO, then shipped the final products on the site, over 24 separate marketing pages. Yes he did suggest fewer might be better.

Results: Executive leadership was well satisfied by the initiative, and gathered positive feedback from board members and user representatives, especially on the mobile versions.

Illumeo Home Page Desktop
The Illumeo Home Page viewed on desktop (click to view full-length screen)
Illumeo Home Page Mobile
The Illumeo Home Page viewed on mobile (click to view full-length screen)

An Individual Course

Design Problems Addressed: Course content and intent should be clear and concise, prominently display ratings, enrolled students as social proof, duration, level, continuing education credits offered, calls to action for purchase or subscription, involvement in internal certificate programs, a course preview, and provide a view into questions students ask of instructors, and their responses.

Measuring Success: User engagement, use metrics and ratings.

Process: Kevin did several rounds iteration on wireframing, prototyping, Drupal theming in PHP/HTML/CSS, and deployments to ship this product. Adjustments were made to address SEO and usability, based on analytics and feedback.

Results: User and stakeholder feedback was very positive. Users reported being able to effectively take courses any time, on any device.

An Illumeo Course Page on Desktop
An Illumeo course seen on desktop (click to view full-length screen)
Illumeo Course Page on Mobile
An Illumeo course viewed in a mobile browser (click to view full-length screen shot)

A Course Detail Page

Design Problems Addressed: Users would need to be able to work their way through each course, watch the videos, download supplemental materials, keep track of their progress, and pass a quiz to satisfy the requirements of the continuing education credit granting authority.

Measuring Success: User completion metrics. If they completed the courses and collected their CPE in significant numbers, it was a good result.

Process: Course node design went through several iterations, with variations on the header titles, course tracking controls for both corporate and individual use, and course navigation on left, then right. Kevin provided wireframing and themed the designs in Drupal. The course progress thermometer was a nice touch.

Results: Users indicated strong satisfaction through positive course reviews and ratings. User testing showed that users were able to complete courses using mobile devices, and several reported satisfaction with being able to take courses while traveling.

Illumeo Course Detail Page
An Illumeo course detail page viewed on desktop (click to view full-length screen)
Illumeo Course Detail Page in Mobile
An Illumeo course detail page viewed on mobile (click to view full-length screen)

Illumeo Competency Assessment, Step 1: Assess

For more information about the design process, see Competency Assessments.

Illumeo Assessments - Assess - Desktop
An example Illumeo assessment in desktop (click to view full-depth screen)
Illumeo Assessment - Assess - Mobile
An example Illumeo assessment in mobile (click to view full-depth screen)

Illumeo Competency Assessment, Step 2: Analyze Strength and Weakness

For more information about the design process, see Competency Assessments.

Illumeo Assessment - Analyze - Desktop
An example Illumeo assessment analysis in desktop (click to view full-depth screen)
Illumeo Assessment - Analyze - Mobile
An example Illumeo assessment analysis in mobile (click to view full-depth screen)

Illumeo Competency Assessment, Step 3: Recommend Courses for Improvement

For more information about the design process, see Competency Assessments.

Illumeo Assessment - Improve - Desktop
An example Illumeo assessment improvement in desktop (click to view full-depth screen)
Illumeo Assessment - Improve - Mobile
An example Illumeo assessment improvement in mobile (click to view full-depth screen)

To learn more, see Illumeo