WSC_casestudy_3.pdf

Transcript

1. Take a peek inside our design process, welcome to our project scrap- book. Rather than telling you about our approach to prodcing digital design, we’d prefer to show you. Documenting our recent work with Work- shop Coffee this guide and take a look into the innards of the our design process. It will show how we approach digital innovation, and the unique way in which we approach our projects. This approach isn’t just to give us a smug satisfaction that we’ve done a good job - it produces results too, just take a look at the metrics on the left. Project disciplines Consultancy Design & UI Web Development Content Migration Content Management CRM Integration Visits +15.71% 18,963 vs 16,388 Unique Visitors +12.27% 13,201 vs 11,758 Pageviews + 43.65% 69,554 vs 48,412 Pages/visit + 24.14% 3.67 vs 2.95 Avg. Visit Duration + 45.37% 02:54 vs 01:59 Results at a glance £ Increase in sales + 45.37% “The new site has seen our online and offline sales increase and customer satisfaction at an all time high” Inside the Design Process: W o r k s h o p C o f f e e
2. The Brand Workshop Coffee Co. are dedicated to sourcing, roasting and serving the sweetest, cleanest, freshest and most sustainably-procured coffee they can find. They offer up The stores are stocked with retail packs of freshly-roasted coffee, brewers, grinders and other coffee apparatus, and trained and dedicated staff ready and willing to provide advice to guests on coffee, and how best to store, prepare and enjoy it at home. Our challenge was to bring Workshop coffee’s values to life on the digital scale. Focused on great tasting coffee, passionate about it being sustainably sourced whilst at the same time Put simply, the new website had to: • Communicate brand values • Increase online sales • Be a source of information for coffee lovers • Keep customers up to date Here’s an extract from the brief: “We want workshopcoffee.com to be a fitting representation of our brand and brand values, a source of information for curious customers and coffee lovers, and a place from which we can more easily get great coffee and accessories into the hands of coffee lovers everywhere. We want purchases to occur with as few clicks as possible. We want to to be able to keep our customers up to date, as easily as possible. We want anyone who’s purchased a bag of our coffee to be able to find out much more about it than we can squeeze onto a label. We want the typefaces, them images and feel of our site to be a representation of the hand-crafted, considered and selective curation we employ at our stores. The Brief
3. “Improvements to navigability and accessibility contribute to reduced strain on administrative staff” Workshop Coffee needed an extensive digital strategy if their objectives were going to be realised. During the scoping process we looked to find out not what WSC wanted, but what they wanted to achieve, this way we could then go away and work out what they needed. The Scoping Process It all starts with a scoping meeting - here we find out what a client wants to achieve and from this we can begin to decide what they need to realise these objectives. As the brief on the previous page shows, WSC wanted to begin to sell coffee online and provide a shop window for the brand. The brief tells us the general direction of the project, but during in the scoping process we start dig a little deeper. Our design team sat down with WSC’s Director of Operations, Tim and probed him on the the real priorites of the project so that they can start to map the design and technical process, deciding on how the site needs to function and what features it must have to achieve what is expected from it. What did we find out? “If I had asked people what they had wanted, they would have said faster horses” - Henry Ford Wider Digital Marketing Strategy Consultation Throughout the desgn process we consult our clients on how they can make the most out of their new website. We dropped down to Workshop Coffee’s Clerkenwell branch and asked about there current marketing overall strategy (both offline and online). Workshop Coffee’s strategy was quite limited. It consisted of a newsletter that had not yet been released and sporadic social media activity. During our meeting it emerged that Workshop Coffee really wanted to promote new coffee releases and push people o the online store. As well as simple, bold calls to action on the website, we advised intergrating offline experi- ences with digital channels. We therefore ensure that a new website is inline with any existing on or offline marketing activities. By providing specific calls to action (CTA’s), that promote in store marketing Strategy
4. Design & Build From paper to pixel: the design process begins with rudimentry sketches and is developed into fully fledged designs Phases and Sprints Mapped The next step in the build considers the logistics of the design process. We plan how the pro- ject is going to be put together, considering how long it will take and how much it will cost. This information is then organised into a release schedule which consist of a series of phases and sprints. ‘User journeys’ are created (anticipations of different tasks that users will need to complete on the website) and against these an effort level is allocated. From this information time can be estimated and we can decide on the priority levels of tasks. A sprint consists of one user story, whilst a phase consists of a series of sprints that make up what is necessary to produce an minimum viable product (MVP). These are shown in a release schedule. In the case of Workshop Coffee, the initial budget allowed for 29 days of work. In this time were able to complete phase one, which consisted of five sprints. Designs Sketched The next step involves taking what we have learnt in the scoping stage and beginning to make into a viable product. This involves the design team sitting down and coming up with sketches, not just about how pages will look, but more importantly how they will work. From these sketches a series of ‘wireframes’ are produced to give a more accurate idea of how the web pages with look and function.
5. Style Guide Rather than designing individual pages, we use a modular design process in which decisions on visual direction are made by both visual designer and developer. A style guide is used that means that page and content layout can simply be designed by sketches. Individual elements are then quickly replicated across multiple pages in accordance to the user stories. The style sheet is the first page that is built and includes how bullet points will look, how quotes look, H1 H2s (heading formats) and how ‘Call To Action’s and fields look. The page is responsive too so we can get an idea of how the website will look and function on mobile devices right from the beginning. Visuals Prototypes Prototype of some aspects of the site have been made (design guidelines, shopping section) [screenshot]
6. Online Store The new website had to have the ablity to sell coffee online.
7. How We Work Staying Agile An Agile Methodology lies at the heart of both our design and development pro- cesses. This means that we are in regular contact with the client as the project pro- gresses. After every step in the process our team sits down with the client and shows how the project is progressing. Using this methodology, problems can be ironed out as we build rather than at the end of the project when it would be too late. This ap- proach to our designs allows us to be more flexible with our builds and gives us the ability to change and adapt our designs as we receive feedback. User Centric Design We are in constant dialogue with those that will be using our designs, both client and user. Making sure that we consult with the users of our designs at the end of each stage in the build process ensures that we can easily address any problems that the users have before it’s too late.
8. A Responsive Site One of the key requirements for Passenger Focus was a mobile friendly site, unsurprising, given the nature of the organisation. Rather than using mresources and development time to create an entirely separate mobile site, we advised Passenger Focus to let us implement a responsive site for them. The main concept behind re- sponsive web design (RWD) is that the same website can be viewed on any sized window or display; the website itself dynamically shifts when resized or viewed on a smaller device. RWD will always display a page optimally and eliminates the need for any panning or zooming. RWD improves administrative efficiency as changes made through the CMS will appear in all iterations of the site. Retaining all of a site’s content on one site rather than separate mobile and desk- top versions is also espoused by Google as an important factor for improving search rankings. “Improvements to navigability and accessibility contribute to reduced strain on administrative staff”
9. Content Management
10. Testing Problems Encountered Before Workshop Coffee, our content management system (CMS) Jellybean hadn’t had to support any level of e-commerce. However for the WSC pro- ject it was essential that as well as being able to manage the content of the site easily, the WSC staff could also manage the products that appear on the website as they came in and out of stock in store. Jellybean therefore had to be adapted to enable WSC to add and remove stock in a clear, simply way. The solution involved a series of checkboxes. Deploy Link to finished website