Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
CSS Stylesheet
importhttps://qnetconfluence.cms.gov/download/attachments/510799656/hover.css?api=v2

Include Page
Nav-buttons-a-home
Nav-buttons-a-home

Div
styleheight: 20px;


Include Page
HCD Banner
HCD Banner

Include Page
HCD-Image-Nav
HCD-Image-Nav

CSS Stylesheet
importhttps://qnetconfluence.cms.gov/download/attachments/510799656/hover.css?api=v2


Div



Div
stylewidth: 80%; margin: 0 auto;


Panel
bgColorffffff
borderWidth0

Include Page
HCD Alert Widget
HCD Alert Widget




Column
width28%

Training & Events 


  • & Training - Introduction to Human-Centered Design


  • Office Hours


  • Training -Persona-Driven Backlog Prioritization


  • Office Hours


  • Training - UX & Agile for Software Development


HTML
<style>
#middle {
width:1px;
height: 100%;
background-color: lightgray;
   }
</style>
Column
width2%
Div
idmiddle


Column
width70%
Span
stylevertical-align: top; margin-top: -10px;
classfontCo;or1

Latest from the Blog

Human-Centered AI: 5 HCD Principles for Developing AI

In recent years, Artificial Intelligence (AI) has transcended the realms of science fiction to become an integral part of our daily lives. From recommending the next song on your playlist to predicting global financial markets, AI's capabilities are vast, varied, and truly transformative. As with any disruptive technology, the potential of AI is unparalleled, promising solutions to some of the most pressing challenges we face today in healthcare. Read more...




Include Page
HCD Meet Our Team
HCD Meet Our Team


Div
classfontColor1


Div
stylefloat:left; margin-bottom: 20px; margin-right: 20px;

Image Added

“Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.”

-Paul Rand


Where Are We Going?

HTML
<iframe  style="float:right; margin-left: 20px; margin-top: 30px;" width="320"  height="180"  src="https://www.youtube.com/embed/uXJ-tD_uWo8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The HCD Center of Excellence is helping CCSQ to achieve a new future where:

  • CMS is a champion of fulfilling the charge of OMB Circular A-11 Section 280 (i.e., “Managing Customer Experience and Service Delivery”)

  • CCSQ fully idealize their UX maturity goals and design thinking permeates all aspects of the organization. 
  • Process is in place to track the quality of user experience throughout design projects and across releases.
  • Find ways to measure the ROI of UX and how it is maps to the organization's mission. (Cost Reduction, Cost Savings, Modernization.)
  • Design thinking is applied in the broadest perspective possible to drive consistent customer experience.
  • UX processes are connected and integrated with other organization processes that enable individuals to work together to create the user experience of the product(s) and service(s).
Info

This site is under construction. More information coming soon!

Welcome to the Human-Centered Design (HCD) Space

Human-centered design (HCD) is an intentional process in which the needs, motivations, and limitations of the people using a product or service are considered. The HCD process focuses on user needs and characteristics, usability goals, environment, tasks, and workflow in the design of a product and the services that enable it, such as communications and governance.

HCD follows a series of well defined methods for analysis, design, and evaluation of hardware, software, and web interfaces. The HCD process is iterative, generally predictable, and repeatable. Research, design, and evaluation steps are built in from the first stage of each project, and they continue throughout to implementation.

 

Panel
borderColor#aab8c6
bgColor#fcfcfc
borderWidth1
borderStylesolid

Need Help with Anything HCD Related?

Placeholder text. Something here about come to us instead of bothering Leslie and Suzanne from CMS. Commodo consequat. Duis autem vel eum iriure dolor. hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Image Removed HCD@hcqis.org

HCD Process & Methods (with examples, templates and additional resources)

Click on the links within the columns below to view the What, Why, When, and How to use each method along with any templates or additional resources within the step.

...

width16%

Image Removed

Kick off project,
define problem and scope,
identify SMEs and
review existing data.

