Blog

System design: Block builders

In a big organization, there are a lot of moving parts across various departments and projects and when the goal is to create a single design language, keeping a consistent design can become almost impossible. My strategy for this was to develop a core design team who would be responsible for designing the individual components of our design system which could then be deployed and consumed by designers who worked within project teams. This was met with a huge amount of resistance as people seem to think that having bums in seats within projects would speed things up and deadlines would be achieved. However, the goal is to have a consistent design and building up a living style guide would provide us with a platform that all teams could understand and consume the required components in which to apply to their designs. Ultimately project teams should be more focused on other priorities like functionality, better user experiences and align all projects into the specific channels that will deliver these to the people who will use them.

In order for me to explain this over and over again, to which I have mildly had some success, I have managed to create the analogy that this core design are busy creating the system, which if I get my way, will consist of pairing up designers with developers so they can dev these components and test, break and animate them before committing them or rolling out several static designs, is call these my Lego block builders. Their responsibility is to make the Lego blocks which the Lego builders will consume to make the Lego models. There is a very generic list of components almost every project may consume from (atoms), there’s how you piece these components together (molecules) and then there’s the way they work together (organisms). The Lego builders consume this within their various projects and should they need a specific block that does not exist, it is their responsibility to identify it and bring. it to the core design team who will then work with them to create the blocks and how they work together to deliver on the projects needs, feeding back into the system for all other Lego builders to consume. I have borrowed some language from Atomic design principles, and we have probably all played with Lego, so this should be language most people can understand.

I am often told that this is not agile and this is creating silos etc. Maybe, but it’s necessary if you want to have a single look-and-feel that represents the brand consistently.  Spreading the design out across multiple teams, on multiple projects, in various buildings would simply not work. While I could move across all teams and keep alignment, the task is too great and much easier to control by giving out a set of guidelines for teams to follow. It’s a subject for another post, but living style guides and designs systems are necessary and utilised by most big organisations who want to create seamless experiences for their customers, but throwing tons of resources won’t develop this any more successfully than rather putting a core team together who work with each other to solve the visual design challenges and deploy them into the style guide and then iterate accordingly. I think the challenge is to identify the brick builders from the Lego designers who consume the bricks and make sure that there is still enough design challenges for everyone to be inspired no matter which role they are best suited. The other is getting people to understand the vision and hopefuly make them understand that in order to be consistent and speed up the design process, a small core team is the most practical solution I can think of.

iOS CarPlay UX Fail

Since updating to iOS 9 I am delighted to find new features that have been kept rather quiet. So stumbling upon CarPlay, I was curious to find out what that was. Well things did not go well. Immediately I was alerted with either turning on wifi or using USB. The problem is, I am sitting in a restaurant, no where near my car. So how do I cancel, go back to my settings menu?

CarPlay Fail

I clicked on the wifi option as I have no USB on me, and my phone started searching with wifi for a car (I think). However I could now go back, but it was still searching for a car in the background.

CarPlay Fail

That is a serious UX fail for CarPlay, whatever the hell that is. I would suggest that Apple either give the user the option to continue or cancel as this is going to catch a lot of people out and if you know how much battery power is sucked searching for wifi, this is an obvious fail.

FYI … So what is CarPlay?

According to the google search results…

Apple CarPlay is a smarter, safer way to use your iPhone in the car. Just plug in your iPhone and go.

But thats misleading, as according to the page the google results point to…

Available on selective cars, CarPlay is a smarter, safer way to use your iPhone in the car.

The key thing to note is that it’s only available in selective cars and by that you probably need a device that accepts this input.

2015 Web Design Trends

I recently taught a web design fundamentals course and at the end I shared some of the most common web design trends I have noticed during 2015. I have not and will not attempt to predict what will come, but there is certainly two obvious directions we seem to be going into. Firstly there’s the rich multimedia experiences, that care less about download speeds, but offer visitors something entertaining, something like Flash websites used to do, before Steve pulled the plug. I have a huge amount of respect for the efforts these teams have gone to, given how difficult this is to do with todays technology. The second trend is just he opposite, super simple sites that focus more on content, speed and minimalism. I recently re-designed re-aligned my personal site and unconsciously added a few trends without even realising it. I simply had no consistent images I wanted to use, so I decided the use of colour, large fonts and minimalism would suit me better. Hope you like my list.

Hidden Main Menus

Huge's hidden main menu

With only a hamburger menu on the right hand side, the navigation is hidden, only on selection to reveal a full screen navigation that is hard to ignore. I’m sure there are other’s who may have done this before, but I first noticed that Teehan + Lax were early adopters of this technique.

Make it Big

big experiences by born group

Large full screen backgrounds are nothing new, but large fullscreen videos that seem to load relatively fast, are just epic.

Multimedia Experiences

TIMESHIFT-165-WEBSITE

The team at ultranoir have crafted an amazing online experience, the likes of which I have not seen since Flash ruled the rich media experience online.TimeSifht165 is a Digital & Interactive Fan Artwork inspired by the exceptional story of a unique French car : The Delahaye 165s and the amazing thing, is you can drive the car with your desktop keyboard or through your phone.

