Using InVisions 'Boards' for Competitor Analysis

InVision - http://www.invisionapp.com/ - is a great system for design discussion. The ability to quickly and easily create prototypes or just throw a quick sketch online for a distributed team to review & discuss has been a great addition to my UX workflow.

As well as a recent Material Design style update they have also recently been adding some useful features to move the system beyond basic design discussion and place it more to the centre of a complete design workflow. These features include mobile testing, Kanban style Workflow boards, mood & brand boards in their Boards feature & the soon to be added InSight & InBox.

InVision Boards

Working with the Spencer Group on a new internal, secure email system I was looking at ways to best discuss ideas with a remote team.

allowing me to keep all the discussion in one place in a system all the members of my remote team were used to using.

When designing systems and their associated processes I try to look at how others handle the same problems I might face as a way to gather new ideas or to avoid potential issues. In the past I’ve made use of various third-party systems such as Kippt, Google Drive & OneDrive to collect screenshots of design elements to share and discuss. The addition of InVision’s new Boards feature seemed a perfect alternative for these third-party systems, allowing me to keep all the discussion in one place in a system all the members of my remote team were used to using.

Competitor Analysis Board

I set up a Competitor Analysis Board within InVision to conduct an assessment of the relative strengths or weaknesses of similar, email focused products.

Competitor Analysis Board set up within InVision

This led with an explanation on how the team were using the Board to make it easy for anyone viewing for the first time to understand what they were looking at.

set a visual hierarchy within the page based on the number of comments an item had received.

Any relevant designs, images, ideas & inspiration could then be added to the Board to allow for the remote team to add comments. I had the idea to make use of the scaling feature found within InVision Boards to set a visual hierarchy within the page based on the number of comments an item had received.

easy to see on viewing the page which items were generating the most discussion.

An item with none or a single comment remained at the default size, once the item had received more than one comment, it’s size was increased. This continued as more comments were added meaning that it was easy to see on viewing the page which items were generating the most discussion.

Competitor Analysis Board showing scaling based on comments

To finish up this collaborative resource, I then made it clear on the Board that all members of the remote team could add to the board any items they might want to discuss. We also used this Board to pull out relevant colour ideas for systems we thought made good use of complementary colour schemes, or who displayed good contrast for call-to-action buttons.

Competitor Analysis Board showing colour swatch ideas

Conclusion

By making use of InVision’s new Boards feature - http://blog.invisionapp.com/boards-share-design-inspiration-assets/ - I was able to quickly develop a system to perform useful competitor analysis inside a design discussion framework already know to everyone on my remote team. While not specifically designed for this use, the flexibility InVision offers made it an ideal tool. Here’s hoping that the upcoming InVision updates mentioned above prove to be just as useful.

Demonstrating Animations & Transitions in InVision

A quick tutorial on how to capture animations and transitions into InVision for design discussion.

The web is not a static medium. Animations to offer visual feedback to a user are becoming commonplace as the technology to easily accomplish this becomes more prevalent.

InVision - http://www.invisionapp.com/ - is a great app for design discussion and prototyping but demoing animations & transitions that are an integral part of the prototype is currently not a documented feature.

As a requirement arose to allow a distributed team to view these animations I worked out the following solution. While not as smooth as the usual InVision workflow, it still works well for required use cases.

Firstly, an additional piece of software is required to capture the animations and transitions as an animated gif. For this I recommend the open-source and easy to use LiceCap - http://www.cockos.com/licecap/. This offers a cross-platform solution for Windows and MacOS (it should also run under Linux using WINE or alternative options can be found in this thread - http://askubuntu.com/questions/107726/how-to-create-animated-gif-images-of-a-screencast.

