A blog about design & technology by Opoloo
Feed-icon-28x28

Hook 010

Opoloo’s Link Digest on Information Architecture

The awareness of the term “information architecture” has declined significantly in favor of “user experience”. That’s okay, we need new hobby horses every once in a while. Nevertheless, the foundation of IA is so immensely relevant (and I think the need for good information architects is undiminished) that a solid understanding of it can improve anyone’s workflow. As Peter Morville says, everyone’s an information architect. We have to be, so why not improve our skills a little?


01 “A Brief History of Information Architecture”

by Andrea Resmini & Luca Rosati / Journal of Information Architecture

“When we live in a world where relationships with people, places, objects, and companies are shaped by semantics and not only by physical proximity; when our digital identities become persistent even when we are not sitting at a desk and in front of a computer screen, then we are reshaping reality.”

A comprehensive account, historic and readable all the same, on how IA was born and how it matured to its current state, from information design in the ‘70s to pervasive and ubiquitous IA today.

02 Responsive Day Out: Oliver Reichenstein on Container Systems

on Huffduffer

“Information Architecture is horribly boring and depressing. [But] when you do it with a container system, it’s a little like cleaning your kitchen, you know: when you’re done, you feel like you’ve actually achieved something and not made any foul compromises.”

Oliver Reichenstein on containers, structure without content, taxonomy decisions that result in confusing navigation. A wonderful and funny talk on basic IA techniques that can make all the difference. While you’re at it with time on your hands, also watch his wonderful talk on “Information Entropy” held at Smashing Conference a couple of weeks ago. There’s some slides to that, too.

03 “Information Architecture for Products”

by Abby “The IA” Covert / at UX London 2014

“Simplicity can be complex.”

A slide presentation by Abby the IA that covers the systems of meaning-making, organizing, and vocabulary concerning their importance for Information Architecture. These lucid slides are intended to increase our awareness of the questions we have to ask when we try to make a product that makes sense to its users.

04 “A Shorthand for Designing UI Flows”

by Ryan Singer / on Signal v. Noise

“As important as they are, flows are hard to communicate during the design process. Drawing out every state of a flow is too time-consuming. And drawings become instantly outdated as screens change.”

Ryan Singer, one of the most prolific user experience designers of our day, wrote this five years ago, but what he has to say has aged really well. He introduces a shorthand for conceptualizing UI flows.

Compare also these amazeballs slides on “How to craft clear user interfaces”.

05 “The Difference Between Information Architecture and UX Design”

by Darren Northcott / on UX Booth

“You’re probably thinking that you need a good IA in order have a good UX. Exactly.”

User Experience Architect Darren Northcott explains the confusion between Information Architecture and User Experience and clears it up.

06 “Complete Beginner’s Guide to Information Architecture”

by Andrew Maier / UX Booth

A comprehensive overview, quite old already by internet stadards, but a good start into the subject matter nonetheless.

07 Intertwingled

by Peter Morville

In his new book, one of the founding fathers of information architecture investigates the inter-relationships of technology, nature, urban structures, society, life and systems and much more. It is a manifest of connectedness via information and well worth your time. Also, do read this interview with him and Timothy Jaeger on Medium.

Discuss this article at Google+

A word on UX & IA

Or: how to make sense of anything

Working with UX, information architecture, and content strategy, it’s sometimes hard to make people understand what we’re really doing. That’s partly because these disciplines are young and constantly evolving, and because our ideas about them differ widely. Here’s an attempt at making clear what we talk about when we talk about our work.

In various conversations we had recently, one word somehow always pushed its way forward as we were talking about past projects or having first meetings with our clients. That word is “clusterfuck”.

Want a definition? Thought so:

clusterfuck, n. A chaotic situation where everything seems to go wrong. It is often caused by incompetence, communication failure, or a complex environment.

Synonyms: omnishambles, imbroglio

More often than not, our clients find themselves clusterfucked. Most of the time, they don’t know it yet—they just notice that something is wrong: sales are going down, people have stopped using their service, their competitors have gained ground, etc. But that is, of course, only a symptom of the clusterfuck-disease.

“Incompetence” or “communication failure” sounds very harsh, like someone just did a shitty job and then made a mess of a conversation about it. But it’s not that easy: a clusterfuck situation is where one problem begets another, and changing something about one of them will affect a whole bunch of areas. In a word, it’s complex.

That, however, is not anybody’s fault in particular. Websites, interfaces, and software tend to be entropic, striving towards chaos (even if, or especially when, we throw in more content, features, and functionality over time). And frequently, we’re so terribly immersed in fixing one problem that we don’t notice how chaos has already taken over.

But that’s a big part of UX, IA, and CS: being able to do the right things at the right time, planning why you need what, when, by whom, where it goes and what happens with it. Some of our clients are well aware of that, but there are just so many options and possible actions to be taken that all of this can easily result in clusterfuck. And no, there simply is no easy way to tackle this. There is just the long hard stupid way.

So what we as user experience designers or information architects often do is cleaning up. We take big, complex, overwhelming, unstructured, cluttered, noisy, messy things and re-order them. We take clusterfucks of information, screens, UI components, services, code, ideas, communication structures, discrepancies in metaphors, message and branding and we tidy the shit out of them. We un-clusterfuck.

How?

Every huge problem can be broken down into smaller problems. Then even smaller problems. Until it doesn’t get any smaller or until you have understood the core of one of the problem. You make decisions. Arrange. Re-order. Prioritize. Build small solutions. If you think those solutions are pretty decent, test the hell out of them. Then you build bigger solutions by combining small ones. Out of those, you build one of the best possible solutions within your constraints.

Sounds easy enough? Almost a litte too easy, I’m afraid.

Indeed, because this approach relies exclusively on reduction. As information architect Peter Morville reminds us in his new book Intertwingled, reductionism has worked so well for two-and-a-half millennia that it has blinded us to alternatives. And some problems cannot be solved by reductionism. We also have to think in systems:

“While conventional thinking uses analysis to break things down, system thinking relies on synthesis to see the whole and the interaction between parts.”
—Peter Morville, Intertwingled (p. 16)

Thinking in systems looks at the interrelations, connections, and processes of information; in other words, at its context. So we don’t only have to ask how we can reduce complexity to tackle our clusterfuck problem, but analyze what we analyze, keep our environment in mind, and understand the sum of the parts of a problem.

To close with one of Morville’s key messages: Everyone today must be an information architect in their own right, because it’s a core skill for survival in our information-overload world. Using that word “clusterfuck” made clients suddenly understand that they, too, are UX designers and information architects, albeit on a different level, and they were able relate to our work much more easily. Now, making it your job because you just love to un-clusterfuck is a different matter altogether but that’s essentially what any good information architect or user experience designer is there for.

I sincerely hope to find “un-clusterfucker” in job descriptions in the near future, I want to hear people say that making breakfast was total “omnishambles”, and I wish that “clusterfuck” would make it into the active vocabulary of any project manager, designer, and developer, let alone UX persons or IAs. Sometimes, just one beautiful little word is enough to help people understand a complex process much more easily.

Discuss this article at Google+

User Experience is King

An interview with Taylor Ling, Designer

Taylor Ling is a passionate advocate for great UI and UX Design. Famous in the Android realm for his (re)designs that focus on clarity and usability, he is frequently invited to speak at conferences all over the world.

Taylor’s blog androiduiux.com is one of the most substantial resources for inspiration and wisdom concerning Android design and development. On Google+, he shares profound insights into best practices in Android, UI&UX, and especially the new Material Design.

We jumped at the opportunity of talking to him about User Experience Design, the future of Android Design, about becoming great at what you do by just doing it, and the responsibilities of a digital designer today.


A couple of weeks ago you were appointed an official Google Developer Expert (GDE). Congratulations! What’s your role and responsibility there?

It’s not much different to what I’ve been doing all along: sharing tips and tricks, engaging with the community, helping out with design questions. I talk to designers who are looking into Android Design, or are interested in working with Android in general. I try to figure out how designers can help out developers to realize some of the more complex design stuff. So becoming a GDE has made not much difference, for me at least.

