Final Project Presentation

cover

what

why

how

others

User research forms paired with hypothetical subject pages they would like to follow:

machine-learning

modern-love

north-dakota-pipeline

black-lives-matter

speculative-design

next

 

Pages that include JQUERY using the AJAX method:

screen-shot-2016-12-08-at-3-18-29-pm screen-shot-2016-12-08-at-3-18-33-pm

 

AJAX Code

[code language="JQUERY"]
$('#pinnedTab').click(function(evt){ //when this ID is clicked
 evt.preventDefault(); //prevents the same div to start the event
 $.ajax({
 url: '/profilepin', //go to this URL
 method: 'GET'
 })
 .done(function(data){
 $("#replaceThis").html(data); // replace the contents of the div with data
 })
});

$('#loggedTab').click(function(evt){
 evt.preventDefault();
 $.ajax({
 url: '/profilelog',
 method: 'GET'
 })
 .done(function(data){
 $("#replaceThis").html(data);
 })
});

$('#subjectsTab').click(function(evt){
 evt.preventDefault();
 $.ajax({
 url: '/profilesubject',
 method: 'GET'
 })
 .done(function(data){
 $("#replaceThis").html(data);
 })
});

$('#mediaTab').click(function(evt){
 evt.preventDefault();
 $.ajax({
 url: '/mediaTab',
 method: 'GET'
 })
 .done(function(data){
 $("#replaceThisSubjectTab").html(data);
 })
});

$('#relatedTab').click(function(evt){ //when the div with this id is clicked
 evt.preventDefault();
 $.ajax({
 url:'SubjectRelatedTab',
 method: 'GET'
 })
 .done(function(data){
 $('#replaceThisSubjectTab').html(data);
 })
});

$('#followersTab').click(function(evt){
 evt.preventDefault();
 $.ajax({
 url:'SubjectFollowersTab',
 method: 'GET'
 })
 .done(function(data){
 $('#replaceThisSubjectTab').html(data);
 })
});
[/code]

Node.js & Javascript code (for local server)

[code language="Javascript"]
//server file

var express = require("express") //include express library (why is this becoming a variable?)
var path = require("path") //not sure

var bodyParser = require("body-parser") //include body-parser library/functionality?
var app = express() //express function becomes app var

var http = require("http") //not sure

http = http.Server(app) //how can http be req("http") and then http.server(app)

app.use(bodyParser.json()) //not sure

app.set('views', path.join(__dirname, 'views')) //this is route folder where html files that are accessible to users

app.use(express.static(path.join(__dirname, 'public'))) //here is folder for other files that that user might need, the only other folder that the user has access to. Best practice is to separate html files from the other files+js


// HTML PAGES
app.get('/signup', function(req, res){
 res.sendFile(path.join(__dirname,'views/SignUp.html'))
 console.log('user requested Sign Up Page');
})

app.get('/signin',function(req,res){
 res.sendFile(path.join(__dirname,'views/Login.html'))
 console.log('user requested sign in page');
})

app.get('/', function(req, res){
 res.sendFile(path.join(__dirname,'views/index.html')) //app.get is function. Path parameter. Callback function, has two parameters.
 console.log("User requested top page");
})

app.get('/profile', function(req, res){
 res.sendFile(path.join(__dirname,'views/UserProfile.html')) // when server gets req, send back this file
 console.log("User requested UserProfile");
})

app.get('/subjectpage', function(req,res){
 res.sendFile(path.join(__dirname,'views/SubjectProfile.html'));
 console.log("User requested Subject Profile")
})

app.get('/searchresults', function(req,res){
 res.sendFile(path.join(__dirname,'views/searchresults.html'));
 console.log('User requested Search Results Page')
})




// USER PROFILE AJAX & JQUERY
app.get('/profilepin', function(req, res){
 res.sendFile(path.join(__dirname,'views/profilePinTab.html'));
 console.log("User requested Pin Tab");
})

app.get('/profilelog', function(req, res){
 res.sendFile(path.join(__dirname,'views/profileLogTab.html'));
 console.log("User requested Log Tab");
})

app.get('/profilesubject', function(req, res){
 res.sendFile(path.join(__dirname,'views/profileSubjectTab.html'));
 console.log("User requested Subject Tab")
})

// SUBJECT PAGE TABS
app.get('/mediaTab', function(req, res){
 res.sendFile(path.join(__dirname,'views/SubjectProfileMediaTab.html'));
 console.log("User requested Media Tab")
})

app.get('/SubjectRelatedTab', function(req,res){
 res.sendFile(path.join(__dirname,'views/SubjectProfileRelatedTab.html'));
 console.log("User requested Related Tab")
})

