Blog

The Missing Brief

One of the things I’ve always found missing in product design is a decent brief. Not a set of tasks in Jira. Not a Miro board from a discovery workshop. An actual brief.

The nature of product design makes this absence somewhat understandable. It’s not advertising, where the problem is predefined and the deliverable is an asset. Products evolve. Requirements shift. Discovery shapes direction. So, the idea of writing a brief before the work starts can feel like trying to sketch a map without knowing the destination.

Yet this is precisely why we need one.

A brief is not a spec
A proper product design brief is not a requirements document. It doesn’t pretend to know all the answers. Instead, it defines the why, clarifies the who, outlines the what, and acknowledges the how is still in progress. It’s a living document written by the team together and updated as new insights emerge.

When done right, the brief becomes a shared compass. It aligns stakeholders. It focuses the team. It stops you from chasing edge cases or overengineering features no one needs. It helps product owners say no. It gives designers and developers a lens to evaluate whether what they’re building is solving the right problem.

Stop hiding strategy in Jira
Often, briefs get replaced with backlogs. The strategy disappears into epics, and the original intent dies under a pile of tickets. A task list is not a narrative. And without a narrative, teams default to delivering outputs instead of outcomes.

A good brief re-centres the work around outcomes. What are we trying to achieve? Who are we doing it for? What should they feel, understand, or be able to do after interacting with our product? These are the questions worth answering.

Consider this structure for a product design brief:
Why this project?

What problem are we solving? Why now? What will success look like?

Who is this for?

Not just demographics, but behaviours, motivations, and accessibility needs.

What are the constraints?

Time, tech stack, budget, dependencies. Be honest.

What is the narrative?

Is there a story that frames the user journey? Is the product onboarding intuitive, is there a payoff?

How should this feel?

Functional? Delightful? Invisible? Is it helping people do something better, faster, more confidently?

What do we know, and what do we need to find out?

Where do we need research? Where do we test? What do we prototype?

What principles should guide us?

Simplicity, clarity, accessibility, speed. Decide early and stick to them.

None of this is revolutionary. It just doesn’t get done. Or if it does, it’s buried in slides that no one opens after the kickoff.

Make it collaborative and living
This isn’t a document that gets handed down. It’s something the team builds together. Product, design, engineering, research, even marketing. It works best when all perspectives are present. And it doesn’t stop at the start. It evolves.

Done well, the brief becomes a source of truth you return to at every stage. It’s the reminder of why you’re here, what matters, and what doesn’t.

Product design has matured in many ways. But our approach to briefing still feels like an afterthought. Bringing it forward and treating it as a collaborative, strategic tool could be the simplest way to raise the standard of what we make.

Not everything needs to start with a brief. But everything should be able to return to one.

What is a design system?

A design system is a living ecosystem that serves the teams working on deploying products. As a central repository, it can be a combination of a coded components, design guides, brand assets and rules of engagement. This is usually an independent project run by a dedicated team who maintain the overall repository, code all the components, deploy updates and create all the assets for consumption by the teams across an organization.

The following are some of the most common categories within a design system.

Styleguide Commonly referred to as a living style guide is a visual reference of all the design assets that make up a brand and it’s supporting media and include things like colour, type, layout and other assets to help the design team consistently utilize the brand assets. This is constantly growing as more and more assets are added and the brand evolves.

Visual Language The brand will share the visual assets and their usage to best communicate effectively across media and contain a variety of produced assets such as video, icons, illustrations, and photography.

Design Language Every great design starts with a definition of the values and the standards to which a design effectively comes together and communicates seamlessly across multiple media. Principles are shared to help teams better understand why decisions were made and how best to apply them.

Pattern Library A coded repository of atomic-like assets for developers to easily consume to reduce the amount of churn and repeated assets that need to align across a project and function in a consistent way. This is usually html and css and some basic javascript. It can be, but not necessarily include complicated coded assets such as angularJS, jQuery and React, as technology changes so quickly code might be redundant before going live. The coded assets are both visual, functional and can be executable.

Voice & Tone Effective content and communication requires a brands voice and tone, while also including guidelines on how to effectively add content to communicate consistently across media.

Brand Guidelines Brand assets can be downloaded and appropriate guidelines shared to ensure consistent brand usage and avoid dilution of the brand and incorrect deployment creating confusion when developing brand assets.

