Making sure your design works

I was recently working on the redesign of Screen Yorkshire with We are Telescopic and started to design the “Other Projects” section on the case study page. This would live at the bottom of each case study page and cross-link users to other case studies.

My first pass of this area looked like so -

After I designed this I then stopped to think if there was a way to bring in the overlapping text element into this area (on the homepage we had large text which overlapped an image against a plain coloured background which helped to break the page up and make it feel less rigid).

So I explored a little and ended up with this -

Then I stopped and sighed as I realised that this was not a viable design pattern for this component.

As film titles could be long or short I couldn’t restrict them to such a small amount of horizontal space. A title is a title. If it was shortened too much the user would have no idea what the film was about.

Really long title lengths could also cause the text to wrap onto multiple lines which would look odd and unbalanced when used against other titles of varying lengths side by side.

I had previously seen this same issue a few weeks earlier on the otherwise beautiful Sainte-Justine Foundation site.

Now you could argue that long titles are an edge case but another concern would be the reuse of this component.

There was no reason why the “other projects” component couldn’t be used on a page about, say, locations or offices or news and so forth and the project called for a lot of these components to be reused wherever possible.

And therein lies the problem with a lot of site design. The need to design components to be reused without any idea of the content that’s going to go into them.

Back in the day

I’ve been designing sites now for over 15 years and can vaguely remember the days of designing them in Flash.

Back then we still had components in a way, a header or a footer is a component that you can use across every page of a site for example, but I’m pretty sure I designed the sites with some idea of the content that was going into them.

I was mostly working in advertising at the time so a lot of the sites I designed were small sites for products, like a new pair of trainers or a car, and copywriters would agonise for weeks on end about the copy that needed to go into the page. The design would change, not just based on client feedback, but on the copy that was actually going into the design.

If I look back at some of my older work most of my designs had real copy in them. If I look over some of my more recent work most of the copy is lorem ipsum.

The nature of my design work has changed from designing an experience for users to learn about a product or service to designing a set of building blocks that a client can “do something with”.

On the one hand, this lets clients have much greater flexibility on reusing components across their site and gives them more control over the way in which they present information. If they need an image carousel on a news article they can add one in. If they need a social feed added to a press release they can add one in.

On the other hand it means that designers have a trickier job in designing something which is both “unique, bold, fresh and exciting” (which all clients want) but at the same time will work for variable content types and lengths, can fit besides other components on a page, in any order, can pass accessibility guidelines and is also fully responsive.

And people wonder why all sites look the same these days.

Pitches

I also find this is a problem in a lot of agencies who will win pitch work with amazing designs full of made up, narrative-driven, content or huge amounts of lorem ipsum that fits the design perfectly.

As soon as you get around to actually designing and building a real site the amazing design starts to slowly erode as you discover that the client doesn’t have X or actually needs Y or wants to do Z.

There is nothing more disheartening than having to explain to a Creative Director, for the fifth time, why you’ve changed something that “looked cool” because it doesn’t, in fact, work.

Erring on the side of caution

For this reason, I find a lot of my design work starts off safe and scalable, as I have to consider all these variables. Then I try and push the design out a bit which can end up with some interesting patterns (like the Screen Yorkshire homepage for example) but equally some patterns which just don’t work on a site where you have no idea where or how it’s going to be used.

We can ignore some of these considerations and hope it all works out but in my experience, we end up with situations like the previously mentioned Sainte-Justine Foundation site (which is generally beautiful) where now and then things just break due to long copy lengths or missing assets or the reuse of components for different content types.

Final thoughts

It’s good to experiment and try things out but we need to always consider the end result here. If you have real content for a site which isn’t going to change a lot go crazy, push those layouts out as you know exactly what you have to work with.

If you don’t have content and need to work on a site which the client will manage and add to, make sure you consider all the variables that your design needs to cater for and give the client as much flexibility as possible without overly restricting the site, both in terms of scalability and design.

Designing without content was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

The importance of not changing things all the time

If you’re a designer reading this, we’ve all been there. You just saved out version six of a design. You made sure everything was pixel perfect. Your file doesn’t have a single “button copy 25" in it. Everything is nice and tidy. Everything is named. You’re feeling pretty good. It’s all signed off.

Then it happens.

Just one more change. Some copy. Nothing big. Few apostrophes here and there, few commas, few extra words, maybe an image needs replacing. Then suddenly it happens…the text doesn’t line up, you have to remeasure the padding, all the fonts need to be smaller. It changes everything. It takes time. You can’t rush it.

But of course you have to. It has to go live today or the world will stop spinning, hurricanes will savage the earth and everyone will die. Your producer doesn’t care, they want to keep the client happy. Your client doesn’t care, it’s a retainer account. You do whatever needs doing, whenever it needs doing.

