A smaller IT company was short on capacity for its current projects. The backend developers were focused on databases, and the frontend developer had her hands full with application logic. Building the user interface was something there was neither time nor appetite for – but the company knew that some of their projects would need quality UI. And so our collaboration began.
How we started working together
There was plenty of work, but not enough to justify another in-house hire. So the company decided to bring in an external developer – and they found me (apparently they’d been calling around to local companies, and I was one of the few who actually picked up the phone…).
We started with smaller test tasks, and then came two larger projects for their key client in the sports sector.
Project 1: Redesigning the match-recording interface
The existing web app displayed the progress of matches in real time. It worked, but the company felt it could use a visual upgrade – and that was my job.
UI design and coding
The challenge was to display a large amount of information clearly and all at once, optimise the layout for tablet, and then code everything up as a standalone HTML template. To keep the large number of dynamic styles manageable, I decided to use the Sass CSS framework. I handled some of the smaller functionality myself with a bit of JavaScript, to free up the frontend developer’s hands even further.
One nice moment: the interface had an element that was meant to rotate. I used a “plain old” CSS animation for it – the kind I use pretty much daily. For the rest of the team it was a new approach, and they were delighted by how simple it was.
Real-world testing and handover
Some of the work continued even after handover, while the team tried the app out in the field. Based on what they found, we then fine-tuned the UI. It turned out, for instance, that the app is used almost exclusively outdoors, in full daylight. Or that users keep the tablet on a stand half a metre in front of them. So we increased the contrast of some elements and the size of others, which lifted the user experience considerably.
The project had a firm deadline tied to the client’s event. The company delivered on time – and the client was happy. Mainly that everything worked exactly as expected :).
Project 2: A new statistics interface
For the second project – for the same client – the data and backend logic already existed, but the interface had to be built from scratch.
Wireframes and design
At the outset, the exact scope of the data wasn’t clear. I went through the available materials and the reference model the app was supposed to follow, and prepared a series of wireframes. These helped pin down the scope – the programmers compared them against the real data and adjusted the scope accordingly.
The design was based on the client’s brand guidelines: a custom typeface, brand colours, the whole visual system. Thank goodness for brand guidelines – they save so much work.
Development – from HTML templates to components
To speed development up further, we moved away from the workflow of static HTML templates, which someone on the team still had to drop into their own code. The company gave me access to their dev server and their own PHP framework – I learned the basics and started coding directly inside the application. The component structure let me build recurring elements (header, footer, navigation…) just once, without needless copy-pasting; for styling, I again reached for Sass.
The biggest challenge of the project, surprisingly, wasn’t learning an unfamiliar framework, but the eternal design question of “how do you style data tables so they stay readable, but don’t look like nineties Excel?” 🙂
This project, too, came to a happy ending – even if it (as always) turned out to be more complicated than it first appeared.
I’m looking forward to the next one.
