add "Mia ManyInterests persona to persona examples (pairing with @iteles

) #115
dwyl · Jun 27, 2020 · 6622ca6 · 6622ca6
1 parent ca22ad3
commit 6622ca6
Showing 1 changed file with 52 additions and 5 deletions.
diff --git a/personas/index.html b/personas/index.html
@@ -8,9 +8,9 @@
     <link rel="stylesheet" href="https://unpkg.com/tachyons@4.8.1/css/tachyons.min.css">
     <link rel="shortcut icon" type="image/png" href="http://www.dwyl.io/img/favicon.ico"/>
   </head>
-  <body class="pa3 sans-serif">
+  <body class="pl3 sans-serif">
 
-    <h1 class="tc pa4">Template</h1>
+    <h1 class="tc mb3">Template</h1>
 
     <!-- persona template start-->
     <div class="w-100 h5">
@@ -48,7 +48,7 @@ <h1 class="tc pa4">Template</h1>
     </div>
     <!-- persona template end-->
 
-    <p class="pa4 mt4 tc f4">
+    <p class="pt4 mt4 tc f4">
 
       Once you have finished defining your persona, <br />
       take a screenshot of it:
@@ -62,14 +62,61 @@ <h1 class="tc pa4">Template</h1>
     <h1 class="tc pa4"><em>Examples</em></h1>
 
 
+    <div class="w-100 h5 mb5">
+      <div class="fl w-third pl3  tc br bw2">
+          <img
+              src="https://user-images.githubusercontent.com/194400/85926542-1714cb80-b898-11ea-9d05-e6ca8d569ed1.jpeg"
+              class="br-100 dib w-70" alt="avatar">
+        <p><strong>Mia </strong> ManyInterests</p>
+      </div>
+      <div class="fl w-third pl3 pr3">
+        <p><strong>Age: </strong>26</p>
+        <p><strong>Job: </strong>Investigative Journalist</p>
+        <p><strong>Background: </strong>
+          Mia loves researching and writing articles on hot button
+          contemporary issues and always has multiple investigations
+          on the go. <br />
+          She doesn't keep regular work hours, often working late 
+          into the evenings and weekends.
+          She has a tight-knit family that she loves spending
+          time with and she's a fan of art and modern design, all 
+          of which she struggle to find time for without feeling
+          overwhelmed.
+
+        </p>
+      </div>
+      <div class="fl w-third pl3 pr3 bl bw2">
+        <p><strong>Goals: </strong>
+          Always know what her highest value task is and make
+          her current tasks visible to her supervisors and colleagues
+          to minimise interruptions.
+        </p>
+        <p><strong>Pain Points:</strong> 
+        Feels like she's always working, but her concentration is 
+        dispersed across many topics and interruptions. This leaves
+        her feeling overwhelmed and like she has no time for her 
+        loved ones & interests.
+        </p>
+        <p><strong>Pain Level:</strong> 
+          6 
+        </p>
+        <p><strong>Needs:</strong>
+          A clear view of everything she is working
+          on & wants to personally achieve.
+        </p>
+
+      </div>
+    </div>
+
+
     <!-- next example -->
 
     <div class="w-100 h5 mb5">
       <div class="fl w-third h5 tc br bw2">
           <img
               src="https://user-images.githubusercontent.com/194400/85919030-db5e0f80-b85f-11ea-842b-0aca1706ca5e.png"
               class=" dib w-70" alt="avatar">
-        <p><strong>Nelson </strong>Notime</p>
+        <p><strong>Nelson </strong>NoTime</p>
       </div>
       <div class="fl w-third pl3 pr3">
         <p><strong>Age: </strong>33</p>
@@ -120,7 +167,7 @@ <h1 class="tc pa4"><em>Examples</em></h1>
           Emmet has a simple life as a construction worker in Bricksburg.
           He enjoys his work but he remains unfulfilled. 
           He knows he is capable of great things,
-          but the druggery of his daily routine
+          but the drudgery of his daily routine
           means he has no time for his creative pursuits.
 
         </p>