“What I took as my aim when I became a GDE is to help reduce the gap between the designers and the developers.”

Bridging that gap is so important, because most of the time the designer will come out with an awesome design, but the developers have no idea how to implement it. The main problem is that they don’t understand why we do certain things. So as a GDE we can jump in and tell designers: “Hey, besides creating awesome designs, you have to let the developers know why you want something to look like you envisioned it, why this is important for user interaction, why this icon is meaningful. You can’t just use another icon to represent this action, because...” and so forth.

Many times I see people from different design backgrounds, like print designers or graphic designers, coming into the mobile app space. Of course, I mean, this is still the thing that’s growing. But most of the time, they bring issues that they have experienced before to mobile app design, without actually knowing the fundamentals of it, without knowing what the developers will need from them to transform their design into code, because they often lack knowledge of the design guidelines. So we try to deliver this message to blog posts, to conferences, and so on: make something the developers know how to use. I often hear developers saying: “The designer sent me this design, but he never sliced the assets, so now I have to do it myself in all the different densities.” So we try hard to share our knowledge, our experience, problems we have encountered.

Three years ago our aim was still to create a community. Now there is one—not huge, but sizable I’d say. And you can learn things there. So the GDE is a more formal way to get those messages across. To minimize the gap between the design and the development part.

“Those two guys, the designer and the developer are not supposed to be enemies, but allies—they’re inseparable. Only then they are able to create awesome stuff.”

Your focus is on UI and UX design. Recently, UX has become such a buzzword that nobody really knows what it means anymore. Everybody wants to be a UX designer, because that’s the cool thing to be. So, for you who has been immersed in that for a long time, how would you define UX?

This is always a very tough question and people will have different viable answers to it. Many people know that the user experience is important, but it’s something quite intangible. It’s not something you can see. It’s in the finished product.

You know when you have a bad user experience, but you don’t notice when you have a good one.

Exactly. When we talk about user experience, it’s always about the bad one. No one will remember the good user experience, because they just achieved what they wanted. If it’s a bad user experience, you will remember it for your whole life and say “Oh no, not this product, that was horrible.”

By definition, of course, it’s simply the experience that the user has. But if you talk about what UX Design actually is: it means crafting a mindset into the entire process and organization. Having sympathy with the user, understanding that the experience of the user is equivalent to how successful your product is. That doesn’t mean your product will be successful just because the users love it, but it’s the first step.

“UX is a mindset, and it’s relevant for every part of the product: interaction, interface, copy. Every single part plays an important role in crafting a good user experience.”

I have one friend, a UX advocate, who goes across the country promoting the importance of UX. He actually went to a job posting site and looked for all the jobs related to UX Design. Then he went to the interviews. To every single one, just to do research. He wanted to see how much these companies actually understood about what they needed. In the West it’s probably a little better, but in this region, he found that 95% of the companies were looking for the wrong person. They were looking for a unicorn: a guy that can do development, design, and everything else all at once. That funny little experiment shows we still have a long way to go to push UX forward. If you want a good user experience in your product, it’s not just hiring one person who sits around and your product will automatically be awesome or loved by people.

How did you know you wanted to do UI & UX Design? How did your career path come about?

A lot of people are surprised when I tell them I have a biomedical engineering background. And I loved that. It’s a lovely cause learning about anatomy combined with engineering disciplines. But in my country, it’s tricky finding a job in this field outside the lab. And I didn’t want to be a researcher in a lab. So boring. So I was thinking about what I could do with my life. Design was something I was always interested in, even before university. I loved drawing, even won a few awards in school. It’s in my blood. I love art.

I got my first job as a functional analyst, which is a job that helps translating the product manager needs into a low level requirement set, so the developers know what to do. But, of course, there was no designer in the team, so I had to do the design, the layout, everything. I wasn’t aware that this was something you could earn money with.

It wasn’t until about three years ago that I started looking into blogs. I found Juhani Lehtimäki’s blog, talking about Android design and thought “OK, there are people talking about mobile interface design—that’s interesting.” At the time I wasn’t all that clear about it, because Juhani is still a developer, and I didn’t have a strong technical background, so I wasn’t sure if that was something I could do.

During that time I also got my first Android phone. A Sony Ericsson Xperia X8. It has a very small screen. I played around with it and was so amazed that I could do so many things I never imagined were possible. That was the Gingerbread era. The apps were designed somehow, but there was no consistency at all. At that time, the iPhone came out in the second generation, so I was asking myself why high-quality apps were only available on iPhone. It was very expensive. I wondered why I should buy an expensive gadget to get a high-quality digital experience. Why couldn’t I have that on an Android device?

So I played around with it a little more and eventually I got myself a Nexus S via my local mobile carrier—that was pretty much when Ice Cream Sandwich (4.0) was announced. And I was so excited about it and made my first ever Photoshop Android UI Design Kit. After some time, I decided to start a blog about Android Design, which was in June 2012—I wrote about the side drawer, the navigation menu. That was the first blog post I ever wrote. And it started from there.

“Initially, I just wanted to share stuff.”

Did you get any responses?
Yeah. The response was so good that all the sudden I knew: “OK, this is something that I want to do.” That’s why I bought that domain androiduiux.com, really dedicated to Android. It’s something I want to keep reminding myself: the focus is pure Android.

So the feedback was coming in, people actually responded, and I was happy. And it’s two guys: Juhani and Roman Nurik. They really inspired me to see that if you have an opinion on something, don’t be afraid to share it. And that’s how I got into the design thing. After one year of running the blog, people came to me and asked for help doing redesigns. I never planned anything, but then all of a sudden I was a freelance designer.

But Juhani Lehtimäki and Roman Nurik, they were far away, right? I mean, you were connected through the web, but were there any mentors in Kuala Lumpur who lent their hand and helped you along the way?

Yeah, the power of internet! About the mentorship—no. It’s all self-taught. My photoshop skills I simply learned by feeling my way, by trial and error, a few tutorials. But there was no one mentoring me. I always thought I was able to do that myself. And yes, maybe that takes a little longer, but if you do it yourself it will have a more lasting effect. You learn how to acquire new skills. Back then I didn’t have a computer, so I flipped through magazines to learn how to do stuff. My first computer was a intel-powered PC with Windows 95, and that’s where I saw all that potential.

So I’m just a little proud of myself here, because, I mean, it’s not easy.

“Of course, there are design classes, or classes about human-computer-interaction, but they take you four years—and sometimes, when you talk to people who teach these classes, you think, ‘Dude, we’re already so far ahead of you, as a community.’ Because what they learn are things that are still maturing and so theoretical. And for me, it’s really about the real experience, the real feedback, the way I actually feel when I use something digital. And as you learn by doing, you remember it forever.”

What had a huge influence on me was reading The Design of Everyday Things. That changed me and the way I think. One thing that we tend to not understand is that when we fail to operate a machine or device, it’s the designer’s fault, not ours.

But I strongly believe that if you’re passionate about something and you want to become good at it, you are able to achieve that yourself. That’s something I learned starting out and it has taken me to where I am now.

Switching from the past to the present and into the future: Google just introduced the Material Design guidelines at I/O this year, as a new direction. Is this a trend or really the future of Android. Where is Android Design headed?

One thing that Material Design has changed is obviously cross-platform consistency. I do have some doubts about that, because, just as an example: if you have an iPad, you have a very unique experience. So the doubt I have is whether the user wants to have a consistent experience or a unique one. But I have decided to ride the wave, just because Material Design is awesome, very well thought-out.

For me, it definitely is the future. But it’s very similar to when Holo Design was introduced two or three years ago. During the early stage, everyone would just follow exactly what the design guideline proposed. That’s why many apps would lack variation and innovation. If you follow what’s going on now, there are people actually doing redesigns of Instagram or Facebook with Material Design. But none of those are unique or show variation. They’re just replacing the colors and the content, and then call it a redesign. Which is not a bad thing, because it will make people realize the beauty of Material Design, but I think in the coming months we’ll see a lot of apps looking exactly like the Google apps. People are still exploring, they don’t have a clue yet. We’ll see round avatars and floating action buttons everywhere. That’s normal. But we’ll need to start thinking out of the box again.