app.get('/SubjectFollowersTab', function(req,res){
 res.sendFile(path.join(__dirname,'views/SubjectProfileFollowersTab.html'));
 console.log('User requested Followers Tab')
})



var server = http.listen(3000, function(){
 console.log("i am running")
})
[/code]

HTML Code that includes AJAX and Javascript

[code language="HTML"]
<!DOCTYPE html>
<html>

<head>
 <title>Subject | SUBDEX | Media Encyclopedia</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <link href="/css/style.css" rel="stylesheet">
 <!-- jQuery-->
 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

 <!-- Bootstrap -->

 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
 <div class="container">
 <nav class="navbar navbar-default subdexheader row">
 <a class="navbar-brand" href="/">
 <img class="logo" src="/img/logo.svg"> <span class="subdex-name">SUBDEX</span>
 </a>
 <ul class="nav navbar-nav navbar-right">
 <li class="nav-item">
 <a href='/searchresults'><img class="icon" src="/img/search.svg" width="13"></a>
 </li>
 <li class="nav-item">
 <form class="form-inline float-xs-right" onSubmit="function-name" action="/searchresults">
 <input class="form-control" type="text" placeholder="Search">
 <button class="btn btn-outline-success" type="submit" action="/searchresults">Search</button>
 </form>
 </li>
 <li class="nav-item">
 <a href="/profile" id="navName">KENZO</a>
 </li>
 <li>
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
 <li>
 <a href="/">
 <adata-target="/">LOG OUT</a>
 </a>
 </li>
 </ul>
 </div>
 </li>
 </ul>
 </nav>
 <div class="row">
 <div class="col-lg-12" id="banner">
 <div class="subjectheader">
 VIRTUAL REALITY
 <!-- <a href="#" class="btn">FOLLOW SUBJECT</a> -->
 <button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="false" autocomplete="off" id="toggleSubjectButton">
 FOLLOW SUBJECT
 </button>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3 fullWidth" id="subjectTabSpacer">
 <ul class="subjectNavSection">
 <li class="subjectNav" id="makeBold">
 <a href="#" id="mediaTab">MEDIA</a>
 </li>
 <li class="subjectNav">
 <a href="#" id="followersTab">EXPERTS</a>
 </li>
 <li class="subjectNav">
 <a href="#" id="followersTab">FOLLOWERS</a>
 </li>
 <li class="subjectNav">
 <a href="#" id="relatedTab">RELATED SUBJECTS</a>
 </li>
 </ul>

 <!-- Small modal -->
 <div id="indexMediaButton">
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm" id="PinLogMedia">INDEX MEDIA</button>

 <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
 <div class="modal-content" id="indexMediaForm">
 <h5 id="suggestSubjectFormTitle"> Index media to Virtual Reality</h3>
 <form class="form-horizontal">
 <div class="form-group form-groupAlign subjectNameInput">
 <label for="inputEmail3" class="col-sm-3 control-label suggestSubjectForm">LINK TO CONTENT</label>
 <div class="col-sm-8">
 <input type="email" class="form-control" placeholder="Required" id="suggestSubjectInputBox">
 </div>
 </div>
 <div class="form-group form-groupAlign">
 <label for="inputPassword3" class="col-sm-3 control-label suggestSubjectForm">SEND TO FRIEND</label>
 <div class="col-sm-8">
 <input type="password" class="form-control" id="suggestSubjectInputBox" placeholder="Optional">
 </div>
 </div>
 <div class="form-group form-groupAlign">
 <label for="inputPassword3" class="col-sm-3 control-label suggestSubjectForm">INDEX TO SUBJECTS</label>
 <div class="col-sm-8">
 <input type="password" class="form-control" id="suggestSubjectInputBox" placeholder="Required">
 </div>
 </div>
 <div class="form-group form-groupAlign">
 <label for="inputPassword3" class="col-sm-3 control-label suggestSubjectForm">COMMENT</label>
 <div class="col-sm-8">
 <input type="password" class="form-control" id="suggestSubjectInputBox" placeholder="Optional">
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-3 col-sm-6" id="SuggestSubjectButton">
 <button type="submit" class="btn btn-default">INDEX MEDIA</button>
 </div>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>
 <!-- End of Small Modal-->
 </div>
 <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3 fullWidth">
 <hr id="separator"></hr>
 </div>
 </div>


 <div class="row" id="replaceThisSubjectTab">
 <div class="col-lg-6 co-lg-offset-3 col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3 fullWidth">
 <ul class = "mediaOrg" id="mediaFilter">
 <li id="mediaOrgLi">
 ALL TIME
 </li>
 <li id="mediaOrgLi">
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="mediaTypeDropdown">
 <li><data-target="#">ALL TIME</a></li>
 <li><data-target="#">LAST 24 HOURS</a></li>
 <li><data-target="#">LAST 3 DAYS</a></li>
 <li><data-target="#">LAST WEEK</a></li>
 <li><data-target="#">LAST MONTH</a></li>
 </ul>
 </div>
 </li>
 <li id="mediaOrgLi">
 ALL MEDIA
 </li>
 <li id="mediaOrgLi">
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
 <li><data-target="#">ALL MEDIA</a></li>
 <li><data-target="#">ARTICLES</a></li>
 <li><data-target="#">BOOKS</a></li>
 <li><adata-target="#">VIDEOS</a></li>
 <li><adata-target="#">PODCASTS</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 <div class="row">
 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="http://www.nytimes.com/2014/11/16/magazine/virtual-reality-fails-its-way-to-success.html"><div id="articleLeft">
 <p id="articleTitle"> Virtual Reality Fails Its Way to Success </p>
 </div></a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 The New York Times
 </p>
 <p id="author">
 Virginia Heffernan
 </p>
 <p id="date">
 9/14/2014
 </p>
 <p id="articlePreview">
 Virtual reality typicaly refers to computer technologies that use software to generate realistic images, sounds and other sensations that replicate a real environment.
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">460</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>
 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="http://www.theatlantic.com/health/archive/2015/02/the-good-and-the-bad-of-escaping-to-virtual-reality/385134/">
 <div id="articleLeft2">
 <p id="articleTitle"> The Good and the Bad of Escaping to Virtual Reality </p>
 </div>
 </a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 The Atlantic
 </p>
 <p id="author">
 Monica Kim
 </p>
 <p id="date">
 2/18/2015
 </p>
 <p id="articlePreview">
 Researchers believe new immersive technology could lead to isolation, but maybe when social needs are met online, people won't...
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">412</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>
 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="http://time.com/3987022/why-virtual-reality-is-about-to-change-the-world/">
 <div id="articleLeft3">
 <p id="articleTitle"> Why Virtual Reality is About to Change the World </p>
 </div>
 </a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 TIME
 </p>
 <p id="author">
 Joel Stein
 </p>
 <p id="date">
 9/14/2014
 </p>
 <p id="articlePreview">
 It promises to revolutionize the way we live, play, and learn.
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">347</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>

 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="http://www.vrs.org.uk/virtual-reality/what-is-virtual-reality.html"><div id="articleLeft4">
 <p id="articleTitle"> What is Virtual Reality?</p>
 </div></a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 Virtual Reality Society
 </p>
 <p id="author">

 </p>
 <p id="date">
 </p>
 <p id="articlePreview">
 Researchers believe new immersive technology could lead to isolation, but maybe when social needs are met online, people won't...
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">291</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>

 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="https://en.wikipedia.org/wiki/Virtual_reality">
 <div id="articleLeft5">
 <p id="articleTitle"> Virtual Reality </p>
 </div></a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 Wikipedia
 </p>
 <p id="author">

 </p>
 <p id="date">

 </p>
 <p id="articlePreview">
 Virtual Reality typically refers to computer technologies that use software to generate realistic images, sounds and other sensations...
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">235</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>
 </div>
 </div>

 <div class="row">
 <div class="row" id="separateFooter">
 <div class="footer navbar-fixed-bottom" id="footer">
 <div class="col-lg-12 col-md-12 col-xs-12">
 <ul class="list-inline" id="footerlist">
 <li id="footerlinks">
 <a href='#' class="">About SUBDEX</a>
 </li>
 <li id="footerlinks">
 Designed @ <a href='http://tisch.nyu.edu/itp' class="">NYU ITP</a>
 </li>
 <li id="footerlinks">
 <a href='?' class="">Copyright</a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div> <!--end of the container div-->
 <script type="text/javascript" src="/js/script.js"></script>