Added to that, guidelines, legal documentation, how to contribute, get support and update logs are essential to maintaining a design system.

I hope you found this very basic guideline useful. Design systems are ever increasing in their detail and functionality and I’m sure in the future I will explain in more detail all the new features you can add and why you would need them. Whether you’re a designer, a developer or running teams and projects, a design system has to be the best way to create a consistent product, increase productivity and align your teams to your companies product vision.

Living style guides for new team members

There are so many good reasons for any team to build a living style guide, but one of the most obvious ones for me, given the movement of talent in the industry, is for onboarding new talent into projects. I cannot tell you how many times I have seen designers join a project and be expected to start rolling out designs straight away and more often than not, fail to meet any sprint deadline due to the huge learning curve and asset collating they go through.

I always try and think of what I would want when I join an agency and a living style guide is a perfect place to accumulate everything someone new will need. The most common elements are fonts, icons,  PSD’s, style guides, pdf’s and so on. These can all be built into a living style guide, so not only can they download the files, but they can view how they are made up and work in the real scenario.

Hopefully, if the style guide is not an afterthought, it would be current, which is in the sorting of working files can be very confusing. Of course giving a designer a sketch file or access to a creative cloud library of colours, components etc that they can drag and drop into layouts, already speeds things up.

Designers shouldn’t be focussing too much time on designing pages, they should be working with these components and utilising what’s already been built and build on from that.

Onboarding is easy when you have all the working assets in one place, with a reference you can actually interact with which allows you to work in a modular manner and will help new designers get up to speed quickly, focussing on smaller tasks which will make getting into things, even faster. Another win for living style guides.

Nobody Tells This To Beginners

We all had to start somewhere, and we all find ourselves wanting to give up because we are just not getting the results we want, the work we do isn’t as good as our ambitions, but we have to pay our dues and never give up.

‘Nobody Tells This To Beginners’ is an inspiring animation for creatives who are just starting out in the various innovative fields.

Created by 18-year-old Saar Oz, the motivational video is based on an interview with radio personality Ira Glass.

[youtube id=”E1oZhEIrer4″]

via Design Taxi

Productivity & being chained to your desk

I spend a lot of time thinking about the in-efficiency, of what feels like, being chained to my desk in order to show how productive I am. I’m not only speaking for myself, this is an observation I have made for a really long time, at many agencies I’ve worked at.

Working in a open plan office already bothers me, I’m introverted and while I’m comfortable socialising in small groups, working in a communal space makes me terribly uncomfortable. I prefer having a space to work in private, I simply get more done. But that isn’t the issue I have with working in agencies, it’s the perception that by being at your desk, staring at a computer screen all day equals productivity.

I have to problem solve, whether it’s strategically finding an approach to a business problem or coming up with a new look for a brand, it requires me to think. I think all the time, in almost any space. I find open office spaces more distracting than coffee shops. So I prefer to be out. But I think in the shower, while pushing weights and most especially, while taking long walks. While I don’t always have a pen and paper near I do jot down ideas on my phone, which is pretty much always near me.

The unfortunate thing is that most 9 – 5 companies don’t seem to allow you to be in the right place to think, their expectation is that you should be at your desk or a space within the agency. I’m not really sure what thats about. I get we need to work with colleagues, as a leader we need to be available to staff we manage, for meetings etc, but hey, if it’s scheduled, I will be there. Otherwise, I’d prefer to be free to think and work at my leisure. If I need to work with colleagues, do I need to go in the office, hell no. Why can’t we go brainstorm in a museum ,at suitable coffee shop or over lunch?

As a creative in this industry, we have few rights, we are not paid overtime and the expectation is that we will drop everything for our jobs. The least agencies can do, is allow us to work at convenient times and places of our choosing. By choosing when we work, we can avoid traffic that wastes a lot of time and causes unnecessary frustration. I’m sure I can think of a whole lot of reasons the company can benefit, but thats a post for another day. So for now, what might I propose as a suitable arrangement?