Alt text

I still think that users will want unique experiences on desktop, tablet, and phone. I understand the consistency they want to achieve and I agree, in large parts. It’s important, but I don’t think uniqueness should be sacrificed.

Generally though, the introduction of Material Design, was mind-blowing. I’m very happy about it, because you can feel that it was created specifically for the digital space.

“Material Design brings back some real-life things into our digital life. It allows the user to interact a digital product without much thinking and processing which is very important in the long run.”

This is drawing on the difference between the skeuomorphism and the metaphor concept that they’re introducing: it’s not just depicting the real world in the digital space, but more of a transferring action.

The choice of the paper-and-ink concept, I think, may be a little confusing to some people. Because they have some unique properties in the real world: paper can fold, ink is a liquid and flows, etc. So developers and designers start asking questions like: “If it’s paper, why can’t I fold it?” Those who are not actually going through the guidelines, they might be confused. But they have to realize that the digital space is a constraint. It’s a human touch Material Design is bringing into the digital space, which I love.

“The interfaces in iOS are cold. Material Design is very focused on what the users actually perceive and making them realize what’s happening with less processing going on.”

Somehow, it’s really a human thing, I suppose: when I was in London, I went to the British museum and they have an exhibition about ancient Egypt. I found it amazing. 4,000 years ago, they already had a grid system, iconography, subtle use of color. Isn’t that crazy?

As a designer, your work has to be highly creative. How do you come up with ideas?

There’s really no ritual involved. I try to be inspired by everything—nature, people, landscape. And conversations. A funny thing is, I do a lot of eavesdropping—or let’s call it observation. Not that I would follow people around, but I like hearing what other people talk about, what moves them, what concerns them, and so on. I like to listen to their conversations. I feel that this has often helped me keep the user of the product I design in mind.

I know you have a deep interest in typography. What do you think of the Roboto redesign?

It’s good. When I look at it, it already feels more familiar, maybe because it has become more similar to some very established typefaces. And it works very well across platforms. I can already see that those minor changes have a great impact, improving readability. It looks fresh, but it’s still the Roboto you’re accustomed to. It finally feels like home.

Alt text

I like it, too. The only thing I feel a little sad about is that they got rid of the more opinionated strokes in the “K” and the “R” that gave a little playfulness to the font. But no matter. Are you reprinting your t-shirts now?

No. That’s just a part of history.

Do you own any wearables: a smart watch or Google Glass? Do you design with those in mind? What do you think about them?

Yes, of course. Before I actually owned a Google Glass I designed two Glass applications, just by following the guidelines very closely. When Google Glass came out, there were clients approaching me and asking how they could transfer their product to Glass and if I could design something special for it. That comes back to typography as well, because those wearables are terribly text-heavy.

I own the LG G Watch given out at the I/O, but so far I haven’t designed anything for that. Still, you can see the trend that people are already heading the wrong way. They try to make a phone out of the smart watch. They put in a keyboard and other processing-heavy stuff and that’s discouraging, because they’re actually doing things Google says not to.

“One thing is true, though, I think: those wearables have the potential of changing the way we think about design itself.”

What does a day in the life of Taylor Ling look like?

(laughs) I’m a pretty normal guy. Once I get up I check my news to see what’s happening in the world while I’m sleeping. I use Feedly and Google Newsstand, mainly, and of course Twitter and Google+ are good sources to keep up-to-date. Once I reach the office I check my tasks, do a stand-up or catch-up with the team. And then the daily business of research, playing around with apps, design in photoshop, etc. So a pretty normal app development cycle.

Once I reach home, I do my freelance work, and that looks about the same. My day is pretty packed. But I’m happy about it. I believe if you do more, you gain more, you experience more.

What are the tools you work with?

To be frank, it’s only Photoshop. That, for me, is such a powerful tool, because not only can you create mockups and complete designs, but it also allows you to do animations. Oh, and I use Sketch, too, but not so much. So far, nothing beats Photoshop.

Especially in Material Design we talk a lot about feedback, animation, and moving stuff to enhance the user experience, so it’s important for designers to know how to create that to be able to show developers what they actually expect from them. Sometimes I also do that with PowerPoint or Keynote.

I loved your Android Design challenge. What was the motivation behind it?

This is the second time I’ve done it, but I had the same goal in mind: promote Android Design and inspire people, show them what can be done. That’s true to my principles, too. The subline on my blog is “Inspiration source for developers and designers”. That’s the aim. A lot of times, if you give people some kind of incentive, they will actually start doing something and they might outgrow themselves.

As a designer, you want to get recognition for what you do. So I kind of already knew this would get their attention. I talked to some community friends, like Juhani and Günther Beyer, whether that was something feasible to do. And they gave me their full support by being the judges.

Alt text

I’m very happy about the participations this year. Compared to the first year, this second round I received far more entries, and more quality entries, too. So it’s already starting to mature. More people are doing an amazing job, which is great to see.

I paid for the first round from my own pocket, which was fine for me, because the designers really put a lot of effort into their designs. In the second one I had some small sponsorships from a few people.

And why I do it? Well, I’m just really a community-driven guy. I believe that when you give much, you get much back in return. And I do get a lot of stuff from them, so I try my best to give something back.

Do your family and friends support what you’re doing? Do they understand it at all?

My parents are still not very clear about what I’m doing, even though I try hard to explain it. But they are extremely supportive. One very strange thing is that they can’t really believe I went to London and Tunisia to give talks. And I didn’t expect that either.

Are you happy? What are your plans for the years to come?

Am I happy? Yeah, of course. I couldn’t be happier. I mean, I’m doing the stuff I feel really passionate about. I actually made a lot of friends I never even expected to meet. I gained much more than I ever imagined, and I’ll definitely continue to do what I’m doing now—being an advocate for my industry, trying to push the right things. I will go as far as I can, and do as much as I can.

What advice would you give someone who wants to follow in your footsteps and do the same as you do?

Train your eyes. Be picky. Be passionate about what you do. If you keep your passion alive and work with it, everything will fall into place.

Discuss this article at Google+
 

The Right to Hide

How to reclaim your digital life by setting up your own home server

“Whaddya wanna be when you grow up?”

“I wanna be like you, Superman!” answered the little boy.

“What do you mean?” asked the protector of the human race playfully.

“You can fly and you are super strong,” said the boy, beaming with energy. “... and you protect people!”

Superman smiled.

Security & Protection

“Protecting people”, mainly ourselves and our loved ones is a universal element of human culture. A mother cares for her child, the bigger brother helps his younger sister, the strong look after the weak. Most societies have enshrined the right of not being harmed in their constitution. This includes not only the obvious protection from physical damage and psychological harassment but also the protection of our privacy, which is a crucial aspect of living together in a functioning society. Despite a few opposing voices, privacy matters.

“Protecting people sounds like fun,” Superman explained, “but from what? Big, wobbly, mean aliens from outer space are pretty rare nowadays.”

The little one’s eyes glazed over with disappointment.

“Alright, alright!” The man of steel felt the need to give the boy a valuable lesson. “First of all, you need to find out who the bad guys are, which is usually much harder than you would imagine.”

The Privacy Issue

Sadly, after the Edward Snowden leaks in 2013, we have to realize that our ruling elites and governments do not protect our right for privacy anymore. Instead, every single soul on the planet is being treated like a potential terrorist and subject to general suspicion. Our use of modern technologies like smart phones and the social web enable our constant surveillance: we are observed and x-rayed in every possible way.

Every piece of information we send into the cloud arrives on a server that belongs to one of the few U.S. corporations that run the World Wide Web. During the last decade, almost all of them have joined the NSA spying program. It’s probably unfair to assume their voluntary cooperation, but since their server farms are located on U.S. soil and they must obey U.S. laws, it’s probably fair to assume that the government and the NSA are able to access all of our data whenever they want to.

