thehub.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TheHub</title>
    <!-- Bootstrap css file-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- font awesome icons-->
    <link rel="stylesheet" href="./css/all.min.css">
    
    <!--  custom css file  -->
    <link rel="stylesheet" href="./css/style.css">

</head>
<body>
<!-- Header Starts -->
<header class="header_area_project">
    <div class="main-menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <div class="mr-auto"></div>
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                    </li>

                </ul>
            </div>
        </nav>
    </div>
</header>
<!-- Header Ends -->

    <!-- App Mockup Starts -->
    <section class="my-mockup">
   <div class="container-mockup">
       <img src="./img/white-blank-screens-mockup.png" style="width: 50%;">
    </div>
   </section>
    <!-- App Mockup Ends -->
<br>
<br>
    <!-- Case Study Starts-->
    <!-- Intro Starts-->
    <div class="container-in">
        <div class="row align-items-start">
          <div class="col">
            <section class="what-is">
                <div class="card-intro" style="width: 18rem;">
                    <div class="card-body">
                      <h3 class="card-title">TheHub</h3>
                      <p>As a first year student who had experienced no real in-person college experiences yet, I was enthusiastic about designing a platform that could help 
                          develop some real and helpful connections!
                        </p>
                    </div>
                  </div>
                </section>
          </div>
          <div class="col">
            <section class="role">
                <div class="card-intro" style="width: 18rem;">
                    <div class="card-body">
                      <h3 class="card-title">Role</h3>
                      <p>
                          Branding, wireframing, and prototyping using Figma, and conducting interviews and surveys.
                        </p>
                        <h3 class="card-title">Process</h3>
                      <p>
                        Research, interviews, survey, competitive analysis, ideation, sketching, prototyping, testing, and evaluation
                        </p>
                    </div>
                  </div>
                </section>
          </div>
        </div>
        <br>
        <br>
        <br>
        <h3> Design Question:</h3>
        <div class="design-text">
        <p>How might we
            improve student engagement on digital campuses?</p>
          </div>
        </div>
        <br>
        <br>
        <br>
   <!-- Intro Ends-->
   <!-- Survey Starts-->
<section class="survey">
   <div class="row">
    <div class="column">
      <img src="./img/survey.png" alt="Survey" style="width:100%">
    </div>
    <div class="column">
        <section class="survey-about">
            <div class="card-intro" style="width: 18rem;">
                <div class="card-body">
                  <h3 class="card-title">Surveys</h3>
                  <p><i>
                      We wanted to gather feedback from the existing users. We set up an online survey and asked them fill it out.
                    </i>
                    </p>
                </div>
              </div>
            </section>
    </div>
  </div>
  <br>
        <ul>
            <li>A google form was circulated among students</li>
            <li>We received 23 responses</li>
            <li>Students were asked to respond to the following questions:</li>
        <ul>
             <li>Are you open to meeting new people through online communication works?</li>
             <li> How often do you talk to your [School/University] classmates?</li>
             <li>How satisfied are you with the quality of social life at your [School/University]? (1 being not satisfied, 5 being satisfied)</li>
        </ul>
             <li>The following responses were received from a majority of participants corresponding to the above questions:</li>
        <ul>
             <li>Yes</li>
             <li>Sometimes</li>
             <li>70% chose > 3</li>
         </ul>
         <li>Participants were also asked to include a text summary of how they felt about attending university/school online. <br>Below are some of the submitted responses:</li>
          <ul>
            <li>“I hate having to do everything on my own”</li>
            <li>“There’s little to no face to face interaction with my peers, so its tough making friends!”</li>
            <li>“Hard to find new things to do with other people nowadays apart from games”</li>
          </ul>
        </ul>
</section>
<br>
<br>
<br>
<!-- Survey Ends-->
<!-- Personas Start-->
<section class="personas">
    <div class="row">
     <div class="column">
       <img src="./img/persona.png" alt="Persona" style="width:100%">
     </div>
     <div class="column">
         <section class="persona-about">
             <div class="card-intro" style="width: 18rem;">
                 <div class="card-body">
                   <h5 class="card-title">User Persona - Meet Elijah!</h5>
                   <p><i>
                    Based on the survey we set up a persona. We referred to this persona throughout the entire product development process.
                     </i>
                     </p>
                 </div>
               </div>
             </section>
     </div>
   </div>
   <br>
 </section>
 <br>
 <br>
 <br>
<!-- Personas End-->

<section class="our-solution">
  <h3> Our Solution</h3> <br>
  <p>Based on our findings, we derived the following key hypotheses: <br>
    <ul>
      <li>Students lack of face to face interactions with peers</li>
      <li>Student are struggling in keeping up with schoolwork alone</li>
      <li>Students are unable of making new friends during COVID-19</li>
    </ul>
    Thus, we came to the conclusion that students desire a service that enhances meaningful connections and allows them <br> to simulate a more social learning
  </p>
</section>

    <!-- Case Study Ends-->

    <!-- Figma Prototype Starts-->
   <section class="my-prototype">
    <br>
    <div class="container">
            <div class="pdf-file animate-right">
                <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2Ffn8eM9eJpahb57zchK8bzG%2FTile-Designathon-Copy%3Fpage-id%3D33%253A730%26node-id%3D71%253A7370%26viewport%3D241%252C48%252C0.11%26scaling%3Dscale-down%26starting-point-node-id%3D71%253A7370" allowfullscreen>
                </iframe>
                    
            </div>
        </div>
</section>
<!-- Figma Prototype Ends-->


</body>
</html>