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.
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.
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.
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.
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.