The general design of the website should reflect Sentinel’s scientific focus and FDA’s mission to protect public health (see Appendix A, at the end of the attached document, for a list of FDA-approved stock images). With this general design focus, the website should have a conservative design style and represent themes of public health, data science, healthcare, and medical product safety.
The website must be compliant with Section 508 of the Rehabilitation Act. For further information, see: http://www.hhs.gov/web/section-508/index.html
Visual References provided at end of the attached document.
Key Website Design Principles
1.Group similar items together. The website gets updated with lots of study protocols, final study reports (in the form of either word documents or excel spreadsheets), new methods projects, etc. Currently they are displayed altogether without clear sorting or grouping and as a long list of items on the right and left sides of the page. We’d like to see these groups re-purposed. Consider placing the most important items front and center, with the content within each topic area ranked in order of most to least recent. “Evergreen” topics could appear in separate groups, coupled with an icon and a few words describing what is linked there. For example, topic areas may include:
c. Study Protocols and Surveillance Plans
f. Final Results and Reports
g. And three core components of Sentinel, which should stick together, apart from the other categories
i. Network of Collaborators
ii. Surveillance Tools
iii. Training Materials
These links would lead to a table of ongoing and completed projects in the particular area. For example, the methods link may lead you to a page that looks like this: http://mini-sentinel.org/methods/me…fault.aspx.
Here’s a rough idea of what the overall homepage vision might look like, but we expect the designer to make vast improvements on the aesthetics:
Figure 1. Homepage Vision (see attached document)
2. Use icons and symbols to guide and direct. The current website does not have visuals and relies heavily on text, which demands a lot reading from the end-users. Grouping similar items together and associating them with an icon will enhance usability and facilitate access to desired information.
3. Consider end-user needs. Most audiences come with 2 main purposes in mind: (a) obtain general information about the Sentinel system (“Sentinel Database at a Glance”, database structure/common data model, privacy, policies/procedures) and (b) access specific information on projects and FDA actions (protocols, final reports, publications, and drug safety communications).
4. The most frequently updated items are also generally the most important.
Specific Design Requirements
• The Sentinel homepage will be redesigned and have an uncluttered, user-friendly design that (1) broadly communicates Sentinel’s mission, (2) provides clear navigation to subsections of website, and (3) highlights latest website postings, including announcements/postings/public comment documents.
• The redesigned homepage should maintain the following design elements and features of the existing webpage:
o Site-wide: Logo, which is provided with this brief (note that this is a placeholder logo, and the final logo may change—colors will remain the same though)
o Color scheme should be consistent with current website
o Footer: Copy, logo placement, order of links
- “About Sentinel” box and the “Related Links” box must remain on the home page, but they do not have to remain in the same location on the page.
- The main headers must always be in the order: Sentinel; Drugs; Vaccines, Bloods & Biologics; Medical Devices; Communications. While the order cannot change, it is acceptable to change the design of the headers.
o The search box must remain at the top right corner of the page.
o The “Spotlight” and “Latest Postings” boxes must remain on the home page.
• The website must be designed with reactive design in mind so that a developer can code the page to work desktop and mobile devices.