hhhmmmmm, let me take a stab at this …

  • I don’t like my inbox controlling me, so I’d welcome the opportunity to check my email as few times a day as possible. Starting with a quick check in the morning to make sure there is nothing urgent, no crisis that is unavoidable. I would then make a to-do list and make sure I am aware of any meetings I might for the day. It would help if the rest of your team agreed to schedule meetings, say between certain hours every day. I’m drinking coffee, eating breakfast, reading email … thats work, so it should be done during normal hours, not before the sun comes up, but say 8am at home.
  • I’d like to avoid the crowds at the gym, so after 9am hit the weights, do some cardio and do some research while I drink my protein shake. All while thinking about the problem I wish to solve. Who doesn’t have some pretty great ideas while they’re in the shower, so while freshening up, I’d bet the best ideas are brewing.
  • Ok a light lunch with the team at a local restaurant to run through ideas, debate the merits of each and give some direction for each team member to action.
  • Back at the office for a new briefing, coffee with one of the team to discuss a promotion and an internal review with one of the designers and then off to a client meeting. This is all perfectly normal work for a Creative Director.
  • Ok time for an afternoon snack and a coffee, while going through new email before heading for a walk along the promenade, thinking about the new brief or how to solve other challenges yet unresolved. A quick meditation and it’s off to discuss some ideas with your boss over  some sushi.
  • With a firm understanding of your seniors direction, it’s time to sit down and push around some pixels. So back to your apartment where you can spend some time with your partner, kids or dog before firing up photoshop and giving a design a good sprint.
  • A healthy amount of time switching off, unwinding so to speak before you hit bed, just remembering to put your notepad next to bed, incase you have any further ideas that pop up before you go to sleep.

To me, that sounds like a perfectly productive day, and I didn’t have to sit in that open plan factory desk like setup the whole day and I am getting the job done. Productivity should be measured by results, not the accumulated time you are perceived to be busy working. Ask yourself, whats your take on the perfect day being productive, without being chained to your desk?

 

Creative in Business

Everyone likes to call themselves creative these days, long gone are the days when creative purely meant those weird arty types who draw, act and write poetry. No these days everyone thinks they’re creative and are entitled to be creative. Often I hear people say, “ideas can come from anyone, even the tea lady”. Does that make her creative, or perhaps part of the creative department in an agency? My best are the bean counters who handle the money and assign the budget, who proudly proclaim to be doing, creative accounting. Well I have to agree, creativity is not exclusively for a single department, any more than being good at business isn’t restricted to the suits. But we all have our roles to play and more importantly our responsibilities within an organisation. Lets face it, we are all paid accordingly.

The creative department; by which I mean art directors, copywriters, designers etc quite frequently solves business problems, that is the business we are in. But more often than not, creative departments go beyond merely solving the client’s business problem, they are often solving a critical agency business problem. So what is this problem I speak of? There is no title, because purely calling it a business problem, would mean the business side of an agency would have to take responsibility and actually do the job they are titled and responsible for, and being that they also want to be part of the creative process when it suits them, we just don’t want to label it. So let me explain. Quite often the business side of the agency agrees to things, over commits, under charges and so on, while the creative departments are left to find a way to get it done. More often than not, the creative departments work themselves to death and complete the ridiculous tasks set before them, often feeling under valued, resenting the client (who is usually blamed for the poor timings etc) and putting out some half-baked work, that does little more than keep the lights on. All while having to share what they’re doing with the business folk, to make sure they don’t feel left out and like they’re just paper pushers, you know, they have ideas too. I was once told I’m like Willy Wonka and sometimes the suits also want to share in the magic of the chocolate factory. Vom!

I’d prefer that the business side of an agency focus on business, hell they could even get really creative about business, but as long as they keep the money on their end and don’t make it the creative departments problem. By this I mean they need to start caring and taking responsibility for bringing in the numbers without inconveniencing the creative department. I promise you will not get better ideas through threats of being fired by the client if we don’t nail this concept. All the time lurking while creatives try to solve these problems, should be spent thinking of creative ways to bring in more revenue for the business. Finding better ways of working with the client to write a brief, plan their project and hopefully save everyone some money.

I am yet to have a business person walk into my office with a puzzled look on their face, and after I asked whats wrong, get told, “I am trying to figure out a way to make real money from digital” or “I am trying to figure out a better way to estimate time on projects, so that we don’t under charge our client” these are business problems that could involve creative, my door is always open, so I am happy to help where my insight is most valuable, but these are challenges facing suits which they should be thinking about.

