How can a platform renewal change company culture?

DHL approached us to renew their DHL.com platform in full and during the discussions and estimations we recognised the need for really change the traditional approach for a big platform project. 

The DHL internal project team was ready for a change.

Instead of spending a year in just designing the experience and hammer the design through the political structure of the client, we took the agile road: Let’s design and build a beta site, and test this with real users and that voice of the DHL customer would help to drive the new portal into more customer centric direction.

This meant that we needed to design a system that would adapt of course to different screens but also that we couldn’t just go and design templates. We needed to create a design language for DHL that could be used in various different situations and templates. We decided to go with Brad Frost’s Atomic Design approach, that is a toolbox for creating a design system, all responsive and mobile first. 

The benefit is that when working with a design language or a design system, is that you can design and build elements and components that match to each other.  

This approach turned out to be a real winner in getting the refreshed brand into the digital platform and get the designs fast in the browser, where our front end designers were able to build the designs quickly as responsive prototypes. These helped the stakeholders really understand how the website was going to react in real devices. It also helped us to quickly try out different solutions straight in the HTML without the Photoshop ballet in between. The communication between designers and developers was crucial to the success of the approach.

With the new components the Business Unit website owners can create a multitude of different pages, since the templates are dynamic and can be built from different components just by combining as seen fit. This gives the editors more freedom and still keeping the websites on brand and consistent.

Drumming For The Social Good

On one Thursday I found myself on a plane to the Golden Drum Festival in Portorož, Slovenia.

Razorfish was invited to talk at the 22nd Festival with the theme “Transformation”. The topic is very close to the theme and message Razorfish has been talking in this year and the topic of the talk I was going to give was aptly named “Toolkit For Transformation”. The Festival is held in the beautiful Slovenian coast and the scenery was very nice at the hotel when I arrived.

Friday morning started the program with Jason Romeyko’s talk Curators In The Age Of Now. The talk focused on the modern age and it’s challenges and how to be a Creative Director in this age. He pointed out that creative direction was more like the curator at a museum, a person who has the guts and vision to pick from a vast pool of creative output the ones that make a statement and add to the overall story that the museum wants to tell with it’s exhibitions. I found this parallel very good.

He also set an example that to create good work you need to invest yourself and do good. He himself was pushing for Vangardist Magazine’s HIV+ awareness edition printed with HIV positive donated blood and he believed in the idea so much that he signed a paper that he’d lose he’s job at Saatchi & Saatchi if the campaign would crash and burn. Of course it didn’t. The project was one of the Grand Prix winners this year.

Another great talk was Harjot Singh bringing us to the basics of good marketing. Through common sense he outlined the military past of the Madison Avenue era of advertising and leading us to the age of Meaningful Marketing. A very fun and real talk.

My talk went smoothly and was a great to talk about the shifts in the industry to come and how as creatives we can prepare for the shifts.

The day ended with a massive award ceremony where the majority of the winners had a real social aspect and a wish to help out the ones the campaign involved. From Turkey the Vodafone Red Light Application 2.0 would help women that suffered domestic violence and from Serbia “Button for Help” tried to take on the issue of human trafficking with a button that helps the victims to send her data to border police and Interpol. The jury did take stand for socially good campaigns this year and it’s refreshing to see that advertising can have a positive impact on people’s lives while being successful campaigns to the companies that created them.

After the ceremony the final party went on with local electronic musicians showcasing the best beats.

Creativity: Excitement and Despair

There’s a notion that creativity is something we’re born with. Some people have it and some people don’t. Every day we hear people saying “I’m not the creative type,” and in the office world there’s still a divide between creatives and non-creatives. Creativity is a process, not an aptitude.

We love to put people into boxes from the start. Boys play with cars and like the colour blue, while girls go for dolls and prefer pink. To debunk this, let’s look at us humans. We’re born as creative beings: we sing, write, dance, cook, build, design, solve problems, and the way we embrace the unknown has been an important factor in our evolution.

We create by remixing

We have this romantic notion that creative ideas are born out of the blue, but in fact they’re remixed and evolved versions of ideas that we’ve been exposed to over the course of our lives. We mimic, transform and combine ideas to give them new life. We have an unconscious thought process that takes something we’ve experienced and turns it into something new.

The process of creating something begins with intense excitement and energy about the new thing or idea we have in our heads. But the next steps quickly bring us to despair. How do I do this? How will I solve this puzzle? What’s needed here? You have to make the decision to just do it, to approach the challenge head first. Being creative means you’re willing to take risks and embrace the failure and uncertainty that comes with them. Doing something new is seldom the path of least resistance, so be prepared to fail. Don’t get married to your ideas, but be prepared to let go. If someone criticises your idea, it doesn’t mean they’re criticising you. It’s all part of the creative process.

"Why do we fall, sir? So that we can learn to pick ourselves up." - Alfred to Bruce Wayne in Batman Begins.