“So if the good guys who are supposed to protect us don’t protect us anymore, are they the bad guys now?” The boy was confused.

Superman didn’t know what to say. While he was trying to come up with a satisfying answer, a strange-looking creature rose up from the shadows behind the two.

“That’s the way it is today, boy.” The creature answered the boy’s question with a dark, distorted voice, “You can only trust yourself!”

We have lost our privacy these days, but the right for it is still formally intact. The web that we know and love is not what it used to be anymore, it has become implausible, unworthy of our trust. All this leads to one conclusion: we have to build a new, trustworthy web—which sounds rather impossible.

“Boy, you don’t need super-strength to break the bad guys. You just need the right tools.” The man from the shadows took a glossy gadget from his yellow utility belt: “Let me show you how!”

Take Control

History shows us that every great technological advance was driven, commercialized and run by a few large companies: printing, recording, computing, etc. Nowadays, the same goes for the few tech-giants that run most of the web. History also shows us that as time passes, these technologies become cheaper and available for the masses. Today, we can all write independent news blogs, record and create music in our living room, and calculate the most complex mathematical problems with our smart phones or our home computers. The same applies to the world wide web, which basically runs on servers, open source software, and IP-routing. And, most importantly, all the necessary components are easily available for little money or even completely for free.

The following few simple steps will show you how to set up your own private web server at home, which is actually much easier than it sounds, although a little Linux knowledge is helpful. In doing so, you can help building the foundation for a new, free and private World Wide Web—run by people instead of companies.

1: Hardware

In general, a web server should be small and quiet, especially not too energy-hungry and connected to the web 24/7. My choice fell on the ProLiant G7 MicroServer N54L built by HP which you can get for 200€ or about $400—a small price for your freedom. But any similar machine will do the job. Connect it to your local network or router.

2: Operating System

Choose one of the many flavors of Linux or some other open source system as an OS. I chose Ubuntu because it’s free, easy to set up and has a huge community to ask for help, should anything go wrong.

Install it. Follow the instructions on the screen, choose the LAMP server option during installation and activate automatic updates and encryption as well. The LAMP server is the part of the software stack that runs your web apps later on, regular updates and encryption are crucial for securing your system. After a reboot your web server will be running already.

ifconfig will display the server’s IP-address within the local network. Enter the IP into the address bar of a web-browser on a different computer and you should see the Apache greetings page with the words “It works!”.
Your web server is now available in your local network.

3: Dynamic DNS

If your internet connection has a static IP you are lucky and may skip this part. Usually that’s not the case and your external router IP will change from time to time, so you need a dynamic DNS address (DDNS). From a number of free and paid providers, I chose freedns.afraid.org, which works extremely well for me:

Create an account and a domain name.

Go to http://freedns.afraid.org/dynamic/ and click on “quick cron example” at the bottom of the page. Follow the instructions in the text file. All it does is creating a cron-job with your login information.

Wait a couple of minutes and then enter your domain name into the address bar of a web-browser. You should see the same Apache greetings page, but this time your server is available from every location on the planet—only for you, of course.

At this point, you are running your very own web server!

“So what do you think, boy?” asked the bat-man. “Feels good to have control over your own life, right!?”

Confident of victory he grinned at the other man who stood in the nearby corner. Superman felt useless, somehow antiquated. His super-strength wasn’t needed anymore.

After some time, the boy finished playing with his new toy. Slowly he turned to the heroes: “Thank you very much. Now I know how to protect myself.” He left.

Suddenly the bat-man’s jaw dropped. He realized that within a second, he had become obsolete as well.

But wait, there’s more ...

I still believe that the world wide web is the foundation for a better future, but we mustn’t entrust our data and our lives to anyone else anymore. The private web is still in its infancy, but it is a path worth going down, if we want to take the web back—we only need some brave souls and make the first move.

Someday we will reach a point where we don’t need heroes for our protection anymore. In a follow-up article I will explain how to secure your server and how to turn it into a social-productivity-sharing-hosting-monster that can rival most of the cloud services that we all use on a daily basis.

Discuss this article at Google+

An Android App With Five Corners

From our portfolio: Application design for the Berliner Philharmoniker

“If classical music is to have any future, it must embrace all the media it can and find new paths to its listeners, no matter where they are and how they wish to indulge in their passion.”
—Alexander McWilliam, Director of Online Development at Berlin Phil Media GmbH

Alt text

In December 2013, we teamed up with Novoda once again, this time to create a user experience for the Berliner Philharmoniker.

Being one of the most renowned symphony orchestras worldwide, they realized the need for distributing their concerts across digital channels. Frequent live broadcasts, a concert archive, movies, plenty of interviews with conductors and soloists, and more can be found in their digital repertoire: a selection that many a fan of classical music would be eager to get their hands on.

All this content is housed in a streaming service called the Digital Concert Hall, accessible through web browsers, smart TVs, iOS and Windows apps. The last missing piece was a proper Android client and Opoloo was more than happy to step into the breach.

1. The Workshop

To understand the company, the brand, and the audience, we met in Berlin for a two-day workshop. The setup was a beautiful mix of project owners and managers of the Berliner Philharmoniker, nxtbgthng (in charge of the iOS development), and Novoda covering the Android side.

Our job was to make sure that the apps deliver their content according to the expectations of the audience—in short, to create a solid User-Experience.

During the workshop, we learned about the Digital Concert Hall’s history, their global audience, business goals and how our work would tie into their future strategies. Every idea and question that emerged was scribbled down on a post-it or typed into a text editor, then put up on the wall. Categorizing and sorting those notes helped us evolve a strong vision for the app’s information architecture and feature set.

Alt text

After those two days we headed back home, feeling great about the project. It was motivating to work with a company as respected and value-driven as the Berliner Philharmoniker. But it didn’t take long before reality caught up with us.

2. The Scope

As it turned out, the budget of the Berliner Philharmoniker was tight. After all, this was their first foray into the world of Android. Would the platform reach their target audience? Could it handle their high-quality content on a large scale? Understandably, they were skeptical about the app’s success.

With just two developers and one designer on the project, we certainly were limited in scope and features, contrary to other divisions of digital design. Then again, Novoda and Opoloo are a well-established team. Challenge accepted.

With the limitations in mind, we fleshed out a new strategic information architecture for the Android audience: give them exactly what they want, skip everything optional.

We wanted the app to be the 101 of Android development, complemented by a solid user experience, stable API communication, and smooth responsive design to cover plenty of devices. No Chromecast support, no widgets, no unnecessary extras.

3. Sketching & Prototyping

Alt text

To set the right expectations for the whole team as early as possible, our first goal was a fast prototype: we wanted to cover all the content that would make it into the first release. While one developer tapped into the Digital Concert Hall’s API, the rest of the team sketched simple wireframes and welded them together with a running Android prototype. This helped us get a good feel for the content and the layout of the application within just two days. From there, we were able to experiment with alternatives, to add and remove features without slowing down.

Alt text

4. Branding the UI

The Berliner Philharmoniker present themselves in a beautiful brand experience. Everything—from their movie covers and record sleeves to their concert house—is coherently designed with exceptional quality and aesthetics. Unfortunately, of course, their style guides were never created with Android in mind.

Alt text

Mobile and responsive designs demand a certain simplicity and flexibility to be able to work and scale across sizes and devices. Detailed patterns, high resolution images and delicate typography are certainly not what the plethora of smartphones and tablets can handle equally well.

We went though plenty of design iterations before we found the right balance between native Android components and the unique brand. Relying on a simple, dark card-layout, with some spots of yellow and red felt just right. The heavy lifting was done by the flexibility of Android’s Roboto font and the quality pictures of the Digital Concert Hall.

Alt text

5. Responsiveness & Polish

We can’t stress enough how important responsive design has become when trying to deliver a solid Android experience. The first batch of mockups started with a 4-inch device in mind. Alongside, we explored with simple sketches how those mockups would scale across screens and orientations. This helped the developers to adapt styles from the mockups while incorporating break points and layout changes from the wireframes. As we moved towards the final phase of the project, more detailed mockups and occasional reviews helped improve the quality further. Ultimately, we went back to Berlin for a final day of optimization and tweaking, all looking at one screen.