</body>

</html>
[/code]

WEEK 9 [Product Pitch Deck]

This week’s activities:
– used a formal pitch deck formula to make better sense of external competition and internal values.
– started conducting user interviews
– continued work on (learning!!) front end development
– started looking into taxonomies as I would love to build a hierarchy of subjects and see each subjects’ relation to each each other.   I’ll start with (and probably stick to) subjects that we deal with at ITP over the course of the semester. http://www.theatlantic.com/technology/archive/2013/10/-wikipediaproblems-how-do-you-classify-everything/280178/
– split the prototype into two:  MVP & Full-Featured

taxonomy-of-virtual-reality

Next week’s activities:
– Finish Full-Featured product prototype.  The full-featured prototype will be used to better understand the long term vision of the product and to clearly define differentiation between SUBDEX and existing, matured, products).
– build!!!  cover

company-purpose

problem  market-size

competitionproduct

Mid Term Progress

Activities over the past week +:

  • Prepared for user research (will begin night of 10/25)
  • Began development on front-end prototype
  • Did research on best way to begin building the real website given current context
  • Made better sense of the whys, tidied the product concept, and differentiated from competition

 

Differentiation:

(Competition is organized by key feature overlap.  Key features are ordered by importance to SUBDEX.  For every company, similarities and differences are listed.  List is not yet comprehensive.)

  1. Media consumption for the purposes of mastery, knowledge, and curiosity

    Quora 
    similar: organized by subject / topic, earnest / academic in tone
    different: content is not from established organizations, answers questions posed by users
    Wikipedia
    similar: organized by subject / topic,
    different: content written by crowd, not experts / professionals; content not published by media outlets, media isn’t aggregated, is not social in the traditional sense


  2. Aggregated media organized by topic or subject (forums)

    LiveJournal
    similar: earnest / academic in tone, often politically motivated or interested, often organized by topic / subject
    different: LJ is blogging platform, not all content is from media companies,
    Reddit 
    similar: organized by subject / topic, crowd sourced posts
    different: subjects / topics are not academic, posts do not need to be links to articles, no emphasis on education & learning, pure text posts allowed
    4chan
    similar: organized by subject / topic, crowd sourced posts
    different: subjects / topics are not academic, posts do not need to be links to articles, no emphasis on education & learning, pure text posts allowed,


  3. The following of peers & leaders (often in the context of subjects & topics)

    Twitter
    similar: posts are often links to content, users often follow people that have certain shared interests,
    different: not strictly in the context of subjects & topics, not all content is assigned to a directory,

