News

Why we chose material design

August 26, 2016 • By TAB team



This week we launched Crowdsurfer Pro; a completely refreshed version of our crowd finance market intelligence dashboard. This release included a major change in our dashboard's user interface and in this blog, I want to share with you the reasons behind this change and explain our decision to adopt Google's Material Design philosophy.

This week we launched Crowdsurfer Pro, a completely refreshed version of our crowd finance market intelligence dashboard. This release included a major change in our dashboard's user interface and in this blog, I want to share with you the reasons behind this change and explain our decision to adopt Google's material design philosophy.

The starting point

The first version of our analytics dashboard was built on a proof-of-concept that was created a couple of years ago. The design was the work of a local agency and worked well when we only had one page of crowd finance analytics to display. However, as we added more functionality (like advanced filtering) and new visualisations into the mix, the interface began to creak.

With each new element, interaction or page that we added, our website became slightly more fragmented and without any design guidelines to follow we had to make up rules as we went along. This approach is surprisingly hard to do well, and is why it costs upwards of $100/h to have a professional do this for you.

The best way to improve your site and find out if users are struggling is to run UX tests and work with the feedback. When I started at Crowdsurfer the constraints of being a startup made extensive UX testing difficult, so I read Don’t make me think by Steve Krug and then ran UX tests on friends for the price of a beer. Once I’d run out of friends to test our dashboard with, I started using any interview candidates that came in or any investors who visited our offices.

You don’t need to run many tests to find your site’s big issues, just running 5 tests will easily be enough, and I can't stress how valuable it is. UX feedback has become so important to us that we now have a regular testing schedule and allocated budget. There are many online services available that provide suitable candidates to remotely carry out these tests, leaving you to review their screencasts and commentaries in your own time (we use whatusersdo.com).

What we found out

I can still remember how embarrassed I felt after doing the first few UX tests. Our ‘flat’ button/element style was a blocker for some people using our dashboard, and other things that I considered to be a minor annoyance caused rage in some people. Only when you see these reactions and struggles can you fully appreciate how other people use your website, and how important it is to prioritise UX in relation to speed of getting new features live. There's no point in creating lots of features if users are too irate to use them!

From our UX testing, we learnt:

• Our user interface was holding us back as it wasn’t offering users the experience they wanted.

• Users could be divided into distinct categories, with separate aims looking to answer radically different questions with data.

• Many visitors came to us with a vague idea of what they wanted to achieve but few specifics. These clients needed more support/ guidance from the system to make full use of the features.

• With the existing dashboard, finding the required analytics wasn’t always easy and some user groups could get ‘lost’ in the data.

This sent us back to the drawing board and we came to the conclusion that the best solution was to create a brand new user experience. As I began to think through the UX design, I explored the concepts of material design and ultimately decided to use this through our design and development process.

Fig 1: How things used to look.

What is material design?

Google’s material design is a design philosophy that outlines how apps and websites should look and work. It breaks down everything — such as animation, style, layout — and gives guidance on patterns, components, and usability.

The key principles are:

Realistic visual cues: The design is grounded in reality and actually inspired by design with paper and ink.

Bold, graphic and intentional: Fundamental design techniques drive the visuals. Typography, grids, space, scale, colour and imagery guide the entire design. Elements live in defined spaces with a clear hierarchy. Colour and type choices are bold and deliberate.

Motion provides meaning: Animation is important, but it can’t just be there for the sake of movement. Animations need to happen in a single environment, serve to focus the design and include simple and easy transitions. Movements and actions should mirror the physical world.

Google spent a lot of money putting together a team of really talented designers to create the material design principles, and we wanted to take advantage of that by using their publicly available framework. On top of the obvious cost saving, this allowed us to tap into Google’s expertise.

Another benefit, is being able to take advantage of the familiarity of Google design. Many of Google's web apps (e.g. inbox and drive) and Android apps are now built using the material design principles. You can’t use technology without using Google and this means that most people have at least some (subconscious) understanding of material design. This familiarity is great for a new platform like ours; users don’t have to put effort into understanding our way of doing things when they feel familiar with it already.

A good set of design guidelines will take into account human/computer interaction and handle the basics above. Really great guidelines will also set up conventions so that you know what to do when creating a new element not specified in the guidelines. Material design gives us the latter.

The end result

Our new dashboard, Crowdsurfer Pro is now live and brings together the power and insight of the ‘old’ Crowdsurfer with a new interface which offers users a much better experience.

I’m pleased to say the feedback from our UX testers, as well as from clients since the launch, has been overwhelmingly positive and we have had some great suggestions for future updates. Please try it for yourself at www.crowdsurfer.com.

Matt Michel

Fig 2: After moving to material design.

If you're interested to learn more about material design, we’ve listed below some of the resources we found useful.

Material design resources

Watch the video below for a great intro by the team at Google and then block out a few hours in your calendar and read the official guide. It's easy reading and you'll appear to be a design guru once you've taken it all in.

<iframe width="560" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg" frameborder="0" allowfullscreen=""></iframe>

Material libraries

We originally used Bootstrap 3 on our dashboard and wanted to use a CSS library to implement material design, however we were really impressed with Angular Material, and settled on that option. Depending on your project the Angular route may be overkill. Here are the options we reviewed:

Bootswatch paper theme: This theme uses Bootstrap 3 and would have been a quick way to get that material design look, however the library has no classes for creating FABs (floating action buttons), or other more complicated features, which ruled it out for us.

MDB: This a CSS library, built on top of Bootstrap 4. The basic version is free and the full version costs $99. Documentation is great and it is feature-rich.

Materialize: This CSS library was my first experience of using material design; I used it when I built gluless app and appreciate its simplicity. It's perfect for smaller projects when you don't need all the bells and whistles which come with larger frameworks.

Material Angular: This library was built by Google, and uses the same javascript framework that we use at Crowdsurfer: AngularJS. We like how it uses CSS flex for powerful layout options, the modularity offered by AngularJS and being able to create and assign themes on the fly, using Javascript. It's the library that we finally decided upon, and while the effort to integrate it is more that the pure CSS options above, it feels like a more robust solution and customisation is easy.