Alt text

6. Testing & Launch

The development was accompanied by a small but dedicated beta-tester group, managed via Google+. Those people helped tremendously with finding bugs, testing plenty of devices, and offering feedback on accessibility and usability. The launch on Google Play went buttery smooth and as of my writing this, the app stands at a strong 4.7 rating with more than 5,000 downloads.

Wrap-up

One thing echoed throughout all the planning and development stages of this beautiful project:

Small teams can create great experiences if the expectations are set according to the demands of the project and if they are agreed upon by all parties.

Alt text

We never tried to design the most innovative application, crazy interaction patterns, or cover every piece of content available. Instead, we aimed for an application that would give Digital Concert Hall users exactly what they’re looking for: access to the best classical content wherever they are—all wrapped in a smooth user-experience.

This is how every Android project should be approached and executed, and we are not alone with this opinion:

“Opoloo understands the Android platform design guidelines at its ultimate perfection and takes them to the next level. Not only with fresh and responsive concepts but also with a balance between UI/UX and development effort like no one else out there.”
—David Gonzalez, Senior Software Craftsman Novoda Berlin

“In all seriousness, this project has been the smoothest I have ever experienced.”
—Alexander McWilliam, Director of Online Development at Berlin Phil Media GmbH

Discuss this article at Google+
 

Hook 009

Games and the industry

This rather short Hook hovers around the state of the mobile game, its development-distribution-monetization side, and what that means for us as gamers.

01 “Analysis: Mobile games explosion comes with a price”

by Colin Campbell / on Polygon

What in the world happened to games that they’ve become a mere subject of numbers and matrixes in spreadsheets? An in-depth piece about the state of mobile gaming. And yes, about data and analysis.

“While there are still creative guys in their back-rooms knocking out surprise hits, most of the money in mobile gaming is going to performance-marketers who understand how to take a hit game and monetize it all the way down to the very leavings. The ability to navigate response advertising is not so easily found among sexy young game developers. It is the domain of people in gray suits, adapted perfectly to a number-crunching matrix where zero point one of a percent can make all the difference between success and failure.”

02 “Mobile is burning, and free-to-play binds the hands of devs who want to help”

by Barry Meade / on Polygon

This article turns against the common conceptions and misconceptions of a games industry that seems to have abandoned interest in the audience. A case for why it’s time to change tack in thinking about and executing mobile gaming, so developers can deliver great gaming experiences.

“Free-to-play producers chime that quality levels are obviously fine, "If it's making money it's objectively good, see?" Well no, not quite, shit sells by the ton every day. In the real world Burger King doesn't get three Michelin stars. Burger King gets to be happy with its revenue not its reviews, and our industry’s inability to see the difference will only pull us further into our creative vacuum.”

03 “Gabe Newell on what makes Valve tick”

by Andrea Peterson, with Gabe Newell / on The Washington Post

Some people say Valve is the future of the company. No hierarchies, no job titles, a focus on creating value for the people. In this insightful interview, Valve’s co-founder Gabe Newell talks about why they do what they do, how they manage, and how this somehow magically attracts some of the most talented people on the planet.

“One of the nice things about having pretty distributed decision-making in the company is that it tends to scale really well. You can trust that lots of good decisions are being made all the time.”

Discuss this article at Google+

Storytelling for the Web and Beyond

A short, pragmatic guide

We tell stories all the time. Unfortunately, that does not mean we know how storytelling functions. (Knowing how to run doesn’t equal knowing how running functions, what muscles and sinews and bones and nerves and blood vessels and other physiognomy must be in place to be able to do it. Fine, you say, but I can run, so why should I care? Because only when you’re conscious about it, you can study and analyze your running, and you can improve it. You’ll become a better runner.)

“Storytelling” has become a huge buzzword on the web. Perhaps rightly so: we’re storytelling animals; a good story spreads like a bushfire and then sticks with us. However, as it usually happens with buzzwords, we’re likely to lose track of what they actually mean and they become a tasteless, watered-down imitation of the original concept.

Clever people have realized that there’s a lot of money in the story. If it appeals to people’s emotions and is connected to a product, it’ll go like hot cakes. Big corporations like Microsoft even have their own storytelling departments. But let’s lay down some foundations.

What is a story?

Crudely said: a story is a design. It is the (more or less carefully crafted) sequence of events in time. Sounds terribly unsexy and obscure? It is. That’s why hardly anyone outside of literary studies talks about those definitions. But a common terminology and language is needed so people outside the humanities’ and writing sphere can comfortably talk about it. Stories belong to everyone, and it’s detrimental to think that only scholars can or should discuss and develop them. Let’s hear some definitions. Getting some common terminology straight will (so I hope) make storytelling more democratic.

Plot vs. Story

A story is the sequence of events in time.
A plot is the causal relationship of those sequences.

In a classic example by E.M. Forster, the story would be: “The king died and then the queen died.” The plot would be: “The king died and then the queen died out of grief.”

This is a much more convenient take on the Aristotelian plot, but one that encompasses a wide variety and will serve our needs just fine.

Structure

The structure of a story is very similar to what a designer or an engineer would think of as structure. It’s the map that intentionally transports your reader/viewer/listener towards a desired effect. Philosophically, the gestalt: the sum of the relationships of various parts to each other, to the whole. That may be sentences, paragraphs, statements, or arguments, as well as what we understand as beginning–middle–end.

Setting

Where and when the story takes place. Time of year, time of day, weather, light, location, surroundings: the sum of everything related to the environment outside of the characters.

POV

Point-of-view, or also “viewpoint”, sometimes referred to as “narrator” or “persona”. Note (even people who study literature get this wrong very often): in a (fictional) story, a narrator is not the author, even if she sounds like it. The viewpoint is the “position of the narrator in relation to his story”.

We distinguish three basic variations, although many different ones are possible:

  1. The omniscient narrator moves between characters, places—she knows all about the characters’ feelings and thoughts.

  2. The third person narrator chooses a character inside the story and assumes the limited viewpoint of that character. He usually knows everything about the character’s inner and outer life.

  3. Lastly, in the first person point of view, a story is told through the eyes of one of the characters.

Those various positions the narrator can assume makes for very different effects of immediacy and emotional relationship to the characters and the people who experience the story.

Hook, hold, payoff

Narratives seem to be most successful when they follow the “Hook-Hold-Payoff” model. First, the author tries to hook the reader on something. A classic example would be an underdog getting bullied at school, but resolving to strike back: that appeals to the reader’s sense of justice, she wants to know how the underdog will get her revenge. (Injustice is a pretty good hook.)

Then, suspense is built up by the underdog fighting for attention or plotting her comeback. The reader wants to know if she can make it. That’s the hold.

The payoff would then be restored order, in the form of the bullies getting what they deserve. A cathartic effect seizes the reader in the ideal case.

That is, very basically, how most stories function, in endless variations. A story may not be the most innovative thing on earth, but it could very well be the most successful.

Have a look at this beautiful example of the hook–hold–payoff model.

Some Specifics for the Web

Good stories work no matter where and when. There are some specifics for the web that should be kept in mind, though. We all know about the short attention span and the infamous alleged Ur-distractedness of web users, in contrast to the abundance of possibilities the web offers. So it’s a good idea to get to the point quickly. This is especially true if you want to sell a product or a service. (The longer a story, the more diabolically well it must be written to keep the reader reading.)

Along these lines, think about simplicity of plot and language, about sequence and causality. Think about how quickly readers can identify with the story, and if possible, how much time is needed to immerse oneself in it. Think about how closely related to the story a narrator should be, and if you have strong hook with sufficient payoff.

Also, think about readability, format, supporting media, animation. But the representation of a story is another thing.

Let’s talk about that soon.

Discuss this article at Google+
 

With the Audience in Mind

An interview with Sam Ford

