Add new case study

Gemfile

@@ -1,3 +1,4 @@
+source 'https://rubygems.org'
 group :jekyll_plugins do
  gem 'jekyll-archives'
  gem 'jekyll-feed', '0.4.0'

Gemfile.lock

@@ -1,4 +1,5 @@
 GEM
+ remote: https://rubygems.org/
  specs:
  addressable (2.4.0)
  colorator (1.1.0)
@@ -62,4 +63,4 @@ DEPENDENCIES
  jekyll-sitemap
 
 BUNDLED WITH
- 1.14.6
+ 1.17.2

_config.yml

@@ -43,7 +43,7 @@ videourl: /videos/
 # Global classes
 link_classes: link underline-hover blue hover-blue active-black
 code_classes: bg-washed-blue pa1
-post_heading_classes: f3 lh-title
+post_heading_classes: f2 lh-title
 paragraph_classes: f6 f5-ns
 
 # Gems

_includes/figure.html

@@ -1,6 +1,6 @@
-<figure class="center {{include.size}} db mv4">
+<figure class="center tc {{include.size}} mv4">
  <img src="{{site.baseurl}}{{site.imageurl}}{{include.url}}-lq.jpg" data-sizes="auto" data-src="{{site.baseurl}}{{site.imageurl}}{{include.url}}.{{include.type}}" data-srcset="{{site.baseurl}}{{site.imageurl}}{{include.url}}.{{include.type}} 1x, {{site.baseurl}}{{site.imageurl}}{{include.url}}-2x.{{include.type}} 2x" class="lazyload ba b--light-silver" alt="{{include.alt}}" />
  {%if include.caption%}
- <figcaption class="f6 left gray">{{include.caption}}</figcaption>
+ <figcaption class="f5 tc italics">{{include.caption}}</figcaption>
  {%endif%}
 </figure>

_layouts/default.html

@@ -54,8 +54,53 @@
  <meta name="twitter:description" content="{%if page.description%} {{page.description}} {%else%} {{site.description}} {%endif%}" />
  <meta name="twitter:image" content="{{site.website}}{{site.imageurl}}{%if page.card_image == true%}{{page.title | downcase | slugify | prepend: "card-image-" | append: ".png" }}{%else%}card-image.png{%endif%}" />
 
+ <!-- <link rel="preload" href="{{ "/css/main.css" | prepend: site.baseurl }}" as "style" onload="this.rel='stylesheet'"> -->
+
+ <noscript>
+ <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
+ </noscript>
+
  {% include criticalCSS.html %}
 
