{"id":1020,"date":"2013-11-15T21:12:59","date_gmt":"2013-11-15T21:12:59","guid":{"rendered":"http:\/\/blogs.kent.ac.uk\/webdev\/?p=1020"},"modified":"2013-11-16T19:09:40","modified_gmt":"2013-11-16T19:09:40","slug":"team-hack-sprint-user-needs-and-the-slim-web-editing-tool","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/","title":{"rendered":"Team hack sprint: user needs and the SLIM web editing tool"},"content":{"rendered":"<p>You have a room at home that you feel could really do with redecorating.<\/p>\n<p>You just <em>know<\/em> it needs doing but you have all kinds of things that always seem to get in the way. You know&#8230; going to work, eating, sleeping, tweeting about what you\u2019re watching on tv, tai-chi classes&#8230;<\/p>\n<p>And you know that the only way you&#8217;ll ever start is to go to the DIY shop and buy a few sample paint pots and a cheap brush. Doing\u00a0<em>something<\/em>\u00a0no matter how small starts you along a path that pretty soon is hard to back out of. And that&#8217;s a Good Thing by the way.<\/p>\n<p><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/BY2uH-yIEAAm4Fo.jpg\"><img loading=\"lazy\" class=\"alignleft size-thumbnail wp-image-1032\" style=\"border: 0px; margin: 10px;\" alt=\"creating personas\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/BY2uH-yIEAAm4Fo-150x150.jpg\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Well that\u2019s kind of where we\u2019re at in our webdev team. Only in our DIY metaphor the room is more like a fairly large house. OK forget the metaphor. It&#8217;s a website with 100k pages and 150+ publishers, in fact.<\/p>\n<p>A while ago we decided to run a team hack sprint to help us get those &#8220;sample paint pots&#8221; and kick off a review of our website and our publishing model.<\/p>\n<p>The hack sprint would be just a few days trying to find out who the university publishers are, what they\u2019re trying to achieve, and how they do it. And then building something very basic which fits just maybe one or two of many user needs that we\u2019d gather.<\/p>\n<p>This blog post is an overview of the processes we went through to develop our SLIM prototype (see video below). In later posts I\u2019ll be writing in more detail about those stages and processes.<\/p>\n<div class=\"kent-video-wrapper\"><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/79564078\" width=\"1140\" height=\"577\" frameborder=\"0\" title=\"SLIM\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/div>\n<h2>Some background: the current publishing model<\/h2>\n<p>Our current publishing model is pretty simple. Publishers use Dreamweaver to generate static content on a web server. This static content gets built up into a web page on demand with an in-house PHP templating engine that we call Pantheon.<\/p>\n<p>This approach works pretty well most of the time because of its simplicity. But there is a sense that it requires quite a lot of support and training. The overall goal of our hack sprint was to take a step back and briefly review the current situation while also trying out a few design and <a href=\"http:\/\/uxdesign.smashingmagazine.com\/2011\/03\/07\/lean-ux-getting-out-of-the-deliverables-business\/\">lean UX techniques<\/a>.<\/p>\n<h2>Who are our publishers?<\/h2>\n<p>Our first problem was simply to<strong> find out who our web publishers were<\/strong>.<\/p>\n<p>It sounds terribly basic, but we have around <strong>150\u2013200<\/strong> <strong>active publishers<\/strong> in dozens of departments. We ended up calling, going out and talking to something like 30 people. So that\u2019s about 20%. We felt this was a pretty good sample.<\/p>\n<p>Note that we did <em>not<\/em> want to run focus groups at this stage. Focus groups have their uses, but at this point we just wanted to find out the basics of what people were doing, how they interacted with other people in their publishing teams, even the physical spaces they had to work in.<\/p>\n<p>The goal of the interviews was to find out what roles these people had, how much time they spent on publishing, how much support they needed with the current model, and generally how it worked for them.<\/p>\n<p>We wrote up a little script to guide each team member in asking the same kinds of questions. Then we wrote it all up in a spreadsheet. It was kind of fun. In fact I&#8217;ve yet to meet anyone who finds it a pain going out and talking to people about how they use a product or service. And it <em>always<\/em> throws up surprises&#8230;<\/p>\n<h2>Hack day 1 &#8211; the Karen, Sara, and Mike\u00a0personas<\/h2>\n<p>Gathering user needs is great, but you end up with a lot of data.<\/p>\n<p><strong>Personas<\/strong> help in distilling that data into simple stereotypes that stakeholders and developers can easily latch onto and use as a common point of reference.<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-1020 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/processed-with-vscocam-with-f3-preset-7\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/vscocam_1384518738.737860.IMG_40131-e1384547390558-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Mike the persona\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/processed-with-vscocam-with-f3-preset-3\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/vscocam_1384518739.263206.IMG_4011-e1384547486867-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Sara the persona\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/processed-with-vscocam-with-f3-preset-2\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/vscocam_1384518738.737860.IMG_4013-e1384547620176-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Karen the persona\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p>I won\u2019t go into detail in this blog post but basically we spent a day going through all the user needs in some detail, and coming up with three personas (\u201cKaren\u201d, \u201cSara\u201d, and \u201cMike\u201d). We then focussed on one particular user need that was common to two of the personas:<\/p>\n<blockquote><p>I want to be able to edit a web page in a simple way that isn\u2019t intimidating to someone like me. I&#8217;m not technical and I don&#8217;t have much time. Editing web pages isn\u2019t my main job!<\/p><\/blockquote>\n<h2>Hack day 2 &#8211; inspiration and prototyping<\/h2>\n<p>We started day 2 with some very simple <strong>sketching<\/strong>, rough <strong>storyboarding<\/strong>, and then some paper <strong>prototypes<\/strong>.<\/p>\n<p>This process was really useful in setting the basic parameters for what we were going to develop.<\/p>\n<p><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/vscocam_1384518740.842762.IMG_4009.jpg\"><img loading=\"lazy\" class=\"alignleft size-thumbnail wp-image-1024\" style=\"border: 0px; margin: 10px;\" alt=\"Processed with VSCOcam with f3 preset\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/vscocam_1384518740.842762.IMG_4009-150x150.jpg\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>To me the really surprising thing was how sketching made it clear that each developer had a different understanding of how a solution would work.<\/p>\n<p>So after quite a lot of discussion and further sketching we came up with a single idea that we were happy with.<\/p>\n<p>Hand in hand with this was the idea of building <strong>inspirations<\/strong>. That is, a list of websites or tools that we would take inspiration from.<\/p>\n<p>The key inspirations for us were:<\/p>\n<ul>\n<li><a href=\"http:\/\/medium.com\">medium.com<\/a> &#8211; a gorgeously simple blogging tool by <a href=\"http:\/\/en.wikipedia.org\/wiki\/Evan_Williams_(entrepreneur)\">Ev Williams<\/a>, the guy who brought you blogger and twitter. The focus here is on <strong>content<\/strong>. No widgets or tag clouds or whatnot. Just content. Yes, I know it\u2019s a crazy idea to think that people might actually be interested in what you have to say, but maybe it takes people like Ev to push the boundaries a little.<\/li>\n<li><a href=\"http:\/\/madebymany.github.io\/sir-trevor-js\/\">the Sir Trevor editor<\/a>.<\/li>\n<\/ul>\n<h2>Hack day 3 &#8211; building<\/h2>\n<p>Luckily for us the Sir Trevor editor is <a href=\"https:\/\/github.com\/madebymany\/sir-trevor-js\">freely available on github<\/a> so it was pretty easy for us to set up a basic editor.<\/p>\n<p>One of the things we planned during the sketching phase was to have a multi-column layout. So this required a little bit of tweaking because Sir Trevor didn\u2019t have this by default.<\/p>\n<p>A second concern with Sir Trevor was that text editing wasn\u2019t as nice as in medium.com. The medium.com source isn\u2019t available, although a few people have tried to duplicate some aspects of it. We found a handy little tool called <a href=\"https:\/\/github.com\/mduvall\/grande.js\">grande.js<\/a> which we were able to integrate into Sir Trevor.<\/p>\n<p>The result was <a href=\"https:\/\/github.com\/unikent\/slim\">SLIM<\/a> (Slim Little Internet Maker, or is that Shiny Little Internet Maker? We haven&#8217;t decided whether to have a recursive name or not yet).<\/p>\n<p>SLIM is a simple but attractive text editor which saves content into json data files, and which allows blocks of text or images to be dragged around and reordered in a multi-column environment.<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-2 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-2 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-2 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-2 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-2' class='gallery galleryid-1020 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/screen-shot-2013-11-15-at-14-21-44\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/Screen-Shot-2013-11-15-at-14.21.44-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/screen-shot-2013-11-15-at-14-20-52\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/Screen-Shot-2013-11-15-at-14.20.52-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/screen-shot-2013-11-15-at-14-21-55\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/Screen-Shot-2013-11-15-at-14.21.55-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p>You can find our code in <a href=\"https:\/\/github.com\/unikent\/slim\">our slim github repo<\/a>.<\/p>\n<p>We didn\u2019t have the time to get anything more than a very rough user interface, although we do have some designs for how the interface <em>might<\/em> look if we had a few more days to work on this.<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-3 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-3 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-3 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-3 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-3' class='gallery galleryid-1020 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/upload-4\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/upload-4-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/upload-3\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/upload-3-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/upload-2\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/upload-2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/2013\/11\/15\/team-hack-sprint-user-needs-and-the-slim-web-editing-tool\/upload\/'><img width=\"150\" height=\"150\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2013\/11\/upload-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<h2>Next steps<\/h2>\n<p>This was a 3-day team hack event, with a couple of days added on for user interviews.<\/p>\n<p>We won\u2019t be building on the code we developed in the hack sprint, although we will take away the ideas and processes we adopted. The sprint demonstrated to us that:<\/p>\n<ul>\n<li>we have a range of web publisher needs but that these can be condensed to a fairly small set of personas and key needs.<\/li>\n<li>the tools are there to produce a simple and attractive web-based content editor which can be used to store content in an API-friendly way for re-use on a web frontend. Sadly we weren\u2019t able to do any user testing on our finished product.<\/li>\n<li>as a team we can use techniques like personas, inspiration boards, sketching, storyboarding, and paper prototyping to help smooth the process of converting user needs into a finished product <em>which satisfies those user needs<\/em> rather than meeting <em>perceived<\/em> needs.<\/li>\n<\/ul>\n<p>And above all we had fun!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This was a 3-day team hack event, with a couple of days added on for user interviews.<\/p>\n<p>We won\u2019t be building on the code we developed in the hack sprint, although we will take away the ideas and processes we adopted. The sprint demonstrated to us that:<\/p>\n<p>1. we have a range of web publisher needs but that these can be condensed to a fairly small set of personas and key needs.<br \/>\n2. the tools are there to produce a simple and attractive web-based content editor which can be used to store content in an API-friendly way for re-use on a web frontend. Sadly we weren\u2019t able to do any user testing on our finished product.<br \/>\n3. as a team we can use techniques like personas, inspiration boards, sketching, storyboarding, and paper prototyping to help smooth the process of converting user needs into a finished product which satisfies those user needs rather than meeting perceived needs.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17076,79395],"tags":[442,86,79401,79397,79461,762,79400,79399,79398,11640,79384,79402,79403],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1020"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=1020"}],"version-history":[{"count":14,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1020\/revisions"}],"predecessor-version":[{"id":1050,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1020\/revisions\/1050"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=1020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=1020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=1020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}