I worked in advertising for over ten years, a few good years at some top agencies in London, and this cycle never changed.

Banner time

When I was a Junior Designer I used to work on banners. The process after the concept was signed off was to design a master file in Photoshop laid out in the order of frames and animation.

Frame one would have, for example, a giant elephant riding a unicycle. Frame two would have copy above the elephant saying something about a new car which was powerful but agile (hence the elephant on the unicycle). Frame three would pan up to show the elephant flying though the sky. Frame four would would have copy above the elephant saying something about the car being light and nimble…you get the drift.

Once this was signed off (normally after a few amends, an elephant was a stupid idea, it obviously had to be a bear) you would create an animated version, a master file, in Flash. Once this was signed off you would then resize the banner into a myriad of other sizes and create static gif backups.

My enjoyment of banner design was short lived after I discovered that amends could be made to banners AFTER the master file was signed off.

Sometimes it was one line of copy, sometimes two or three or maybe a whole extra frame of copy. To be updated across all banner formats. That’s only ten files, only three minutes per file per single copy amend, only thirty minutes of my time copying and pasting new words into files.

Other times you needed to change sentences. Of course “It’s so fast and agile you won’t believe how it handles” makes so much more sense when changed to “Fast and agile” (really should have signed off the copy there, oh no wait you did). Let me just open the file, find the layer, change the copy, realise the text is too small, enlarge the text, adjust the text on the other frames to match, move the button closer to the text. That’s a great idea. Let me spend twenty minutes updating a single banner then roll that out across the other ten banners in the campaign and spend three and a half hours updating copy.

All of this for a banner that someone is going to watch for five seconds and wonder why on earth there’s a monkey trying to advertise a car.

What people don’t seem to understand about design is it’s repetitive nature at times. Every designer I know loves solving problems, what copy goes above what frame in a banner is not a design problem. Hence when we have to constantly change small things over and over and over and over again we begin to get frustrated. We make mistakes. We don’t align things. We forget to check the font weights. We have long lunches. Constant change is the enemy of the designer.

Keep it fresh

I was at a design talk by Fantasy Interactive a while ago and someone in the audience asked the speakers how they handle constant amends and changes to work and how this affects designers moral and motivation. They replied that when things start to get into multiple rounds of amends, for a homepage for example, they suggest that the designer on the project goes off and designs the contact page of the site. Clients rarely care about this page and will likely sign it off with minimal amends later on in the projects life cycle. The designer has a new problem to solve. The designer is happy.

This type of thinking and process is essential to maintaining a designers motivation and creativity on a project. If agencies don’t control the client relationship and explain the importance of sign off they will very quickly find themselves looking for new designers and likely new clients.

Client’s have a sixth sense when it comes to noticing typos or misaligned pixels. It’s one of their most enduring and disturbing qualities. They will begin to notice the work suffering, they will likely pick the agency up on it, the designer will have to make more amends to fix the errors that have crept into their work before another round of amends arrives to undo all of their fixing.

All of this can be avoided. With sign off. Brief. Design. Review. Amend. Repeat until sign off. It’s simple, but it’s disturbing how few agencies actually follow this model.

Sign Off was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

A quick summary

In November 2013 an old friend of mine, Michael Litman, had an interesting proposition. He wanted me to redesign his site in my spare time by the end of December.

Back then he had a very simple one page site with branded vine content but he wanted a larger site with a new look and feel, added pay gate functionality and a blog.

He was also starting to move his site into short-form video production, having collaborated with a few agencies, so wanted a more professional look for his growing business.

So it begins

At the time I was busy working on a four month contract so we started off emailing some ideas around and created a google doc with links to sites that we liked the look of and ones that were functionally similar. I added in links to sites that I thought were interesting, innovative or just plain beautiful. Between the two of us we worked out what we liked and what we didn’t.

Mike also wanted a new identity for Brandsonvine. He initially wanted something which incorporated the initials BOV but I was leaning towards something a little more iconic, something that could become easily recognisable on its own while still allowing his company’s name to be displayed in full.

After lots of sketching I eventually came up with a very simple concept.

Essentially most brands can be distilled into basic geometric shapes. A circle for Starbucks or an oval for Ford. Vine’s format is square so when taken as their base shapes you end up with, at a very literal level, shapes/brands that fit within squares/vines.

My initial concept for the logo was to have a series of six geometric shapes rotating once every second for six seconds, the same length as a vine, before stopping on the final logo — a triangle which matched the previously seen geometric shapes and which also represented a playhead on its side. The idea was for this to be used on the homepage as a looping gif or wherever else the logo was used online.

The animation was never fully realised in the final design due to costs and development time, it’s just a static logo at the moment, but hopefully we can go back to this and bring it to life one day.

Version one