+ <script>
+ /*!
+ loadCSS: load a CSS file asynchronously.
+ [c]2014 @scottjehl, Filament Group, Inc.
+ Licensed MIT
+ */
+ function loadCSS( href, before, media ){
+ "use strict";
+ var ss = window.document.createElement( "link" );
+ var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
+ var sheets = window.document.styleSheets;
+ ss.rel = "stylesheet";
+ ss.href = href;
+ ss.media = "only x";
+ ref.parentNode.insertBefore( ss, ref );
+ function toggleMedia(){
+ var defined;
+ for( var i = 0; i < sheets.length; i++ ){
+ if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
+ defined = true;
+ }
+ }
+ if( defined ){
+ ss.media = media || "all";
+ }
+ else {
+ setTimeout( toggleMedia );
+ }
+ }
+ toggleMedia();
+ return ss;
+ }
+ </script>
+
+ <script>
+ loadCSS( "/css/main.css" );
+ </script>
+
+
  <style>
  .fonts-loaded .serif {
  font-family: "Lyon Display",

_projects/diamond-dental.markdown

@@ -17,6 +17,7 @@ brief: "Wordpress development for one of N.Ireland's leading Dental Clinics"
 permalink: /projects/diamond-dental/
 project_url: "//diamonddentalclinic.co.uk"
 category: "link"
+published: false
 ---
 
 Case study coming soon. Visit [{{page.title}}]({{page.project_url}}) to see it in action.

_projects/emotics.html

@@ -0,0 +1,102 @@
+---
+layout: post
+title: "Emotics"
+subtitle: ", redesigning Adoreboard's flagship product"
+date: 18/02/2018
+color1: "#472E78"
+color2: "#2D1757"
+role:
+ - Design
+ - UX
+ - Front-end Development
+description: "Product and UX design for Emotics, Adoreboard's emotion analysis tool"
+permalink: /projects/emotics/
+tech:
+ - VueJS
+ - CSS
+brief: "Product and UX design for Emotics, Adoreboard's emotion analysis tool"
+permalink: /projects/emotics/
+category: "case study"
+canonical: "Case Study"
+---
+
+<p><a class="{{site.link_classes}}" href="https://adoreboard.com/">Adoreboard</a> brought me in to work alongside their product team to redesign Emotics, an emotion analytics product used by consultants and agencies that analyses data to provide actionable insights for brands and research institutions.</p>
+
+<h2 class="{{site.post_heading_classes}}">UX Audit</h2>
+
+<p>Before jumping in with the redeisgn it was important to get familar with their current iteration of the product and start figuring out the pain points. Emotics was still in beta at this stage and hadn't yet been released to customers but the internal consultants were already using the it for live projects. They proved to be invaulable for gathering feedback on current weaknesses in the product and potential new features.</p>
+
+{% include figure.html size="mw9" url="old-emotics" type="png" alt="Old version of Adoreboard Emotics" caption="The old version of Emotics" %}
+
+<p>The old version of Emotics suffered from a lack of clear hieracrchy and a confusing UI. Consultants stated that they
+found it:</p>
+
+<ul>
+ <li>Difficult to upload data</li>
+ <li>Difficulty sorting through uploaded data as this was all done in the sidebar.</li>
+ <li>Viewing topics and snippets was confusing, with no indication of where to access them.</li>
+ <li>Too much functionality and actions were scoped within the small space of the sidebar.</li>
+</ul>
+
+
+<h2 class="{{site.post_heading_classes}}">Storyboards</h2>
+
+<p>Once I had spent time with the current produc and gathered feedback on the aspects of the product that needed improved, I started storyboarding and creating low fidelity wireframes of the product.</p>
+
+{% include figure.html size="mw9" url="emotics-storyboards" type="png" alt="Storyboards for Adoreboard Emotics" caption="Emotics storyboarding" %}
+
+
+<h2 class="{{site.post_heading_classes}}">Upload flow</h2>
+
+<p>One of the most important aspects of Emotics is uploading datasets that can be analysed to extract insights from. Originally, this was all done within the sidebar &mdash; which was too much functionality for a small section of the app.</p>
+
+{% include figure.html size="mw9" url="upload-flow" type="jpg" alt="Upload flow for Adoreboard Emotics" caption="Emotics upload dataset flow" %}
+
+<h2 class="{{site.post_heading_classes}}">Components</h2>
+
+{% include figure.html size="mw8" url="emotics-components" type="jpg" alt="Adoreboard Emotics Components" caption="Some of the designed components" %}
+
+<h2 class="{{site.post_heading_classes}}">Onboarding</h2>
+
+
+{% include figure.html size="mw9" url="emotics-onboarding" type="jpg" alt="Adoreboard Emotics Onboarding" caption="The onboarding flow" %}
+
+<p>One of the challenges with Emotics is that it is a complex product with terminology and methods that wouldn't be immediately apparent. It was important to showcase the value of the product without overwhelming or trapping the users in an onboarding flow that would only frustrate them.</p>
+
+{% include figure.html size="mw9" url="emotics-onboarding-2" type="jpg" alt="Adoreboard Emotics Onboarding" %}
+
+<p>Modals are used to introduce users to each section of the app. Users can take the optional tour, at which point they'll be guided through the key features of that page.</p>
+
+<h2 class="{{site.post_heading_classes}}">The finished product</h2>
+
+{% include figure.html size="mw8" url="emotics-preview" type="jpg" alt="Adoreboard Emotics Preview" %}
+
+<p></p>
+
+<h2 class="{{site.post_heading_classes}}">Just kidding.. a product is never finished.</h2>
+
+<p>One of the interesting things from talking directly with customers was discovering that conventions that you assume would be obvious to the average user turn out to be far from it. One of these such conventions was the "ellipsis menu" that was being used to group dataset actions within a dropdown menu.</p>
+
+{% include figure.html size="mw9" url="emotics-customer-feedback" type="jpg" alt="Iterative feedback" %}
+
+<p>After speaking with numerous users and gaining their feedback, it became apparent that this convention was too abstract and that users were finding it difficult to locate those actions. So I redesigned it to make the actions more noticeable.</p> 
+
+<p>As Luke Wrobleski says, <a href="https://www.lukew.com/ff/entry.asp?1945">obvious always wins</a>.</p>
+
+<h2 class="{{site.post_heading_classes}}">Logo Design</h2>
+
+<p>One of the last tasks I undertook with Emotics was redesigning the brand. The original brand was dated and didn't fit with the new tone of the product.</p>
+
+{% include figure.html size="mw8" url="emotics-logo" type="png" alt="Emotics branding" caption="Emotics rebrand" %}
+
+<p>I also animated the logo for use on loading screens and marketing material.</p>
+
+{%include video.html url="emotics-logo-white" type="mp4" autoplay=true loop=true %}
+
+
+
+
+
+
+
+

_scss/_styles.scss

@@ -146,7 +146,10 @@ transform: skewY(-2deg);
  > .highlight {
  line-height: 1.4;
  }
- h2, h3 {
+ h2 {
+ font-size: 1.5rem;
+ }
+ h3 {
  font-size: 1.25rem;
  }
  a {

gulpfile.js

@@ -20,6 +20,8 @@ var babel = require('gulp-babel');
 var transform = require('vinyl-transform');
 var imageop = require('lossy-imagemin');
 var deploy = require("gulp-gh-pages");
+var imagemin = require('gulp-imagemin');
+
 
 
 var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
@@ -37,12 +39,20 @@ gulp.task('jekyll-build', function (done) {
  .on('close', done);
 });
 
-gulp.task('images', function(cb) {
- gulp.src(['images/*.*']).pipe(imageop({
- optimizationLevel: 5,
- progressive: true,
- interlaced: true
- })).pipe(gulp.dest('images/dist')).on('end', cb).on('error', cb);
+// gulp.task('images', function(cb) {
+// gulp.src(['images/*']).pipe(imageop({
+// optimizationLevel: 5,
+// progressive: true,
+// jpgQuality: '70',
+// cache: false,
+// interlaced: true
+// })).pipe(gulp.dest('images/dist')).on('end', cb).on('error', cb);
+// });
+
+gulp.task('images', function (cb) {
+ gulp.src('images/*')
+ .pipe(imagemin())
+ .pipe(gulp.dest('images/dist'))
 });
 
 /**