Initially, use LiceCap (how to record with LiceCap demo here to capture an image showing the animation you would like to add to InVision for discussion.

Example animation captured using LiceCap Example animation captured using LiceCap

Keep this image simple, if you have multiple animations, record them separately and upload as individual screens to avoid confusion around comments.

I’d also advise not demoing transition between screens using this method as any comments added may lose context as the animation moves between the different screens.

Once you have captured the animated image, simply upload to InVision as normal and add comments where required.

Animation uploaded to InVision with an added comment Animation uploaded to InVision with an added comment

This allows a distributed team to make use of the features contained in InVision while allowing relevant animations and transitions to be viewed and commented on.

EU Consumer Rights Directive

Having recently been doing some research around the EU Consumer Rights Directive - http://ec.europa.eu/justice/consumer-marketing/rights-contracts/directive/ - this post collects together useful information for retailers based in Europe

Various EU Currency Various EU Currency

A useful overview from The Guardian - http://www.theguardian.com/media-network/media-network-blog/2014/jan/27/retail-eu-consumer-rights-directive

Consumer Rights Directive 2014: Why It Could Be Good News for Ecommerce

The EU Consumer Rights Directive: should etailers be worried?

Why the EU’s new directive could help you nail online customer experience.

The EU Consumer Rights Directive 2014 explained - a very useful overview and explanation from Joanna Perry

The online implications of new consumer rights legislation - useful look at the directive from Internet Retailing

EU Consumer Rights Directive: A top 5 checklist for the digital retailer - handy checklist from Session Digital

Hopefully this information proves useful for anyone looking for information and guidance around the recent changes.

If you know of any other useful resources, please let me know and I can update the article.

Useful Resources for Learning Typography Theory

A recent question on useful resources for learning typographic theory had me digging through my old bookmarks to find the most useful. This post is designed as a future reference and a way to collect these resources together.

Butterick’s Practical Typography

http://practicaltypography.com/

Butterick's Practical Typography

An excellent resource by Matthew Butterick (https://twitter.com/mbutterick) who also created the legal specific http://typographyforlawyers.com/ resource. Practical Typography offers an excellent overview of typographic theory and is an excellent starting point for learning more about this area.

The Elements of Typographic Style Applied to the Web

http://webtypography.net/toc/

The Elements of Typographic Style Applied to the Web

A web–specific version of the excellent Elements of Typographic Style book maintained by Richard Rutter. Very useful overview and intro to the more in–depth and non web–specific original.

Typekit Practice

http://practice.typekit.com/

Typekit Practice

Useful lessons and references regularly updated and maintained by Adobe Typekit.

Thinking with Type

http://www.thinkingwithtype.com/

Thinking with Type

Website to accompany the Thinking With Type book (http://amzn.to/1pRrh3V). While slightly dated now, the typographic theory is still relevant today.

Now Buy the Book

While all these are useful online resources, one of the best investments I can recommend when it come to learning typography is to purchase a copy of Robert Bringhurst’s Elements of Typographic Style (http://amzn.to/1itePlL)

Elements of Typographic Style Book

Having a copy of the book to hand and seeing the typographic theory applied in print can really make a difference to really understanding what is happening and why.

Hopefully these resource will prove useful when looking to learn about typography.

Using QuickTime for Recording Usability Testing Sessions

Problems with Silverback

For quite a while Silverback - http://silverbackapp.com/ - has been the chosen app for recording usability testing on OS X.

Silverback App Silverback App

It offered an easy way to to capture both what was happening on screen and live audio and video of the user taking part in the session and was very reasonably priced compared to the PC alternative, Morae - http://www.techsmith.com/morae.html.

However, it has recently started to degrade as a useful system, a operating system update prevented the use of inbuilt iSight cameras on the current MacBook range;

SUPPORT UPDATE: Apple recently removed a core component that prevents Silverback from connecting to the new FaceTime Camera in the current Macbook range.

which could be worked around by making use of an external webcam. This made Silverback less of an all-in-one solution but was still workable. But following this there now seems to be a general problem with Silverback not capturing audio which they seem slow to address - https://getsatisfaction.com/clearleft/searches?query=sound&x=0&y=0&style=topics

Looking for an Alternative

I spent some time looking around for a OS X based alternative before discovering that an ideal solution was inbuilt to the OS, QuickTime - http://www.apple.com/uk/quicktime/

The reason for me that this didn’t immediately jump out is that QuickTime has always been labelled as a media player and it’s recording functions are not obviously labeled - http://support.apple.com/kb/PH5882?viewlocale=en_US.

How to Record with QuickTime

  • Start up QuickTime Player
  • From the menu, select File > New Screen Recording

QuickTime New Screen Recording QuickTime New Screen Recording

  • From the recording options, if required, select the microphone to record user audio to accompany the screen capture, you can also very usefully record where the user clicks

QuickTime New Screen Recording Microphone Settings QuickTime New Screen Recording Microphone Settings

  • Then just click the red ‘record’ button to start capturing what’s on screen.

Capturing User Picture-In-Picture Style

For this you just need to start two recordings from the menu;

File > New Screen Recording

And

File > New Movie Recording

The New Movie Recording option will open a video capture screen from the inbuilt MacBook Pro iSight camera (or an alternative webcam if required), reduce this window down, drag it to the corner of the screen with the system being tested and start a New Screen Recording. This will now capture both the user and the system.