Center for Health Research Public Website

Overview

The first project I was assigned at Kaiser Permanente- Center for Health Research was to redesign and develop the user interface of the public website. The existing site at the time existed within a home-grown CMS that was highly outdated and the amount of unorganized content made it very difficult to keep up to date. My team was tasked to research and propose the appropriate CMS for the website, cleanup and reorganization content, modernize the visibility of the user interface,  develop, and publish the site on the web.

Approach

Discovery Phase: The first steps into the project was to conduct a thorough analysis of the website and to interview stakeholders who managed the content. This analysis helped with understanding the business objectives and the clear usability issues at hand. This analysis was followed by immediate user research efforts to understand the user community. The user research methods included surveys and conducting task analysis usability testing of internal and external users. The results included the development of user personas and design standards to abide by as we moved forward.

Content Organization Phase: The first priority was to bring all of the content to the surface and review it with the stakeholders. This was done by drafting a thorough content inventory that included the content types, links where the content resided, and the status of the content. This review was followed by the creation of a concept map that helped my team understand the relationship of the content we decided to keep, delete, or update. The concept map was also a helpful guide for me to create a sitemap presenting the proposed information architecture for the website. More details of how the information will be organized at the web page level and the overall navigation of the site was described through the design of low fidelity wireframes.

Design Phase: Now that we had a clear understanding of the CMS and web components available to us, we began designing higher fidelity wireframes used for communicating with the stakeholders and users. Wireframes were created using tools available through the Adobe Creative Cloud suite and static HTML, CSS within the Bootstrap 3 framework. We used a “mobile first” strategy for designing the wireframes to understand how we will develop the website for all devices.

Development Phase: After a comprehensive review and testing of multiple CMS systems, we decided to use Dot Net Nuke (DNN) because it was aligned to our department’s .Net development stack. We developed customized layout templates and then built out the website pages. This also included the rendering of images and other assets for the web.

Publishing Phase: When the website was developed and final css polishing was complete, we moved the website to production.

Maintenance: After the launch of the website, I assisted the content editors by providing CMS documentation and training, design guidance for new content, troubleshooting technical issues, and publishing content that required a higher understanding HTML/CSS.

2021 Update: There was a new user research effort regarding accessibility with methods including user interviews, user task analysis, and heuristic analysis of the website according to WCAG 2.0 guidelines. This led to a UI redesign effort to meet our goals to align the website with Kaiser Permanente’s branded style requirements, update the development framework to Bootstrap 4 and to meet web accessibility standards. I created high fidelity wireframes to share the vision with the stakeholders and to use as a guide for myself while developing the final UI redesign in the CMS.

Visit the Website

Deliverables

  • Competitive analysis
  • User Research Report & Design Recommendations
  • User Personas (Internal & External)
  • Design Principles
  • Content Inventory
  • Concept Map
  • Information Architecture
  • Wireframes
  • CMS Manageable Public Website

Tools & Methods

  • Visio
  • Adobe Dreamweaver/Visual Studio Code
  • Adobe Photoshop
  • Dot Net Nuke (DNN)
  • Bootstrap
  • HTML5/CSS3/JS/JQuery