Once the logo and colour palette were settled on we set to work on the site. Unsurprisingly a lot of the elements we liked fell into the very clear category of “on trend” with a large clear header area, clean minimal design, few colours and strong bold typography.

The initial idea was to have a short home page which would explain what Brandsonvine was in short slices of content when scrolling down. So for example we would mention the press that we’ve received at the top of the page (which led users onto the press page) who we were (leading to the about page) then finally our branded/featured showcase (leading to the showcase page where users could filter and collect vines).

From there we sketched out a basic home page and I went home and started on the design which would establish the look and feel for the site. After a weekend I had a solid design to show Mike, it was perhaps my second or third variant but the strongest of my designs.

I’m a firm believer in showing clients one design option after extensive research and discussions. Multiple designs, especially when on tight timeframes, dilute the feedback process. By having one well thought out, solid design, you can discuss it in detail with a client and go from there.

I always like to present my work in an annotated pdf as well, to allow a client to understand the reasons behind the design and to see links to other sites (where applicable) to get an idea of how the site will work. Design isn’t just about flat files, I like to send over interaction and movement examples whenever I can.

Thankfully Mike loved the initial look and feel. From there we continued to meet up when we could sketching out the other pages and working on them now and then for about a month or so.

When working in evenings and weekends it’s good to have fun, Mike and I are old friends so I liked to keep him amused with occasional photos of progress in evenings (likewise I like Halo, so for want of a better image I used a placeholder from Halo 4).

Once we were happy with the designs I decided to create a prototype of the site in Invision (which can still be accessed here). This was hugely beneficial in allowing us to get a sense of how the site flowed before we started any development work.

The prototype was also shown to potential developers and investors to allow them to get a better sense of what we were after within a limited budget which was a lot easier to get across then a series of flat psds.

All in the details

Around this time Mike started to look for a developer. He considered single developers to full on development companies, from London to Russia, weighing up the pros and cons of all of them. In the end he decided to outsource the build to Primal Skill based in Romania to keep costs down while his concept was being validated…little did he know that with the savings in cost he would require a much more hands on project management role, but that’s something for Mike to cover when he writes his own article.

All of my files were synced with Dropbox so the developers were always up to date with my latest files. I created redline docs to make their lives as easy as possible as well as some mobile examples so they could get a sense of how the grid readjusted on smaller devices. Time constraints didn’t allow me to design all the mobile pages but thankfully the developers understood the logic and reshuffling of elements and interpreted the remaining pages for me.

After the site was built our developers set up a staging link for a private beta for us to check and then came the usual, lengthily, process of feeding back on the smallest of design elements.

I’m a strong believer in pixel perfect (or for those who are pedantic and will talk about responsive design, design perfect). Different browsers and devices will interpret the site differently than others but if I set the vertical spacing of an element to 30px, there’s a reason it’s 30px.

38px is not 30px. 31px is not 30px.

There was a great article about this over at Google Ventures which I strongly agree with.

Again google docs were invaluable in allowing us to list items and track their status. As with most small budgets it was a constant battle on both sides to get everything working and looking correctly within our time frame.

Our developers had a lot to do in a short amount of time so I occasionally sent back tiny CSS edits to make the site align more to the original designs. Changing a horizontal spacing from 0.5em to a 0.3em, or a font weight from 600 to 400. I’m not a coder by any means but I tried to help out when I could while they worked on larger development issues.

Some things we thought worked at a prototype stage also didn’t translate to build very well. The sticky nav for example became quite chunky when logged in on smaller screens. With shortening development time we discussed having a back to top button in the footer, but on the showcase page we had an infinite scroll of vines so users never saw the footer (which is why we originally had the sticky nav). However to fix this we ended up adding a back to top anchor into the sticky share which was always on the right side of the page. This solved the problem and was quick to implement as we already had the sticky share coded.

In the end

I would be lying if I said everything ended up perfectly, the reality is time is money and we ran out of both.

Some things we thought worked at a prototype stage just didn’t translate to build. We didn’t have enough time to implement new functional changes.

There were a few nice design features we wanted to implement that had to be dropped due to the way vines were being pulled into the site. We didn’t have money to pay for the additional development time needed to find a workaround.

A lot of time and money was also spent aligning the initial build to the designs, the site worked but didn’t match the designs in a lot of areas with broken spacings and inconsistent font sizes etc.

In a lot of ways the project showed me much how you can get done with a friend who shares a similar passion and vision. Mike doesn’t know about design, but then I don’t know about vines/business, so we made a good team by listening and trusting each other.

In some ways I wish we had a close developer friend who was willing to help out on the site, to put the time and effort into it on nights and weekends like we did. Primal Skill did a good job on the build to match my designs, I can’t fault them there even if they thought I was “the most anal designer they’ve worked with in seven years”, but at the same time it’s a project to them. It’s chargeable. At some point the tweaks have to end. To me and Mike we’re already thinking of phase two, how we can continue to refine and develop the site as time goes on.

