Derrin Evers

  • Front-End Craftsman
  • UI / Ux Engineer
  • Drupal / WordPress Practitioner

About Me

Present / Past / Future

You have arrived at the digital portfolio of Derrin Evers. I am a Web Developer and User Experience Architect specializing in Front-end design and development of user interfaces and digital interactions.

My professional experience has roots in a variety of aspects of the Web:

  • Founding partner and Director of Technology / Lead Developer at the award winning Minneapolis-based digital design agency Grandpa-George (G-G Amalgamated).

  • Faculty at The Art Institutes International Minnesota and The Institute of Production and Recording teaching Web Design and Interactive Media.

  • Experience working with companies large (Fortune 100) to small (less than 3 employees), as well as freelance work and agency environments, in the fields of education, medical, retail/ecommerce, and mobile.

My Code of Conduct

  • Build Tools that Bridge Gaps and Fulfill Needs.

    Building products to purpose with the best tools always ensures memorable experiences for the user.

  • Make Repetitive Tasks more Pleasurable.

    Create standards and conventions that users expect and enjoy.

  • Never Give Up on Users.

    A user's experience is dynamic and flowing; a flexible experience ensures that it keeps up with users.

CV/Resume

as .pdf -or- .docx

If you would like to contact me about an opportunity that might pique my interest, you may do so at derrin@derrine.com.

Projects

The China Office

Multi-lingual content management system

Technologies

  • PHP
  • HTML5
  • CSS3
  • SASS
  • Drupal
  • CKEditor
  • jQuery

My Role

  • Development
  • User Experience
  • Content Strategy
  • Design

Problem

The original China Office (then called the Beijing Office) website was developed in static HTML and managed using Adobe Contribute/Dreamweaver. After years of updates and cobbled together additions, the site was sore on the eyes, unreliable, and a growing pain on the team dedicated to maintain it; it needed to be completely replaced. A major goal of the project was to relieve the current content managers from the responsibility of making routine content updates. The site also needed to be multi-lingual and fully translated into Simplified Chinese.

Solution

Drupal was used for content management. Content types were carefully crafted to allow pages to easily reference other pages and content in the site. Contextually sensitive templates display the proper content based on where and how it is referenced. The WYSIWYG editor was extended to provide basic layout controls including grids and templates.

China Office home page - Simplified Chinese.
Home page shown in the default language: Simplified Chinese.
China Office home page - English.
Home page shown in the alternitive language: English.
Managing child nodes within the page editor.
Managing child nodes was made easy with autocomplete search boxes and drag-and-drop re-ordering.
China Office event page.
A robust event management system was created to make capturing RSVPs and event promotion simple and intuitive.
Child page action toolbar interface.
Child pages are easily managed from parent nodes by using the action toolbar.

CARLA/CLAC Resource Repository

A community driven, peer reviewed education resource repository.

Technologies

My Role

  • Development
  • User Experience
  • Design

Problem

The University of Minnesota needed a tool that would allow Professors/Researchers to submit resources related to language-based content instruction. The submission process needed to reflect a peer review style of procedure. Each submission would be approved by a review board. Review board members would be distributed across the world.

Solution

Drupal was used for general content management. A complex system of content types, taxonomies, user roles, and custom built modules were arranged to create a clean and simple interfaces to a complicated, iterative, and collaborative processes. Resource submitters are able to communicate directly with site editors through an extensive comment/notification system. The resource drafting process is controlled by pre-defined states that trigger automated actions based on previous/current state. Every step of the way the User is provided details about the current state of their submission as-well-as what to expect next.

Main submission form.
Main submission form.
Comprehensive commenting system.
Comprehensive commenting system.
E-mail notifications generated by comments.
E-mail notifications generated by comments.
User submission flow diagram.
User submission flow diagram.
Resource state flow diagram.
Resource state flow diagram.

Jewish refugees in Shanghai

Exhibit promotion website

Technologies

  • HTML5
  • CSS3
  • SASS
  • jQuery
  • Photoswipe.js

My Role

  • Development
  • User Experience
  • Design

Problem

The Confucius Institute at the University of Minnesota needed a website to help educate visitors and promote events discussing the stories of Jewish refugees in Shanghai China from 1933-1941.

Solution

A clean and simple, yet information rich, website was designed to encapsulate the amazing story told by five University of Minnesota alumni who lived through those harrowing times. Video and still imagery entices the User to attend the events. The project required a quick turn-around and close collaboration with the event sponsors and organizers.

Jewish Refugees in Shanghai home page.
Home page.
Jewish Refugees in Shanghai minnesota connection page.
Minnesota Connection page.
Jewish Refugees in Shanghai teaching resources page.
Teaching Resources page.
Jewish Refugees in Shanghai events page.
Jewish Refugees in Shanghai Events page.

Curated Content WordPress Plugin

A new tool for content production and management

Technologies

My Role

  • Development
  • User Experience

Problem

A Traditional Chinese Medicine service client had an interesting problem. She wanted to write articles on the web so that patrons could educate themselves about the techniques she practices. She understood that writing rich and engaging content can be time consuming. She already knew of many established resources online and hoped to reference their knowledge. Her vision was to act as a curator of good information that her clients could access quickly and with ease.

Solution

A WordPress plugin was created that manages all curated content. It ensures that it is well formatted and rich with metadata. This allows for things like automatic and proper attribution to the original author. Creating curated content is easy:

  • Mark-up the content in a TinyMCE editor.

  • Attach media using the built-in media library.

  • Add metadata using a simple form.

By leveraging custom post types in WordPress, all curated content is stored as reusable entities that can be tagged and organized as needed.

When an article is drafted, the curated content is added into the content editor via a custom TinyMCE plugin. With a click of a button, the user may search and/or filter all curated content within the site. Once content is chosen and a template selected, it is immediately preview-able within the editor content.

Adding curated content to a page.
Adding curated content to a page via TinyMCE plugin.
Adding new curated content.
Adding new curated content.
Adding metadata to curated content.
Adding metadata to curated content.
Automaticly generated reference list.
Automaticly generated reference list using built-in templates and metadata.

Accessibility Plugin

Test content as it's created, not after.

Technologies

My Role

  • Development
  • User Experience

Problem

WYSIWYG editors have allowed for more people to create formatted content that is ready for the browser than ever before. But, the ease of use and familiarity WYSIWYG editors provide can be a double edged sword. Even a savvy content editor may end up creating mark-up that is confusing to the Assistive Technology that many Users require.

Solution

This problem has already been solved in various ways, but there are a few common caveats:

  • Poor maintenance of codebase leading to outdated solutions.

  • Extremely specific execution that is difficult to replicate.

  • Expensive and proprietary.

The individual pieces needed to develop a comprehensive accessibility testing tool exist, they just needed to be amalgamated into a simple interface. A CKEditor plugin was created that utilized the Quail.js accessibility information library. The combination of these tools allows for fine control over text formatting, as-well-as live feedback about accessibility problems. The plug-in's development is still a work in progress as I work with others to define a standard set of accessibility tests.

Checking content for accessibility issues.
Checking content for accessibility issues.
Snippet of CKEditor plugin code.
Snippet of CKEditor plugin code.