More Progress [WEEK 6]

This week, I’ve completed the non-functional prototype that addresses all early stage functionalities that I’d like to build for the MVP.  There are forms now for all four different action types you can take with media:  index, pin, log, and send.  Indexing an article adds it to an established subject page.  Indexing pushes media into the shared Subdex community.  Pinning and logging media is more personal and intimate and involves only those that follow you.  Pinning media is a kind of passive recommendation – it means you find the content to be of some value and think others could gain from consuming it.  Pinned media will appear in your friend’s/followers feeds.  Logging media, ideally, happens with every piece of media you’ve fully consumed.  Logged media doesn’t necessarily come with any kind of recommendation.  Logged media could be used to see all content a friend or luminary has consumed, or it could be used by the user itself (set to private) to keep record of the media he’s consumed over time.  Sending media is an active recommendation to a specified follower.

 

Next week I hope to:

  1.  Clearly differentiate from platforms similar to Subdex
  2.  Start on a functional front-end prototype
  3.  Start preparing for user research

WEEK 5

Present 3 Versions of Initial Project Prototypes for Testing + Viewing + Feedback

Try Different Materials, Formats, Executions than the one(s) you are most fixated on. Do not become attached to perceived failures, mistakes, wonkiness.

Link to Invision Prototype (Recommended!): https://invis.io/AK8TFBL5S#/193774604_SUBDEX_-_Top_Page

subdex-subject-page-related-subjects subdex-subject-page-experts subdex-top-page-search-results subdex-subject-page subdex-media-view subdex-top-page  subdex-top-page-questionable-topics

Incorporate a Scientific Layer to Your Project

For my project, I am looking to incorporate not science or a scientific field per se, but the ways in which academics in the scientific fields go about consuming new material and the general ways they go about staying on top of recently published information.

 

comment from grad school forum:

I typically don’t take a bunch of notes but I think most grad students should keep a master bibliography of articles that they have read, including citations and the core concepts expressed in that article/book. It can really help you with comps and writing a dissertation down the road.

 

 

 

Project Statement & Next Steps

Project Statement:

Over the course of the class, I’d like to:

  1. Build a low-tech prototype.
  2. Use the prototype to test user responses and react accordingly.
  3. Establish a clear understanding of the product and the market it’s in.
  4. Know the specific technology stack required to build a working version.
  5. Start building! (BIG maybe)

 

3 Immediate Next Steps:

  1. Build a comprehensive set of wireframes
  2. Establish differentiation between existing products (Google, Quora, Twitter, Wikipedia)
  3. Come up with use-cases and personas