For a more detailed look at some of the design elements of Brandsonvine head over to www.gandalondon.com/brandsonvine.

Text and images are based on the final design from February 2014. You can see how it looks now at http://www.brandsonvine.com

Redesigning Brandsonvine was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

Knowing when not to reinvent the wheel

I’ve previously written about how I ended up redesigning Brandsonvine late last year for an old friend of mine Michael Litman.

Redesigning his site was the primary focus at the time but we also considered the potential scalability of his rebrand. For example Brandsonvine was about branded vine content but there was the possibility of moving into food vines, film vines, dating vines, vines/video production in general and so forth.

We are Burst

About eight months after his site went live Mike decided to create a new company called Burst. He was getting a steady stream of good work and clients in from Brandsonvine but wanted to be able to move into short-form video production for multiple platforms not just Vine.

Having already established a look and feel for his previous company it came time to designing Burst and testing out the scalability of the design language that we had come up with half a year earlier.

Branding

Mike liked the idea of creating a visual representation of what the word burst meant. He wanted the logo to feel more active, with rays of content “bursting” out so to speak.

Brandsonvine had a very simple logo based around the shape of a vine (square) with a play icon (triangle) inside it. Logic dictated that any new logo for a company related to this should have a similar square logo with some icon within it.

We tried a few quick options but quickly settled on a square with a “star burst” icon inside it.

Colour wise Brandsonvine was green (like Vine) but Burst is platform agnostic so we chose a blue to complement the previous green and to allow both brands to sit well together.

Layout

Burst was envisioned as a simple one page site based on the Brandsonvine homepage, with a view to building out from this rather than trying to do it all on day one like we did with Brandsonvine.

The primary colour was changed from green to blue and the navigation at the top of the page became anchors to the sections below rather than links to other pages. The contact page was removed from the navigation and added to the bottom of the page. Images were updated and the header area became more of an introduction than a showcase.

In summary

In total Burst took about two hours to design and about two days to build, as always there was a long period of tweaking to get the build to match the designs. This short turnaround was accomplished by basing the site on an existing design and an existing code base.

As designers we love to explore and try different layouts and styles but it’s also important to create a design language which is adaptable, scalable and can live on for a client after you close Photoshop and move onto your next project.

Just one more thing…

We also jokingly discussed creating Vate which was going to be a vine dating site/app. This was another good test of our design language, this time going for pink with a heart icon within a square.

We didn’t take this any further as a) it’s vine/platform dependent b) in all likelihood Tinder is already working on this feature c) a pink heart was a bit too obvious and d) Mike hated the name Vate — I thought it was ingenious as it contained the v from vine and the ate from date but what do I know, I gave up working in advertising a long time ago. Besides, who needs another app?

Designing Burst was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to make the Destiny universe a little easier to understand (concept)

Before I go into details I want to make it clear that I love Destiny. The combat loop that Bungie created with Halo is still there: Grenade, shoot, melee, retreat, reload, repeat. Bungie nailed it some ten years ago and even close friends of mine who hate purple lasers and all things science fiction will admit that the gameplay is solid.

Having played a lot of Destiny in a short amount of time however it saddens me to say that after finishing it I had no idea what I did or why I did it.

There were robots that travelled through time, zombies who lived on the Moon and glowing metal flowers on Earth. At some point I realised that the characters giving me missions over the radio were the same characters who I had met in the tower area about five hours earlier.

Say that again

Bungie.net has an extensive list of information cards about Destiny; they call them Grimoire Cards. They explain who the enemies are and why you have to shoot them.

Getting to them is a bit longwinded however as you have to open up a virtual stack of cards then go into another stack (for example enemies or weapons) before choosing a card to view and flip over for information.

You can only access these through the companion app or the Bungie site. Destiny has no section within the game explaining anything about the games universe.

This is not the most user friendly way of showing information (a shame as the user interface in Destiny is lovely) but it is there.

Arguably the game could have benefitted by having a Mass Effect style menu option, which users could access from within the game to read up on enemies and locations once they discovered them.

Looking at the design language that Bungie created for the interface I wanted to try and come up with a menu addition that would suitably add to the enjoyment of the games universe without distracting or changing the way it currently works.

So it’s got to go somewhere, right?

Looking at the current Destiny menu it makes sense to add a new section to the far right before settings. I’ll name it Lore in keeping with the tone of the game.

A quick look at the Grimoire Cards on Bungie.net shows a LOT of information. Enemies for example break down into twelve sub categories.

The current menu design in Destiny doesn’t use the vertical plane. However you can use the thumb sticks to move horizontally across and over the viewable screen space.