If you have any interest in media thinking, entertainment, or marketing, it’s hard to side-step the work of Sam Ford. Sam is a journalist, writer, and strategist, co-author of the influential book Spreadable Media, and he regularly writes for magazines like FastCo or Harvard Business Review. Director of Audience Engagement with Peppercomm, an affiliate with both MIT Comparative Media Studies and Western Kentucky University, he is to be complimented on being a relentless advocate for the audience, always keeping in mind its needs and wants.

A seasoned speaker who is always generous with sharing his knowledge and vision, Sam provides us with some insights into his unusual career path, influences, the fun and the pain of working in the industry, writing, and storytelling.

We’re very pleased to have him as the first great conversationist of our interview series.


Sam, It seems to me that you’re doing about 5 jobs in one, all related to something digital. Those jobs can sometimes be hard to define. How do you explain to your grandparents what you do?

I went to college to study being a journalist, and I had worked for the local newspaper. My parents, my family, my in-laws, everybody understood what I was in college to do. It was very clear. As college progressed, I was a journalism major, then I ended up adding on English and Communication Studies, and Mass Communication, Film Studies — my interest really broadened to the study of popular culture.

One year, I went back home for the summer and wrote for local newspapers. While I was home I had the task at MIT to film a video introducing who I was, telling my story to the new crop of grad students who were coming into the program. So, like a true journalist would (but a bit tongue-in-cheek), I videoed different people in my hometown and had them tell the story of who I was. My favorite was, and this is the reason I’m telling this story, I interviewed my high-school principal. And he was talking about how proud he was of me, saying “I’m so proud of what Sam has accomplished and everything he’s doing at MIT. We’re all proud of him.

“None of us have a clue what it is Sam does. But we’re really proud.”

But the joke was, after spending those years in academia and moving further away from a career track that could easily be explained, I left academia and took a job in the industry. And everybody said: “Finally. We’re gonna figure out what it is that Sam does.” Then, my title at Peppercomm changed from “Director of Customer Insights”, to “Director of Digital Strategy”. Now, my title (what I’m doing hasn’t changed that much, but we keep trying to find an accurate description) is “Director of Audience Engagement”. The decision for my family is that it’s now even more impossible to tell what it is I do.

For me, “what I do” is more about the sorts of questions that motivate me. They’re about storytelling (how stories are told and how audiences engage with and around those stories). My background in studying popular culture came from studying and understanding fans and the fans’ relationships to the text being produced by a media property. I take very much that same ethos when I’m thinking about active audiences in other contexts. It is really, in cultural ways, more important to understand the audience’s motivation and interest and what the audience does with media text, than it is to focus on the producers. So much of our traditional communication’s focus is on the producer and the consumer, as if all meaning and power lies with the person who fuses that meaning into the text, while the consumer only extracts it out of things. For me, that seems to be a creatively draining way of thinking about the production of media.

Those media producers who listen, think about and understand the audience they’re seeking to reach produce much richer, more responsible, more responsive texts.

I spend a third of my time at Peppercomm doing consulting with our clients, a third of my time doing “thought-leadership in the field”, and the rest doing academic work. For the part of my time I spend consulting, I see my charge as helping companies understand that they need to prioritize the wants and needs of the audience they’re seeking to reach. The job of a communications professional is to be more beholden to the audience than the company that’s paying her. In my mind, that is advocating the larger role that a marketing and communication professional should play, which is to listen to the audience, what it wants and needs, and bring that way of thinking back to the organization to help shape the way the organization serves its audience.


How did you know you wanted to do that? How did this path come about?

I’ve always been interested in telling stories. But, as I got into college, I became really interested in how different types of narratives, different types of approaching culture connect with one another. My thought, going to grad school, was I wanted a tenure track job that focused on studying pop culture and American culture. The program I got into was this Comparative Media Studies Master’s program at MIT, which was really focused on what I was interested in: the intersection of studying culture and engaging with those who are putting content and messages out there into our culture, who are creating the media texts that circulate.

While I was at MIT, which has a focus on “applied research” (the idea that research shouldn’t just live in the ivory tower, but should impact the world outside academic borders), we were wrestling with the question of “What’s ‘applied humanities’?” That caused me to engage with independent producers, media companies, marketers and corporate communicators. They, as practitioners in the field, would often come to events at MIT, and were trying to figure out not just how to be more effective in persuading people to buy stuff they might not need, but to serve the audience authentically, that built a relationship. So, I became really interested in that translation work of how the theoretical stuff could apply in the industry.


This is, in a way, the intersection of a scientific task and a creative task. Both can be difficult, for sometimes very different reasons. Were there any obstacles in your way? Did you ever have doubts about what you were doing?

Yes, certainly. The tenure track process of academia has a certain career solidarity to it, sort of a career guarantee. They tell you “You take this track, here’s what happens: you land x, and then in so-and-so many years you land y, and then z.” So you pretty much know your path. On the other hand, one of my grad school mentors and co-author of my book, Henry Jenkins, was giving a talk at MIT last week, saying that if academia only trains people for tenure-track positions, it’s becoming a modern-day Ponzi scheme. It’s training people for jobs that aren’t there.

Seeing law students sue their schools for having promised them jobs that they knew weren’t there, putting them in loan-debt, brought about an interesting question to me: “What are other paths for academic work?”

When I graduated, I decided to stay on as a research manager for a year at MIT, because I didn’t know which direction I wanted to go in next.


You’ve published widely in a variety of magazines of renommé. But do you get stuck sometimes? What do you do against writer’s block?

I get stuck often. There are a few things I do. One is: these days I largely agree to publishing arrangements that don’t require a certain level of frequency, for example FastCo and Harvard Business Review. With them, I’m not obligated to submit something at time x on a regular basis. Rather, I’m able to take the approach of finding something I’m interested in writing, and then figuring out which editor might be interested in that piece, based on the angle that I’m taking. Or people contact me and I can experiment.

The other thing I do when I have writer’s block is: I write something that is not very good, and then I work on it (laughs). For me, the most paralyzing aspect of communicating is not having any frame to work from. Starting with a set of questions, I also often interview myself. Then I work them into a framework that has some narrative cohesion.


What are the writing tools you use?

Most of it is email draft. That’s where I end up writing stuff, sometimes whole pieces, sometimes the notes that I send to myself so I don’t lose them. Apple Mail really is the tool I use most frequently in writing. Now, the book Spreadable Media was all written in Google Docs. It was the first time that I took on writing a book with two other people.


You chose Google Docs for the collaboration aspect?

Absolutely. Especially because everything was written by the three of us, simultaneously, over the top of one another, editing one another, arguing with one another in the document. It helped us moving things around, checking revision histories, etc. That, for me, was a really interesting writing process. It’s based on trust.


Talking about trust: who influenced you the most in your career? Who helped you along the way?

I’ll have to name a few. Certainly Henry Jenkins: his work opened up the field of Fan Studies, the idea of studying active audiences in ways that he has gone on to take to activists and people creating civic media. In my own work, I’m very interested in the sorts of communities that companies are trying to reach, in addition to still studying deeply the fandom of worlds like soap opera and professional wrestling (the areas of study I’m involved in most frequently).

My other grad school mentor is a gentleman named William Uricchio, a professor at MIT and Utrecht, in the Netherlands. William is a media historian and his focus is on how we can often understand a current moment of media innovation by studying past moments of media in transition. To really understand the questions concerned with, for example, the future of TV or the Internet, is to look at the early days of television or the radio and understand the similar sorts of conversations that were happening at that time, the many parallels that exist.

And just one more: most recently, Carol Sanford has been of significant inspiration for me. Her book Responsible Business asks the question “What is corporate responsibility in an era where too many companies talk about social responsibility without actually being responsible?” Her claim is that companies can become more responsible by taking the needs of their audience first; the needs of their co-creators, employees, etc. second; the needs of the earth third; the needs of their local communities fourth; and the needs of shareholders fifth. All five of these audiences matter to a company, but you need to serve them in that order. Too often, that order gets reversed, and it’s the shareholders whose priorities are taken into account first, and the customers come in fourth or fifth. That set of priorities is good for us to think about.


