API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 27th, 2020
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 50.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]>       <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
  3. <!--[if IE 7]>          <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
  4. <!--[if IE 8]>          <html class="no-js lt-ie9" lang=""> <![endif]-->
  5. <!--[if gt IE 8]><!-->
  6. <html class="no-js" lang="">
  7.   <!--<![endif]-->
  8.   <head>
  9.     <meta charset="utf-8" />
  10.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  11.     <title>Charlene S. Ni | NASTAD</title>
  12.     <meta name="description" content="" />
  13.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  14.     <link rel="icon" href="pinkicon.ico" />
  15.     <link rel="stylesheet" href="css/bootstrap.min.css" />
  16.     <link rel="stylesheet" href="css/normalize.css" />
  17.     <link rel="stylesheet" href="css/font-awesome.min.css" />
  18.     <link rel="stylesheet" href="css/icomoon.css" />
  19.     <link rel="stylesheet" href="css/slick.css" />
  20.     <link rel="stylesheet" href="css/slick-theme.css" />
  21.     <link rel="stylesheet" href="css/owl.carousel.min.css" />
  22.     <link rel="stylesheet" href="css/owl.theme.default.min.css" />
  23.     <link rel="stylesheet" href="style.css" />
  24.     <link rel="stylesheet" href="css/responsive.css" />
  25.     <link rel="stylesheet" href="css/color.css" />
  26.     <link rel="stylesheet" href="css/transitions.css" />
  27.     <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
  28.     <script src="jquery-3.4.1.min.js"></script>
  29.   </head>
  30.   <body>
  31.     <!--[if lt IE 8]>
  32.      <p class="browserupgrade">
  33.        You are using an <strong>outdated</strong> browser. Please
  34.        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
  35.        your experience.
  36.      </p>
  37.    <![endif]-->
  38.     <!--************************************
  39.             Wrapper Start
  40.     *************************************-->
  41.     <div id="tg-wrapper" class="tg-wrapper">
  42.       <!--************************************
  43.                 Header Start
  44.         *************************************-->
  45.       <header id="tg-header" class="tg-header tg-haslayout">
  46.         <div class="tg-navigationarea">
  47.           <strong class="tg-logo"
  48.            ><a href="index.html"
  49.              ><img
  50.                src="pinkicon.ico"
  51.                alt="company logo here"
  52.                style="width: 48px; height: 48px;"/></a
  53.          ></strong>
  54.           <nav id="tg-nav" class="tg-nav">
  55.             <div class="navbar-header">
  56.               <button
  57.                type="button"
  58.                class="navbar-toggle collapsed"
  59.                data-toggle="collapse"
  60.                data-target="#tg-navigation"
  61.                aria-expanded="false"
  62.              >
  63.                 <span class="sr-only">Toggle navigation</span>
  64.                 <span class="icon-bar"></span>
  65.                 <span class="icon-bar"></span>
  66.                 <span class="icon-bar"></span>
  67.               </button>
  68.             </div>
  69.             <div
  70.              id="tg-navigation"
  71.              class="collapse navbar-collapse tg-navigation"
  72.            >
  73.               <ul>
  74.                 <li class="tg-active"><a href="index.html">Work</a></li>
  75.                 <li><a href="agency.html">Agency</a></li>
  76.                 <li>
  77.                   <a
  78.                    href="https://drive.google.com/file/d/1ObsYDglH05xYwazogoI0ORMeamSYpxFz/view?usp=sharing"
  79.                    >Resume</a
  80.                  >
  81.                 </li>
  82.               </ul>
  83.             </div>
  84.           </nav>
  85.         </div>
  86.       </header>
  87.       <!--************************************
  88.                 Header End
  89.    *************************************-->
  90.  
  91.       <!--************************************
  92.                 Main Start
  93.         *************************************-->
  94.       <main id="tg-main" class="tg-main tg-haslayout">
  95.         <!--************************************
  96.                 Hero Start
  97.         *************************************-->
  98.         <div class="tg-workdetail tg-workdetailvtwo" id="0">
  99.           <figure class="tg-detailimg" style="background-color: #51c8ce;">
  100.             <img
  101.              src="images/NASTAD/NASTAD_cover.png"
  102.              alt="NASTAD"
  103.              style="object-fit: cover; opacity: 0.7; margin-left: 20%;"
  104.            />
  105.             <figcaption>
  106.               <div
  107.                style="background-color: rgba(29,29,29,0.5); padding-top: 20px; padding-bottom: 20px; align-content: center;"
  108.              >
  109.                 <h1 style="color: white; font-size: 48px;">
  110.                   NASTAD
  111.                 </h1>
  112.                 <br />
  113.                 <h4 style="color: white;">
  114.                   Need Assessment | UX Research
  115.                 </h4>
  116.               </div>
  117.             </figcaption>
  118.           </figure>
  119.           <div class="tg-workdetailcontent">
  120.             <div class="container">
  121.               <div class="row">
  122.                 <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  123.                   <ul class="tg-detailinfo">
  124.                     <li>
  125.                       <p>
  126.                         This is a group UX research project for the non-profit
  127.                         association NASTAD. Our team conducted a series of user
  128.                         research methods to identify user problems and help
  129.                         NASTAD improve the experience of its website. The
  130.                         research focuses on navigation and search functions on
  131.                         the website.
  132.                       </p>
  133.                     </li>
  134.                     <li>
  135.                       <p style="font-weight: 300;">
  136.                         <b>Role:</b> UX researcher
  137.  
  138.                         <br />
  139.                         <b>Skills:</b> Interaction map, Contextual inquiry,
  140.                         Comparative Evaluation, Heuristic Evaluation, Usability
  141.                         Test <br /><br />
  142.                         <b>Tools:</b> Adobe Illustrator, Validately <br />
  143.                         <b>Type:</b> Team project<br />
  144.                         <b>Client:</b> NASTAD <br />
  145.                         <b>Team:</b> Adrian Choi, Rex Su, Benjamin Yu<br />
  146.                         <b>Duration:</b> January 2019 - April 2019
  147.                       </p>
  148.                     </li>
  149.                   </ul>
  150.                   <div class="tg-description"></div>
  151.                   <hr size="8px" width="100%" />
  152.                   <!-- <figure
  153.                    class="tg-detailimg tg-simpleimghover at-projectfivecolor"
  154.                  >
  155.                    <div class="tg-themeimghover">
  156.                      <img
  157.                        src="images/work-detail-2/detail-img-2.jpg"
  158.                        alt="Image description"
  159.                      />
  160.                      <span></span>
  161.                    </div>
  162.                  </figure> -->
  163.                 </div>
  164.               </div>
  165.             </div>
  166.           </div>
  167.         </div>
  168.  
  169.         <!--************************************
  170.                 Hero End
  171.    *************************************-->
  172.  
  173.         <nav class="navigation" id="mainNav">
  174.           <a class="navigation__link" href="#0">OVERVIEW</a>
  175.           <a class="navigation__link" href="#1">CHALLENGE</a>
  176.           <a class="navigation__link" href="#2">GOAL</a>
  177.           <a class="navigation__link" href="#3">FINAL DESIGN</a>
  178.           <a class="navigation__link" href="#4">DESGIN PROCESS</a>
  179.           <a class="navigation__link" href="#5">RESEARCH</a>
  180.           <a class="navigation__link" href="#6">IDEATION</a>
  181.           <a class="navigation__link" href="#7">REFINE</a>
  182.           <a class="navigation__link" href="#8">REFLECTION</a>
  183.         </nav>
  184.         <!--************************************
  185.                 Challenge Start
  186.         *************************************-->
  187.         <div class="tg-sectionspace tg-haslayout" id="1">
  188.           <div class="container">
  189.             <div class="row">
  190.               <div
  191.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  192.              >
  193.                 <div class="tg-sectionhead">
  194.                   <h3 style="color: #51c8ce;">CHALLENGE</h3>
  195.                   <h2>
  196.                     How to improve the navigation on the website?
  197.                   </h2>
  198.                 </div>
  199.                 <div class="tg-sectiondescription">
  200.                   <div class="tg-sectiondescriptionP">
  201.                     <div class="tg-description">
  202.                       <p>
  203.                         The client of our project is <b>NASTAD</b>, a non-profit
  204.                         association that represents public health officials who
  205.                         administer HIV and hepatitis programs in the U.S. and
  206.                         around the world. NASTAD receives direct funding from
  207.                         the Centers for Disease Control and Prevention (CDC),
  208.                         and the U.S. Pacific Island jurisdictions.   According
  209.                         to our client, its website contains abundant resources;
  210.                         however, they received feedback from members saying that
  211.                         they have trouble <b>navigating on the website</b> and
  212.                         <b>finding specific pieces of content they need</b>.
  213.                       </p>
  214.                     </div>
  215.                   </div>
  216.                 </div>
  217.               </div>
  218.             </div>
  219.           </div>
  220.         </div>
  221.         <!--************************************
  222.                 Challenge End
  223.    *************************************-->
  224.         <!--************************************
  225.                 Outcome Start
  226.         *************************************-->
  227.         <div class="tg-sectionspace tg-haslayout" id="1">
  228.           <div class="container">
  229.             <div class="row">
  230.               <div
  231.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  232.              >
  233.                 <div class="tg-sectionhead">
  234.                   <h3 style="color: #51c8ce;">Outcome</h3>
  235.                   <h2>
  236.                     Recommendations on User Experience Design
  237.                   </h2>
  238.                 </div>
  239.                 <div class="tg-sectiondescription">
  240.                   <div class="tg-sectiondescriptionP">
  241.                     <div class="tg-description">
  242.                       <div class="tg-themeimghover">
  243.                         <iframe
  244.                          style="width: 600px; height: 400px; margin:auto"
  245.                          src="https://www.youtube.com/embed/FdsH2RZn3QY"
  246.                        >
  247.                         </iframe>
  248.                         <span></span>
  249.                       </div>
  250.                     </div>
  251.                   </div>
  252.                 </div>
  253.               </div>
  254.             </div>
  255.           </div>
  256.         </div>
  257.         <!--************************************
  258.    Outcome  End
  259. *************************************-->
  260.         <!--************************************
  261.                 Interaction Map Start
  262.    *************************************-->
  263.         <div class="container">
  264.           <div class="row">
  265.             <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  266.               <hr size="8px" width="100%" />
  267.             </div>
  268.           </div>
  269.         </div>
  270.         <div class="tg-sectionspace tg-haslayout" id="6">
  271.           <div class="container">
  272.             <div class="row">
  273.               <div
  274.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  275.              >
  276.                 <div class="tg-sectionhead">
  277.                   <h3 style="color: #51c8ce;">Interaction Map</h3>
  278.                   <h2>
  279.                     Interaction Map
  280.                   </h2>
  281.                 </div>
  282.                 <div class="tg-sectiondescription">
  283.                   <div class="tg-sectiondescriptionP">
  284.                     <div class="tg-description">
  285.                       <figure class="tg-projectimg tg-simpleimghover2">
  286.                         <div class="tg-themeimghover">
  287.                           <img
  288.                            src="images/NASTAD/SI622_Interaction_Map_0212update.png"
  289.                            alt="Interaction Map"
  290.                            style="width: 60%; margin: auto;"
  291.                          />
  292.                           <span></span>
  293.                         </div>
  294.                       </figure>
  295.                       <p>
  296.                         The interaction map helps us figure out the nested
  297.                         structure of the website.  From the interaction map, we
  298.                         found that the structure of the website is very
  299.                         complicated. In addition. there are some inconsistencies
  300.                         and broken links in some webpages.
  301.                       </p>
  302.                     </div>
  303.                   </div>
  304.                 </div>
  305.               </div>
  306.             </div>
  307.           </div>
  308.         </div>
  309.  
  310.         <!--************************************
  311.                 Interaction Map End
  312.    *************************************-->
  313.         <!--************************************
  314.                 Interview Start
  315.    *************************************-->
  316.         <div class="container">
  317.           <div class="row">
  318.             <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  319.               <hr size="8px" width="100%" />
  320.             </div>
  321.           </div>
  322.         </div>
  323.         <div class="tg-sectionspace tg-haslayout" id="6">
  324.           <div class="container">
  325.             <div class="row">
  326.               <div
  327.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  328.              >
  329.                 <div class="tg-sectionhead">
  330.                   <h2>
  331.                     Interview
  332.                   </h2>
  333.                 </div>
  334.                 <div class="tg-sectiondescription">
  335.                   <div class="tg-sectiondescriptionP">
  336.                     <div class="tg-description">
  337.                       <p>
  338.                         <br />
  339.                         <b>Target Users</b> <br />
  340.  
  341.                         NASTAD's staff and members. We interviewed one
  342.                         stakeholder, who is a staff of the communication team,
  343.                         and four staff of the organization. <br /><br />
  344.                         <b>Methods</b> <br />
  345.                         Our group conducted
  346.                         <b>contextual inquiry interviews</b>, transcribed each
  347.                         interview and further regrouped the contents through the
  348.                         <b>affinity diagram</b> which helped us find the common
  349.                         key points of the interviews. <br /><br />
  350.                       </p>
  351.                       <figure class="tg-projectimg tg-simpleimghover2">
  352.                         <div class="tg-themeimghover">
  353.                           <img
  354.                            src="images/NASTAD/SI622_affinity_analysis.jpg"
  355.                            alt="Affinity Analysis"
  356.                            style="width: 80%; margin: auto;"
  357.                          />
  358.                           <span></span>
  359.                         </div>
  360.                       </figure>
  361.                     </div>
  362.                     <div class="tg-description">
  363.                       <p>
  364.                         <b>Findings </b> <br />
  365.                         01. The website provides <b>equal opportunity</b> for
  366.                         members and non-members to access HIV program resources.
  367.                         <br />
  368.                         02. There are sufficient pain points within the
  369.                         <b>search function</b> that warrants a new solution to
  370.                         alleviate these problems.<br />
  371.                         03. Assessing <b>user feedback</b> and
  372.                         <b>employee capacity </b>whenever updating the website
  373.                         can help improve the website’s quality.
  374.                       </p>
  375.                     </div>
  376.                   </div>
  377.                 </div>
  378.               </div>
  379.             </div>
  380.           </div>
  381.         </div>
  382.  
  383.         <!--************************************
  384.    Interview End
  385. *************************************-->
  386.         <!--************************************
  387.                 Personas Start
  388.    *************************************-->
  389.         <div class="container">
  390.           <div class="row">
  391.             <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  392.               <hr size="8px" width="100%" />
  393.             </div>
  394.           </div>
  395.         </div>
  396.         <div class="tg-sectionspace tg-haslayout">
  397.           <div class="container">
  398.             <div class="row">
  399.               <div
  400.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  401.              >
  402.                 <div class="tg-sectionhead">
  403.                   <h2>
  404.                     Personas
  405.                   </h2>
  406.                 </div>
  407.                 <div class="tg-sectiondescription">
  408.                   <div class="tg-sectiondescriptionP">
  409.                     <div class="tg-description">
  410.                       <p>
  411.                         After our interviews with NASTAD staff and building the
  412.                         affinity diagram, we created three personas of NASTAD's
  413.                         website users. The personas enabled us to understand
  414.                         different user needs and helped us think from different
  415.                         perspectives for our following research and
  416.                         recommendations.<br />
  417.                       </p>
  418.                       <div style="margin: 20px;"></div>
  419.                       <figure class="tg-projectimg tg-simpleimghover2">
  420.                         <div class="multi-images" style="width: 100%">
  421.                           <img
  422.                            src="images/NASTAD/NASTAD_Persona_1 .jpg"
  423.                            alt="Persona 1"
  424.                          />
  425.                           <div style="margin: 10px;"></div>
  426.                           <img
  427.                            src="images/NASTAD/NASTAD_Persona_2.jpg"
  428.                            alt="Persona 2"
  429.                          />
  430.                           <div style="margin: 10px;"></div>
  431.                           <img
  432.                            src="images/NASTAD/NASTAD_Persona_3.jpg"
  433.                            alt="Persona 3"
  434.                          />
  435.                           <span></span>
  436.                         </div>
  437.                       </figure>
  438.                     </div>
  439.                   </div>
  440.                 </div>
  441.               </div>
  442.             </div>
  443.           </div>
  444.         </div>
  445.  
  446.         <!--************************************
  447.   Personas End
  448. *************************************-->
  449.         <!--************************************
  450.                 Comparative Evaluation Start
  451.    *************************************-->
  452.         <div class="container">
  453.           <div class="row">
  454.             <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  455.               <hr size="8px" width="100%" />
  456.             </div>
  457.           </div>
  458.         </div>
  459.         <div class="tg-sectionspace tg-haslayout" id="6">
  460.           <div class="container">
  461.             <div class="row">
  462.               <div
  463.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  464.              >
  465.                 <div class="tg-sectionhead">
  466.                   <h2>
  467.                     Comparative Evalutation
  468.                   </h2>
  469.                 </div>
  470.                 <div class="tg-sectiondescription">
  471.                   <div class="tg-sectiondescriptionP">
  472.                     <div class="tg-description">
  473.                       <p>
  474.                         From the interviews, our team found there are sufficient
  475.                         pain points within the <b>search function</b> of the
  476.                         website. <br /><br />
  477.  
  478.                         In order to provide a holistic evaluation of the
  479.                         website’s usability and organization, our team compared
  480.                         the website’s <b>functionality</b>, <b>features</b>,
  481.                         <b>>searchability</b>, and <b>aesthetics</b> with eight
  482.                         organizations that are similar to our client.
  483.                         <br /><br />
  484.  
  485.                         Based on nature, the eight organizations can be
  486.                         categorized as <b>Analogous Systems</b>,
  487.                         <b>Direct Competitor</b> or <b>Parallel Comparison</b>.
  488.                       </p>
  489.                       <div style="margin: 40px;"></div>
  490.                       <figure class="tg-projectimg tg-simpleimghover2">
  491.                         <div class="tg-themeimghover">
  492.                           <img
  493.                            src="images/NASTAD/Matrix (1).png"
  494.                            alt="Comparative Evaluation Matrix"
  495.                            style="width: 80%; margin: auto;"
  496.                          />
  497.                           <span></span>
  498.                         </div>
  499.                       </figure>
  500.                       <div style="margin: 20px;"></div>
  501.                       <figure class="tg-projectimg tg-simpleimghover2">
  502.                         <div class="tg-themeimghover">
  503.                           <img
  504.                            src="images/NASTAD/Comparative evaluation.png"
  505.                            alt="Comparative Evaluation Outcome graph"
  506.                            style="width: 80%; margin: auto;"
  507.                          />
  508.                           <span></span>
  509.                         </div>
  510.                       </figure>
  511.                     </div>
  512.                   </div>
  513.                 </div>
  514.  
  515.                 <div class="tg-sectiondescription">
  516.                   <div class="tg-sectiondescriptionP">
  517.                     <h4
  518.                      style="text-transform:none; font-weight: 700; font-family: 'Open Sans'; text-align: left;"
  519.                    >
  520.                       Findings
  521.                     </h4>
  522.                     <div class="tg-description-flex-right">
  523.                       <figure class="tg-projectimg tg-simpleimghover2">
  524.                         <div class="tg-themeimghover">
  525.                           <img
  526.                            src="images/NASTAD/comparative-Navigation.png"
  527.                            alt="Clear navigation bar"
  528.                          />
  529.                           <span></span>
  530.                         </div>
  531.                       </figure>
  532.                       <div>
  533.                         <p>
  534.                           01. <br />
  535.  
  536.                           A <b>simple and clear navigation bar</b> helped with
  537.                           navigating through the website more seamlessly
  538.  
  539.                           <br />
  540.                         </p>
  541.                       </div>
  542.                     </div>
  543.                     <div class="tg-description-flex-right">
  544.                       <figure class="tg-projectimg tg-simpleimghover2">
  545.                         <div class="tg-themeimghover">
  546.                           <img
  547.                            src="images/NASTAD/comparative-visual.png"
  548.                            alt="The use of colors and fonts"
  549.                          />
  550.                           <span></span>
  551.                         </div>
  552.                       </figure>
  553.                       <div>
  554.                         <p>
  555.                           02. <br />
  556.  
  557.                           The use of <b>font color</b>, <b>font size</b>, and
  558.                           <b>font-weight</b> helped add visual clarity and
  559.                           readability to a website.
  560.  
  561.                           <br />
  562.                         </p>
  563.                       </div>
  564.                     </div>
  565.                     <div class="tg-description-flex-right">
  566.                       <figure class="tg-projectimg tg-simpleimghover2">
  567.                         <div class="tg-themeimghover">
  568.                           <img
  569.                            src="images/NASTAD/comparative-search.png"
  570.                            alt="Search function"
  571.                          />
  572.                           <span></span>
  573.                         </div>
  574.                       </figure>
  575.                       <div>
  576.                         <p>
  577.                           03. <br />
  578.  
  579.                           Websites with large amounts of content had
  580.                           <b>advanced search options</b> for users
  581.  
  582.                           <br /><br />
  583.  
  584.                           04. <br />
  585.  
  586.                           Websites with large amounts of content had clear
  587.                           search result feedback and organization
  588.                           <br />
  589.                         </p>
  590.                       </div>
  591.                     </div>
  592.                   </div>
  593.                 </div>
  594.               </div>
  595.             </div>
  596.           </div>
  597.         </div>
  598.  
  599.         <!--************************************
  600.     Comparative Evaluation End
  601. *************************************-->
  602.  
  603.        
  604.         <!--************************************
  605.                 Wireframe Start
  606.    *************************************-->
  607.         <div class="container">
  608.           <div class="row">
  609.             <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  610.               <hr size="8px" width="100%" />
  611.             </div>
  612.           </div>
  613.         </div>
  614.         <div class="tg-sectionspace tg-haslayout">
  615.           <div class="container">
  616.             <div class="row">
  617.               <div
  618.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  619.              >
  620.                 <div class="tg-sectionhead">
  621.                   <!-- <h3>Ideation</h3> -->
  622.                   <h2>
  623.                     Wireframe
  624.                   </h2>
  625.                 </div>
  626.                 <div class="tg-sectiondescription">
  627.                   <div class="tg-sectiondescriptionP">
  628.                     <div class="tg-description">
  629.                       <h4>
  630.                         Technology communication and non-technology
  631.                         communication plans
  632.                       </h4>
  633.                     </div>
  634.                   </div>
  635.                 </div>
  636.                 <div class="tg-sectiondescription">
  637.                   <div class="tg-sectiondescriptionP">
  638.                     <div class="tg-description-flex-left">
  639.                       <div class="tg-description-flex-col">
  640.                         <figure class="tg-projectimg tg-simpleimghover2">
  641.                           <h4>
  642.                             Homepage & Navigation Bar
  643.                          </h4>
  644.                          <div
  645.                            class="tg-themeimghover"
  646.                            style="margin-top: 10%;"
  647.                           >
  648.                             <img
  649.                              src="images/FHC/Web 1920 – 1.png"
  650.                              alt="Homepage & Navigation Bar wireframe"
  651.                            />
  652.                             <span></span>
  653.                           </div>
  654.                         </figure>
  655.                       </div>
  656.                       <div style="margin: 40px"></div>
  657.                       <div class="tg-description-flex-col">
  658.                         <figure class="tg-projectimg tg-simpleimghover2">
  659.                           <h4>
  660.                             Current Tenants Tab
  661.                           </h4>
  662.                           <div
  663.                            class="tg-themeimghover"
  664.                            style="margin-top: 10%;"
  665.                          >
  666.                             <img
  667.                              src="images/FHC/Web 1920 – 4.png"
  668.                              alt="Current Tenants Tab wireframe"
  669.                            />
  670.                             <span></span>
  671.                           </div>
  672.                         </figure>
  673.                       </div>
  674.                     </div>
  675.                     <hr size="8px" width="100%" />
  676.                     <div class="tg-description-flex-left">
  677.                       <div class="tg-description-flex-col">
  678.                         <figure class="tg-projectimg tg-simpleimghover2">
  679.                           <h4>
  680.                             Housing Program Information
  681.                           </h4>
  682.                           <div
  683.                            class="tg-themeimghover"
  684.                            style="margin-top: 10%;"
  685.                          >
  686.                             <img
  687.                              src="images/FHC/Web 1920 – 2.png"
  688.                              alt="Housing Program Information wireframe 1"
  689.                            />
  690.                             <span></span>
  691.                           </div>
  692.                         </figure>
  693.                       </div>
  694.                       <div style="margin: 40px"></div>
  695.                       <div class="tg-description-flex-col">
  696.                         <figure class="tg-projectimg tg-simpleimghover2">
  697.                           <h4>&nbsp; &nbsp; &nbsp; &nbsp;</h4>
  698.                           <div
  699.                            class="tg-themeimghover"
  700.                            style="margin-top: 10%;"
  701.                          >
  702.                             <img
  703.                              src="images/FHC/Web 1920 – 3.png"
  704.                              alt="Housing Program Information wireframe 2"
  705.                            />
  706.                             <span></span>
  707.                           </div>
  708.                         </figure>
  709.                       </div>
  710.                     </div>
  711.                   </div>
  712.                 </div>
  713.               </div>
  714.             </div>
  715.           </div>
  716.         </div>
  717.         <!--************************************
  718.    Wireframe End
  719. *************************************-->
  720.  
  721.         <!--************************************
  722.                 Refine start
  723.    *************************************-->
  724.         <div class="container">
  725.           <div class="row">
  726.             <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  727.               <hr size="8px" width="100%" />
  728.             </div>
  729.           </div>
  730.         </div>
  731.         <div class="tg-sectionspace tg-haslayout" id="7">
  732.           <div class="container">
  733.             <div class="row">
  734.               <div
  735.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  736.              >
  737.                 <div class="tg-sectionhead">
  738.                   <h3 style="color: #1AA15D;">EVALUATION & REFINE</h3>
  739.                  <h2>
  740.                    User test with Lo-Fi Prototyping
  741.                  </h2>
  742.                </div>
  743.                <div class="tg-sectiondescription">
  744.                  <div class="tg-sectiondescriptionP">
  745.                    <div class="tg-description">
  746.                      <p>
  747.                        Our team had user testing on the paper prototype with
  748.                        our client. In addition to knowing the user’s overall
  749.                        experience, we also want to make sure the new design of
  750.                        the website can be sustainable to the client.
  751.                      </p>
  752.                      <div style="margin: 40px"></div>
  753.                      <figure class="tg-projectimg tg-simpleimghover2">
  754.                        <div class="tg-themeimghover">
  755.                          <img
  756.                            src="images/FHC/User test photo.jpg"
  757.                            alt="User test with the director of FHC"
  758.                            style="width: 70%; margin: auto;"
  759.                           />
  760.                           <span></span>
  761.                         </div>
  762.                       </figure>
  763.                     </div>
  764.                   </div>
  765.                 </div>
  766.               </div>
  767.             </div>
  768.           </div>
  769.         </div>
  770.  
  771.         <!--************************************
  772.                 Refine  end
  773.    *************************************-->
  774.  
  775.         <!--************************************
  776.                 Design changes Start
  777.    *************************************-->
  778.         <div class="container">
  779.           <div class="row">
  780.             <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  781.               <hr size="8px" width="100%" />
  782.             </div>
  783.           </div>
  784.         </div>
  785.         <div class="tg-sectionspace tg-haslayout">
  786.           <div class="container">
  787.             <div class="row">
  788.               <div
  789.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  790.              >
  791.                 <div class="tg-sectionhead">
  792.                   <h2>
  793.                     Design Changes
  794.                   </h2>
  795.                 </div>
  796.                 <div class="tg-sectiondescription">
  797.                   <div class="tg-sectiondescriptionP">
  798.                     <div class="tg-description-flex-right">
  799.                       <figure class="tg-projectimg tg-simpleimghover2">
  800.                         <div class="tg-themeimghover">
  801.                           <img
  802.                            src="images/FHC/Nav.png"
  803.                            alt="Design change: Navigation"
  804.                          />
  805.                           <span></span>
  806.                         </div>
  807.                       </figure>
  808.                       <div>
  809.                         <h4>01. Navigation: Adjusting nested structures</h4>
  810.                         <p>
  811.                           <b style="color: #ED4777"> Problem</b> <br />
  812.                           Information is scattered on the website, making users
  813.                           uneasy to find what they need from the navigation bar
  814.                           <br />
  815.                         </p>
  816.                         <p style="margin: 0;">
  817.                           <b style="color: #2BA166; margin: 0; padding:0">
  818.                             Changes</b
  819.                          >
  820.                           <li>
  821.                             Adding tabs for current tenants, applicants,
  822.                             and other resources
  823.                           </li>
  824.                           <li>
  825.                             Adjusting tab sequences on the navigation bar based
  826.                             on the importance of contents (tabs users would like
  827.                             to visit more)
  828.                           </li>
  829.                         </p>
  830.                       </div>
  831.                     </div>
  832.                   </div>
  833.                 </div>
  834.                 <div class="tg-sectiondescription">
  835.                   <div class="tg-sectiondescriptionP">
  836.                     <div class="tg-description-flex-right">
  837.                       <figure class="tg-projectimg tg-simpleimghover2">
  838.                         <div class="tg-themeimghover">
  839.                           <img
  840.                            src="images/FHC/Housing program.png"
  841.                            alt="Design change: Housing Program"
  842.                          />
  843.                           <span></span>
  844.                         </div>
  845.                       </figure>
  846.                       <div>
  847.                         <h4>
  848.                           02. Housing Programs Tab: Adding detail information
  849.                         </h4>
  850.                         <p>
  851.                           <b style="color: #ED4777"> Problem</b> <br />
  852.                           The current website only provides users with a short
  853.                           description of the FHC's programs, which lacks
  854.                           information transparency.
  855.  
  856.                           <br />
  857.                         </p>
  858.                         <p style="margin: 0;">
  859.                           <b style="color: #2BA166; margin: 0; padding:0">
  860.                             Changes</b
  861.                          >
  862.                           <li>
  863.                             Separating the introduction of different properties
  864.                             and programs
  865.                           </li>
  866.                           <li>
  867.                             Including more information such as photos, amenities
  868.                             of the properties and application procedure
  869.                           </li>
  870.                         </p>
  871.                       </div>
  872.                     </div>
  873.                   </div>
  874.                 </div>
  875.                 <div class="tg-sectiondescription">
  876.                   <div class="tg-sectiondescriptionP">
  877.                     <div class="tg-description-flex-right">
  878.                       <figure class="tg-projectimg tg-simpleimghover2">
  879.                         <div class="tg-themeimghover">
  880.                           <img
  881.                            src="images/FHC/Tanent.png"
  882.                            alt="Design change: Tanents"
  883.                          />
  884.                           <span></span>
  885.                         </div>
  886.                       </figure>
  887.                       <div>
  888.                         <h4>
  889.                           03. New Tab: Current Tenants
  890.                         </h4>
  891.                         <p>
  892.                           <b style="color: #ED4777"> Problem</b> <br />
  893.                           Forms and documents for tenants are under the Housing
  894.                           Program tab, which may not be very intuitive for users
  895.                           when looking for these documents.
  896.  
  897.                           <br />
  898.                         </p>
  899.                         <p style="margin: 0;">
  900.                           <b style="color: #2BA166; margin: 0; padding:0">
  901.                             Changes</b
  902.                          >
  903.                           <li>
  904.                             Pulling out forms and documents from the current
  905.                             website's Housing Program tab
  906.                           </li>
  907.                           <li>
  908.                             Making it easy for tenants to find information
  909.                             related to them
  910.                           </li>
  911.                           <li>
  912.                             Creating Google form link for tenants to convey
  913.                             their opinions to the FHC
  914.                           </li>
  915.                         </p>
  916.                       </div>
  917.                     </div>
  918.                   </div>
  919.                 </div>
  920.                 <div class="tg-sectiondescription">
  921.                   <div class="tg-sectiondescriptionP">
  922.                     <div class="tg-description-flex-right">
  923.                       <figure class="tg-projectimg tg-simpleimghover2">
  924.                         <div class="tg-themeimghover">
  925.                           <img
  926.                            src="images/FHC/Web 1920 – 24.png"
  927.                            alt="Design change: Applicant"
  928.                          />
  929.                           <span></span>
  930.                         </div>
  931.                       </figure>
  932.                       <div>
  933.                         <h4>
  934.                           04. New Tab: Applicants
  935.                         </h4>
  936.                         <p>
  937.                           <b style="color: #ED4777"> Problem</b> <br />
  938.                           Currently, program applicants can only know their
  939.                           waitlist status. It is difficult for them to know how
  940.                           long may the application process take. In addition, it
  941.                           is also uneasy for them to find documents for the
  942.                           application.
  943.  
  944.                           <br />
  945.                         </p>
  946.                         <p style="margin: 0;">
  947.                           <b style="color: #2BA166; margin: 0; padding:0">
  948.                             Changes</b
  949.                          >
  950.                           <li>
  951.                             Helping applicants know the progress of the
  952.                             application process by providing them the last time
  953.                             the waiting list is open
  954.                           </li>
  955.                           <li>
  956.                             Gathering information for applicants on one page
  957.                           </li>
  958.                           <li>
  959.                             Adding application instruction
  960.                           </li>
  961.                         </p>
  962.                       </div>
  963.                     </div>
  964.                   </div>
  965.                 </div>
  966.                 <div class="tg-sectiondescription">
  967.                   <div class="tg-sectiondescriptionP">
  968.                     <div class="tg-description-flex-right">
  969.                       <figure class="tg-projectimg tg-simpleimghover2">
  970.                         <div class="tg-themeimghover">
  971.                           <img
  972.                            src="images/FHC/Web 1920 – 33.png"
  973.                            alt="Design change: Other Resources"
  974.                          />
  975.                           <span></span>
  976.                         </div>
  977.                       </figure>
  978.                       <div>
  979.                         <h4>
  980.                           05. New Tab: Other Resources
  981.                         </h4>
  982.                         <p>
  983.                           <b style="color: #ED4777"> Problem</b> <br />
  984.                           From the interviews with the FHC and residents, we
  985.                           learned that sometimes the program applicants and
  986.                           residents turn to FHC for various assistance; however,
  987.                           the FHC is not able to provide all assistance.
  988.  
  989.                           <br />
  990.                         </p>
  991.                         <p style="margin: 0;">
  992.                           <b style="color: #2BA166; margin: 0; padding:0">
  993.                             Changes</b
  994.                          >
  995.                           <li>
  996.                             Adding the tab for Listing accessible resources and
  997.                             information which are helpful for the applicants and
  998.                             the residents
  999.                           </li>
  1000.                         </p>
  1001.                       </div>
  1002.                     </div>
  1003.                   </div>
  1004.                 </div>
  1005.                 <div class="tg-sectiondescription">
  1006.                   <div class="tg-sectiondescriptionP">
  1007.                     <div class="tg-description-flex-right">
  1008.                       <figure class="tg-projectimg tg-simpleimghover2">
  1009.                         <div class="tg-themeimghover">
  1010.                           <img
  1011.                            src="images/FHC/Accessibility.png"
  1012.                            alt="Design change: Accessibility"
  1013.                          />
  1014.                           <span></span>
  1015.                         </div>
  1016.                       </figure>
  1017.                       <div>
  1018.                         <h4>
  1019.                           06. Aesthetics: Adding accessibility
  1020.                         </h4>
  1021.                         <p>
  1022.                           <b style="color: #ED4777"> Problem</b> <br />
  1023.                           The current design of the website does not provide
  1024.                           users with enough visual clues to tell them which page
  1025.                           they are on. In addition, some texts are uneasy to
  1026.                           read on a dark background.
  1027.  
  1028.                           <br />
  1029.                         </p>
  1030.                         <p style="margin: 0;">
  1031.                           <b style="color: #2BA166; margin: 0; padding:0">
  1032.                             Changes</b
  1033.                          >
  1034.                           <li>
  1035.                             Using colors and texts to increase the readability
  1036.                             of the website
  1037.                           </li>
  1038.                         </p>
  1039.                       </div>
  1040.                     </div>
  1041.                   </div>
  1042.                 </div>
  1043.               </div>
  1044.             </div>
  1045.           </div>
  1046.         </div>
  1047.  
  1048.         <!--************************************
  1049.    Design changes End
  1050. *************************************-->
  1051.         <!--************************************
  1052.                 Reflection Start
  1053.    *************************************-->
  1054.         <div class="container">
  1055.           <div class="row">
  1056.             <div class="col-xs-112 col-sm-12 col-md-12 col-lg-12">
  1057.               <hr size="8px" width="100%" />
  1058.             </div>
  1059.           </div>
  1060.         </div>
  1061.         <div class="tg-sectionspace tg-haslayout" id="8">
  1062.           <div class="container">
  1063.             <div class="row">
  1064.               <div
  1065.                class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"
  1066.              >
  1067.                 <div class="tg-sectionhead">
  1068.                   <h3 style="color: #1AA15D;">Reflection</h3>
  1069.                   <h2>
  1070.                     What I've learned
  1071.                   </h2>
  1072.                 </div>
  1073.                 <div class="tg-sectiondescription">
  1074.                   <div class="tg-sectiondescriptionP">
  1075.                     <div class="tg-description">
  1076.                       <h4>
  1077.                         Step back, and think outside the box: The solutions can
  1078.                         be simple but powerful
  1079.                       </h4>
  1080.                       <p>
  1081.                         When first finding many the residents are not familiar
  1082.                         with computers or smart devices, our team was confused
  1083.                         about what kind of design could we create for the
  1084.                         community. Then we stepped back and looked at what the
  1085.                         community has and need. The action helped us come up
  1086.                         with the simple tools that can satisfy different users
  1087.                         in the community.
  1088.                       </p>
  1089.                       <h4>
  1090.                         Sustainability requires the participation of the users
  1091.                         and stakeholders
  1092.                       </h4>
  1093.                       <p>
  1094.                         To achieve sustainability, the design should be able to
  1095.                         create long term influence by keeping users
  1096.                         continue using the tools. Meanwhile, it should be easy
  1097.                         for stakeholders to maintain and manage. Therefore,
  1098.                         listening to both users' and stakeholders' needs and
  1099.                         constraints is important. Understanding them is the only
  1100.                         path to have the design suitable for both the users and
  1101.                         stakeholders.
  1102.                       </p>
  1103.                     </div>
  1104.                   </div>
  1105.                 </div>
  1106.               </div>
  1107.             </div>
  1108.           </div>
  1109.         </div>
  1110.  
  1111.         <!--************************************
  1112. Reflection End
  1113. *************************************-->
  1114.         <!--************************************
  1115.                 Next Prev Buttons Start
  1116.         *************************************-->
  1117.         <div class="tg-nextprevbtns">
  1118.           <a class="tg-prevbtn" href="work-Veganner.html">
  1119.             <h4>Veganner</h4>
  1120.             <span>prev project</span>
  1121.           </a>
  1122.           <a class="tg-nextbtn" href="work-BE.html">
  1123.             <h4>BE: Blue Event</h4>
  1124.             <span>next project</span>
  1125.           </a>
  1126.         </div>
  1127.         <!--************************************
  1128.                 Next Prev Buttons End
  1129.         *************************************-->
  1130.       </main>
  1131.       <!--************************************
  1132.                 Main End
  1133.         *************************************-->
  1134.       <!--************************************
  1135.                 Footer Start
  1136.         *************************************-->
  1137.       <footer id="tg-footer" class="tg-footer tg-footervtwo tg-haslayout">
  1138.         <div class="tg-footercontent">
  1139.           <!-- <nav class="tg-addnavs">
  1140.                     <ul>
  1141.                         <li><span>Contact US!</span></li>
  1142.                         <li><span>say ‘hello’</span><a href="javascript:void(0);">contact@arabostudio.com</a></li>
  1143.                         <li class="tg-facebook"><a href="javascript:void(0);">facebook</a></li>
  1144.                         <li class="tg-twitter"><a href="javascript:void(0);">twitter</a></li>
  1145.                         <li class="tg-instagram"><a href="javascript:void(0);">instagram</a></li>
  1146.                         <li><a class="tg-btnscrolltop" href="javascript:void(0);"><i class="fa fa-angle-up"></i></a></li>
  1147.                     </ul>
  1148.                 </nav> -->
  1149.           <div class="tg-footerbottom">
  1150.             <p class="tg-copyrights">Copyrights © Charlene S. Ni 2020.</p>
  1151.             <!-- <span class="tg-compnayname">Design Brighthemes</span> -->
  1152.           </div>
  1153.         </div>
  1154.       </footer>
  1155.       <!--************************************
  1156.                 Footer End
  1157.         *************************************-->
  1158.     </div>
  1159.     <!--************************************
  1160.             Wrapper End
  1161.     *************************************-->
  1162.  
  1163.     <script src="js/vendor/jquery-library.js"></script>
  1164.     <script src="js/vendor/jquery-migrate.js"></script>
  1165.     <script src="js/vendor/bootstrap.min.js"></script>
  1166.     <script src="js/owl.carousel.min.js"></script>
  1167.     <script src="js/anime.min.js"></script>
  1168.     <script src="js/countTo.js"></script>
  1169.     <script src="js/appear.js"></script>
  1170.     <script src="js/slick.js"></script>
  1171.     <script src="js/function.js"></script>
  1172.     <script>
  1173.       $(document).ready(function() {
  1174.         $("a[href*=#]").bind("click", function(e) {
  1175.           e.preventDefault(); // prevent hard jump, the default behavior
  1176.  
  1177.           var target = $(this).attr("href"); // Set the target as variable
  1178.  
  1179.           // perform animated scrolling by getting top-position of target-element and set it as scroll target
  1180.           $("html, body")
  1181.             .stop()
  1182.             .animate(
  1183.               {
  1184.                 scrollTop: $(target).offset().top
  1185.               },
  1186.               600,
  1187.               function() {
  1188.                 location.hash = target; //attach the hash (#jumptarget) to the pageurl
  1189.               }
  1190.             );
  1191.  
  1192.           return false;
  1193.         });
  1194.       });
  1195.  
  1196.       $(window)
  1197.         .scroll(function() {
  1198.           var scrollDistance = $(window).scrollTop();
  1199.  
  1200.           // Show/hide menu on scroll
  1201.           //if (scrollDistance >= 850) {
  1202.           //        $('nav').fadeIn("fast");
  1203.           //} else {
  1204.           //        $('nav').fadeOut("fast");
  1205.           //}
  1206.  
  1207.           // Assign active class to nav links while scolling
  1208.           $(".page-section").each(function(i) {
  1209.             if ($(this).position().top <= scrollDistance) {
  1210.              $(".navigation a.active").removeClass("active");
  1211.              $(".navigation a")
  1212.                .eq(i)
  1213.                .addClass("active");
  1214.            }
  1215.          });
  1216.        })
  1217.        .scroll();
  1218.    </script>
  1219.   </body>
  1220. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!