Being on the digital side of advertising for most of my career, I have often felt a lot of pressure to deliver the goods on some ridiculous budgets and deadlines. I constantly try to think of new ways that we could manage this all better, how we could increase our rates without chasing away clients and how we could better manage client expectations on time and project outcome.

TV as an example hasn’t changed in years and while current trend is to reduce media spend, TV in most parts of the world still has the largest reach, so it’s a profitable business to be in. The format hasn’t changed very much, so the production is pretty similar and easy to estimate, get buy-in and get a reasonable advert produced. Digital on the other hand is more often than not, pretty unknown. There are so many variables involved and quite often being innovative means, so many are unknown. Yet the manner in which digital is billed, is completely flawed. Clients generally pay by the hour, which is charged based on an estimate before any of the relative teams who actually produce the project ever even know what has been agreed upon. A half-baked brief is put in the system, usually just before month end, so that the suit meets their monthly target and then it’s up to the creative team to solve. Suits rarely ever like to phone the client and ask for more time and budget when the teams figure out that what is being asked for is impossible and more often than not, build something that delivers to some degree, but could have been much better had they had the time.

Often when people see my personal websites people comment on the level of craft that goes into them, well there’s a simple answer. I constantly keep perfecting the design and functionality, while I aim for a target date, I would rather do it properly than meet the deadline. I constantly keep iterating even after launch as the beauty of digital is it’s not like a TV Ad that has aired or a printed item that once the ink is dry, it’s done, no more changes can be made. I see this as a huge opportunity to continue to make money, as it means no project is ever really complete and if only someone could make the client understand this, we might be onto a way of making money continually while offering the very best solution.

What amazes me is that clients pay millions to produce 30 second TV Ads, yet they won’t spent nearly a fraction of that on digital projects like websites, which actually live online 24-7-365. This is one of those business problems I feel our suits should be trying to solve, their chance to get creative doing what they do. You should be proud to say you are in the advertising industry, it is perceived as creative, but that doesn’t mean you should try to be part of the creative team, be a team player by being creative about how you do business and bring in real money, so the business has the time to be creative.

 

Focus on the project, not awards

It’s my opinion that creatives in the ad industry are focussed on the wrong things and they’ve lost site of the experience you go through actually working on projects. Too often I hear people start a project with statements like, “we need an award winning idea”, “this is an award winning campaign” and “this is the agencies Cannes entry” and honestly while it makes sense to keep your eye on the prize, let’s not forget the journey, so to speak.

I guess however, I can only really talk for myself. So I’ll try and explain things as I see them. I enjoy being recognized by my peers, the industry and even our clients. I love my FWA certificate, my Pixel Award etc. it’s good for my career, good for my reputation, my ego even. Most importantly, awards are good for business.

But I enjoy making stuff even more. I’m a journey guy, I appreciate what I and the team I work with go through on a day to day process as we craft our project. Sure there’s a lot of headaches in between, but getting us through that shows the kind of metal we’re made from. Each iteration we go through, every step we go through, brings us another step closer and sometimes further from our end goal, passionately pushing around pixels, debating ideas and figuring out the code. It’s this sort of stuff that makes me excited to do what I do every day.

Of course if you know me, although I see work as play, it’s not all work, I’m a clown, I always have time to laugh, to make an ass of myself, pull pranks and to do midnight food runs. We play together and we hurt together, but we’re in it together and those bonds are the lasting ones.

So I’d be so brave as to suggest you put on your big boy pants, you roll up your sleeves to get the job done and forget about your shiny shoes and monkey suit. Enjoy your work, stop focussing purely on the end reward, if you do great work that should be reward enough, and besides when you do great work, more often than not, you will get the recognition you deserve.

FNB site redesign

On the 14th July FNB launched their newly designed website. There have been a lot of negative comments made, which is to be expected given that people really don’t like change, but in fairness I have to commend the effort made by the team who have redesigned the FNB site, it is a huge leap forward compared to any other banking website locally (& abroad for that matter).

On the plus side, the site is responsive, fast, the use of text instead of images would be a huge help with that, clean(ish) and at least an attempt has been made to refresh it and keep up with current trends.

