Better Collective: Workshops and UI Architecture

Written by Harry Roberts on CSS Wizardry.

At the end of February 2015, I had the immense pleasure of running a week-long series of workshops and hack days with Copenhagen-based company Better Collective. Product Manager Alette got in touch with me asking if I’d like to help them plan out and begin building the UI for the overhaul of their social network, bettingexpert. I immediately said yes.

Alette’s opening emails got me really, really excited. I could tell this was going to be a great project and that the team were going to be really fun. My suspicions were proved correct many times over. Choice snippets from those emails include (emphasis mine):

It involves quite some risk because we have quite a lot of users (200,000), but it’s worth taking the risk to achieve big goals.

We are extremely excited about this opportunity to really make something stellar, without having to deal with a lot of legacy.

We are located in the center of Copenhagen, Denmark, close to the harbour and with lots of museums, bars and restaurants around the office. […] We think of ourselves as dedicated and fun to work with. We enjoy what we do and we always strive to do it even better!

I would have to have been mad not to leap at this opportunity with open arms, and that’s exactly what I did.

Don’t invite Harry for a one day speaking gig, bring him in for a week and work together. One week will change the way you work forever.

Andrés Díez

Looking back, the craziest thing for me is that these emails actually managed to understate just how passionate, excited, driven, committed, enthusiastic, open, and fun the team actually was. This led to what is probably the single most productive engagement I have ever been involved in. The amount we managed to cover in just one week was unprecedented, and reinforced my belief that a tiny team of enthusiastic individuals can far outshine the output of a demotivated team with triple the manpower.

The core team was me, Alette, and Andrés, a Product Designer. We set up camp in a conference room and had different members of the team drop in and join us for different sessions throughout the week.

As well as the introductory emails, Alette and Andrés did a fantastic job of putting together a number of documents to lay the foundations of the week’s work. These documents covered company history and background, problems faced and questions they wanted answering (both philosophical and implementation-specific), and even a list of UI Components they’d like to build together in order to see how the theory would come together in the real world. These documents proved invaluable for two main reasons:

1. The way the engagement came about was very sudden. When Alette got in touch with me I had two available slots: some time in June, or next week. Alette chose the next week option, which meant prep time was almost non-existent. The comprehensive yet terse documentation they sent over allowed me to fully prepare for the week in a very short amount of time.
2. They provided a solid frame of reference for everything we did throughout the week. We lost no time to planning or logistics once I was on-site, we just ploughed through everything we could whilst making sure it always related back to these core documents. This kept productivity way, way up!

Harry was the driving force behind the architecture, and for every question we asked he had well thought out answer.

Alette Holmberg

The week was split into two distinct chunks: we had two days of pure theory in a workshop style format, then we had three days of pairing, hacking, proofs of concept, and eventually an MVP version of the Better Collective UI Toolkit. It was highly intensive, incredibly productive, and lots of fun.

We also opened up the workshops to non-UI team members so that they could get a feel for what we were getting up to, and I also ran two internals talks: one to the entire company evangelising the great work of the UI team, as well as sharing the importance and wider business impact of what we were getting up to, and another to the engineering team which was more of a demo of the kinds of thing we’d built, how they worked, and why.

In our five days together, we achieved

• rationalisation and streamlining of the design process;
• full, in-depth theory behind architectural concerns and principles;
• the effective management of UI components and their layout;
• guidelines and principles for better teamworking;
• the definition of UI Toolkit goals and responsibilities;
• the evangelisation and awareness of the importance of the UI team’s work;
• the build of a very solid foundation upon which the next several years of work can take place;
• and a whole lot more.

Harry helped us adopt a more minimal approach to our CSS and taught us how to organise our framework so we have more flexibility with a fraction of the code. […] The code we are writing after Harry’s visit is the best I’ve ever had a chance to work with.

Working with Harry made us confident that what we are building will last and will be a pleasure for us to work with—and for the next person joining the project—for a long time to come.

Andrés Díez and Alette Holmberg

I felt very sad when it came to leaving. The work we’d produced in that week was something that any team would have been proud of, and I honestly felt like I was part of the family. Better Collective’s company culture was unlike any I’d personally experienced before—everyone was a friend, everything was incredibly transparent, everyone loved being there, and I was made to feel so welcome.

A fortnight or so later, I checked in on Alette and Andrés’ work in the GitHub repo we had set up. They had taken everything we’d spoken about and truly run with it. Every line of code in that project looked like something I would have written, right down to the comments. They’d managed to take a very heavy and intense week of learning, ask all the right questions, and make it become second nature. I was incredibly impressed, and cannot wait to check back in again in six months’ time.