Design - Craig Jamieson

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.

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.

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.

Legocy

Today is Mandela Day in which we celebrate on Nelson Mandela’s birthday every year. I thought it would be the perfect opportunity to share with you the Legocy project which I had a hand in earlier this year.

In support of the Nelson Mandela Foundation, YouTube asked agencies to enter a competition by making a short film as a tribute to Nelson Mandela. The smart folk at Quirk Jozi came up with doing a short Lego stop frame animation to one of Nelson Mandela’s most famous speeches. The hope is to get enough signatures and send a request to Lego to make a Freedom Fighters Lego set. As I have been collecting Lego for a personal project for a while, I was asked to help with the cast, and of course being such a huge Lego fan, I jumped at the opportunity to have a play date with the team at Quirk. In addition I helped build them a responsive one-page site, provided the domain and hosting. They won the competition, and below is the end product.

[youtube https://www.youtube.com/watch?v=9tdheV2I_Vw?rel=0]

Please add your name to the list www.legocy.co.za

Handoff

On Monday 2nd June, Apple announced new operating systems for their computer and touch devices, OS X Yosemite and iOS 8. There are many new features, but something that stood out for me was Handoff.

Handoff

Now your Mac knows the last thing you were doing on your iOS device and vice versa. So you can start something on one device and instantly pick it up on another.

With the ability to start surfing a website on your desktop and then immediately jump onto your iPad, responsive design has never been more important. This experience is going to become seamless and I’ll bet we’ll all wonder how we ever lived without this feature, but if your site is not properly responsive or dare I say, it’s not responsive at all, the users journey might be cut short. So any developers who have not yet learnt responsive techniques and to any site owners who have not made an update, perhaps it’s about time.

Crafting Digital

Last week the digital industry came together to celebrate the 2013 bookmarks awards and it’s great to see some great work being produced.The focus seems to be integrating campaigns and more around the idea, as it should be. But I feel that there isn’t a very high standard of traditional digital craft.

I went through all the award-winning work on 10 and 5 and there are only a handful of agencies who are really standing out for me. The thing that stood out most is that no one is caring enough about craft. Most of the supporting sites on campaigns aren’t great and simply functional. But there’s no real love for beautiful design, clever code, fast loading mobile friendly sites or any advances in technology. Hardly any of the sites I visited were responsive, reduced in file size or anything resembling the standard of design I have a spent an entire career trying to replicate. The best designed stuff came out of Ogilvy Cape Town, who are a traditional Ad agency, but in my opinion, in the running for the top digital agency too. Not that I’d take anything away from the teams at HelloComputer, Native VML and Quirk who are really coming into their own and crossing that line between traditional digital and integrated full service agencies.

At the end of the day, I totally understand that clients don’t really care about using SVG graphics so that things scale beautifully on retina displays and are tiny in file size, but as the digital industry, we should care, we need to set the standard. If work cannot be crafted by the time it needs to launch, the beauty of digital is that it’s easy enough to polish after the launch and we can always continue to refine our stuff and let’s be honest, if we are going to use it to promote ourselves, then you don’t need a budget signed off to show your work some love.

What I’d like to see from the bookmarks are categories that look at high quality web design and development, best interfaces, mobile apps etc. These need to follow best practices, be light, adaptive and certainly not follow the cooky-cutter format most of them currently have. They also need judges who understand this. While I have a huge amount of respect for the senior representatives from the previous winning agencies, they are not necessarily qualified to be judging work that is technically brilliant as important as it is aesthetically pleasing.

I like that the bookmarks award individuals in categories like User Experience Designer and Strategist, but what about best interface designer, digital designer, front-end developer and so on.

I feel bad writing a post like this, because I have never entered the bookmarks, I also haven’t been producing as much work over the past few years, but I do believe in craft and I do believe in our industry, so whether I’m producing the work or not, I feel I have a responsibility to motivate the industry to do better work. Yes I’m a kak writer, my rambling here isn’t going to inspire much, but if the lack of gold compared to the huge amount of bronze awards are a sign, the level of work is worse than my writing, with the exception of a handful of talented folk, we have a way to go, so let’s not forget about craft.

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.

Academy of Design Professionals

I hereby pledge my dedication to the highest standards of professionalism, integrity, and competence in design practice and promise to uphold the spirit and letter of the Code of Professional Conduct through consistent practice and habitual reflection on my actions.

If you call your self a designer and you want to be treated as a professional, then it’s time you act like one. Read Andy Rutledge’s book Design Professionalism and take the pledge.

The only thing that’s constant, is change

11 Lives

Material Wealth

Focus on the project, not awards

Legocy

Handoff

Crafting Digital

FNB site redesign

Don’t be a square

Academy of Design Professionals