I know you’ve had an interest in storytelling from an early age. What would be some stories that made an impact on you?

The most significant story for me may be the story of Oakdale, Illinois, which is the town that the soap opera As the World Turns is set in. That was the soap opera my grandma watched from the first day it came on in 1956. My mother was born in 1957 and grew up watching it. I was born in 1983 and grew up watching it, listening to my mother and my grandmother talking about the show. So that was sort of infused in the way I approach and think about storytelling—both the stories of the show, and the stories my mother and grandmother were telling in their re-telling of the stories of the show, as they talked to one another and analyzed what was happening. That—not knowing it at the time—played the most significant role in how I think about storytelling.

Second would be professional wrestling, the first deep fandom — no, I take that back. That was probably G.I. Joe. I have no interest in the military, but what interested me was that every character G.I. Joe produced, gave you the short bio and sketched who that character was (about 150 characters in the universe of G.I. Joe). I liked to make these characters my own and tell stories with them.

Professional wrestling, though, was probably the richest area that I engaged in as a fan. I could research the back stories of the narrative and the characters.

It’s hard to say from a book standpoint who influenced me the most. But certainly writers like Mark Twain shaped what I revere in a good storyteller: the playfulness and authenticity, saying something deeper about culture through fiction.


What do you turn to after a day of work, for relaxation, for zoning out?

Good television. My wife and I love to watch complex TV series: House of Cards, The Americans, Walking Dead, True Detectives is what we’ve been watching recently. Friday Night Lights, which was one of the best TV series ever aired, The Bridge. So for us it is serialized drama that you can get involved in, immerse yourself in and really explore, discuss, debate, critique as a duo.


Whom would you like to work for or do a project with?

It would terrify me to work for Vince McMahon (the creator of World Wrestling Entertainment). The wrestling fan in me would love the ability to collaborate, shape direction of, and think about the storytelling potential in the model of WWE. I’ve called it in the past the greatest reality game there is—it is a fictional world whose story world is the real world. Its characters play their role 24/7, 365 days a year. The narrative progresses in the same real-time as our world. There’s no off-season, and the storyline progresses in the same time our lives progress. As we age, the wrestlers age, as our lives go from Monday to Monday, so do their stories build slowly throughout the week. There’s so much narrative potential that I feel WWE has only scratched the surface of.


What part of your work do you like best?

I enjoy the collaborative participation in discussions:

The ability to meet up with people who are as passionately focused on issues as I am, with the hope of inspiring a new way of thinking and approaching things, of changing something.

That sort of larger strategy discussion drives me. That can happen with a client I’m working with, but it also often happens in industry discussions. For instance, I serve on the ethics committee of the Word of Mouth Marketing Association with other people in our industry who are trying to figure out more ethical ways for the marketing and communications world. For me, those sorts of issues and engaging with people who are deeply committed to them is fascinating. Or, having a chance to collaborate with someone who approaches things very differently than I do, who has a different world view, but shares a respect and an empathy for the dialogue.


What part is the worst about your job?

Brainstorming great ideas, coming up with great approaches and then having political issues or internal strife causing things not to happen in ways that are not to the service of the end audience in any way, but have to do with the priorities of the people within an organization. That happens in academia a lot, but also in the industry. That’s extremely frustrating to me.


What’s the worst thing you’ve ever written?

When I was a journalist, I had to write 6,000 words a week, without an editor. My charge was: don’t get us sued. That was it.

Who knows the terrible things I wrote sometimes to stay on deadline while I was a college student...But I know one week in particular, when I emailed something in and inadvertently pasted my groceries shopping list at the end; it got published in the newspaper, because there was no editor.


What were the reactions like?

People who know me made a joke of it, but I didn’t get very many reactions, so maybe just a few people made it to the end of the article anyway.


Are you happy? If you weren’t doing what you’re doing now, what else would you do?

I’m happy with the way I’m able to strike a balance between the different things I do. I would love to think more deeply about and spending more time working with the media and entertainment space. Most of the companies I’m currently working with are professional services and B2B, and I’d love to engage even more deeply with the storytellers in the entertainment world. By and large, though, I’m quite happy, and I’m interested in the way that I’m challenged by trying to apply what I study to the worlds of people in architecture or the professional service space, worlds that are far afield from my own. I’d love to work with the writers of a soap opera directly at some point...anyone managing a truly immersive story world.


What advice would you give your little brother who wants to be just like you and do the same things that you do?

I’m an only child (laughs), but I have two daughters. So, my advice to anybody who’d want to follow in my footsteps would be: don’t follow anybody’s footsteps and carve out your own path. Think about how you want to approach things differently. Role models and people who have forged a path—that’s interesting and good to have—, but always unique to the person who forged it. I’ve created a role that encapsulates what drives my passion, but that’s very unique to me. I don’t think it would be good to see a whole bunch of more people take a role like that. I would rather see them incorporate a role that takes all their strengths and focal points and let that come together uniquely.


Thank you so much for your time, Sam.

I had a great time, thank you. Now I need to get a haircut.

Discuss this article at Google+

Forget Your Plan B.

“Everybody wants to give advice and no one wants to take it.”
—Frank Chimero

Here I am, giving advice that no one wants to take. I, like most people, like having a Plan B. A Plan B gives us security and comfort. It whispers in our ears, soothingly: If you fail, you’re not lost. You haven’t failed completely. There's something to return to. Move to mamma’s house again. Find yourself another girl. Get that safe job with a good salary and pension.

And we fall for it. Why? If our Plan B is so good, why isn’t it our Plan A? Yes, we might fail. Anytime. Guess what: others might fail, too, and that may have terrible consequences for us. But we don't know that; it’s beyond our control. Our plan B is always inferior, because it will not make us happy. Yes, it may save our ass, but what does that amount to if we’re unhappy?

My point is: there is no point in Plan Bs. Plan B stands for Plan Bullshit. Unless you’re plotting the art heist of the century, unless you actually have evidence or at least very good reason to believe that things will go terribly wrong, thinking about alternatives all the time will keep you from commitment, from devotion, from sacrifice. Not from harm. Not from heartbreak. Not from desolation. Nothing does. Least of all your plan B.

Relying on plan Bs makes you live in potential, which is, as Kierkegaard tells us, a distinguishing trait of adolescents. Adults are able to live that potential. Then why, as a grown-up person, do you need a plan B? If, if, if you fail (and having NO plan B certainly works towards NOT failing), there will be another way, almost automatically. Right? You know that. You’ve probably experienced it.

Want to know something else? If shit really hits the fan, your Plan B will be worthless. Inflation, war, accidents, death, sickness, havoc, hullaballoo, meteors. These things happen. But your Plan B is nothing existential. You think it can keep you from harm, but all it keeps you from is doing what you want to do, doing what makes you happy, and doing it right. The energy wasted in thinking about your Plan B would much more efficiently be invested in your Plan A. Because Plan A should stand for Plan Awesome. That’ll be the one to make you happy.

That’s my advice. Take it. Or don’t. Tell me yours.

Discuss this article at Google+
 

The Shopping Revolution

From our portfolio: UI & Interaction design for Tesco’s Hudl

“Günther, can you come to London tomorrow, we really need your help on a super secret project.” Novoda’s Kevin McDonagh called us, late in February, 2013.

The super secret project was what months later was revealed as the Hudl—Tesco’s first foray into the world of 7-inch Android tablets. The idea: build an inexpensive device with good hardware and sell it in Tesco’s stores, providing a clean Android experience with Tesco’s services through a unique launcher and Google Play.

Opoloo’s part in this collaboration was to support Novoda in making sure that user experience and visual design of the Tesco Groceries app was on par with the high expectations of the Android ecosystem.

The Branding Challenge

After a good initial round of sketches and wireframes, we hit our first rock. Bridging the gap between Tesco’s world-renowned branding and the Android platform was a huge challenge. Initially, the bold red-and-blue/black-and-white combinations seemed like a good fit for the operating system’s aesthetics. However, Tesco itself was in a process of refining its visual branding guidelines as we moved forward. We had to question every single UI element over again, sometimes with long feedback loops, to see if we were still in line.