In order to not break the current menu logic we need to stack the screens and avoid any vertical scrolling.

The first level of the menu will list the six main sections. From here users can click into a section and the new screen will load in a similar fashion to the current menu.

Destiny has a nice parallax effect when you move the cursor around so I wanted to keep that effect by spacing out the content and giving everything a lot of room to move around.

Once in a section the title menu is repeated on the top left and expandable areas are listed below.

By pressing on the action button users can expand an area down; any sub sections are then indented and are easily clickable. When clicked the content area on the right will update to show imagery and copy related to that area.

Another nice feature that Destiny has is the ability to rotate your character. By hovering the cursor over your character model you can use the thumb sticks to rotate them slowly. This could work in this area too depending on what the content was.

Not all content will be able to have rotatable models though, some will require imagery. For those areas I used a small image which floats between the menu on the left and the content on the right.

For areas that have a lot of copy you also need a way to read more. As mentioned there is no vertical scrolling in the current menu so vertical pagination dots would be used on the far right of the copy area to indicate how much more content there is to read. Users can click on the second or third dot to read more content.

Back back back and back

This added section works at a basic level. Depending on how you categorise the content (which may need a slight rearrangement), you’re looking at a maximum of three button presses to get to an entry, four/five if you count needing to read lots of copy.

The only problem at the moment is the top area. Destiny removes the top navigation bar when users go into a new section.

If a user had pressed the action button five times to read content, they would then have to press the back button five times to reach the main menu again, which is not ideal.

The current settings section loads content in at the sides. An example of this would be the look controls or the voice options. By having this different layout it lets users quickly exit the section by pressing on the left or right bumpers if they desired.

A potential solution is to keep the top nav bar on the lore screen at all times, like on settings, which lets users instantly exit the lore section by pressing on the bumpers. This could be annoying if a user accidentally pressed the bumpers but at the same time, it allows them to quickly exit deep content so we might have to live with this.

Oh so the wizard came from the moon

I love the menu and general interface design of Destiny. I like to look at this as a potential addition which would make it easier for users to understand and appreciate the universe Bungie has obviously spent a lot of time and money on creating.

Having to rely on a second device in order to understand the games universe is not ideal and I, for one, missed a lot of useful information when I was playing the game.

Edit: I found one of the designers responsible for the user interface. I recommend checking out Ryan Klaverweide’s work if you wanted to see some of the original design explorations.

Explaining the lore was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

Making that 73rd viewing of Die Hard a little bit more more fun

Every now and then we all have ideas. Some are good, some are bad. This is an idea that I’ve had in my head for about five years now which was born out of rewatching films and loving film trivia.

Having yet to see anyone make it, and not being a developer myself nor having access to the data that would be required to make this work, I wanted to put my idea out there in the hope that someone, somewhere, liked it and would make it all come together.

Film trivia + pop up video + shazam= app

The idea came to me late one night when I was rewatching Die Hard for the 73rd upteempth time. Even though I had seen the film countless times before there was still a lot of enjoyment to be had from lying on my sofa watching the film while simultaneously reading about it on the IMDB.

After checking out numerous films and learning a wealth of interesting trivia it occurred to me that there should really be an app for this. An app that could give you trivia on any film that you were watching in real time.

A big influence on how I imagined this working was Pop Up Video from the late 90's. It was a music television show in the UK that popped up bubbles of information on top of music videos.

https://www.youtube.com/watch?v=M4bkiihlteg

Concept

The app would be quite simple. The user would open it up, press the listen/go button and when the app detected a certain scene in a film it would pop up relevant trivia for the user to read.

Once new trivia popped up, or slid in from the right of the screen, the previous trivia would go into a stack. Users could access older trivia by swiping left to right on their screen to go backwards in the stack.

If they wanted to change the type of trivia being shown, they could access a menu and select from four or five preset filters: All, Locations, Connections or Music.

Users could also rate a fact as interesting or not, something the IMDB currently does within its existing platforms, or share the trivia on some social platforms.

Spotify could also be integrated into the app so that users could save a music track to an IMDB Trivia playlist.

Finally there could also be a night mode, for those late night scary movies, where the interface switches to a more recessed darker colour palette.

So how does it work?

There are a few technical issues to work out. The algorithm that would be needed to identify a film is a pretty big issue. How that works, I have no idea.

One of the other issues is the time indexing of trivia. IMDB lists lots of information, but for the app to work as intended, it would need to be time indexed. Users watching a film would need the right trivia to pop up at the right time.

Some of this might exist in databases somewhere but you’re likely looking at manually syncing these entries. That would require a lot of time and money, which means that the initial app would be limited in scope. You could base it on the IMDB Top 250 or potentially the top one hundred most rerun films on television but either way, it would take a lot of time to get the data syncing.

