Drug Information Association

These are the various features and development projects for the Drug Information Association website designed to improve the user experience and fulfill business goals. The "my membership auto renew" feature was released in May 2016 with the goal of reducing payment friction at the end of a membership period. This also allows membership revenue to be more consistent over time, while giving the user an efficient avenue for long term membership management. The poster listing and detail pages were required for the DIA 2016 Annual Meeting for listing and showing all of the approved applicants' scientific posters. Hundreds of posters are presented and this is the place where they can be located onsite, with an accurate scientific overview for attendees.

Process

Page construction started by a finding a similar page already living on the production website and using that page as a template from which to add the HTML and CSS components. The three HTML pages were then stripped of their HTML content and remade with CSS components based on their content type. After the initial pass they were put up on Codepen for review by a senior developer and the senior interaction Front-End Dev/UX Designer. A few cycles of iteration allowed for spacing, CSS components and design patterns to be visually correct and conform to our CSS codebase style guide. During page building, minimal additions were made to the CSS codebase in order to minimize error and keep specificity low. Lastly, the pages were converted to csHTML and were finally committed and pushed to the staging site for proofing before a final push to production.

Analysis

The newly designed DIA website allows for easy front end decisions to get made quickly because of the pre-existing design language. Since these patterns were already in use and proven to work by Google analytic data it was easy to reuses them and keep the front end codebase clean and error free. Patterns used include profile pages, tutorial listings, presentation details and the 2015 poster details page. The new addition to the front end process was the use of Codepen, which allows instant sharing of page prototypes with code and visuals to speed up feedback and iteration across our team.

Responsibilities

• Web page and feature mockups
• Page layout
• Wireframes
• HTML, CSS and JavaScript prototypes