Skip to content

Commit

Permalink
create personas template to streamline creation of personas for dwyl/…
Browse files Browse the repository at this point in the history 
…app#213
  • Loading branch information
@nelsonic
nelsonic committed Jun 26, 2020
1 parent af6a2f5 commit a7aa093
Showing 1 changed file with 197 additions and 0 deletions.
197 changes: 197 additions & 0 deletions personas/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Tachyons Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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">

<h1 class="tc pa4">Template</h1>

<!-- persona template start-->
<div class="w-100 h5">
<div class="fl w-third pl3 tc br bw2">
<img
src="https://user-images.githubusercontent.com/194400/85919662-465e1500-b865-11ea-8e28-8ccb4cc15e70.png"
class="br-100 dib w-70" alt="avatar">
<p><strong>FirstName </strong>Alliterative Descriptor</p>
</div>
<div class="fl w-third pl3 pr3">
<p><strong>Age: </strong>27</p>
<p><strong>Job: </strong>Job Title or Main Activity</p>
<p><strong>Background: </strong>
give as much detail as possible about the person.
What do they wish they had more time for?
Are they already attempting to solve the problem
they face in certain way?
</p>
</div>
<div class="fl w-third pl3 pr3 bl bw2">
<p><strong>Goals: </strong>
Try and stick to one or two goals at most.</p>
<p><strong>Pain Points:</strong>
pick the most painful point they face most often.</p>
<p><strong>Pain Level:</strong> 7 (see scale in readme)</p>
<p><strong>Needs:</strong>
why do they need the feature you are building for them?
</p>

</div>
</div>
<!-- persona template end-->

<br />
<br />
<p class="pa4 tc f4">Once you have finished defining your persona, <br />
take a screenshot of it:
<a href="http://www.take-a-screenshot.org" class="no-underline blue">
take-a-screenshot.org</a> <br />
upload it to GitHub
and share it with your team!
</p>


<h1 class="tc pa4"><em>Examples</em></h1>

<div class="w-100 h5 mb4">
<div class="fl w-third pl3 tc br bw2">
<img
src="https://avatars3.githubusercontent.com/u/10835816?s=460&u=47e0fc7238ec39f2f759266ca0af64265b2d3af9&v=4"
class="br-100 dib w-60" alt="avatar">
<p><a href="https://youtu.be/fZ_JOBCLF-I" class="no-underline blue">
<strong>Emmet</strong> Brickowski</p></a>
</div>
<div class="fl w-third pl3 pr3">
<p><strong>Age: </strong>23</p>
<p><strong>Job: </strong>Construction Worker</p>
<p><strong>Background: </strong>
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
means he has no time for his creative pursuits.

</p>
</div>
<div class="fl w-third pl3 pr3 bl bw2">
<p><strong>Goals: </strong>
Become a master builder and save the world from lord business' evil plan!</p>
<p><strong>Pain Points:</strong>
cannot spontaneous create something completely new without being given the instructions.</p>
<p><strong>Pain Level:</strong> 8</p>
<p><strong>Needs:</strong>
to dig deep within himself and find his inner child-like wonder
and creativity to build amazing things.
</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>
</div>
<div class="fl w-third pl3 pr3">
<p><strong>Age: </strong>33</p>
<p><strong>Job: </strong>Coder | Content Creator | Carpenter</p>
<p><strong>Background: </strong>
Nelson is software engineer and
digital content creator. <br />
He works 80+ hour weeks writing code,
creating tutorials and
mentoring others.
Wishes he had more time for
hobbies: writing, reading,
cooking, gardening and
creating music & videos. <br />
Also wants more quality time with loved ones
and better health/exercise habits.
</p>
</div>
<div class="fl w-third pl3 pr3 bl bw2">
<p><strong>Goals: </strong>
Have a single prioritised list that everyone in their life/team
can see exactly what they are working on now and <em>next</em>.</p>
<p><strong>Pain Points:</strong>
Too many projects and tasks lists with competing priorities.
Context switching wastes a lot of time.</p>
<p><strong>Pain Level:</strong> 7</p>
<p><strong>Needs:</strong>
a single trusted system
that helps focus and track time on task.
</p>

</div>
</div>


<div class="w-100 h5 mb4">
<div class="fl w-third pl3 tc br bw2">
<img
src="https://avatars3.githubusercontent.com/u/10835816?s=460&u=47e0fc7238ec39f2f759266ca0af64265b2d3af9&v=4"
class="br-100 dib w-60" alt="avatar">
<p><a href="https://youtu.be/fZ_JOBCLF-I" class="no-underline blue">
<strong>Emmet</strong> Brickowski</p></a>
</div>
<div class="fl w-third pl3 pr3">
<p><strong>Age: </strong>23</p>
<p><strong>Job: </strong>Construction Worker</p>
<p><strong>Background: </strong>
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
means he has no time for his creative pursuits.

</p>
</div>
<div class="fl w-third pl3 pr3 bl bw2">
<p><strong>Goals: </strong>
Become a master builder and save the world from lord business' evil plan!</p>
<p><strong>Pain Points:</strong>
cannot spontaneous create something completely new without being given the instructions.</p>
<p><strong>Pain Level:</strong> 8</p>
<p><strong>Needs:</strong>
to dig deep within himself and find his inner child-like wonder
and creativity to build amazing things.
</p>
</div>
</div>




<div class="pa3 pt5">
<p>
This template uses the Tachyons CSS library for layout/positioning. <br />
You don't need to know any Tachyons/CSS to use the template,
just edit the text in
<strong>index.html</strong>
</p>
<p></p>
If you are curious to learn Tachyons,
see:
<a href="https://github.com/dwyl/learn-tachyons" class="no-underline blue">
github.com/dwyl/learn-tachyons</a> <br />

For a quick reference see:
<a href="http://tachyons.io/components/" class="no-underline blue">
Tachyons Bootstrap</a>
and for more inspiration
check the <a href="http://tachyons.io/components/" class="no-underline blue">
Component Guide</a> <br />
</p>
</div>

<!-- debug grid is perfect for learning CSS positioning! see: http://tachyons.io/xray/ -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons-debug-grid.min.css" />
</body>
</html>

0 comments on commit a7aa093

Please sign in to comment.