-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuilding-social-network-at-futurelearn-html
17 lines (15 loc) · 9.29 KB
/
building-social-network-at-futurelearn-html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html> <html> <head> <title>Building a Social Network at FutureLearn | Steve Brewer</title> <meta charset=utf-8> <meta content='width=device-width, initial-scale=1' name=viewport> <link href='https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700|Oswald:400,700' rel=stylesheet> <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel=stylesheet> <link href='https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css' rel=stylesheet> <link href="/stylesheets/reset.css" rel=stylesheet /> <link href="/stylesheets/application.css" rel=stylesheet /> <link href='/img/favicon.svg' rel=icon type='image/png'> <link href='/img/favicon.png' rel=icon type='image/png'> <link rel=alternate type="application/atom+xml" title="Atom Feed" href="/feed.xml"/> </head> <body> <header> <div class=m-navbar__mobile> <div class=m-navbar__menu-button> <a class=js-reveal__trigger href='#'> Menu <i class='fa fa-plus'></i> </a> </div> <ul class='m-navbar js-reveal__hidden'> <li> <a href='/about.html'> About </a> </li> <li> <a href='/'> Articles </a> </li> <li> <a href='/quotes.html'> Quotes </a> </li> <li> <a href='/reading.html'> <i class='fa fa-book'></i> Reading </a> </li> </ul> </div> <ul class='m-navbar m-navbar--desktop'> <li> <a href='/about.html'> About </a> </li> <li> <a href='/'> Articles </a> </li> <li> <a href='/quotes.html'> Quotes </a> <li> <a href='/reading.html'> Reading </a> </li> </li> </ul> </header> <article itemscope='' itemtype='http://schema.org/BlogPosting'> <section class=a-section> <div class=a-content--title> <h1 itemprop='name headline'>Building a Social Network at FutureLearn</h1> <div class=m-post__meta> <h3> <time datetime=2016-10-08 itemprop=datePublished> <i class='fa fa-calendar'></i> 08 October 2016 </time> </h3> </div> </div> <div class=a-content> <div itemprop=articleBody><p>A variation of this post is also <a href="https://about.futurelearn.com/blog/building-app-30-hours/">published at FutureLearn</a>.</p> <p>Watercooler began life as ‘SkillShare’, a prize-winning idea at the FutureLearn Hackday back in June. The aim was to build an internal, company-wide app where people could post a list of skills they have and skills they would like to learn, and the app would match people who can learn from each other.</p> <h3 id=starting-conversations>Starting Conversations</h3> <p>We found lots of great conversations were starting before we’d even begun building. As we asked people about skills they had and wanted to have, we discovered shared interests. Some people found other people interested in learning to sew. Some found out basket-weaving was a thing. And others expressed an interest in fish farming. I know.</p> <p>A small group of new starters, including myself, took on the project after the Hackday and began a user research experiment to find out what people really want from the app. We interviewed 12 co-workers and discovered most of them actually just want to get to know the people we work with better, and were reluctant about committing to any form of regular, structured skill sharing, and the app would be at risk of falling by the wayside from neglect.</p> <p>So we began to plan an app that would, more simply, offer a virtual space for us to share exactly what we choose to share with our work family.</p> <h3 id=shipping-a-minimum-viable-product-mvp>Shipping a minimum viable product (MVP)</h3> <p>We shipped a basic product made with Ruby on Rails for people to start using, which let us join with our company Google account, rejecting sign-ups from emails that aren’t @futurelearn.com. It takes our name and profile image and puts them on our new profile with a default bio we can edit. We had some really creative bios as people made the most of their single avenue of expression on our minimal viable Watercooler, which was a great sign.</p> <p>Users are displayed on the home page in a list only visible to people signed-in. Currently this is just a list of names with our image, job title and team, but later we plan to add filters so you can show people from a particular team or discipline, and other things you may want to search for. We imagine this to be a grid, web or some other pattern that’s more interesting than a list, but we’re sharing early so people can use it while we work on that.</p> <h3 id=getting-our-social-on>Getting our social on</h3> <p>We then shipped social links, which allow us to not only share our social media profiles, but also say “Hey, I’m happy for you to connect with me here”, which is vital for breaking down social barriers. We’ve all imagined that awkward moment where we add a co-worker on Facebook and the request is blanked, or they accept - but did they really want to? Or was it just rude not to? So we don’t reach out, just in case - and an artificial barrier of our own making is born. Privacy is a complex thing, but communication - even quietly - reduces that complexity.</p> <h3 id=the-convergence-of-skills-and-interests>The Convergence of Skills and Interests</h3> <p>Coming up on Watercooler profiles are skills and interests. Like social links, these sections will be optional, and give people the space to express what they’re practiced at and what their interests are.</p> <p>We envision storing these in the database and making them links, so if a person is interested in poker and you see that on a profile, you can click on poker and get a list of all FutureLearners interested in poker. Wouldn’t that make poker night planning a breeze? Wouldn’t it also make new ideas for socials flourish? Who knew we had 28 people who like cats? Knowing this sure makes cat night more likely to happen.</p> <p>Need help from someone who speaks French, Hungarian or German? Why not search for those and see if we have someone in-house? Pro tip: We do. Or maybe you really want to learn Angular JS. No results for Angular? Why not search interests and see if there’s anyone you can connect with and learn together?</p> <p>Or maybe you just need a good excuse to strike up a conversation with someone. Watercooler takes you from “Hi, how are you?” to “Hey, I saw on Watercooler you’re into rock climbing! That’s so cool. I climbed Mount Everest once 💅🏻 ”. With new skills and interests come new friends. Or outlandish bragging, the choice is yours.</p> <h3 id=synergy>“Synergy”</h3> <p>What I love about skills and interests on Watercooler is the relationship between the two. Not all interests can be skills - I’m interested in Netflix, but I wouldn’t call it a ‘skill’. However all skills begin as interests. I’m skilled at CSS, but it began as an interest because I love computers, technology, pretty things and making stuff. I can express an interest in drawing, and maybe a product designer will pick up a group of Futurelearners who want to become the next Banksy, and initiate a learning hour on becoming Banksy. Sounds dreamy, but this is how we roll at FutureLearn. I love Trello and got to host a learning hour on loving Trello. The only limit used to be your imagination, now it’s your imagination plus whatever pops up on Watercooler.</p> <h3 id=our-product-vision>Our Product Vision</h3> <p>Our product designer Sandra designed the Watercooler logo and it captures the skills and interests convergence beautifully. The pink drop represents our interest, and it’s linked to a larger yellow drop that represents a skill. Our interests gradually grow into skills over time as we connect with people and practice them. I won’t continue with the water metaphor and the benefits of mixing fluids with others. You get the idea.</p> <p>It’s an exciting project to be part of. The most valuable takeaway so far is that good things come from doing things, releasing products early and starting conversations - even if you don’t know where those things, products and conversations will lead yet.</p> </div> <div id=disqus_thread></div> <script>
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//stevebrewer.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script> <noscript> Please enable JavaScript to view the <a href='https://disqus.com/?ref_noscript' rel=nofollow>comments powered by Disqus.</a> </noscript> </div> </section> </article> <footer> <div class=a-social-icons> <a href='https://twitter.com/svpersteve' target=_blank> <i class='fa fa-twitter'></i> </a> <a href='https://linkedin.com/in/svpersteve' target=_blank> <i class='fa fa-linkedin'></i> </a> <a href='https://github.com/svpersteve' target=_blank> <i class='fa fa-github'></i> </a> <a href='https://instagram.com/svpersteve' target=_blank> <i class='fa fa-instagram'></i> </a> <a href='mailto:steve.v.brewer@gmail.com?subject=Enquiry' target=_blank> <i class='fa fa-envelope'></i> </a> <a href='/feed.xml' target=_blank> <i class='fa fa-rss'></i> </a> </div> <p> <i class='fa fa-copyright'></i> Steve Brewer 2018 </p> </footer> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src='/javascripts/application.js'></script> <script src='https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js'></script> <script>
$(document).ready(function() {
$('#reading-list').DataTable( {
"paging": false,
"order": [[ 2, "desc" ]]
} );
} );
</script> </body> </html>