Another possibility would be some agreement with a network. For example HBO or the BBC could provide data about their films which you could use to create a partner app or indeed a HBO/BBC Trivia app on their own away from the IMDB.

You could of course make the app a lot simpler. If a user manually searched/typed the film that was on and dragged a slider to indicate where they were in the running time, it would avoid the listening algorithm issue. However it wouldn’t account for adverts or those lovely channels that break up a film with a 9pm news bulletin.

A more logical extension of this idea could be an addition of a stream service like Netflix. This has the benefit of not needing the listening algorithm as the trivia would be time indexed to the film playing. The app could be part of Netflix or an addition to a smart television/console.

So there’s my idea. This is very much a top level explanation of how it could look and work but if anyone has any thoughts, or knows how to make it work, please let me know.

Amendment

I posted this idea in the IMDB Community and discovered that this feature does already exist, albeit only on the Amazon Firefly or Amazon Kindle devices. Hopefully this feature will be accessible on other devices in the future.

IMDB Trivia was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

And why it’s sometimes a good thing

I’ve been freelancing for almost four years now and have noticed an interesting pattern of late in some of my contracts.

I leave them early.

Now at first this might seem like an odd thing to admit but having thought about this I’ve realised that it actually has benefits for both yourself and the client.

It exposes work flow issues

If you were hired to do site design, because the agency or client loves the site work in your folio, then it stands to reason that you would be doing that type of work when starting a contract.

If you are in fact sitting around with nothing to do or, as has happened a few times to me, resourced onto non site design work (like powerpoint presentations), then it stands to reason that someone, somewhere got the work flow and planning wrong and that you are in fact not needed.

It shows that you’re not just about the money

We all like getting paid. As freelancers our day rate matters and I would be lying if I didn’t admit to doing a few jobs here and there that were creatively lacking but financially rewarding. It’s the balance that we strive for in our work. After a few contracts we hope to have made a good amount of money and have some good work to show for it.

If you’re hired to do site design and find yourself working on everything but site design then it’s not exactly a productive use of your time nor skill.

By flagging this it shows that you value the type of work that you do/offer and that you’re not just there to fill a seat and do whatever is given to you to get paid.

It can be educational

If you’re at a senior level but find yourself doing pretty menial, junior level work, then flagging this with your agency or client can have a positive effect in educating them on what work is actually worth.

As an example one of my highest paid jobs when I started out freelancing was changing copy in a static banner, not even animated, over the space of about five days (suffices to say I had a lot of downtime).

I explained to the client (who to be fair were used to above the line work and not digital), that this was something that pretty much anyone with Photoshop and half a brain could do in about five minutes. Thanks for the money. Call me next time you have a more suitable brief (which they did, and it was far more rewarding the next time I went in).

It’s a win win situation

If you feel like your current contract isn’t shaping up as expected then there’s no harm in looking around and seeing what else is out there. Always remain professional and continue to work to the best of your ability however. It’s a small industry and acting unprofessionally, no matter the reasons, will come back to haunt you.

If you find a new contract then you can move on after an appropriate handover and notice period at your current place of employment (which is normally a week in my experience). The agency/client can then continue without you or replace you with someone more suitable.

If you don’t find a new contract then you still have an active contract to fall back on which pays the bills.

Conclusion

Not all contracts are going to be amazing. As I said it’s all about balance. Some will be good, some will be bad. Some pay well, some don’t.

In general it’s important to try and do work that you enjoy and which pays well so if you’re not happy in one of these areas then don‘t worry. There’s no harm in moving on.

Note: This post is about the rare occasions when you’re not being fully utilised. When you signed up for something which turns out to be vastly different then what you expected. When you join a project at the wrong stage and so forth.

Essentially it’s about making sure that you do the right work for the right people and moving on if you’re not.

Likewise as we act professionally it’s important that agencies and clients do the same. If you’re going to hire someone for site/app experience then give them powerpoint for two weeks, don’t be surprised if they leave. If you hire someone for site/app experience and the project requirements change, let them know and work out a mutual notice period rather then waste their time and your money.

Leaving a contract early was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

A user interface concept on how to make weapon and emote selection easier in Destiny.

Note: This was a short one day design task that I set myself when I had an unexpected break in some work. It was an idea that I had for a while. As a big Destiny fan I appreciate and admire all of the design work that’s gone into the game by the many talented artists and designers at Bungie. This was mostly for fun, but also to make me think a little outside the usual site/layout work that I do on a daily basis.

Problem

Players need to access their inventory to change weapons and emotes.

Weapons are split into three classes. Primary, Special and Heavy.

Each class has four additional subclasses -

Primary
Hand Cannon
Scout Rifle
Pulse Rifle
Auto Rifle