Patterns

Patterns

I’ve started spotting patterns everywhere as a way of breaking the large device focussed stereotype layouts that were all of the web over the past couple of years. They re not only gorgeous, fill the screen, but they can be interactive. The light vector graphics also help with speed, but still offer a richer visual appearance.

Typography Microsites

fontsmith

It’s interesting to see a font get an entire site dedicated to it. Font microsites are popping up everywhere and none as slick as the FS Millbank microsite, which is gorgeous on any device.

Flat Design

flat

Flat design is everywhere and with SVG being the preferred image format, I doubt flat design is going anyway any time soon. Love it or hate it, it makes sense in our multi device world where speed and vectors are king.

No more Boxes

no boxes

It’s fantastic to see html sites breaking out of their grid like structures and telling stories in new ways. Again similar to how Flash sites were built, this is another tribute to the interactive era of the past, or maybe the beginning of an exciting future.

Simplicity

simplicity

Simple, clean, content focussed sites that purely drive the message home make sense when we consider how despite faster internet bundles, the internet just seems to be getting slower.

No header background

no header background

Almost every template you find these days has the same large image background, and while we love the large format video experience, sometimes it’s simply lovely not having a large image in the background. Another great example of simplicity.

Very Large Typography

giant type

Someone commented during my course that this site reminds them of the mad men era ads, where there was a huge focus on copy driving the campaign message home. With the use of web fonts, we can pretty much use any BOLD font we like and do something beautiful with words and type.

Speed & Performance

performance

I love how Google have stated that performance is a feature. Speed is super critical to users, UX people cannot stress enough the importance their research has identified speed as one of the most important things to users. But it’s more than that, with pages filled with all sorts of animation and other functionality, how fast these services perform is equally as important. People want a fast, smooth experience and taking into consideration speed and performance will ensure your site is a hit, not only with users, but with search engines too, who now rank you on both speed and performance. I think this will be the biggest trend going forward and as you might have noticed with the minimal websites above, simple is influenced by speed.

Non-responsive web design

I’m sure you have all heard the buzz words, responsive web design (RWD), adaptive or responsive sites. But incase you have been living on the moon.

Responsive web design is fluid grids, flexible images, and media queries. It was first defined in an article and a book by Ethan Marcotte.

To me, this term is already old school. If anything we should be talking about, non-responsive web design … websites that have not adopted RWD principles. To me simply, sites are responsive. We are so past the desktop browser being the only way to view a website. So please, if you haven’t already, do your people a favour and make sure you don’t have a non-responsive web design.

The only thing that’s constant, is change

In the earlier years of my career, I did much smaller projects. Microsites, personal sites, presentations etc. Then things got bigger, campaign sites, platforms, e-commerce sites and so on. Now days, I am very much interested in building product eco-systems, and I like to work on the same project for longer periods of time, by constantly iterating and improving things. I love how platforms like Medium, Pinterest and the like are always evolving the smallest details and constantly improving on their designs.

I could never have imagined that when I began my career, I was constantly about new things, but now the new thing, is a small detail that makes for a better experience for users. What I find amusing is that we used to redesign, and then make a big deal about it. But now we keep changing things, subtly as if no one will really notice, the site just kinda feels better. As they say, the only thing that is constant, is change.

11 Lives

I have been unsettled in my career for a while and I have been making plans to re-align my skills to get back to living the kind of life I choose to live. It’s easy to want to just stick to what you feel you know, but thats never been me, I always want to challenge myself, learn new things and grow, caring more for the love of the work I do than the salary I earn, despite being piss poor and in a world of hurt financially. So I was surprised to find a really great comic about life, that helped me understand my life cycles.

Basically it talks to the idea that we have several lives, not one and it is based on the theory that it takes 7 years to master something.

life-comic

View the full length comic

So for me my lives went something like this …

Self Discovery: 18 – 25

I dropped out of college, tried many different jobs, travelled the world, partied hard and eventually decided what it was I wanted to do with my life.

25 – 32

I started designing club flyers, then websites, became a multimedia designer, interactive designer and every other name you can think of to describe what turned out to be an interesting life working under the handle Digiguru, where I got to collaborate with and design for a whole variety of clients/brands across the globe.

32 – 39

I wanted to use my skills to lead others as a creative director at some of the top local agencies including Ogilvy, M&C Saatchi Abel and Black River FC, expanding my skills into to creative strategy, ideation and integrated campaigns.

39 – 46

I’m onto my next life, which is looking to return to a more niche discipline, focussed on user-centered design, hopefully as a product and user interface design director. The jury is still out on the title, but I’m excited to get back to a more hybrid role as designer/leader.

What are you going to do when you die?

Material Wealth

If you are interested in learning user interface and user experience design techniques, then a good place to start, given the wealth of useful knowledge shared, is the Material Design site by Google.

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

I consider myself fairly seasoned when it comes to interaction design, but if for no other reason than learning how to articulate the points made, Material Design has plenty of learnings, information and inspiration.