I haven’t had too many of the problems with my account, like some other people have reported, nothing is obviously broken. But I do see a lot of design and usability choices that I might have done differently. I’m not going to tear into the redesign, I think there are enough people doing that, but I will offer some advice, based on what I currently see online. I hope that this advice is taken into consideration as I really do believe it could improve the over all user experience.

Buttons
It’s not particularly clear what is a button and what is just text. You basically need to run your cursor over everything to see if it’s click-able and on touch devices that really presents a problem. If you are using text links, then underline them. If you have buttons, then make them stand out and have clear call to actions, so they cannot be ignored. Buttons sizes should be larger on touch device’s as your finger is the cursor.

Menus
Whether it be the main navigation menu, a sub menu or a list menu, again these need to be made obvious to the end user, as with buttons. Menus also need to show where you are. They should contain the most important functions of the site first, then secondary include things like about us, careers and other company information (you are mostly buying into the service, not the history of the company or it’s current job vacancies). With responsive designs, especially when focusing on mobile devices, menus should be easily recognizable and easy to use.

Navigating
When you click into many of the sections of the site, a modal like window appears and it has a close button. While that makes sense in some instances, it just doesn’t in others. For example, if you close the window to be taken to the home page, then why not just have an icon that has a house on it. If it’s a tab menu, then why have a close button?

If you are going to have several pages deep as you navigate, then at least include a bread crumb trail, so you can work your way back.

