Viewing entries in
Tips

10 Tips for Building Wireframes

10 Tips for Building Wireframes

I have been learning to create low and high fidelity wireframes for both mobile and web devices. There are a variety of different tools you can use to create these wireframes like Illustrator, Photoshop and Sketch ( only available on Mac ). I have been using Sketch 3 to wireframe as its a simple combination of both illustrator and photoshop. 

More and more designers are using vectors for wire framing. The following tips will help you make the most of your wire framing experience. 

Wire framing is about working rapidly and iterating quickly. The aim is not to create attractive interfaces; your number one priority is to design information and experience. 

Below are 10 tips that i believe to be important when designing wire frames. 

1.  Start Sketching

Sketch them first with pencil and paper for a quick sanity check. This should take about 30 seconds and opens up the possibility of getting early feedback. This can save a lot of time and money. The feedback gained through peer review or, best of all, from some early and informal user testing (you may need to spend a little more than 30 seconds on sketches if they're for user tests). 

2. Go Monochrome

Wireframes make clear the hierarchy on a web page; they visually demonstrate the order in which users should process the available information. If you want users to process the headline before hitting the "buy now" button, the headline needs to "trump" the button by demanding more attention.

This visual hierarchy can be defined in a number of ways. We could use size to make the headline more impactful, we could use positioning (by placing it before the button). We could use colour, contrast and a range of other things, but doing so in a wireframe only makes things more confusing.

By removing colour from the equation, the visual relationship defined by position, size and (if you want to go the extra step) contrast, is much cleaner.

We're not building pretty, pixel perfect UI kits here. Stick to a limited range of greys, then use color just for labels and notes. 

3. Don't forget the goals of the page 

Keep the goals of the page in mind when designing a wireframe. Focus on driving action. Organise the information into hierarchy that serves the goal of the page. 

4. Pick Your End Point

Prior to commencement, work out who will be consuming the wireframes, how they'll consume and what what level of fidelity is required. Remember that theres a relationship between the level of fidelity and type of feedback. Will quick paper sketches suffice or will they need to be fully interactive with accurate dimensions? Keep in mind: the less precise the wireframes are, the more liberty and creativity a designer is going to take with them. On the other hand, if you think they look perfect designers may feel inhibited and merely "colour in" the wireframes, preventing the design process from really getting going. 

5. Keep the rest of the team informed

Wire frames are not just for the client. All members of the web team should provide feedback on them, buying into the process at an early stage.

syd-creative-team.jpg

6. Use common elements

When designing a set of pages, use tools that allow you to make multiple changes to all common page elements at once. Moreover, as you're creating the wireframes, look out for design patterns that repeat. Leveraging these is key to gaining efficiency and consistency. 

7. Consider the content

If your wireframe aren't sketches then be realistic about the amount of content that will be added to the page. This holds true also for number (and length) of links and navigation. If practical use accurate sized fonts, images and consider what will happen when more text then ideal is added. Nothing on the web should be etched in stone, so ask if the design will flow as required. 

8. Draw on your experience

You do not need skills in design or development. All anyone needs is experience in using web apps or websites. Of course the more experience the better but you don’t need to understand relational databases to wireframe.

9. Keep it clean

If a particular page requires two text boxes and a button then it should have just that, no more, no less.

10. Get feedback 

I have learnt not to be afraid to test your wireframes with a couple of informal user tests. Grab people from around the office and ask them to find various bits of information or explain what they think the function of the certain elements is. 

 

 

 

 

 

 

 

 

 

 

 

 

 

10 Best Practice Tips for User Onboarding to a Mobile Application.

10 Best Practice Tips for User Onboarding to a Mobile Application.

1.The Goal.

The main goal is to accommodate your user and to get them using your product, ASAP. It’s highly important to make a fantastic first impression and to then carefully familiarize your users with the product so that they come back.

 

2. Communication is key.

You don’t want to talk their ear off but you want to be as charming as possible. Simply: Tell the user what they need to know. In as few words as possible, make them like you, being as witty or delightful as you can while doing it. It is also important to make sure you type in the correct formality for your members.

 

3. Welcome them properly.

It doesn't feel great spending so much time filling out registration and membership forms to then only walk in through the door with every single staff member acting as if you don’t exist.

 

A major part of the on boarding process is making a new member feel welcome. You want to be able to thank them for taking the time to join your product instead of just sending the invite to the junk box. If you haven’t set up a welcome email, then make one. It doesn't need to be long.

 

4. Making it easy.

This is where you will lose sign ups. Life is complicated enough as it is and if you do not make your sign up simple, you will be losing customers. Take some time to figure out what you actually want to know from your customers- the bare basics.

 

5.  Save them time.

Nobody, including ourselves, like being asked to fill out questionnaires or registration forms by people in the streets. You’re in a rush, you have to go to the doctor with your headphones in.  I’ve used all the excuses in the world not to stop to be asked to fill out a questionnaire. We don’t have a lot of spare time. We value our information and don’t necessarily feel comfortable sharing a lot of information right from the start.

 

pinterest.JPG

Social log-in is a great time saver that is appreciated by a vast majority of consumers. You’re going to have some people who do not want to use this option, but you can offer a different mode for them. Pinterest is a great example of this. They have an option for a social log-in, or you can create a direct account. Do the same thing for your visitors.


The on boarding process should be warm in tone, fun and offer additional guidance if necessary. For example, if you've got a video available on how to make the most of their experience, this information should be included both in the email you send out and in their welcome  page.


6.  Creating a compelling CTA.

No matter what market you’re in, chances are you are facing some stiff competition out there. What can you do to make signing up for your customer a “must”? Take a step back and distil what it is that makes you unique into no more than 2 sentences. Your tagline should be placed in a prominent spot on your landing page.

7. Making Referrals.

2.png

The best way to make an influential person shout about your company? Start including friend referencing on your boarding process.  A fantastic example of this is Facebook. When you sign up and are getting your profile ready, you have the option of inviting friends/existing contacts.

There is nothing more influential than a customer who is totally excited about what you have to offer and wants to be the first person to share it with friends.

The added benefit of a referral goes back to your growth funnel. It takes a lot of people pouring into the funnel to keep it full so why not let your customers help you keep it full.

8. Don’t break the flow.

Designers usually strive to get the users into a state of “flow” in which a person performing an activity is fully immersed in a feeling of focus, full involvement in the process of the activity. There are many tools to help designers make this happen that can also be implemented into the design of your on boarding process.

 

One of the main requirements is to be as unobtrusive as possible. For example, don’t surprise your users with unexpected pop ups and messages. The best way to prepare the user is show them what steps are coming up and what they have left. For a fluid experience, context is important.

 

 

9. On boarding is a relationship and is ongoing.

Relationships are built on trust so don’t mislead your users and make it easy for them to trust you. Your users are new and are figuring out there way around your product. You need to nurture the relationship between yourself and them to keep the relationship going. Engage your users in a natural yet friendly way. You should spend time very early on in the on boarding process getting to know your users and what their needs are. This could be sending me them a personalized note to each individual right after the moment of email verification.10. Ease them in gently. People, including myself hate it when you visit a page or an application where it’s so busy and over complex, it makes me want to stay away. This isn't to say that you should not do something personal and fascinating.  What you don’t want to do is overwhelm the new users on their first visits to your application.There some examples of pages and apps where all the white space is full of content. Colours, images and words. It can all be a bit too much for a new user to handle. With some effort, the experience can be elegant and informative without over stimulating the user. Short tips and pop up notifications are a good way to guide new users through the appropriate steps. Be sure to show them one at a time. Tell them directly what they need to know and when they need to know it. Don’t make them remember too much as they will forget it. Instead, use reminders.Overall, on boarding new users should be a fun and creative experience to help develop your product. There are hundreds of tools out there to help you optimize your product. Experiment with different tools and features to your advantage.

 

 

Sources and Further Reading

http://www.blogtyrant.com/best-about-us-pages/

https://zapier.com/blog/user-onboarding-user-interface-inspiration/

http://www.dtelepathy.com/blog/design/ux-flows-onboarding

http://blog.piethis.com/post/84814920128/improve-onboarding-tips

http://www.hubba.com/improving-new-user-onboarding

http://www.hubba.com/improving-new-user-onboarding

http://growthdevil.com/user-onboarding-techniques-successful-growth-hacking/

 

 

Factual & Rails || Grabbing UPC Product Data

We're heads down creating the next significant iteration of Nutribu, our nutrition tracking app. It's nearly ready, and we're dead excited.

Nutribu is being re-imagined to make tracking what you eat, still a very manual process which is unavoidable despite the numerous tech gimmicks you may have seen to help automate the process. So, we're focussing making it simple, fun and dead easy to find what you're eating and capture it in order that you can track your nutrition against your goals.

One area that users really wanted, and isn't really a new feature as it's often touted as one of the best features of apps like MyFitnessPal, is the ability to scan a UPC product barcode and instantly return the product complete with nutritional information. I can tell you now, the new Nutribu will have that too. Yay!!!

Actually, now I'll show you how to implement such a feature into your own app, starting with the server side component of fetching and storing product information from a service like Factual.

Before you do anything, head over to Factual and grab an API key and secret.

1. There's a Gem for that, of course.

gem 'factual-api'

2. Write tests.

Note: We use VCR to optimise the testing of HTTP interactions.

products_controller_spec.rb
require 'spec_helper'

describe V1::ProductsController do
  
  include_context "signed up user"
  include_context "api token authentication"
  
  describe "show" do
    let(:product) { Product.new(name: "Stone Crop Body Lotion", brand: "Eminence", upc: "608866337447") }
    def get_product
      VCR.use_cassette('factualapi') do
        get "/v1/products/#{product.upc}.json", nil, token_auth
      end
    end
    it "returns status 200" do
      get_product
      expect(response.status).to eq(200)
    end

    it "contains the product info" do
      get_product
      body = JSON.parse(response.body)
      expect(body["name"]).to eq(product.name)
      
    end
    
    context "product does not exists in in-house db" do
      it "create a new product in db" do
        
      end
    end
  end
end

3. Generate Products Model

$rails g model Product name brand weight:integer upc

class CreateProducts < ActiveRecord::Migration
  def change
    create_table :products do |t|
      t.string :name
      t.string :brand
      t.integer :weight
      t.string :upc
      
      t.timestamps
    end
  end
end

4. Generate a Model for Product Image

$rails g model Image image:attachment product:references
class Image < ActiveRecord::Migration
  def change
    create_table :images do |t|
      t.references :product
      t.attachment :image
    end
  end
end

5. Update Routes.rb

...

resources :products

...

6. Product Model and Validations

app/models/product.rb

class Product < ActiveRecord::Base
  validates_presence_of :name
  validates_presence_of :upc
  validates_uniqueness_of :upc
  has_many :images
end

7. Image Model & Validations

This one is somewhat more involved. We use Paperclip

#todo include explanation for this.

app/models/image.rb

class Image < ActiveRecord::Base
  
  has_attached_file :image
  belongs_to :product
  validates_attachment_content_type :image, :content_type => /\Aimage/
  
  def file_from_url(url)
    self.image = download_remote_file(url)
  end
 
  private
  
  def download_remote_file(url)
    # OpenURI extends Kernel.open to handle URLs as files
    io = open(url)
    
    # overrides Paperclip::Upfile#original_filename;
    # we are creating a singleton method on specific object ('io')
    def io.original_filename
      base_uri.path.split('/').last
    end
    
    io.original_filename.blank? ? nil : io
  end
end

8. The Product Controller

# Update an existing user's profile.
# Requires a valid API token.
class V1::ProductsController < V1::BaseController

  before_action :authenticate

  def show
    result = FetchProduct.perform({upc: params[:id]})
    if result.success?
      render json: result.product
    else
      render json: {error: {message: result.message}}, status: result.status
    end
  end

end


9. The FetchProduct Interactor

We use Interactors to add a layer of abstraction between our models and controllers - especially useful when performing complex interactions in a single request.

Basically, how we want this to work, is to initially check our own database to see if the product already exists, if not route the request to Factual to get the data, return and store it in our db, so the next request can just fetch it from our local store.

app / interactors / fetch_product.rb

class FetchProduct
  require 'factual'
  include Interactor
  attr_reader :status
  attr_reader :product
  
  def perform
    product = Product.find_by_upc(context[:upc])
    if product.present?
      @status = :found
      context[:product] = product
    else
      # could not find this product in our db, find it on factual db
      factual = Factual.new(ENV['FACTUAL_KEY'], ENV['FACTUAL_SECRET'])
      raw_data = factual.table("products-cpg").filters("upc" => upc).last
      
      # this should be put in a worker, then what will we return for the first time? not_found?
      if raw_data.present?
        # create product from raw data
        product = Product.create({name: raw_data["product_name"], brand: raw_data["brand"], upc: raw_data["upc"]})
        raw_data["image_urls"].each do |url|
          image = product.images.create()
          image.file_from_url(url)
        end
        @product = product
        @status = :found
      else
        context.fail! message: "could not find product info"
        @status = :not_found
      end
    end
  end
end


Raspberry Pi || Sending POST requests to a web service with python

Yesterday I spent a few hours getting acquainted with my Raspberry Pi.

The mission, was to simply setup the Pi, create a simple script to write some output, to a text file. Then, to create a cron job to process that script every few minutes. After that, I would get acquainted with Python modules, firstly by getting the current time and outputting that to the log.

Finally, constructing a POST request to a 3rd party web service to send that timestamp to.

What we did:

Using Python version 2.7.3rc2 on a Raspberry Pi, running Raspian distribution of Linux.

We first got a simple python script writing to a text file, getting the current time using the python Time module and appending it to the file contents. 

import time

f = open('/path/to/folder/test/log', 'a')
# current_time = time.asctime( time.localtime(time.time()) )
current_time = time.strftime('%I:%M%p %Z on %b %d, %Y')
f.write(current_time + '\n')

f.close()


Then we created a cron script to run on boot of the Pi and then every 2 minutes, to run the python script. 

$ sudo crontab -e
# m h  dom mon dow   command
*/2 * * * * python /path/to/folder/test/add_note.py
@reboot python /path/to/folder/test/add_note.py

From there, we constructed a POST request to the nourish staging (old) Notes endpoint, firstly via the Python shell (IDLE) which comes with the Raspian distribution of Linux. 


Key here was the use of two further Python modules: urllib and urllib2 


import time
import urllib
import urllib2

url = "http://api.someservice.co.uk/api/v2/notes/?auth_token=XXXXXXXXXXXXX"

current_time = time.strftime('%I:%M%p %Z on %b %d, %Y')
date = current_time
post_data_dictionary = {'log[person_id]':12, 'log[user_id]':67, 'log[text]':current_time}
post_data_encoded = urllib.urlencode(post_data_dictionary)
request_object = urllib2.Request(url, post_data_encoded)
response = urllib2.urlopen(request_object)
html_string = response.read()

f = open('/path/to/file/test/log', 'a')
f.write(html_string + '\n')
f.close()

Note that in Python 3, urllib2 has been merged into urllib, so no need to declare both in that case. 

I then updated the cron to process this file and refactored the script a bit. 

Authentication just passes the auth token as a param, so need to improve there. 

Next step is to get the actual data via an analogue to digital converter, and interface to the Pi, via SPI. We want to end up with a self contained RJ45 which interfaces directly to a pressure sensor for bed or chair interactions. 

We also need to change the location that this data is sent to, either the existing mongodb or some other suitable data storage, which can then be interrogated and queried at will by a caffeine fuelled CEO. 

New Tools | Optimizely

New Tools | Optimizely

So I have recently been introduced to Optimizely.com. Its a fantastic A/B testing site that is super simple to use. 

Optimizely makes website optimization software for companies. The Optimizely platform technology provides businesses the ability to conduct A/B testing, Multipage, and Multivariate testing allowing them to make better data-driven decisions.

 

 

It's very simple, you take your web page URL and input it into the box. Optimizely will pull through all your information from your website and bring it into a window where you can then add, edit, and change HTML, CSS and inject javascript. 

 

Its a very intuitive tool to use to create variations of experiments to try on your web page to try and increase various things such as clicks and sign ups etc. 

Screen Shot 2014-03-07 at 14.25.02.png

Once the page loads up, you get the options for changing, editing and adding HTML to the page so you can create variations of experiments to test out on the website. Once submitted you can then track how both compare to one another. 

 

As you can see from the image it is very simple to add HTML to the site where you can style new elements via CSS, in this case in our Header where I've just added a new <h2> element. The Options are endless to what you can do with Optimizely, you can create any amount on variations of your webpage to submit. 

Screen Shot 2014-03-07 at 15.03.25.png

I look forward getting to grips with Optimizely properly in the near future for various projects, as it's a very simple tool to use which could make the difference of new users signing up to our site or more people clicking links.

@steve: Tools like this are very powerful, when used correctly. Firstly, for most companies, the job of split testing design treatments, styles, messages and communication should not have to go into the development team to implement, where possible - marketeers, product owners, whoever it is responsible for optimising the site against the companies key metrics should not have a technical constraint to be able to make this part of their every day job.

The second thing is to remember, that split testing and optimising sites is just one aspect of the funnel. You need traffic first, so address this with your SEO strategy, social media, PR and other forms of organic traffic sourcing. If you’ve got even a small amount of budget, then Facebook or Google Ads targeting your market segment would be a good way to ensure your AB tests have a predictable sample set of fresh eyes to properly extract insights from your experiments.






The Build | Websters Wheelchairs

The Build | Websters Wheelchairs

Ben Schofield is a 23 year old adventure sports fanatic. From December 2013, Ben has started a new career in digital technology, startups and entrepreneurship. Follow this blog as Ben writes about his experiences, learning a new industry from scratch as an Apprentice to @r3trosteve

Following on from designing and building a brief for Websters, it is time to get stuck in and build the code.

It used to be that much of the design process was conducted with static graphic designs, produced in photoshop or fireworks - finally being handed off from the “web designer” to the “web developer” to convert the static designs into valid html and css.

Today is different. I’m a strong believer that there is no difference between a graphic designer and web developer when it comes to implementing front end web designs. Designers have to code, coders have to design.

So, the sooner we get into code, the better - particularly when you consider other challenges front end developers face, particularly when developing websites that will work effectively across the myriad of devices and display sizes that we now have to work with. It’s much easier to work this out in code, that creating dozens of iterations in static graphic format.

We’ll get into some of the tools available to make this easier in the development stage - where we can build on popular design patterns for responsive websites.

So, in summary: Designers need to code, as early as possible in the design phase.

I have chosen to build this holding page, as I feel it has a really soft and modern design to it and follows today's trends within web design. 

I opened up Sublime text and created a new document where I will write my code. Secondly, I created a Websters folder in which I would store all the images and files I would need to build the page. 

Since it was a while ago that I last wrote some code, I felt I needed a refresh, so I went back onto the Lynda.com training course which I completed just under 2 months ago. This helped me to refresh on the basics, after which, I got on with coding the basics of the holding page. 

This is the HTML markup - which provides us with a structure of content for the page. After speaking to Steve, What I would like to do with the page requires quite a bit of Jquery and JavaScript which he is going to go through with me at some point. As It is only a single page, I haven't created a style sheet to attach to the page as I will be simply be able to edit and format the text etc in HTML. ( I hope). 

The next stage is to add CSS to the text and get it formatted "centrally". 




So, I have managed to figure out how to format that text to how I wanted it, it's not yet the correct fonts, but it is in the right place. which I'm happy with. The next stage is to add the background and effects to the photo via Photoshop, to give it the soft translucent feel to it which will be very eye catching and effective. 

 

Monday 3rd February: 

So today, I have been researching non standard web fonts and how to Code and implement them into my design to get the style and look I'm after. It has taken me a while to get my head around how to do it, looking at various forums such as http://stackoverflow.com/questions/7717734/using-non-standard-font-in-web-pages. 

Reading through articles and googling questions on how to code NSF into HTML and CSS, using the font-face attribute to stylise the font-family. I then visited the font-face website (http://www.font-face.com/) where I followed their simple instructions, and it just clicked. So I have now changed the standard web font to something more appealing to the eye, however I am going to change the font on the paragraph as I feel it is a little difficult to read But I do like how it looks on the "Coming Soon" heading. 

Below is the css I used to implement the non-standard font:

@font-face {

    font-family: pistara;

    src: http://www.dafont.com/pistara.font?text=Coming+Soon;

    font-weight:400;}

        h1 { 

             font-family: pistara;

            font-size: 40px;

            margin-top: 200px;

            text-align: center;}

I have come across a problem. Before I figured out to code non  standard fonts, I had worked out how to set an background-image using CSS however, when I input the code for the @fontface within the style, it erased my background image and turned the background white again, I have been trying to find why this has happened but have had no success yet. 

The next step is to work on the background image again and really get it looking to what I had hoped for. 

Today, I have been researching background images and have managed to go get the background to display correctly in the window, however now it is hiding all my text. I don't know if it is the way in which Im putting the code in order or wether it is something else, I have been moving it around but nothing seems to work. 

I have been lookingat trying two different techniques to implement my background image, the easiest way in which to do it I found was by:

Websters'

 #bg {

            position: fixed;

            top: 0;

            left: 0;

            /* preserve aspet ratio */

            min-width: 100%;

            min-height: 100%;}

here is a link which I used to help me solve the problem: http://css-tricks.com/perfect-full-page-background-image/

Try using Google Web fonts again.

If you add a font to your collection, you can do the following:

1. Add the stylesheet to your web page via a normal tag that you are used to. e.g.
’ < link href=’http://fonts.googleapis.com/css?family=Hammersmith+One’ rel=’stylesheet’ type=’text/css’ >’

You can copy and paste this from the google fonts library. As it says, make sure you paste it above your other stylesheets (order is important)

2. Use the correct “font-family” name in your CSS

font-family: ‘Hammersmith One’, sans-serif;

This will call the Hammersmith One font, and then fall back to browser default sans-serif font for unsupported browsers.

 

 

Tools I Use: Hammer for Mac

Tools I Use: Hammer for Mac

Caution: Non-Mac Users, this is not for you - sadly. 

The guys at Riot have really helped me out over the past few months with their product Hammer for Mac

Hammer for Mac makes creating static websites, well actually, really good hearty fun. 

The Product

Download Hammer for Mac from the Apple Store and get started straight away, by creating a new project from scratch or by using one of Hammer's small collection of project templates.

Read the full Hammer documentation (they're pretty short and easy to digest), and I'll just give you my favourite bits of the product, which I've come to rely on. 

 

Screen Shot 2013-09-17 at 16.52.29.png

Includes - I now take great delight in segmenting my HTML into nice and tidy snippets via the HFM @include feature, without needing to run MAMP and use PHP as I used to.

 

SASS and Coffeescript auto compiler - The HFM build process automatically processes my .scss and .coffee files into .css and .js. If you're not familiar with either of these technologies, you should dig in. Coffeescript use is still a bit contentious, but SASS is a no-brainer. 

 

Screen Shot 2013-09-17 at 16.52.36.png

Javascript & Stylesheet includes - Clever paths that will rummage around in your file directory and automatically find and load your javascript and css files regardless of where you put them. A huge time saver. 

Screen Shot 2013-09-17 at 16.52.24.png

Clever Paths - Image files and other such assets are now always (super)relative, regardless of which folder you put them in or if you move them. HFM will find those pesky assets and load 'em into the page in a snip.

Screen Shot 2013-09-17 at 16.52.17.png

Placeholder Images - when you're desperate to eat lunch and you want to crack out a template, the placeholder shortcut will quickly jazz up your page content with correctly sized image placeholders. You'll be ordering a beer and burger 30 minutes before anyone else with this baby.

Screen Shot 2013-09-17 at 17.04.25.png

HFM is now on version 1.6 and the most recent updates to the software seem to have really focussed on performance - general processing speed and caching in particular. 

There's a few features within the software which I've really also come to love within the workflow.

The optimize toggle switch, which on request will compress and minify your code. 

 The Export archive link - just because it's easy and simple.

and most significantly for rapid publishing and sharing of work in progress, is the Publish Build function, which uploads your site to HFM's AWS servers with a short url to share with teammates, colleagues and clients. Hammr provides their own wrapper to the page for navigation and access to core site files, which is nice.

 

I met up with the guys from Riot around 18 months ago, when HFM was still in closed BETA. 

I was really impressed with Elliot and the team's focus on this product and how they've taken the "Mac-centric" approach to product development. I appreciate their style and business model and I really hope that HFM continues to grow and become adopted by front end web developers and designers around the world. 

Learning Ruby on Rails Development - My Progress

Learning Ruby on Rails Development - My Progress

As I took the very easy decision (albeit painful, lonely and stressful at times) to create Braindu I also undertook to learn some new technical skills.

Braindu is a complex web application that uses a number of cutting edge web application development technologies, which I've discussed briefly before.

On the server side, the platform is built using the now popular and impressive Ruby on Rails platform. My development team are extremely experienced Rails developers, but for this project, I wanted to get stuck in myself and learn to code Rails apps from scratch.

I've talked before about how I'm sudo-addicted to online learning platforms, such as Code School, Codecademy, Treehouse & Lynda.com.

But alas, with everything you have to take in, everything you come across from tutorials, courses, videos, documents, articles, e-books, plugins, gemfiles, extensions, frameworks, libraries... it opens you up to a whole world of information that you need to navigate, store, manage, curate and constantly refer to on a regular basis as you advance your practical knowledge and experience with a framework like Rails - it's a frickin' nightmare.

 How I Learn Ruby on Rails with Braindu

How I Learn Ruby on Rails with Braindu

Fortunately for me I've got Braindu. The product that is encouraging me to learn Rails is also the app that is helping me to learn rails (and many other companion technologies, such as SASS, HAML, SVG, CoffeeScript) and now I cannot live without it.

Now I know I have a slight conflict of interest, but seriously, my learning process has been transformed.

And with Braindu, I can share with you my collection of resources - a live and organic repository of information relating to my mission to hold my own at developing web applications and software. Amazing considering that I couldn't even build a website but 4 years ago.

 Sit back and Browse with the Read View.

Sit back and Browse with the Read View.

I've got a long way to go to be able to have at least a modicum of technical credibility among the experts that I work with every day, but the ability to get closer to the technical team's challenges through better technical skill development and knowledge is already paying dividends.

Right, back to a brief coffee break and a dabble with the Evernote API via the new Codecademy API pathways. How I've changed.

The "Thomas the Tank Engine" ethos to creating products.

usefulengine.jpg

Many of you will now think I've finally lost the plot. Probably a fair assessment.

For those of you, like me, with a 1 - 6 year old - you'll know exactly what I'm talking about before I even start talking about it.

The lesson I have learnt, from reading the same damn books a thousand times over and over again, listening to the same set of stories again via sky plus over and over again, is one overarching rule of thumb that I think we would all do very well to remember in our pursuit of technological and entrepreneurial greatness.

"Be a Really Useful Engine"

It really is about ensuring that the thing you are creating is ultimately REALLY useful for someone. Just one person. Hopefully a lot more people, and if it's really useful for one person chances are it's going to be such for a number of others too. Then, the only question is how many?

Thomas and friends frequently find themselves spewing off onto a tangent, normally driven by the pursuit of fun, a short term, short lived thrill-seeking journey that normally ends with some form of disapproval from the one Sir Toppum Hat. It normally is followed by the wrong-doing engine putting right, by remembering that whilst it's fun to: 

  • Play tricks
  • Speed along the tracks
  • Annoy farm animals
  • etc.

It's even more important to be a Really Useful Engine.

So next time you think it's a great idea to build another geo-location checkin app, a facebook for chefs, an airBnB for dogs... ask yourself. Is it REALLY USEFUL?

Building a Startup Team - Build a better you.

You may have heard me explain my philosophy for building teams before. If you haven't, it's fairly simple.

Identify the resources I need, define & allocate roles and then hire people that are better than me to fill those roles.

As a startup entrepreneur I know that at the beginning, I need to fill multiple roles and show competence, heck even some degree of excellence, at more than one of them at a time. This applies to design, sales, marketing, finance or product development - all of which I have done myself or recruited/outsourced for.

I also have a clear understanding of where my abilities do not come up to scratch and I am very cognisant of my shortcomings. So, hiring for some roles has been easy, such as in engineering for example, as the benchmark I set was pretty low.

It was only 4 years ago that I didn't have a clue how to create a website. I shudder at my lack of knowledge as I blindly blundered my way into building a social network with only my passion for adventure sports and ability to learn quickly to guide me. 

It wasn't hard to find someone better than me then, in fact anyone was better than me.

But since that time, I've progressed. I've built things. I've built teams that have built things. I've learned so much that has helped me understand the difference between a good developer and a great developer. Who can build products, who can do tasks, who can create and manage infrastructure. These are all potentially different people.

So, I have tried to be a better non-technical founder. I've tried to be interested in technical issues and understand the background processes to making technical decisions. I've been trying to learn to code. I've experimented with lots of different languages, markups, libraries and frameworks. I am still a master of none, and I don't intend that to necessarily change (at least currently).

If I am working with clients, I want the solution to fit the need, not to fit my own limited abilities. If I'm working on an internal project, I want the project to further my understanding of different technologies, not labour on perhaps my outdated and under utilised knowledge of a specific technology.

But, whilst many techies may believe a little knowledge to be more dangerous than beneficial, I have certainly found that a broad understanding of technical principles, scripting languages, markups, processes and methodologies has helped me in a few key ways.

  • Raising the benchmark for team members - as I improve, so does my team and knowledge of building teams and recruiting specialist talent.
  • Embracing new technologies - my naivety has proved successful in opening up new pathways that may not have been obvious before, rather than the (often frustrating levels of) fear that more established devs may have of new tech (I've seen it).
  • Building relationships - The improvement in my knowledge has had a direct correlation to my improved ability to establish and maintain positive relationships with my technical teams. A better understanding of the issues, the challenges, the motivations of my developments teams helps foster a much more dynamic and mutually beneficial working culture.

Resources that have helped me

Codecademy 50th Achievement

I will shortly publish a very full and extensive list of resources that I use, but I find that blog posts really aren't conducive to doing that in a way that is truly useful, so I will avoid it for now. Needless to say, I am working to solve that with my latest project. and you'll be the first to hear about it.

In the meantime, I will share a small milestone with you. I have been playing with Codecademy off and on this year. In typical fashion, I've varied my learning, from the grass roots Fundamentals of HTML, to CSS, to Javascript and in particular, the JQuery library, to the programming language Ruby. I just hit my 50th Achievement on the learning platform, which I think is quite nice. I'm waiting for some more Ruby courses to be released and in the meantime will continue with the Javascript courses.

Creating an Explainer Video: Outsourcing to Professional VoiceOver Artists

Because you hate your voice so much, there may be no alternative!

Look, I don't really dislike my voice that much, more objectively, as an amateur, it's more the realisation that I could benefit from some guidance. It just doesn't feel right at this point in time and it's causing me a bit of a mental hurdle from continuing this process. If I'm not confident in the script and less confident in the voiceover, how can I possibly commit to the illustration and animation, which should take the bulk of the time?

So, I came across (thanks to Miguel @ Grumo Media - cheers dude!) Voices.com - a marketplace for VoiceOver talent.

 Voices.com Homepage

Voices.com Homepage

This service is actually very impressive, as it turns out. I think that in some ways, the fact that I'd taken the time to take the process seriously and create a documented project brief (more on that in an upcoming post), I created a free account and posted my requirements on Voices.com.

You can apply all sorts of relevancy filters to your project, such as language and regional variations, styles, like conversational, humourous, friendly (I'm intrigued to know what dark and menacing would sound like) and some other parameters, including budget.

My script is around 1 minute long, and I entered a budget range of $100 - $250, Voices.com suggested that based on my parameters, I should expect 93 responses. Cool.

Every new project is vetted by Voices.com and this I think is important in determining what happens next. By ensuring, on behalf of the VO talent, that projects are genuine and reputable, the VO talent is more inclined to actually invest in their response - and this is what really impressed me.

Within 1 hour of the project being approved, I had 20 responses. Within a few hours I had 40 responses.

So, with reference to a couple of paragraphs ago, the investment the respondents make is massively important - the personal message and the REAL recording of YOUR SCRIPT, which you can listen to via the Voices.com audio player. Some record a small portion, some record the whole thing. To hear your script interpreted and produced in this way is really great and a lot of fun to go through listening to them all.

Some just upload their demo reel, and I have to admit, I just skipped those. The many that had  gone the extra mile had set the bar high, and those who didn't take the time to record at least a bit of the script failed to make the first cut, regardless of their voice.

 Voices.com responses list

Voices.com responses list

The bids submitted ranged from $100 up to $350. The responses, even though I selected a non-gender specific bias in the filters, were 99% male. The one female, was really good and also the most expensive, so I'm seeing a correlation here - are there many female VO's out there? if so, maybe there's an opportunity for you....

So, I encourage you to check out Voices.com, gets my recommendation.

Creating an Explainer Video: Voiceover Recording

Why I hate my own voice and you will hate yours too.

That's just the way it is, you have to be Craig David (who was reportedly pulled over by police and was listening to his own music) not to shudder at the sound of your own voice. So, when deciding to go about recording your script as a voiceover, on a tight budget that doesn't stretch to expensive studio and professional VO artist time, I can really see why people get stuck here.

For the MySpareBrain explainer, of course, I wanted to persevere with the process on my own - warts and all, you might say. So, as a first step at least, I was planning to record my own voice speaking the script I mentioned in my last post.

Once you get into the audio part of the project, you realise that's a whole other world of jargon, tools, technologies, processes, effects and skills. I did some reading and collected some useful resources, which I've added to the Explainer Video Research chart on MySpareBrain.

Ultimately, this was an exercise in getting stuck in and seeing what I could cobble together, what worked, what didn't and frankly, just trying to make the best of it.

I started by recording the voiceover just using my iPhone voice recorder app. It was a method used by Authntk and talked about on their blog. They seemed to a really good job with it, so I thought, why not?

Here's a sample:

Actually, the result was surprisingly OK, considering. The main issue was actually getting the files into a format that I could use easily. By default, the iphone records the audio files into an .m4a format (read more about m4a and MPEG-4 here). I found that to get the files onto my computer without an active iTunes account setup and synced (I'd just got a new PC), the only way is to use the direct sharing options - email or SMS, which is a bit of a pain.

Then, for some reason, I couldn't seem to get Adobe After Effects to import the raw .m4a  files into the Project Panel. I didn't look into it too closely and maybe completely wrong, actually, come to think of it, it may not have even been an After Effects issue, but anyway, the point I want to make is that felt I should convert the files to a different format, so I chose .mp3 - Audio guys please do let me know what I should / could have done via the comments below.

So, I used this very nifty little audio converter app to do that.

When I put this audio into After Effects with a rough cut and placement to the animation, it really wasn't working. If I'm going to cringe at my own voice, I at least want a better quality recording to cringe at.

Since I was going to need to do a fair bit more voice recording, and eventually get over the fear of hearing my own voice, I decided it would be a good idea to invest a little bit in a half decent microphone setup. When I say half decent, that is raising my standards from the £4.99 Argos special that I also had in my armoury (and preferred the iPhone recording results).

After doing some more research, I called the guys at Sound Exposure, who I found had some great reviews. The sales guy there was really helpful and enjoyed chatting about what I was up to. I settled on a Sennheiser E835, a Tascam US-122 MkII Audio Interface, and a Konig and Mayer 23200 desk stand.

It took a little while to get it setup, mainly because the audio interface drivers were a little outdated in their support of operating systems past windows XP. The experience was all a little clunky, but eventually got it working and figured out what th knobs and dials were for on the unit.

So I set about this time, recording in the free open source audio software Audacity.

Now Audacity is actually really easy to use and it's very flexible and quite intuitive. It's not the sexiest looking piece of software, but it's free and it works. The only problem was, I still wasn't happy with the end result. Now, it's most likely that the problem is totally down to me, operator error, but I didn't have time to dig in more thoroughly and figure it out.

Instead, I dug into the Creative Suite a bit further and took a look at Adobe Soundbooth. To get acquainted, again, I did a bit of research for the usual blogs on the why's and wherefore's. I also did this Soundbooth CS4 course on Lynda.com which I thought was very well constructed, sufficiently in depth but not too technical or boring.

Initially, I imported the audio from the Audacity project into Soundbooth and it was OK, I found working with Soundbooth (as a result of the Lynda.com course and my recent surge of interest in other CS applications) really easy - possibly more so than Audacity, since I was already used to many Adobe conventions and UI elements.

The first thing I tried to fix was the persistent hum in the background of the Audacity audio, when played back in Soundbooth and other software, which was the predominant cause for my dissatisfaction with the result. Soundbooth has a toolkit for this, in the Tasks panel, under the "Clean Up Audio" heading. Using the Noise reduction filters, I found that I could reduce it, but I still wasn't happy with the result as the amount I needed to apply started to audibly distort the voice audio.

So I tried a do a direct record, again, using the Sennheiser mic setup, direct into Soundbooth. This cleared up the humming noise completely and I was much more happy with the result (bearing in mind personal prejudices). 

In the course, I learned about compression, reverb, EQ and other effects (of which there are many) and the temptation was to go crazy, but for now, I've decided not to apply anything and keep it as is. The danger is I'll go crazy and completely lose the point of using my voice, which is to be a raw, natural, passionate explanation of what we're upto at MySpareBrain, from the voice of the CEO.

Creating an Explainer Video: The Script part 1

Why no-one wants to write a script - it's harder than it looks.

So, as it turns out, the script is where you should start. Even if you're outsourcing the production to an agency, the script is yours. It's your chance to get your message across in your way - which is very important.

It's strange that you see quite average looking videos (in terms of technical production) that create very compelling and often viral explainers - because the message resonates with the audience perfectly. Often, it's the script and the voiceover (we'll cover that later) which makes the difference.

So, here I am armed with this knowledge and a story to tell - but where the hell to I start in writing a script? In my own style, I try to break it down as to the anatomy of an explainer script, guided by various resources I found online, including this neat little article by Video Brewery and Brad Chmielewski's "Four Questions To Ask When Writing An Explainer Video Script"
 

Here's what I came up with:

SCRIPT ANATOMY

Total - 2 minutes (or as close to as feasible, 1:30 if possible)

[SECTION 1 = Identify Problem]

    [SCENE A - dramatic opener, macro scale problem]

     [SCENE B - reinforce problem with impact on society]

    [SCENE C - relate financially - macro (economy) to micro (individual) scale]

     [SCENE D - reinforce and relate to individual through examples]

[/SECTION 1]

[SECTION 2 = Present Solution]

     [SCENE A - Present Product / Brand Name]

     [SCENE B - build credibility of technology / principles]

    [SCENE C - overview of what it does]

     [SCENE D - benefits]

     [SCENE E - reinforce ease of use / low cost]

     [SCENE F - close and refer call to action]

[/SECTION 2]

So, I used Google docs to write the script, so I could add to it, edit it wherever I was and had a moment of inspiration or reflection. I could also easily send access to other people (and continue to do so now) to get thoughts and opinions.

I marked up the script with some labels to denote sections, scenes and formatted text to a key of my design to denote some guidance for the voiceover recording stage.

Here's the script as it exists today...

Creating an Explainer Video: Research

Everyone Wants an Explainer Video

This is the first of a series of posts I'm going to do on the subject of creating an explainer video. To kick things off, I want to share with you all of my resources I've collected on the subject, including:

  • Providers of video explainer production services
  • Loads of examples
  • Pricing (where available)
  • My thoughts and notes
  • Freelancers and independant providers
  • Tips and Techniques
 Click to load the MySpareBrain viewer, and find the Video Explainer Research Tab to load the chart.

Click to load the MySpareBrain viewer, and find the Video Explainer Research Tab to load the chart.

It has to be said, this is a very interesting area of video production, digital communication, motion graphics, marketing - whatever you want to label it.

The rise of the Explainer Video is quite staggering, and has become necessary for anyone with a technology startup to have in their basic marketing toolkit - for new customers, for potential investors, for prospective employees. But, not just technology, real worldy, traditional companies like builders, accountants, solicitors, hairdressers and estate agents are getting in on the act too.

With a very limited budget, every startup entrepreneur will face similar challenges:

  • How to communicate my complex idea in a simple, entertaining and compelling way?
  • How do I afford to get this actually produced - prices and quality in the marketplace vary hugely?
  • Where do I start? - Script, Music, Sounds, Graphics, Animation, Production, Copy, Effects?
  • How do I know the end product will be what I want?
  • I want a viral video - how do I get that? (ha)

I asked myself all these (sometimes dumb) questions and more, and then decided that it was such an important thing to get right, I repeat

to communicate complex messages in a simple and entertaining way 

I would go ahead and learn to do it myself, since the investment I make in myself would stand me in good stead for the future.

So armed with my relatively new found passion for Adobe After Effects (yes, I'm taking this very seriously), some ideas and a new microphone I'm embarking on a mission, and I hope you'll join me in figuring this stuff out...

Creating 3D Objects in After Effects using Element 3D and the Mask Tool

I was intrigued when I saw some sample videos posted on youtube by burnsius, who created a whole bunch of gun models using Element 3D and they look pretty amazing. From traditional shotguns, revolvers and pistols to space age blasters and "noisy crickets".

But what was more amazing, was how these guns were all created using nothing but the bog standard mask tool in Adobe After effects, Element 3D's extrusion capabilities to create and render multi-layered, multi material, fairly complex looking objects. Oh, and a bit of planning to go along with the imagination.

I never even considered I could do this kind of stuff using Element 3D and After Effects, it's pretty mind blowing actually. Fortunately burnsius also pulled together a neat step by step tutorial as well, to completely open up a whole new can of creative little worms.

Why every app should be tested by someone < 2years old

Having been building my first proper native mobile app this year, testing has played a big part. After every build, my first move is to excitedly take the iPad or iPhone to my little boy, Rudi for some proper testing. It started out quite well, press a few buttons, get a few laughs and smiles...

But as he got more and more acquainted with the device, I quickly found that many of my well thought out UI elements were in fact, far from bomb proof. No, they were proven to not even be baby proof.

They Use Two Hands

It's amazing to me when I watch Rudi on a touch device. It's so natural, it's all about Cause and Effect. I press this, this happens. I liked that, so I'll do it again. If I pressed that and something happens, what if I press some more? Oh, something else happens, I like that... and so on, it's perpetual motion.

But we (adults) all think about it naturally as progressing from the mouse to touch. The 16 month old is not saddled with such archaic notions and instead launches in as mother nature intended. 2 hands, 10 fingers and would be two feet as well, if I don't stop him trying to dance on the retina display.

So, behold, we found that in the Playsongs app, you could actually play multiple songs at once, if with the correct timing, you hit multiple song titles simultaneously. Now, us one-finger one hand adults wouldn't think of that, but the 16 month old, the more button I press, the more stuff happens, well why shouldn't I?

They've Got Little Hands

Little hands, little fingers. The touch-screens really seem to appreciate the digits that probably once belonged to the Bronte Sisters, small and slight, tiny surface area, very precise. Shame they missed out, but my Rudi is flourishing as a result. So much so, that the carefully planned sliding lock element, which locks down the app interface in the song page for when you want to hand the device over to the little cherub, maybe a little fiddly for me to unslide open, but for him, he only needs to sneeze near it and the lock flies open exposing all those nice controls and buttons for him to play with.

The hands tend to be placed in the bottom third, right and left sides, so if you're trying to hide something on the screen, don't put it there - they;ll find it even if they don't mean to. Best is at the top centre, especially on the iPad as it's that much further away...

They Like Real Buttons Too

So, you can put as much thought and well planned execution into the app design, you can lock down the app as much as you like (or as much as Apple will let you) but you can't escape the fact that littl'uns favourite button will be the Home button. Try blocking that off!

And when they find the notifications slider at the top, you're in real trouble too.

So, it's time to think about the hardware - I just bought a TRTL cover for my phone, which enables you to block off the Home Button, will let you know how I get on.

Here's a short video of my little Product Tester, putting an early build though it's paces on the iPad.

After Effects: Controlling Movement with Audio Keyframes

Playing around with After Effects again, this time along with Andrew Devis and this Creative Cow Tutorial

Using the convert audio to keyframes, then using that keyframe data, setting a range and mapping it to, in my case (the tutorial does something different) rotation and position data for various objects I can kind of animate them to the music.

The result is kind of freaky.

Want to get your Video on TV? This will blow you your mind!

 Credit to Slate V and Frank Kern for bringing this to my attention. I duly forwarded to my friends in the City's largest full service agencies. I can only imagine how this'll go down in the "Wastage" departments of Broadcast Media advertising and I can hear the cogs whirring already of the digital minds and how they're going to be breaking the news in company cafe.... To be a fly on the wall.

So, all you have to do is create an ad? Yeah - I think so. Obviously Google control ad quality through their guidelines and approval processes but you'd expect that right? It's amazing to think anyone can access anything on the web, but put it on a bigger box in your living room and suddenly everyone's a critic!

I think that with a bit of figuring out, this could be a major coup for smaller and newer companies, with an edgy story to tell, who otherwise wouldn't have dreamt that TV advertising could enter their mix. Awesome. Truly awesome.

I'm off to film Cheryl Cole, posing in a bikini so I can just superimpose a Fidgetstick/ logo onto her butt cheeks later...

Tools I Use - SocialOomph

Here's the first of a new topic theme I've decided to start running. As my online career develops, I find that I am trying out and using more and more online tools to improve my productivity, efficiency and effectiveness in social media, content generation and ways of reaching my target target audience.

The first tool I've decided to review is something that has become part of my core Twitter strategy. The tool is called SocialOomph.

Social Oomph is an incredibly sophisticated toolkit of features and functionality that help you to manage your Twitter (and other social media containers) activity. The site is free to join and the basic features are free. There is a "professional" upgrade that is $29.97 per month.

So, I'll start with the basic account, which actually contains an unbelievable amount of functionality and for general Twitter users wanting to improve the frequency and volume of their tweets, this is the perfect way to start.

You can access multiple Twitter accounts through the basic dashboard, to configure an auto-response DM to new followers, decide if you want to auto follow people who follow you, you can choose to vet new followers and auto-unfollow people who choose not to follow you back. You can also request a periodic digest of all the @replies you get, so you don't have to keep looking.

One of the best features of this system is the ability to pre-compose and schedule tweets. Now, it is a subject that is bound to rouse the sceptics, but in my opinion when used alongside organic and spontaneous personal tweets, this is very powerful. 

It is important when using twitter or most other social platforms to be regular and consistent to get the most from them. When you're time limited, it can be very difficult to do this. Scheduling tweets is a great way to get over this problem and ensure a round the clock supply of short communication from you to your followers. But, now for a WARNING and some Tips.

Warning - don't abuse this system. If you schedule a load of recurring tweets of the same junk content, not only will people stop following you, you'll also get a big slap from our friends at Twitter. Big NO NO!

It is important that if you are scheduling tweets you put in the same amount of time and consideration to the value of what you are putting out there and have a solid idea of what you are trying to achieve through your tweets before you even start.

Nail that, and you're off to a flying start. Your scheduled tweets need to be written and quality controlled by you in the same way you do when tweeting normally, you just do it in one go. Maybe spend 30 minutes to and hour per day do this and you'll have followers beating down the door to connect with you.

The "Professional Upgrade" package introduces other platforms and integration, such as posting to Facebook Accounts, posting and scheduling blog accounts and more in depth rummaging through twitter lists and Twitter users with "Influence". All great stuff, but I'm convinced you'll find the basic package enough to get your juices flowing initially with bags of features thrown in.

Social Oomph - power Twitter tool