Getting past the blank page and reaching insight and results is easier if you sketch, take notes, go outside, wander, give yourself time to think and breathe. This incubation stage is important, taking distance from the task on hand and returning to it later on with even more creative ideas.

Creativity isn’t worth anything if ideas are not realised, so doing the actual work is one of the most important phases in the process. It’s the time to transform ideas into a presentable form. Ideas are fragile, so it’s important to craft the message you want to get across with care. Too many great ideas are never realised because they’re packaged or presented the wrong way. 

Creative Confidence

So if everyone is creative, why do some claim to be more creative than others? Well, creativity is like a muscle, you have to train to get better. Push actively for new solutions, apply design thinking methodology to problems, draw, do mind maps, whatever is your medium. I’ve been reading Tom and David Kelley’s Creative Confidence and the main point of the book is that everybody is creative, you just have to find it in you. Once you grasp that you are creative, a whole new world opens up to you. So the next time you see someone working on something with Microsoft Excel, you might be surprised to find out what it can do in creative hands. 

The Internet of Things

On 13 September, Frantic took part in Helsinki Design Week 2013 by having an open house and showing the visitors several demos of different gizmos that our designers and propeller-heads had envisioned. We also demonstrated a few new devices that we think we can build services on top of.

Internet-controlled Scalextric car track

Racing: fast cars, stench of motor oil, screeching tires, life-endangering stunts on a slick track and champagne for the winners? It can be that, or something much more exciting.

To showcase how to connect internet services into real-life devices we took two Rasperry Pi minicomputers and connected them to a classic Scalextric car track. Each Raspberry Pi computer has a custom web server software in them and controls one track. Once loaded to a mobile phone's browser it hooks into the phone's orientation sensors and sends the sensor values to the minicomputer via web. After that the phone's orientation regulates how fast the car goes, via internet.

It’s really inexpensive to connect internet to real-life devices, and writing the custom software is fairly straightforward. We use the same techniques on the client's sites daily.

We are preparing to publish the implementation instructions and software Open Source on GitHub. Stay tuned if you want to have your own internet-controlled Scalextric track for a Christmas party!

More on the subject from my presentation about IOT

Responsive design in 10 steps

Mobile web is already here, and it can no longer be ignored. So how to prepare for this? The web is changing and we need to change the way we design for it.

This article does not dwell on the nitty gritty technical stuff and code of responsive design; if you want to read about that I suggest you start by reading Ethan Marcotte’s post about the fundamentals:http://www.alistapart.com/articles/responsive-web-design/

If you’d like to see responsive design in action, you don’t have to go very far. We designed the new Frantic website with the responsive mindset – just try resizing your browser window, and see what happens!

1. Plant the seed

Just start thinking that the site you’re creating is going to be viewed on different devices and, more importantly, in different contexts. The users can be surfing with their mobile phones on the go, or checking the site out on the huge retina display on their new iPad while lying on the sofa. In each case the old way of delivering the content in one format is somewhat obsolete. Knowing that there are variable screens and ways of use will spark new ideas about the way your content can shine.

2. Get cracking!

Start developing your content with context in mind. What do you want to say when the screen is huge or small? What will the priorities be? This time you really have to step into the user’s shoes and think of all the possible ways of use. Wireframe these stages, where the site is different, and prototype with tools like Twitter’s Bootstrap or Zurb’s Foundation. They will help you take your wireframes to the next level and help you understand the way fluid grids work.

3. Do teamwork. Seriously, do it.

The lone wolf tactic does not work here, so teamwork is needed from the start. Designers have to talk with developers about the solutions that are on the drawing board. Nobody likes last-minute surprises that need to work on multiple devices and browsers.

4. Create a design language

How to design for a vast number of devices? What are they? Should we make different visuals for all of them? No. Create a design language that will be consistent on all of the devices; it still may vary a little from device to device. 

5. Simplify and get to the point

When browsing with a mobile device, users tend to want content right away, so keep it simple and straightforward. Take the load times in count and hide stuff that the user with a mobile phone does not need. 

6. Mobile first

The mindset of creating content for mobile first creates focus and opportunity to make the desktop version come to life, while the core idea of the website is optimal for the smallest of screens. 

7. Test as much as possible

Test your solution with the devices at hand and test it on the go, just to get a feel for the content while you’re out and about. 

8. Pick the right tools

To help your workflow there’s many tools, for example Adobe Shadow, that help you preview the code and designs on multiple devices at once. These come in handy when you don’t have a testing server.

9. God is in the details

Be ready to clock some extra hours to fine tune the details of the content, visuals and code. Add special treats for retina displays, Easter eggs for the desktop users, turbo boost the analytics and check the error pages and Humans.txt file. 

10. Future friendly

What next? Your site should now be ready for a myriad of situations and displays, and maybe in the future your food blog will be on the retina screens of modern fridges or an automotive fuel saver application page will be found on electric vehicle dashboards. Let’s start making the web future friendly.