Fonts
The use of web fonts on the site ensure that it’s a lot more on brand, that the content is SEO friendly, will always show, even if images were turned off and best of all, it loads a lot faster. Given that the site homepage is secure (https://) due to the login form on the home page, this is a really smart addition. But they still haven’t got the balance of font weight and size right. On tablet and mobile devices, the text is tiny, which is a simple mistake easily fixed, just bump it up a bit for smaller screens, so you don’t have to strain to read it.

Use a colour scheme that makes it easier to differentiate between header, sub-header, body copy and links. Remembering that hover isn’t immediately recognized on touch devices.

Icons
One of the stand-out features of the old FNB site was the use of iconography and it has often been used as a shining example of what clients want when they reference other sites, so I’m not sure why they have hardly used any icons. Just like icons on road or airport signs, it would be easier to have some symbols that are easily recognizable on the site, so even if you have trouble reading, you know what to click. It would also help differentiate between what is a button and what is just text. Obviously this needs to be a consistent treatment or again it could confuse.

When designing icons, even something as simple as an arrow, make a little effort. A triangle is just a square cut diagonally and rotated. That’s just lazy. When you see all the curves used in the FNB CI (from what I can tell) surely some rounded arrows could be used.

If I had to take a guess, while speeding up the site must be a priority, user friendliness has to come in pretty close. If speed is the issue, then use sprites of png or svg graphics. You can even create a font, which includes all your graphics as vectors, which can be loaded in once.

Interface
The interface design is very confusing for me, I’m just not sure I understand what they were trying to achieve. But if I had to guess they were against the traditional scrolling website and they wanted the interface to seem more contained. The fixed header and footer was a poor choice, as was adding their logo on the bottom. Logos are commonly recognised as being home buttons and are best suited to being on the top left.  This isn’t to say that it can’t be done, I see fixed elements and logos being abused in all sorts of ways now that this functionality is better supported, but on a banking site, I’d opt for something more traditional myself.

Another odd element is the left hand side where page headers are flipped 90 degrees; it all just reads a little odd to me.

The element that bothers me probably the most is the search and login section. It sees really cramped and hard to tap on mobile devices. I’m sure real-estate was a huge consideration for the designer, this section s one of the most used features and just seems cramped at the top on the edge. A little padding around everything would make it easier on the eye and touch.

Loading
Remember loading bars on Flash sites? I’ve designed enough of them to know that you can do amazing things, but in HTML, they are a functional element for content heavy sites that load slowly. I understand telling people the pages are loading, but if you are going to have a loader, that is a bar that represents the amount of data being loaded and indicates how long you have to go, at the very least, make it work properly. And only use loaders if it’s really necessary, given the speed of the page loads, I don’t think it’s worth it on this site.

Social Media
I went and looked at a bunch of international banking sites and not one, not even PayPal have social media icons on their home page. While I am aware that FNB dominates as far as banks go in this space, it just strikes me as weird to add these icons to your home page. But if you are going to, then at least use the official icons as specified by the specific social networks. Facebook is probably the most aggressive about this, but even the friendly folk at twitter have some terms too. FNB are a very public online site and could well land up in trouble.

Responsive Design
I believe the use of responsive web design was the smartest choice made when redesigning the site. I’ve not seen another bank do anything close to making their layout work across multiple devices. There are so many advantages to using this technique and given FNB’s commitment to embracing technology, making it work across multiple platforms is a sure way of allowing users to access their site on any device. I actually think the need for a mobile app and a mobi site becomes redundant. What I would caution the team on though, is their current interface design and various layouts across the devices. I’m not sure if they have finished this yet, but across my devices, the site doesn’t quite adapt enough to call it truly responsive. I struggle with the font sizes, buttons etc as mentioned above. Regardless it functionally works across all my devices, which means I can bank anywhere, which is a huge win!

Conclusion
I could continue to do this all day, but I am sure that the team have got their hands full given the mammoth task of pulling something like this off. Again, it’s a huge effort and I really am impressed, as usual FNB are ahead of the rest of the banks online and I’m sure once people get used to where old features now are, the complaining will turn into compliments as they have made the effort, no other bank that I’m aware of has made toward a better online experience. I would personally love to work on a project like this and to the teams involved, keep going, it’s inspiring and you all deserve a good pat on the back.

An alternate approach to building a website

Budgets are tight, so I needed to rethink how I build websites. The usual approach would be to research, wire-frame, design, build and launch. Okay so that’s, pretty simple and I’m being vague and skipping quite a few steps, but it’s not really important, I still do some of the things I might have skipped over. What was a huge time-consuming task, was getting clients to agree on a layout. This could get tedious, and even under contractual agreement to a set amount of reverts, clients seem to focus too much on unnecessary details, wasting huge amounts of time, which is of course money, something almost every client seems to have a shortage of. So I’ve taken a new approach. Given that most of the time, I’m involved from concept to execution, acting as designer and developer. I follow a different process, reducing the time it takes.

This is where I blow your mind!

I research, I wire-frame (briefly) and then I start building, then I do what we generally term as design. I have found that people respond better to a working site, so that’s what I do. I build the site, keeping it simple, avoiding focussing on the shine that makes the site beautiful. I build a framework, I add the content, navigation and general functionality. At this point, when the client agrees that I have met the functional requirements of the site, I pretty much skin it. Giving it the type of polish it deserves. I have avoided designing something, that changes multiple times before dev, during or after dev, which saves clients moolla.

A few warnings though. 

Not all clients respond to this route, they just can’t seem to be able to visualise the site. Working this route in a team environment might not work either as the design is in my head while I’m deving. Too much complexity might also require design first.

It’s unconventional, it takes experience and it takes a lot of faith by your clients. But it cuts down time, which means it cuts down costs and delivers on the “form, follows function” theory.

My current Kindle reads

I thought I’d share a few Kindle books currently on my iPad


Abduzeedo Inspiration Guide for Designers (Voices that matter) – Fabio Sasso
Content Strategy for the Web – Kristina Halvorson
Creative Workshop: 80 Challenges to sharpen your design skills – David Sherwin
The Digital Diet: The 4-step plan to break your tech addiction – Daniel Sieberg
Don’t Make Me Think – Steve Krug
The E Myth Revisited – Michael E.Gerber
The Essential Guide to HTML5 – Jeanine Meyer
Flash Mobile – Matthew David
Foundation HTML5 Animation with JavaScript – Billy Lamberta & Keith Peters
Good Strategy / Bad Strategy – Richard Rumelt
HTML5 Guidelines for web developers – Klaus Forster & Bernd Oggt
Mobile Design & Development – Brian Fling
Mobile Web Design for Dummies – Janine Warner & David LaFontaine
ReWork – Jason Fried & David Heinemeier Hansson
Steve Jobs – Walter Isaacson
Stunning CSS3 – Zoe Mickley Gillenwater
Undercover User Experience Design – Cennydd Bowels & James Box
Untitled – Blaine Hogan
The Wake-Up Call – Jonas Eriksson
Web Form Design: Filling in the blanks – Luke Wroblewski
The 4-Hour Body – Timothy Ferriss
The 4-Hour Work Week – Timothy Ferriss

↑