Sensum

As one of the world leaders in emotion based software, Sensum’s task of innovating and developing products in a fast-paced, competitive market is a daily challenge. Working closely with the team we were able to refine the user experience, build a modular user interface and create a living style guide.

Simplifying a complex software product

Sensum develop software to test the emotional response to different types of stimuli such as music, adverts, films, websites and customer journeys. These are cutting-edge products which are complex and difficult to structure let alone build. Working closely with the Sensum team over a three month period we were able to guide the front-end development of their software and train the team to use new tools and processes to help them work more efficiently and collaborate more effectively together.

Asking lots of questions

Understanding the product is the most important stage especially when coming in to an established team. A fresh perspective is usually what is needed, teams tend to get bogged down in building the product and loose sight of the bigger picture. Asking lots of questions and listening to how the team describe the product helped us formulate a much better understanding of what we were trying to achieve.

Imagine how the user thinks

Armed with the information we needed the next step was to look at the personas of typical users and begin structuring the flow of the application. A flow is how a user may travel through the software and what they are likely to do along the way. We spent time creating the flow into a large wall chart, all of the team was encouraged to give feedback on the chart. Refined over time, the chart became the initial blueprint for the stucture of the application.


Lots of user flows were created to help understand the interactions that should take place.

Pencil and Paper

Working out what type of functions we would need and how they could be applied required extensive research and lots of wireframing. It was back to pencil and paper at this stage, its easy to scrumple up paper and start again, fast iteration and alterations are what matter most.

Sketching the interface makes fast iteration possible.

Collaboratitive working requires the right tools and processes in place

Front-end development has matured into a specialised arena over the years, from the days of photoshop slicing to the build-in-the-browser methodology. Front-end developers now have a modern toolset to make their lives easier and improve efficiency, repetitve tasks can now be automated and teams can collaborate and work on the same code base using version control.

We trained the team to utilise tools like Grunt and Gulp for automation of tasks like minification, live reload, on-the-fly image compression and more. Instead of straight CSS we moved them onto SASS which makes building and managing stylesheets much less time consuming.

Version control is now essential in modern applications, once you use a system like GIT you will never write code in any other way again. The problem is front-end developers tend not to like command line technologies, we overcame this by putting the team onto an app called Tower, this allowed them to work with GIT through a user interface which they could understand much easier.

The Sensum style guide is a web application which contains all of the UI components.

Create a rapid prototyping environment for the development of the user interface

When building a web application we are essentially creating a user interface to control the functions of that application, this is very different from a website which presents content on a page-by-page basis. Elements are reused, modified and built by different team members and then used across various screens and possibly even other applications.

We worked on two things which would help the team work better and avoid conflicts. First step was to set up a living style guide where the code could develop and live, a modular system of building with components and structures reduced the likelyhood of conflicts and duplication of code. The style guide also allowed the developers to document as they build, rapid prototyping was a breeze by using Handlebars to test out more complex structures and pages.

Even though it is a complex application the Sensum interface was optimised for smartphone.

Finally the naming convention used in the CSS modules was based on the BEM method, this stands for block, element and modifiers. This allowed us to style each component safe in the knowledge that it would not be affected by any other CSS rules no matter where the module was placed or what application it was placed into.

Empowering the team

The training paid off and we took the front-end developers from a basic knowledge of hacking together frameworks and snippets of code to constructing a bespoke, modular user interface. This increased their confidence and pushed them into a modern progressive method to building their product.

Client

Sensum

Location

San Francisco, Belfast

Type

User Experience, Front-End Development & Training

Services

User Flow

UX - User Experience design

Responsive front-end development

Living style guide development

Training of front-end development team

Technology used

HTML

SASS & BEM

JQuery

Grunt

Bower

Fabricator