HTML
<!-- THIS CODE IS FOR THE DROPDOWNS TO WORK PROPERLY.  THIS IS HTML CODE FOR NOW, BUT A TICKET WILL BE IN WITH THE JIRA TEAM TO CREATE THIS WITHOUT HTML KNOWLEDGE -->
<p align="center">
<!-- THE HREF="#initiate" and ARIA-OWNS="initiate" determines what dropdown - DIV id="initiate" without the # - appears when clicking on the link. This needs to be custom for each link / dropdown combo  -->
<a href="#initiate" aria-owns="initiate" aria-haspopup="true" class="aui-button aui-dropdown2-trigger aui-style-default">Methods</a></p>
<!-- Simple Dropdown - dropdown -->
<div id="initiate" class="aui-dropdown2 aui-style-default">
    <ul class="aui-list-truncate">
        <li><a href="http://example.com/">Initiate Overview</a></li>
		<li><a href="http://example.com/">Analysis & Synthesis</a></li>
        <li><a href="http://example.com/">Bodystorming</a></li>
        <li><a href="http://example.com/">Empathy Maps</a></li>
        <li><a href="http://example.com/">How Might We…?</a></li>
        <li><a href="http://example.com/">Problem Statement</a></li>
        <li><a href="http://example.com/">Project / Design Brief</a></li>
		<li><a href="http://example.com/">Project Kickoff Meeting</a></li>
		<li><a href="http://example.com/">Requirements Gathering</a></li>
		<li><a href="http://example.com/">Stakeholder Interviews</a></li>
		<li><a href="http://example.com/">Stakeholder Mapping</a></li>
		<li><a href="http://example.com/">Storyboard</a></li>
		<li><a href="http://example.com/">User Stories</a></li>
    </ul>
</div><!-- .aui-dropdown2 -->

...

width16%

Image Removed

Observe and document
where your users' problems
exist via interviews
and immersion.

HTML
<!-- THIS CODE IS FOR THE DROPDOWNS TO WORK PROPERLY.  THIS IS HTML CODE FOR NOW, BUT A TICKET WILL BE IN WITH THE JIRA TEAM TO CREATE THIS WITHOUT HTML KNOWLEDGE -->
<p align="center">
<!-- THE HREF="#immerse" and ARIA-OWNS="immerse" determines what dropdown - DIV id="initiate" without the # - appears when clicking on the link. This needs to be custom for each link / dropdown combo  -->
<a href="#initiate" aria-owns="initiate" aria-haspopup="true" class="aui-button aui-dropdown2-trigger aui-style-default">Methods</a></p>
<!-- Simple Dropdown - dropdown -->
<div id="immerse" class="aui-dropdown2 aui-style-default">
    <ul class="aui-list-truncate">
        <li><a href="http://example.com/">Immerse Overview</a></li>
		<li><a href="http://example.com/">Contextual Inquiry</a></li>
        <li><a href="http://example.com/">Customer Journey Maps</a></li>
        <li><a href="http://example.com/">Design Studios</a></li>
        <li><a href="http://example.com/">Desirability Testing</a></li>
        <li><a href="http://example.com/">Diary Studies</a></li>
        <li><a href="http://example.com/">Empathy Map</a></li>
		<li><a href="http://example.com/">Ethnographic Research</a></li>
		<li><a href="http://example.com/">Focus Groups</a></li>
		<li><a href="http://example.com/">Interviews</a></li>
		<li><a href="http://example.com/">Participatory Design</a></li>
		<li><a href="http://example.com/">Personas</a></li>
    </ul>
</div><!-- .aui-dropdown2 -->

...

width16%

Image Removed

...

HTML
<!-- THIS CODE IS FOR THE DROPDOWNS TO WORK PROPERLY.  THIS IS HTML CODE FOR NOW, BUT A TICKET WILL BE IN WITH THE JIRA TEAM TO CREATE THIS WITHOUT HTML KNOWLEDGE -->
<p align="center">
<!-- THE HREF="#synthesize" and ARIA-OWNS="synthesize" determines what dropdown - DIV id="initiate" without the # - appears when clicking on the link. This needs to be custom for each link / dropdown combo  -->
<a href="#synthesize" aria-owns="initiate" aria-haspopup="true" class="aui-button aui-dropdown2-trigger aui-style-default">Methods</a></p>
<!-- Simple Dropdown - dropdown -->
<div id="immerse" class="aui-dropdown2 aui-style-default">
    <ul class="aui-list-truncate">
        <li><a href="http://example.com/">Synthesize Overview</a></li>
		<li><a href="http://example.com/">Affinity Diagramming</a></li>
        <li><a href="http://example.com/">Card Sorting</a></li>
        <li><a href="http://example.com/">Comparative Analysis</a></li>
        <li><a href="http://example.com/">Content Audit</a></li>
        <li><a href="http://example.com/">Data Visualization</a></li>
        <li><a href="http://example.com/">Empathy Map</a></li>
		<li><a href="http://example.com/">Journey Mapping</a></li>
		<li><a href="http://example.com/">Mental Modeling</a></li>
		<li><a href="http://example.com/">Mind-mapping</a></li>
		<li><a href="http://example.com/">Proto Personas</a></li>
		<li><a href="http://example.com/">Top Task Analysis</a></li>
		<li><a href="http://example.com/">User Stories</a></li>
    </ul>
