Learning curve: The power of AngularJS

Author picture
Keith Jay profile image
Posted by
Keith Jay
Date:

I firmly believe the role of a digital agency isn’t just to push out the same solutions time and time again. We have to make sure we stretch ourselves to create the best service possible for our clients, and ultimately their users. 

One such example is how Five Mile utilised AngularJS as a key part of the planning around user experience and design for our recent large-scale redesign and rebuild for Qimtek.co.uk. Here’s the lowdown on our experiences.

What is AngularJS?

According to AngularJS.org it is “...a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.” Nice.

We used AngularJS for wireframing and prototyping. It gave us a rapid way of building out highly-functional pages

The project

Qimtek’s website and team helps the custom manufacturing industry win more work from UK manufacturers. But their site - and technology - had plateaued and they needed a much better flexible CMS and front-end design to realise their huge potential. Five Mile helped deliver this vision by tapping into our technology, design and product development expertise.

An API, AngularJS and Drupal

In order for Qimtek to grow, they needed to use the best platform for the job: something that was flexible and powerful. We recommended Open source CMS, Drupal.

The BIG challenge was how we incorporated Drupal into the .net legacy system without causing the system - and therefore Qimtek’s entire business - to come to a grinding halt. The answer lay in an API and AngularJS.

AngularJS and user experience design

Our design process started with static paper sketches which were transformed into an exhaustive set of clickable static wireframes. These provided invaluable insight into the interfaces we needed to build in order to create a minimum viable product but could only offer us a limited insight into the usability and user journeys. That's when we decided to use AngularJS to continue the wireframing and prototyping process. Importantly, this meant our designers and themers were immediately working with the developers who were able to piece together the required API calls, giving us semi-functional pages with real live data! We did this by:

  1. Using OmniGraffle to produce clickable wireframe versions that covered every type of page and subsequent ‘journey’

  2. We then built highly functional HTML prototypes with live data by using AngularJS to bring all the pieces together

  3. This also meant we could build a living styleguide against the AngularJS prototypes that would later be dropped straight into Drupal and with careful planning around the AngularJS HTML, just work!

Screenshot of the AngularJS Qimtek wireframe login page

Screenshot of the AngularJS Qimtek wireframe search page

This proved very powerful. AngularJS gave us the right amount of easy-to-deploy dynamic features to build fantastic prototypes. A much improved approach over the traditional 'copy and paste' of HTML wireframes and of course, we were testing for real from an early stage. Instead of encountering time-consuming headaches every time we needed to re-map something or implement a new idea, all at a cost to our client, we could keep it flexible and only needed to change specific elements and there was always that invaluable in-use feedback cycle.

User feedback… in real time

One of the hardest things in web design is getting ‘real-time’ user feedback. AngularJS eliminated this problem. Not only could Qimtek staff see how the site flow would work, the AngularJS wireframes were a living and working version of the site that Qimtek MD, Karl Wigart could take to trade shows and exhibit. And we attended these shows, we needed to see first-hand how people were interacting and better understand potential challenges, providing our designers and developers crucial feedback in real time.

AngularJS: Pro’s and cons for wireframing

Pro’s:

  • Brilliant in confirming whether or not the early versions of the designs were right

  • Hugely benefited the style guide

  • Incredibly powerful way to let end-users (from Qimtek to customers) get a real feel of the site and test engagement while we developed.

Con’s:

  • A new technology to learn if you've not worked with it before

  • Possible that the AngularJS code will not be reused in the final project. This is an investment for the design process

Will we use AngularJS again?

Yes - because it provides a rapid route to 'working interfaces' that help engage with the project owners and users. In my view, it’s also really important to get some early design work done in order to help inspire a project - from client’s to users.

About Keith:

I am owner and Managing Director of Five Mile. I specialise in business strategy as well as creative design, content strategy and user experience. I’m a developer and have been a web designer since 2000.

Liked this? Then learn more about how we tackled the Qimtek rebuild in our Case Study

@fivemile