Merge pull request #153 from dwyl/add-persona-template-instructions-i…

…ssue#213

Add Persona Template Instructions for #115

personas/.gitignore

@@ -0,0 +1,2 @@
+package-lock.json
+node_modules/

personas/README.md

@@ -0,0 +1,303 @@
+<div align="center">
+
+# How to Create Personas
+
+Personas remind us who
+the **people** using our product are
+and what pain points they have. <br />
+They help avoid building an infinite feature list
+for no specific person
+where usability
+is an afterthought: <br />
+
+[![dilbert user features](https://user-images.githubusercontent.com/194400/85832475-1260f200-b788-11ea-865c-059f525c4304.png)](https://dilbert.com/strip/2001-04-14 "Dilbert User Features")
+
+
+</div>
+<br />
+
+## Why?
+
+Personas help us picture and _empathise_ with
+the _people_ using our product.
+Personas provide a clear definition
+of the _person_ using the product,
+rather than a nebulous "user".
+Personas remind the team of the
+*motives*, *pain points* and reasons *why*
+people _need_ a particular feature.
+Keeping these reasons at the forefront of the teams' mind
+can significantly impact the delivery of the product.
+
+> Not convinced the _why_ makes a difference?
+see: "**Know Your _Why_**" (Michael Jr):
+https://youtu.be/1ytFB8TrkTo
+
+## What?
+
+A persona is _usually_<sup>1</sup> a fictional character
+created to represent the type of person
+that is using the product in a particular way.
+The format in which they are written can vary
+according to the needs of the project.
+This tutorial will focus on
+["proto personas"](http://uxmag.com/articles/using-proto-personas-for-executive-alignment).
+Proto personas are ideal for projects
+that are short on time / resources
+but still want the core benefits
+that using personas offers.
+
+Here's an example of a persona for a site
+([ClubSoda](https://github.com/club-soda/club-soda-guide))
+that helps people find non / low alcohol drinks options
+and the venues that serve them.
+The context of the persona
+is around her background with alcohol
+and her balance of drinking:
+
+![Persona, Nisha the Consumer](https://user-images.githubusercontent.com/16775804/46004041-d5933300-c0a9-11e8-9c97-c7ea0ad38d9e.png "Persona, Nisha the Consumer")
+
+## Who?
+
+_Anyone_ can create personas;
+it's not exclusive to the "Product Manager/Owner" or "UX Designer".
+In fact if you have _any_ role in a small team,
+taking the _initiative_ to create personas
+is a great way of showing leadership.
+Even _solo_ entrepreneurs building products (Websites/Apps/Games/etc.)
+can benefit _immensely_ from having personas.
+They are a way of _focussing_ our attention
+on the _human being_ whose problem we are solving
+and not getting distracted
+building shiny features nobody _asked_ for!
+As you will see from our template + instructions below,
+it's incredibly easy to create a persona in less than 5 minutes.
+There's really no excuse _not_ to do it.
+
+<br />
+
+## When?
+
+#### "_The best time to plant a tree was 20 years ago. The second best time is now_" ~ Chinese proverb
+
+Obviously the _best_ time to create personas
+is at the _start_ of a project
+so that it's immediately clear to everyone
+_exactly_ who your are building it for.
+The second best time to create personas is _right now_!
+It doesn't _matter_ that you've never used them before
+in your project/team/company.
+Start _today_ with _one_ persona.
+Don't use not having "time" or a printer
+as an excuse to not do it.
+It only takes 5 minutes
+and the benefits are _instant_.
+Clarity of _who_ you are building "Feature X" for
+and exactly what problem it solves for them.
+
+
+<br />
+
+
+## How?
+
+A persona should include:
+
++ **Name, Category & Photo** — names that are an alliteration
+with the group that they represent are useful
+e.g. "Sophie, the Student".
+Accompany this with a photo or illustration of them.
++ **Age** (_don't be afraid to be specific_)
++ **Job Title & Organisation/Company** (_where applicable_)
+if the person is not employed,
+e.g. "Full Time Dad" or "Keen Gardener", that's fine too.
+Just try and be specific about their main "activity".
++ **Background** - the persona represents
+a type of person using the product,
+think about what core background characteristics
+or attributes might be typical for this kind of person.
+You may be able to recognise these types from UX research
+interviews you've conducted.
++ **Motivation** - **Why** do they need your product?
+  What problem(s) can your product solve for them?
+  Why would using your product benefit them?
++ **Pain points** - What do they struggle with at the moment
+in the domain of your product?
+What problems could you solve for them (even if it's not
+currently being addressed by the product)?
+Is there anything that might put them _off_ of using your product?
+
+Once you've created your cards
+you should print them and display them
+on the wall near your team.
+<!-- TODO: show printed personas on wall @dwyl/home -->
+This means the team has easy access to remind themselves of them.
+We like to refer to the personas in our standups,
+while writing stories and during sprint planning.
+This is a great way of giving specific context
+for the purpose behind a particular feature.
+
+Personas are also beneficial
+for introducing new team members or stakeholders
+to your product and its key audience.
+
+Personas can be tailored to the unique needs and goals
+of your project according to what you consider relevant.
+For example you might want to use a _quantifiable_ pain
+points scale:
+
+![levels-of-pain](https://user-images.githubusercontent.com/194400/45924741-3f230e00-beff-11e8-8d6d-c97f5ca8a11f.png)
+
+Source: https://www.wordstream.com/blog/ws/2018/02/28/pain-points
+
+<br />
+
+### _Examples_
+
+Here are some more examples of personas
+from the project to help people find low or no alcohol drinks
+and the venues that serve them.
+These personas are for the drinks brands,
+venue managers and the staff from the organisation behind the site.
+They consider their involvement and presence on the site
+and how it can benefit them.
+The first two personas are fictional representations
+of the two types of people using the App,
+whereas the last persona
+([Jussi](https://github.com/jussi-club-soda))
+is a _real_ person who is one of the admins of the App:
+
+![Persona, Bradley the Brand Manager](https://user-images.githubusercontent.com/16775804/46004238-49354000-c0aa-11e8-801b-858d137f6b1b.png "Persona, Bradley the Brand Manager")
+![Persona, Vicky the Venue Manager](https://user-images.githubusercontent.com/16775804/46004426-cb256900-c0aa-11e8-8faa-31878125a4d4.png "Persona, Vicky the Venue Manager")
+![Persona, Jussi from Club Soda](https://user-images.githubusercontent.com/16775804/46004730-7c2c0380-c0ab-11e8-96b1-267bdc416001.png "Persona, Jussi from Club Soda")
+
+These personas and illustrations were created by
+[Cleo](https://github.com/Cleop)
+a multi-talented Developer and scrum master. <br />
+If you lack the drawing skills
+or just want an _easy_ way to create your own personas,
+you're in luck! (_keep scrolling_!)
+
+
+## _Instructions_ to Make Your Own!
+
+Once you have the _data_ (_facts, background & pain points_)
+required to create the persona,
+it will take you _less_ than 5 minutes
+to create it using our template.
+
+### 1. _Clone_ this Repo
+
+Clone the GitHub repository that has the template you want to edit:
+
+```
+git clone [email protected]:dwyl/process-handbook.git && cd process-handbook/personas
+```
+
+### 2. _Edit_ the Template
+
+
+(_Optional_)
+If you want live-reloading while you are editing the template,
+run the `live-server`:
+
+```
+npm i && npm start
+```
+
+That will automatically open the `index.html` file in your preferred web browser
+e.g:
+
+![personas-template](https://user-images.githubusercontent.com/194400/85922069-8a0e4a00-b878-11ea-9e29-2224651687c8.png)
+
+
+Open the `index.html` file in your editor
+and edit the persona template text.
+
+![edit-the-template](https://user-images.githubusercontent.com/194400/85922186-3cdea800-b879-11ea-856d-51f6cd877be2.png)
+
+
+
+### 3. _Use_ the Persona!
+
+Once you have edited the data in the persona template,
+take a screenshot
+(see [take-a-screenshot.org](http://www.take-a-screenshot.org)
+if you don't know _how_)
+and upload it to GitHub
+where you can share it with your team.
+e.g:
+
+![mia-manyinterests](https://user-images.githubusercontent.com/194400/85927108-dd45c400-b89b-11ea-80b4-b7df93925ecf.png)
+
+We are using these in our app, see:
+[/dwyl/app/issues/213](https://github.com/dwyl/app/issues/213#issuecomment-650531694)
+
+<br />
+
+### Photos / Images ?
+
+You don't _need_ to have a picture for your persona,
+but it definitely helps to _personify_ them
+and it doesn't have to take more than a couple of minutes
+to get or _make_ one.
+
+If you don't _already_ have great drawing skills
+(_or the time/patience to learn_),
+then Bitmoji
+[bitmoji.com](https://www.bitmoji.com)
+is a great (***FREE***) way
+to create a _personalised_ avatar.
+
+![bitmoji](https://user-images.githubusercontent.com/194400/85795717-a901c480-b730-11ea-912d-ec07fbcbcaa1.png)
+
+The best way to use Bitmoji is to **`download`** the App
+from the Apple App Store or Google Play store
+and create the avatar on your phone.
+There is also a Chrome extension
+if you prefer _not_ to download any apps.
+Bare in mind that we are security/privacy conscious
+@dwyl and wouldn't recommend any app
+that we haven't checked, downloaded and used ourselves.
+You can deny all permissions on the App and it still works fine.
+It won't have access to any of your personal data,
+and you can **`delete`** it as soon as you've finished using it.
+There is zero marginal cost to the creators of the App.
+
+> **Note**: Yes, bitmoji is owned by
+[**Snap Inc.**](https://en.wikipedia.org/wiki/Snap_Inc.)
+makers of
+[Snapchat](https://en.wikipedia.org/wiki/Snapchat)
+the App that sucks the attention
+of America's teenagers ... 🙄 <br />
+But you _anyone_ can _use_ Bitmoji to create
+personalised avatars and then **`delete`** the App
+without giving _any_ personal information to Snap.
+Simply _ignore_ their request to "start by taking a selfie",
+or "upload a photo of yourself".
+Just create your emoji based on the desired _attributes_
+and then download the resulting "bitmoji"
+along with any variations you want.
+
+
+<br />
+
+## Notes
+
+<sup>1</sup>Personas are _usually_ fictional representations
+of a typical person using a product.
+This is to avoid subject of the persona feeling self-conscious.
+However in the case where you are building a feature
+for a very specific person
+(_e.g. your "boss" if you're building a specific feature
+of an internal tool like a sales dashboard_)
+the persona is very clearly a person we _know_
+and can describe them precisely to help the team focus.
+That is the case of this last persona
+([Jussi](https://github.com/jussi-club-soda))
+who is a _real_ person we know and love.
+Having a well defined persona
+for the _real_ person using the product
+can be _even more_ useful than a fictional one.
+We just need to be careful to only use people
+who have given their consent to be personified.