Special
Sidearm
Shotgun
Fusion Rifle
Sniper Rifle

Heavy
Sword
Machine Gun
Rocket launcher
Heavy Fusion

Added to this each class slot has space for 9 weapons, so a player could have up to 27 weapons on them at any given time.

However the current game only allows players to have one weapon type of each main class equipped, which they can switch between by pressing the triangle button on the controller.

So out of 27 weapons players can only quickly access 3.

Players can also emote to other players, such as waving, bowing, dancing or slow capping. Pressing right, up and down on the d-pad enables players to use their default emotes.

Players can set one custom emote within the game and use it by pressing left on the d-pad. Changing their custom emote requires them to access the menu, navigate to the emote panel, then equip it.

Both weapon and emote selection is limited and cumbersome.

Constraints

For this task I sketched out some initial exploration and gave myself one working day to come up with a general concept which would fulfil the following criteria.

1. Solution needs to work within the current Destiny menu interface.
2. Additional interface work needs to be kept to a minimum.
3. Any controller buttons remapped need to be low functional buttons which are not needed for core gameplay.
4. Players still need to access the games menu for routine equipping of items and equipment, so the solution needs to be an addition to the game, and not a replacement for, any current menu system.
5. Any system created needs to be modular and useable for all weapon types and emotes and should still be able to work with other inventory items such as ammo or consumables.

Solution

An additional icon could be added to the bottom of the weapon info panel which enables players to add a weapon to a hotkey slot which they would access later on with the d-pad (which is currently reserved for emotes only).

In order to maintain gameplay balance and make it a quick selection process we could limit the hotkey slots to four — conversely this also fits into the number of subclasses for each weapon class which would enable players to quickly switch between each of their three weapon classes and four subclasses.

This would essentially allow players to quickly access 12 weapons as opposed to the current 3.

Primary weapon class

In this example primary weapons will be assigned to the left d-pad so the icon has the left segment lit up.

Once the player adds a weapon to the hotkey by pressing left on the d-pad, the icon at the top left of the four blocks would update to signify that a weapon has been added into that slot.

Players could continue to go though their inventory adding up to four weapons per weapon class.

Like the current locking mechanism in which players can lock a weapon from accidental delation, which is enabled or disabled by pressing on the right thumbstick, any hotkeyed weapon would need to be removed in the same fashion.

So if a player selected a weapon and hotkeyed it, closed the menu, played the game, decided they didn’t want it as a hotkeyed weapon anymore, they would need to go into the inventory and unselect that weapon by pressing on the d-pad again.

When a weapon is deselected it would leave a gap in the hotkey icon to indicate that there was now an open slot for another weapon to be added.

In theory any weapon could be hotkeyed within a class, a player could decide to hotkey five assault rifles for example, but the idea here is that they would choose one of each subclass. Ultimately it would be up to the players to decide which four weapons within a class they wanted to quickly access.

If a player had filled up all the available slots and tried to add another weapon they would receive an error.

Special & Heavy weapon classes

Special and heavy weapon hotkeying would work the exact same way. The only difference is that the hotkey icon would have the appropriate segment lit up to indicate to players which direction to press on the d-pad to hotkey a weapon.

Hotkey menu

In terms of how this would work within the game, players would press on the specific d-pad direction to access the hotkey menu.

The full d-pad options are -

In the example below the player has pressed on the left d-pad which has brought up the four primary weapons they had added into their hotkeyed slots earlier.

As per all menu’s in Destiny the cursor is always centered on load, which enables players to quickly access the four weapons with the right thumb stick on the controller.

Destiny only allow’s players to equip one exotic weapon (the most powerful weapon class, represented by yellow) at a time.

It‘s likely that a player would try and equip, for example, an exotic primary when they already had an exotic special or heavy selected. If this was to happen the player would get an error message when they tried to select the second exotic weapon.

An added benefit of using four weapon slots per d-pad is that players could also quick tap to get the next weapon in the hotkey slot.

For example a long press on the d-pad would open the menu like below.

A short press on the d-pad would switch from whatever weapon the player currently had equipped to the next one in a clockwise direction.

In this manner players could quickly cycle through 12 weapons by pressing left, right and down on the d-pad numerous times.

So about those emotes…

Emotes would work the same way. As these are not essential to the balance of the game you could have more then 4, possibly 6 or even 9 depending on the legibility of the icons within the emote panel.

The beauty of reusing this menu logic for the emotes is that players can quickly switch between emotes which is extremely useful in PVP games.

When someone kills you with a precise headshot from half way across the map you can bow. When someone accidentally falls of a ledge you can slow clap. When your team is loosing 3200 to 17809 you can drop to your knees and cry.

All of these emotes can be quickly accessed with the press of two buttons. No need to access your menu and equip/unequip emotes during a game like you do currently.