</div><!-- .aui-dropdown2 -->

...

width16%

Image Removed

...

HTML
<!-- THIS CODE IS FOR THE DROPDOWNS TO WORK PROPERLY.  THIS IS HTML CODE FOR NOW, BUT A TICKET WILL BE IN WITH THE JIRA TEAM TO CREATE THIS WITHOUT HTML KNOWLEDGE -->
<p align="center">
<!-- THE HREF="#ideate" and ARIA-OWNS="ideate" determines what dropdown - DIV id="initiate" without the # - appears when clicking on the link. This needs to be custom for each link / dropdown combo  -->
<a href="#ideate" aria-owns="initiate" aria-haspopup="true" class="aui-button aui-dropdown2-trigger aui-style-default">Methods</a></p>
<!-- Simple Dropdown - dropdown -->
<div id="immerse" class="aui-dropdown2 aui-style-default">
    <ul class="aui-list-truncate">
        <li><a href="http://example.com/">Ideate Overview</a></li>
		<li><a href="http://example.com/">Brainstorming</a></li>
        <li><a href="http://example.com/">Brain-Writing</a></li>
        <li><a href="http://example.com/">Collaborative Sketching</a></li>
        <li><a href="http://example.com/">Design a Superhero</a></li>
        <li><a href="http://example.com/">Forced Connections</a></li>
        <li><a href="http://example.com/">Empathy Map</a></li>
		<li><a href="http://example.com/">Journey Mapping</a></li>
		<li><a href="http://example.com/">Mental Modeling</a></li>
		<li><a href="http://example.com/">Mind-mapping</a></li>
		<li><a href="http://example.com/">Proto Personas</a></li>
		<li><a href="http://example.com/">Top Task Analysis</a></li>
		<li><a href="http://example.com/">User Stories</a></li>
    </ul>
</div><!-- .aui-dropdown2 -->

...

width16%

Image Removed

Create storyboards
or low-fidelity solutions
to elicit feedback;
refine and iterate.

HTML
<!-- THIS CODE IS FOR THE DROPDOWNS TO WORK PROPERLY.  THIS IS HTML CODE FOR NOW, BUT A TICKET WILL BE IN WITH THE JIRA TEAM TO CREATE THIS WITHOUT HTML KNOWLEDGE -->
<p align="center">
<!-- THE HREF="#prototype" and ARIA-OWNS="prototype" determines what dropdown - DIV id="initiate" without the # - appears when clicking on the link. This needs to be custom for each link / dropdown combo  -->
<a href="#prototype" aria-owns="initiate" aria-haspopup="true" class="aui-button aui-dropdown2-trigger aui-style-default">Methods</a></p>
<!-- Simple Dropdown - dropdown -->
<div id="immerse" class="aui-dropdown2 aui-style-default">
    <ul class="aui-list-truncate">
        <li><a href="http://example.com/">Prototype Overview</a></li>
		<li><a href="http://example.com/">Cognitive Walkthrough</a></li>
        <li><a href="http://example.com/">Interactive Prototype</a></li>
        <li><a href="http://example.com/">Paper Prototype</a></li>
        <li><a href="http://example.com/">Product Prototype</a></li>
        <li><a href="http://example.com/">Role Playing</a></li>
        <li><a href="http://example.com/">Service Prototype</a></li>
		<li><a href="http://example.com/">Sketch</a></li>
		<li><a href="http://example.com/">Storyboarding</a></li>
		<li><a href="http://example.com/"></a></li>
		<li><a href="http://example.com/">Proto Personas</a></li>
		<li><a href="http://example.com/">Top Task Analysis</a></li>
		<li><a href="http://example.com/">User Stories</a></li>
    </ul>
</div><!-- .aui-dropdown2 -->
Column
width16%

Image Removed

Pilot a solution;
track metrics, manage
and communicate change,
and improve for roll-out.

Recent space activity

Information coming soon!

PM3 HCD team:  

Space contributors

...