{"id":1901,"date":"2015-05-07T15:54:20","date_gmt":"2015-05-07T14:54:20","guid":{"rendered":"https:\/\/blogs.kent.ac.uk\/webdev\/?p=1901"},"modified":"2015-12-04T13:38:56","modified_gmt":"2015-12-04T13:38:56","slug":"design-workshop-1","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2015\/05\/07\/design-workshop-1\/","title":{"rendered":"Design workshop #1"},"content":{"rendered":"<p>This blog post covers our first design\u00a0workshop. It was something of an experiment, but it helped us establish two things:<\/p>\n<ol>\n<li>how a homepage might function from the perspective of Helen, our undergraduate prospect persona.<\/li>\n<li>how we can design collaboratively and iteratively, getting regular feedback on our design hypotheses from key stakeholder groups.<\/li>\n<\/ol>\n<h2>How we got\u00a0here<\/h2>\n<p>In our website redesign discovery phase we gathered key business needs by going out and talking to a range of people from across the University.<\/p>\n<p>We did some initial data analysis of parts of the University website, looked at the kinds of things prospects expect, and analysed other university sites from across the world.<\/p>\n<p>We built a set of 6 personas to help us gain some empathy with our users.<\/p>\n<h2>A time to design<\/h2>\n<p>Armed with a good understanding of business and user needs we felt we could start the design process. We wanted to involve different parties as much as we reasonably could in this.<\/p>\n<p>We therefore plan to hold a series of workshops over the coming months with different groups of stakeholders. We will get feedback on outputs from the workshops from other key stakeholder groups such as prospects or current students.<\/p>\n<p>This has to be an iterative process as much as possible. Small changes, regular testing and feedback. Gradually evolving and shaping our designs.<\/p>\n<p>Our first design workshop was held with stakeholders from Information Services, Corporate Comms, and Enrolment Management Services.<\/p>\n<h2>The brief<\/h2>\n<p><a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/Screenshot-2015-05-06-12.30.26.png\"><img loading=\"lazy\" class=\"alignleft wp-image-1912\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/Screenshot-2015-05-06-12.30.26-763x1024.png\" alt=\"Helen - our undergraduate prospect persona\" width=\"400\" height=\"537\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/Screenshot-2015-05-06-12.30.26-763x1024.png 763w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/Screenshot-2015-05-06-12.30.26-224x300.png 224w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/Screenshot-2015-05-06-12.30.26.png 1024w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p>We wanted to keep things focused in the workshop, so we chose a scenario where our undergraduate prospect persona &#8211; Helen &#8211; has been to an HE fair and noticed the Kent stand. She is interested in studying Law at Kent, so she googles \u2018Kent University\u2019 and ends up on the homepage.<\/p>\n<p>We know this is a reasonably realistic scenario, because we\u2019ve observed prospects doing exactly this, even when they might be looking for something quite specific about Kent.<\/p>\n<p>She hopes to find information about a specific course, something on what Kent University is all about and what life here as a student would be like.<\/p>\n<p>What would we put on the homepage to meet Helen\u2019s needs while representing an image that the University wants to portray of itself?<\/p>\n<p>The idea is to put ourselves in her place as much as possible. Of course this is guesswork. But it\u2019s guesswork based on some valid assumptions about what prospects actually do.<\/p>\n<p>We can test our design ideas and assumptions by later getting feedback from real prospects.<\/p>\n<h2>Evolution<\/h2>\n<p>We had a process to help us through the brief, split into <strong>3 design iterations<\/strong>.<\/p>\n<p>It\u2019s a fairly standard design process: start with lots of ideas, and gradually evolve and distill these into just a couple of final ideas.<\/p>\n<p>The <strong>first design iteration<\/strong> involved each person sketching up to six ideas of how a homepage might work. We had 5 minutes. This isn\u2019t long, but the idea is to get plenty of very quick thoughts down on paper.<\/p>\n<p>At the end of this we stuck the ideas up on a wall and had a quick review, highlighting positive aspects of each design. There is <em>always<\/em> something interesting to take away from <em>any<\/em> design idea.<\/p>\n<p>The <strong>second design iteration<\/strong> takes the most interesting components or ideas from across the designs and combines and distills them. We split up into pairs and worked on a couple of new ideas per pair.<\/p>\n<p>Sadly we didn\u2019t have time for a third iteration (well I did say it was a bit of an experiment!) The plan would have been to split into two groups and work out one idea per group, again taking some of the most interesting components from iteration 2 and refining.<\/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: 50%;\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-1901 gallery-columns-2 gallery-size-medium'><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\/2015\/05\/07\/design-workshop-1\/processed-with-vscocam-with-f2-preset-3\/'><img width=\"300\" height=\"225\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.24.10-1-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"Pitching some of the ideas\" loading=\"lazy\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.24.10-1-300x225.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.24.10-1-1024x768.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.24.10-1-1920x1440.jpg 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/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\/2015\/05\/07\/design-workshop-1\/processed-with-vscocam-with-f2-preset\/'><img width=\"300\" height=\"225\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-15.24.57-1-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"picking some interesting ideas from each design\" loading=\"lazy\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-15.24.57-1-300x225.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-15.24.57-1-1024x768.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-15.24.57-1-1920x1440.jpg 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/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\/2015\/05\/07\/design-workshop-1\/processed-with-vscocam-with-f2-preset-4\/'><img width=\"300\" height=\"225\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.24.23-1-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"looking at our ideas\" loading=\"lazy\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.24.23-1-300x225.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.24.23-1-1024x768.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.24.23-1-1920x1440.jpg 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/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\/2015\/05\/07\/design-workshop-1\/processed-with-vscocam-with-f2-preset-5\/'><img width=\"300\" height=\"225\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.50.03-1-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"Our design sketches up on the wall\" loading=\"lazy\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.50.03-1-300x225.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.50.03-1-1024x768.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-04-30-16.50.03-1-1920x1440.jpg 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/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\/2015\/05\/07\/design-workshop-1\/processed-with-vscocam-with-q2-preset\/'><img width=\"300\" height=\"225\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-05-01-10.02.55-1-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"a few rapid sketch ideas\" loading=\"lazy\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-05-01-10.02.55-1-300x225.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-05-01-10.02.55-1-1024x768.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/05\/2015-05-01-10.02.55-1-1920x1440.jpg 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<h2>Just the beginning<\/h2>\n<p>Our workshop gave us 4 or 5 sketches of how a homepage might work for Helen. These are in no way final designs, or even prototypes. They\u2019re just sketched hypotheses that we can test out with prospects or other key stakeholders.<\/p>\n<p>We\u00a0focused\u00a0on a very simple user journey. It consisted of someone visiting\u00a0the University homepage looking for key bits of information. There are of course many other user journeys spanning a lot of different content. But this is at least a start.<\/p>\n<p>The key point for us is that we are establishing a way that we can <strong>design strategically<\/strong>, following a defined process:<\/p>\n<ol>\n<li>Establish or refine core business and user needs.<\/li>\n<li>Establish or refine key user journeys.<\/li>\n<li>Establish or refine personas.<\/li>\n<li>Hold a focused design workshop: set up a scenario with one persona and a key user journey. Establish design ideas that meet the user needs and core business needs.<\/li>\n<li>Feedback from stakeholders such as prospects or schools on the outputs from the workshop.<\/li>\n<li>Refine the process and iterate.<\/li>\n<\/ol>\n<h2>Summary<\/h2>\n<p>Our workshop was something of an experiment which helped us establish two things:<\/p>\n<ol>\n<li>how a homepage might function from the perspective of Helen, our undergraduate prospect persona.<\/li>\n<li>(and perhaps more importantly for now) how we can design collaboratively and iteratively, getting regular feedback on our design hypotheses from key stakeholder groups.<\/li>\n<\/ol>\n<h2>Related blog posts<\/h2>\n<p><a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2014\/02\/02\/user-centered-web-design\/\">User-centered web design<\/a><\/p>\n<p><a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2014\/03\/19\/user-centered-services-the-alpha-phase\/\">User-centered services \u2013 the alpha phase<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our workshop was something of an experiment which helped us establish two things:<\/p>\n<p>1. how a homepage might function from the perspective of Helen, our undergraduate prospect persona; 2. (and perhaps more importantly for now) how we can design collaboratively and iteratively, getting regular feedback on our design hypotheses from key stakeholder groups.<\/p>\n","protected":false},"author":2,"featured_media":1903,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[690,79443,79395,79421,79439],"tags":[521,79451,79463,79392],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1901"}],"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=1901"}],"version-history":[{"count":15,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1901\/revisions"}],"predecessor-version":[{"id":1925,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1901\/revisions\/1925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/1903"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=1901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=1901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=1901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}