Conclusion

I’m sure there are many reasons why Bungie never implemented a hotkey solution like this but I think it’s a valid addition and could work well with some refinement and testing.

As this was a quick concept that I set myself I welcome any and all feedback especially from fellow players.

Hotkey menu concept was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using augmented reality to show us what was

Concept

Using location data and three dimensional modelling, create a representation of an object/place/building that used to exist in our world in the past but which doesn’t anymore.

Examples

Hitlers Bunker in Berlin (now a car park), parts of the Colosseum in Rome (damaged over time) or the Duckbill stone pedestal in Oregon (recently destroyed by vandals).

User flow

Once opened by a user (manually, or from a location based notification if the user has background location sharing turned on) the app will automatically search/confirm it’s location and display the stepback available to the user.

Users can press on “Tell me more” to read a brief summary of the object/place/building they can view (pulled in from Wikipedia).

Users can also press on the “Take me back” button at which point the app will begin to load in the data/model files for that location.

Once loaded users will be promoted to rotate their phone for optimal viewing.

Once rotated the apps interface will recess. Users can walk around the object/place/building that they can see in their phones screen to have a three dimensional view of what used to be there.

Closing thoughts

I’ve had this idea for a while now, going back to when Google first started using computer generated buildings in it’s maps. I’m pretty sure there was a site that did something like this but a quick search didn’t seem to provide any good, current apps.

In any case this was a quick design exercise much like my previous IMDB Trivia Concept or Destiny Menu Concept so as always, thoughts and opinions are appreciated.

Also if anyone can make this happen, let me know.

Note: I used the Duckbill as an example as it was easy enough to Photoshop in the short amount of time I wanted to spend on this. Something like Hitlers Bunker would be a far better use of the app in a real world situation.

A step back in time was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.

Some thoughts and exploration on the Addison Lee rebrand

Like a lot of people in London I’m familiar with Addison Lee, one of the largest private hire taxi firms in London. Their black people carriers with minimal branding have caught my eye whenever I’ve been stuck on a bus or walking past traffic for the past ten years.

Perhaps not as synonymous with London as the black cab they are nevertheless an integral part of London.

It stands to reason that in this competitive post Uber app world of taxis they would rebrand. And rebrand they did.

Goodbye winding road

London based Whistlejacket was commissioned to work on the rebrand in January of this year. Their brief, according to Design Week, was to move the identity on from the original design completed in the 1970s.

Kathy Kielty, Creative Director at Whislejacket, says that “The yellow is a visual shorthand for taxis and because the brand is often seen on the streets on cars that are passing by quickly, we also wanted something that stands out and grabs your attention. The division between the A and the L also represents the two sides of a road, in a nod to Addison Lee’s original logo”.

Valid points but for me two immediate things sprang to mind.

• London historically uses black to represent taxis. Not yellow. That would be America. Three rival taxi apps in London, Kabbee, Hailo and Gett, have seemingly come to the same conclusion about the colour of taxi’s and are all using various shades of yellow for their brands.

• The division between the A and L creates two yellow lines which is normally associated with no parking.

Further to these two initial thoughts the thing that struck me most about the rebrand was the logo treatment which is essentially a yellow A and L.

The quirky winding street from the original logo has gone. The type treatment itself is nice, it feels more modern and premium, but doesn’t seem to work too well with the new logo.

Hello again winding road

Based on these observations I quickly put pen to paper to think about a logo which has two core principles.

• Retains the spirit of the original logo
• Is simplistic and adaptable

This is what I came up with. By no means a complete or finished brand but something which, in my opinion, modernises the brand while also retaining some of the heritage that’s been built up over the past 40 years.

The final treatment is easily seen as an A and L as well as a road.

The start and end points of the line are on the same plane to signify the linear journey, going from point A to point B.

They could also be extended to create repeating patterns.

The logo has a simple animation treatment which reinforces the idea of movement.

The logo can also be used as a loader which loops back and forth, like a journey to and from two locations, which can be used when the app is looking for a signal/searching/loading.

Original rebrand can be viewed and discussed at Under Consideration. Thanks to Emma Kingsnorth for help with the logo animation.

Note: Having worked at a lot of agencies, and on some rebranding projects in the past, I’m under no illusions that the final treatment delivered to Addison Lee was by no means the agencies first, preferred or ideal solution. Everyone has opinions. Working with large corporations normally results in a lot of opinions. My exploration of the Addison Lee brand is not meant to cause offence to anyone at Whistlejacket. I have no idea what the full brief was or what the feedback was during the design process. I simple had an idea that I wanted to briefly explore.

Taxi taxi was originally published in Gandalondon on Medium, where people are continuing the conversation by highlighting and responding to this story.