Alt text

Should we go with a blue actionbar or sidebar? Does a white background work across all sections, or rather light grey? Do we adapt button styles from the web or from the Windows 8 client?

As we worked through plenty of mockups and experiments, we moved closer and closer to Android’s native style. The strong brand colors we used as subtle points of attention, while shades of grey provided differentiation to the UI. Android's native font Roboto replaced Tesco’s custom typefaces. Cards and full-bleed patterns structured the extensive amount of information, bringing the content up front.

Alt text

Alt text

The application started to feel right as soon as the branding took a backseat to the operating system’s style and guidelines, which is exactly what users expect from an application they use daily.

The Dashboard

One of the first issues we had to tackle was the entry point for the audience. Should we go with a products-first-approach to highlight Tesco’s extensive product range, or rather with a user-centered dashboard? We decided on the latter: a classic dashboard, since ultimately the app offered multiple approaches to the shopping experience, and we wanted every user to get the right piece of information and access at the right time.

Alt text

To make things a little more interesting, we experimented with big background images of vegetables or fruits. While definitely beautiful, we felt that they didn’t add enough value to the experience. After all, looking at perfectly lit shots of tasty groceries makes you hungry. We wanted to go further.

Alt text

So we had groceries. Groceries are used for cooking. Most people follow recipes for cooking. We had recipes as well. That was the solution. Finally, we displayed photos of nicely prepared meals on the dashboard’s background. Not only were those beautiful as well, but they added inspiration: now, if I needed an idea for what to cook tonight, I could have a look at the recipe and from there order the needed groceries, perfectly rounding out the shopping experience.

Icondesign

An experience depends largely on how it speaks to us through its design. We wanted to respect Tesco’s brand while staying true to the design language users know and love about Android. Luckily, the style guide employed since Android 4.0 is flexible enough to bend it a little without quickly feeling out of place. We took two of Tesco’s principles—“simple” and “human”—and redesigned a new set, combining both in the process.

Alt text

Alt text

Tesco’s iconic branding element, the chevron, makes an appearance here and there as well.

Alt text

Working as a team

The timeframe of the whole development cycle for Hudl was ambitious. This was a new market for Tesco and they didn’t have an experienced internal team to build upon. Many people came and went in the course of six months, and everybody left a small hole that had to be filled quickly. Eventually, a common groove was established.

Opoloo’s experience in both design and development proved to be a valuable asset. We could quickly switch offices according to needs, bouncing off ideas and feedback with the Novoda team. After defining and tying together the lion’s share of screens and functions, we provided weekly reviews by pointing out unbalanced layouts, unclear copy, or rough patterns across the whole app. This helped keeping the quality of the project on a very high level.

Alt text

Eventually, we gathered in London, three weeks before the official announcement for our first hands-on. The black prototype of the Hudl tablet felt solid, the screen was bright and clear. And with just a couple days distance from actually being involved in the development, we could finally get a clear picture of what we helped build over the last months: a great digital shopping & entertainment experience on a fine piece of hardware, that would be used by hundreds of thousands of people in the months to come.

“Android design is super hard to source. Opoloo are one of a handful of companies worldwide who have evolved their design consciousness at the same pace as the Android Design guidelines. Working with Opoloo is like working with the benefit of those many years.” Kevin McDonagh, CEO Novoda

Alt text

Discuss this article at Google+

The Future of Mobile Apps

Building and publishing a Firefox OS app in no time

Dear developers out there,

I know you are tired of building mobile apps for nibbled apples and for millions of green robots with different screen resolutions. I’m sure you want to feel free again: to be able to see the horizon, smell a fresh summer breeze, and taste a sip of clear crystal water again. I would like to take a minute and introduce you to the future of app development:

Phone

We’ll build a Firefox OS app. I’ll walk you through the process of developing and releasing a Firefox game that I called BLIP.
You’ll see: app development for Firefox OS is very different and surprisingly easy—especially for frontend web-developers. You neither need to learn any complicated new languages nor a strange IDE. Just take your favorite editor and some web skills, like HTML5, CSS3 and Javascript.

1. App-Manifest

To get started with our game, we first need to store basic information about your app. You need a file called manifest.webapp, located in the root directory of your application and served as a JSON file. Generate the file and add this to your .htaccess file:

AddType application/x-web-app-manifest+json .webapp

All set up, you’re ready to fill it with information. You can find an example manifest at the Mozilla Developer Documentation.

{
  "version": "0.1",
  "name": "Blip",
  "description": "Blip is a minimalist Whack-A-Mole game.",
  "launch_path": "/",
  "orientation": ["portrait"],
  "fullscreen": "true",
  "icons": {
    "30": "/assets/images/icon-30.png",
    "60": "/assets/images/icon-60.png",
    "128": "/assets/images/icon-128.png"
  },
  "developer": {
    "name": "Max Boll",
    "url": "http://opoloo.com"
  },
  "locales": {
    "de": {
      "description": "Blip ist ein minimalistisches Whack-A-Mole Spiel.",
      "developer": {
        "url": "http://opoloo.de"
      }
    }
  },
  "default_locale": "en"
}

2. Offline Cache

All your application data can be stored in the local storage of your device to provide faster and offline access for further app usage. It’s as easy as setting up the manifest file. First, let your HTML document know the name of your cache manifest:

<html manifest="offline.appcache">

In this case, the cache file is named offline.appcache and it’s located in the root directory of our application. You can now add new lines inside that file. Each line means a new document that has to be cached, like this:

CACHE MANIFEST
/index.html
/assets/stylesheets/application.css
/assets/javascripts/application.js

For more information about application caching, see an example at the the Mozilla Docs.

3. Firefox OS Javascript API

All this is reason enough to say: app development for Firefox OS is so much easier than for Android or iOS, at least for web-developers. The JS API provides access to native software and hardware functions like, in the case of our game BLIP, vibration, screen, and speakers. Meanwhile, there are a lot of plug-ins that you can use to make, for example, in-app-purchase possible. You get a list of all installed apps on the device and can check if yours is already installed. If not, you can install it with one simple function via the browser. You may submit your app to the marketplace, but you don’t have to.

function is_installed() {
  var request = navigator.mozApps.checkInstalled("http://app.myxotod.de/manifest.webapp");
  request.onsuccess = function() {
    if (request.result) {
      return true;
    } else {
      return false;
    }
  };
  request.onerror = function() {
    console.log(this.error.message);
    return false;
  };
}

function install() {
  var request = navigator.mozApps.install("http://app.myxotod.de/manifest.webapp");
  request.onsuccess = function() {
    return true;
  };
  request.onerror = function() {
    console.log(this.error.name);
    return false;
  };
}

function vibrate(ms) {
  if ('vibrate' in navigator) {
    navigator.vibrate(ms);
  }
}

Read more about the Mozilla Javascript API.

4. Spread the word

When you are done and happy with your application, submit it to the Firefox marketplace by adhering to these guidelines or make a landing page with an install button on it.

Summary

Even if you’re not sick of app development for iOS and Android, you should check out Firefox OS. The system itself is in an early stage and I am looking forward to more stable versions, but app development and publishing is amazingly simple. Add your apps to the marketplace or just display an install button on your website.

Now, if you want to play around a bit, have a look at the little prototype of my Javascript game BLIP.

BLIP is a very simple and minimalist whack-a-mole game: a 6 by 6 grid and randomly appearing “squares”. If you tap on a square, it vanishes and another one appears in a random position. Every time a square is tapped, the phone will vibrate for 200ms and a sound will be played. The squares also have random colors and sounds. It’s a fun little game and pretty good for testing the basic functionality of app behavior on Firefox OS. The idea is to see how to trigger and play with the hardware and controls of the phone.

You can test it on your phone and find the source code on Github. Installing it to the dashboard from Firefox browser even works on my Google Nexus 4.

Any questions? Comments? Made your own Firefox app? Share it!
Happy coding!

Discuss this article at Google+