UX/UI, Web Design

I believe that most people are good. Most people really want to live up to their ideals. So why do companies fall short on living up to their missions, credos, mantras, or ideals?

For example, why does a company that says it supports local businesses jump at the chance to work with Walmart just to get a “big name” client on its roster? I have started to believe it is because they haven’t taken the time to clearly articulate company values and, more importantly, establish routines and practices that intentionally frame their decisions to factor in their values.

At our design firm, P’unk Ave, we decided to change that by developing a model for evaluating potential clients, giving us a practical, standardized way to make decisions that stay truer to our values. While it may seem like being picky about who we work with is bad for business, we’ve found the opposite to be true: the more we’ve stuck to our ideals, the stronger our business has become. In this article, I’ll show you how it worked for us—with the hope you can learn from it and do the same for your business.

Establishing your values

You can’t live up to your ideals until you have a clear grasp of them. If you have been in business for some time, you might be surprised to realize that they already exist and are just waiting for you to be more intentional about identifying and writing them down.

Set a timer

My partner and I began our process with some borrowed time on a layover heading back from a conference. We took out our journals, set a timer for 10 minutes, and began writing down our core values. The ideas took form quickly because they had already been part of our DNA. This allowed us to make a rough list of values that resonated with decisions we had made in the past—values like “innovation,” “trust,” and “responsibility.” We’ve since refined these somewhat general ideas using an exploratory process that includes all members of the team, but setting a timer during this early phase forced us not to overthink things, and helped us to get started with ideas that came more from the gut than from the brain.

Take inventory

Then we did a whiteboard audit of our current and past clients to look for trends and to test how our values applied (or not). We paid particular attention to those clients we were most excited about. Through this process we identified a pattern of partnerships with people who work to strengthen our cities (urban planning, local food, bicycle advocacy, waterfront improvement), create knowledge (universities, education initiatives), improve people’s health (advocacy, research), and enhance our quality of life through arts and culture (museums, photography collectives, arts organizations).

Get outside perspective

We followed this up with a workshop led by a friend, which allowed us to further explore our values, strengths, and goals. This led us to create a series of active phrases about our work, including we are part of a community and we dream. These phrases now form the basis of the P’unk Guide, which includes our shared values and principles to run the business we all want to work in. As part of our ongoing reflection, we have also evolved the guide to include “guiding metaphors.” One of those metaphors is based on the notion of sailing upwind: “The shortest distance is not always the quickest.”

Building a framework

Becoming more aware of our values helped us make more intentional choices with prospective projects, but it didn’t necessarily provide us with a framework for quickly evaluating potential projects and relationships. That came when we read the book Drive, by Daniel Pink.

In Drive, Pink talks about the principles of autonomy, mastery, and purpose as powerful motivational elements for modern workers. For Pink, jobs that require deep thinking and applied analytical skills are not easily simplified to an assembly line process, and measuring productivity within a certain time limit isn’t an effective way to track their success. Rather, people who have the freedom to work in the way they see fit (autonomy), who are constantly honing their skills (mastery), and who understand the intention of their work (purpose) perform best in these positions.

There was no turning back. We used Pink’s principles as a starting point to create our own framework for evaluating potential relationships with partners and clients: the AMP scoring system. Evaluating projects through our new lens of autonomy, mastery, and purpose helped us ask whether or not that relationship would motivate us to do good work and help us live up to our ideals of trust, innovation, and impact.

The AMP score

In considering a new project, we take the time to get to know the client, with the goal of determining whether we will we be truly pumped (or “AMPed”) if the project is a success—not because the project is done, but because of the impact it has on something we care about. Then we score it, using a series of questions in each of the three categories. Each category then gets a score from 1 to 5, and we total up the results at the end.


  • Will this client respect us?
  • Will they seek our counsel?
  • Will they give us the space to bring our experience and knowledge to impact the project positively?
  • Do they trust us?
  • Basically, will they let us do what we do best in service to their project?

It is always a good sign when a potential client is genuinely interested in understanding how you work. If they take the time to ask you about how and why you make decisions, they’re telling you that they respect your experience, and are seeking a partnership that is productive and valuable. It is an especially good sign—usually a 4 or 5 on the AMP scale—if they listen carefully and ask thoughtful follow-up questions, since it indicates that they are genuinely interested in working towards a relationship built on understanding and trust.


  • Is there space to practice our skills and grow as craftspeople?
  • Is there time to do the project well?
  • Does the client value a job done well?

For example, if a client emphasizes how simple a project is by saying something like, “All we need is to code this page. It is simple. How long will that take? A week?” or “Do we have to do the research? Couldn’t we just copy the design of this website?” then they may not respect the work we do—especially if this perspective persists after we explain the value of a thoughtful and measured approach. In this scenario, we would rate the mastery score a 1 or 2, since they seem more interested in rushing than in allowing us the time to do thoughtful and considered work.


  • Do we understand the purpose of their project?
  • Equally important, do they understand the purpose of their project?
  • What kind of impact will this project make?
  • Do we feel aligned with that impact?

For example, sometimes a webmaster at a larger organization contacts us, but is only interested in technology. This is common when an organization puts the management of their website solely in the hands of their technical or IT team, instead of seeing it as a communication tool for the entire organization. When this happens, we try to bring leadership into the process and educate them before signing an agreement—but if that cannot be done, the project would score low on the purpose scale. It is particularly difficult to walk away from an organization that is doing work we find interesting and aligns well with our values, but we have learned that when leadership isn’t involved, the project is not likely to be a success.

What does all this actually look like? Practically speaking, we post a message with details about all potential projects in Basecamp, and each member of the team has the opportunity to respond with their thoughts and personal AMP score for the project. Once everyone has weighed in, we compare scores, looking for a total of 12 or higher. We will consider lower scores, but not below 10.

This system creates a paradigm where we are asking ourselves if there is a compelling reason we should work with a client, rather than just looking for a reason not to work with them. That distinction may seem subtle, but it has powerful implications, supporting a proactive versus reactive culture.

Intentional projects are successful projects

This may seem one-sided and only to our benefit, and maybe an unsustainable business practice. However, being thoughtful and intentional in this way has turned out to be a great thing for our clients as well. Once we commit to a project, we are truly committed. We even share how this benefits them in our project proposals:

Most projects will hit bumps in the road that will require persistence and dedication to see it to a successful completion. With that in mind, our philosophy is to only work on projects where there is a strong alignment of values. We truly care and you can see the difference in that approach.

They get that. It resonates with them because anyone that has some business experience knows that unanticipated problems will inevitably rear their head at some point. Because we took the time to evaluate the project using the AMP score, we’ve already decided that we are committed to the success of the project, and any bumps in the road will be tackled with gusto and passion. This knowledge gives our clients greater confidence in working with us.

What’s good for the goose…

As a consultancy, much of our “everyday” revolves around clients and projects. This is the lifeblood of our company and sets the tone for our interactions. If we are not in sync with our clients, our lives can turn miserable pretty quickly.

We always cared about our work and had good relationships with our clients before, but intentionally pursuing projects that align with our business values has brought a higher level of investment and internal motivation from all members of our team. We have become true partners in the success of our clients’ projects.

A lucrative project that doesn’t align well with your values is like the siren’s call to start your day with a sugary doughnut. Of course, getting sidetracked is easy. Using a framework to evaluate potential business has become a way to stay on course—a way to make healthier choices.

When we made compromises in the past, it never resulted in great work and often had other unintended consequences, like burning out our team. The attitudes you develop working on a project you don’t care about can carry over into all of your work. Our framework has helped us stick to our guns and not work on even a single project where we don’t see an alignment of values.

Ideals are good for business, too

The AMP system has had a positive ripple effect throughout our company. Everyone knows that we make decisions based on our shared and agreed upon values. We have chosen not to pursue work that does not garner a high AMP score, and we have even stopped working with clients when they turn out not to allow us to live up to our ideals. In the short term, we may have turned down some potential business, but in the long term we have increased our revenue while working with clients we respect. That growth comes from our participatory culture, where everyone is invested in and focused on their projects—leading to happier clients and a lot more word-of-mouth referrals and opportunities.

This is not something that can happen overnight. If you want to live up to your business ideals, you have to take the time to authentically identify your values, the things you care about. You also have to commit to the ongoing tending and cultivation of those values in your organization. It is not a “set it and forget it” scenario. At P’unk Ave, we think about this regularly, and especially during our quarterly “State of P’unk” and twice-yearly retreats. Building in those rituals, as well as creating tools like the AMP score, helps us stay on track in creating the kind of company we want for ourselves.

But the commitment is worth it. Once you have a framework for evaluating the kinds of people you want to work with, you have power: the power to say “no”—and the power to do the work you know matters.


From: A List Apart: The Full Feed

UX/UI, Web Design

Today, at the Super Bowl for Google news, Google I/O, the company rolled out the latest version of its mobile OS, Android L, which is almost entirely predicated around the final step in its amazing design evolution: a formalized, unified design language across all their products, platforms, and devices called “Material Design.”

Last year, we realized that Google had unofficially embraced the humble index card across their apps. This year, under their Material Design thesis, they’ve taken this idea to extremes. Cards are no longer just generic windows that fit inside any interface. Cards are the interface, sewn together like an elastic, patchwork quilt. They appear on screen with depth (thanks to liberal, but tasteful, use of drop shadow), and enable constant, seamless transitions to anything you want to do. Tap an email, a card grows. Tap it again, a card shrinks. And on top of all this virtual paper, Google has constructed precanned animations that sprinkle another layer of color and physics wherever you touch.

Matias Duarte on Stage at Google I/O 2014

As Android lead designer Matias Duarte demoed it on stage, he explained that it moved with the physics of card stock, but also splash with your touch, like “ink rippling in a pond.” He clearly put it better than I can, though I’d add that Android‘s core UI has long been cleanly designed, but was always a bit cold. Material Design adds a bit of human warmth back to the equation.

What’s potentially most interesting about Material Design is that Google is opening up all of these tools and animations in their new Android L software development kit. That means, not only is Google using these cards for their apps like Gmail, any developer can adopt this interface technology into their apps. Elements like Android’s buttons will now have rippling ink effects built right in.

Material Design in L Preview

And furthermore, Duarte teased that Google’s software was smart enough to intelligently rearrange text and photo interfaces you may have already built, padding out white space, clarifying text, and even creating a UI color palette based around a company’s logo or photos an app contains–and then rearrange all of this UI appropriately for a phone, tablet, Chrome browser, or smartwatch. (Though, it’s worth noting, when Google actually showed off an Android Wear smartwatch on stage, a lot of the more beautiful card animations were missing, probably in favor of devices that have less graphics processing power than your phone or laptop.)

The software is just being made available to developers today as a release preview, and will be available to the masses in the fall. So just how smart Google’s design algorithms are, and how flexible Google’s Material Design thesis proves to be across apps beyond Google’s, is still unclear.

Gmail App, before & After

But one thing is certain: Google’s thesis on design is finally coming together. And even though Jon Wiley–lead designer for Google Search–told me that Google wouldn’t be presenting a design thesisfor all developers to follow at I/O, that appears to be exactly what they’ve done.

To Google, Material Design is the new way to design.


Original Article from fastcodesign.com

UX/UI, Web Design
Video games have come on miles since the days of perching at the end of the sofa in our living room avidly clutching a Playstation control and racing Crash Bandicoot repeatedly down the same strip of the Great Wall of China. They’ve come on so far in fact that the kids of today don’t even need controls, apps, or to download any software. They don’t even need to be kids, for Pete’s sake!

The revolution I’m referring to is Racer, the game which has just won gold at Cannes Lions, which allows you to race cars across multiple screens – be they androids, iPhones or tablets, without any faff whatsoever. It’s pretty innovative, relying solely on the internet and the use of the Chrome browser to provide smooth playing. With music by Giorgio Moroder and beautifully slick visuals, it looks to be the new Crash Bandicoot. Watch the behind-the-scenes video below for all of the real techy lowdown.

  • 1

    Racer (still)

  • Racer-2

    Racer (still)

  • Racer-1

    Racer (still)

UX/UI, Web Design

A design pattern that is currently growing more popular is the fixed position bar at the top of the page. Sometimes the bar stays the same throughout, sometimes the header morphs into a slimmer bar as you scroll down, sometimes a completely new bar appears.

For example, as you scroll down on the New York Times website, the top navigation bar shifts from displaying typical site-wide navigation to article specific controls, showing the title of the article, the share link, the comments link, as well as compressed site-wide links:

At the Forbes website, as the user scrolls down the page a fixed position bar appears at the top promoting links to other articles the reader may find interesting, as well as a drop-down site navigation menu, search and user controls:

While these bars may be useful, they take up vertical space, reducing the reading space the user has chosen for themselves by picking the size of their browser window. Additionally, information displayed on these bars does not do anything to aid the reading of the actual content, making the bar more of a nuisance than help.

An interesting way to solve the issue is to hide the bar when scrolling down, and show it when scrolling up. On mobile interfaces, where space is precious, this technique is used to hide chrome, such as Web browser controls, but it’s also a good pattern to use on the Web. For example,Medium has just updated their new navigation bar. As you scroll down, the bar goes away, but it can be revealed at any time by scrolling up. Here’s what it looks like:

Less annoying than bars that just sit there as you scroll down, and makes the menu easy to access without having to scroll up to the top of the page. Scrolling up won’t necessarily mean the user wants the navigation — they may just be scanning the content — but 100% of the people wanting the navigation will be scrolling up, making it a pretty good compromise.

View Original

UX/UI, Web Design

What Comes Next Is the Future is the definitive documentary about the web, as told by the people who build it each day.

Their challenges and successes will help us better understand this thing called the web, and what lies ahead. A project by Matt Griffin — founder of Bearded, a Net Awards 2014 Agency of the Year nominee – What Comes Next is the Future is an effort to capture the titanic shift in the web landscape that mobile devices have initiated.

Like it or not, we are firmly in a world where the web is in everyone’s pocket. According to Pew Internet Research’s June 2013 reports, 81% of Americans between the ages of 25–35 own a smartphone, 33% of American adults own a tablet computer, and 42% of smartphone owners between the ages of 18–29 consider their phone their primary way of accessing the internet.

Thanks to this mobile revolution, the ways people interact with the web and one another are changing. This shift has forced us to drastically alter our perspectives about the work we do, and how we go about it. What Comes Next Is the Future aims to capture this transformation.

But like many things, the web isn’t just technology – it’s people. We’re often overrun with descriptions of the shallowness of social media, and the implications that has for our basic humanity in this modern hyper-connected world. There is a nostalgia for life before we built the most comprehensive, democratic repository of human knowledge that has ever existed. But to ignore the web’s importance, to treat it as simply a product or appliance that has come into our lives, is to miss the point.

In What Comes Next Is the Future, you’ll meet people who – through our contact with the web – came of age and found each other. For many of us, the web gave us a place where we could contribute, apply our talents, and make things that matter.

What Comes Next Is the Future is a story about the internet, and how the shifting mobile landscape has drastically changed our industry. But it’s also the story of how we’ve all changed as a culture and what we can look forward to in the future, as seen from the perspective those who’ve helped build and shape the web over the last 25 years.

 We Need Your Help

To make the best version of this film we can, we need your help. The more funding we raise for this film, the greater our scope will be.

Our Kickstarter goal is just the minimum we need to finish a shorter, tighter-budget version of the film. This budget will help us pay professional video editors, upgrade our equipment, and cover travel expenses for new interviews as well as some of our time spent on the project so we can really give it the attention it deserves.

We’ve already interviewed:

Once we surpass our goal, we’ll be able to add even more interviews, travel further to get them, and employ more film professionals to make a higher-quality product for you. We’ve already got the thumbs up from a number of people we’d like to interview next (with doubtless even more to come). Here’s a short list of some of our additional heroes who have agreed to be interviewed so far:

Need we go on? It’s crazy all the knowledge and experiences in these people’s brains. And we can’t wait to start getting them on camera.

We want What Comes Is the Future to be the definitive film about the web. Help us make it happen.

The music in the trailer is Slow to Thirty by Low Lumens.

Corporate Sponsorships

There are plenty of ways for organizations to contribute to the film. There are four tiers that get your company name or logo in the closing credits of the film:

  • $5,000 = a full-column logo in the credits (limited to 8)
  • $2,500 = a half-column logo in the credits (limited to 12)
  • $1,000 = a quarter-column logo in the credits (limited to 16)
  • $250 = your name in the credits (limited to 48)

We even created a handy graphic to show you how it works!

Our Corporate Sponsor Levels

To make a donation on behalf of a company, you just use a corporate credit card on someone’s Amazon account. At the end of the project, I’ll contact you for exact wording in the credits or logo files, as necessary.

Risks and challenges Learn about accountability on Kickstarter

At Bearded, we’re not professional movie-makers. We make web things. So what are we doing trying to make a film documentary?

The shift that’s been happening with the explosion of mobile devices on the web has felt monumental. Tectonic, even. And no one, as far as I know, has been capturing these changes in technology and culture (at least not from the perspective we’ve been watching it).

Last year I realized that I had booked a number of speaking engagements with people in the web design industry that I greatly admire (people like Luke Wroblewski, Ethan Marcotte, and Josh Clark, to name a few). So I decided to write up a list of interview questions, and lug along a Canon DSLR video camera to see what I could capture. Everyone I asked to help has been unbelievably open and enthusiastic, and the footage we began to amass was awesome. Pretty soon it became clear that we were – qualified or not – making a movie.

I’ve spent the last five and half years building and running a business where we make things every day that we didn’t know how to make when we started. We’re problem solvers. That’s what we do. No doubt countless problems will arise with this project that we’re not expecting. But that’s normal; there will be problems, and we’ll come up with solutions as they arise.

I’m also experienced enough to know that everything there is to do requires expertise. Filmmaking expertise is not something we have. So we’ll be using a good chunk of our budget to hire professionals to do things like editing, finishing, and perhaps even on-location filming. The more funds we raise, the more we can engage film industry pros to do the things they’re good at, and we can focus on guiding the content and direction of the film.

Besides professional help, what will be spending money on? Travel expenses to go do the interviews, better film equipment, and covering the cost of some of our time, so we can afford to really focus on the film.

View Original

Projects, UX/UI, Web Design

Divide, divide, repeat: solving big problems with small tasks.

I spent more 4 months travelling in the Middle east. At the end of my journey I started to work as a communication officer in Jerusalem, where I spent 3 years.

In 2009 I started to work on complicated projects. The Italian Ministry of Foreign Affairs developed a project to encourage the joint-venture between the Palestinian SME and the Italian one. As you can imagine it was quite a delicate project which required sensitivity and diplomacy. When you think about Palestine (the project was only for west bank based SMEs) you think about war and conflicts – well that is Gaza. The actual problem is not the conflict but the difficulty the SMEs of the west bank face to export their products. Other problems included but were not limited to obtaining machinery and expertise to improve production. Despite the challenges there was plenty of untapped business opportunity. Marble, wood, leather and oil are just a few of the possible businesses that an Italian company could potentially develop with a West Bank company.

The problem now is how explain this to the italian business man? How can you convince someone to invest in an unstable country only famous for war and conflict?

The answer is surprisingly simple. The Italian government offered a loan with zero interest to the Palestinian-Italian join venture. This was enough to capture the attention of many businessmen. The best way to promote it was through classic channels such as press releases on the website of the Chamber of Commerce and direct mails. So we moved our target to the website.

The communication was addressed to specific companies. This ensured we would not have a line of SMEs applying on the website just attracted by the credit.

During the first meeting about the project, the Accounting Manager explained how to access the credit. The procedure was long and complicated and unsurprisingly involved a lot of bureaucracy. To ensure the quality of the project there was a strong selection process and the SMEs (Italian and Palestinian) must present a project together.

So now think about an expert Accounting Manager bombarding you with complex forms and contracts and rules that the SMEs have to agree with and follow to have access to the credit.

Between my office and the meeting room there was a long corridor with many paintings. I like art and often spent some time admiring copies of Seurat’s Grande Jatte and Circus.

Seurat helped me to realise something with his paintings. From afar a scene of people on the grass but up close it is just a messy group of coloured points that together make a beautiful painting.

In contrast to the complex bureaucracy system, the solution of my UX problem was to organise the information in auger friendly way.
The best advice i could give is to always divide the process into small tasks, every time accomplish a task a feedback. Just like the Monet paintings, these small points are integral to the bigger picture.

Repetition in the UI was also another key. It is not only important for the UX but also for the developing.


First: access to the credit is divided in other 3 part: information about the credit, how it works and who can access to it.
Second, Know the market explore of the palestinian economy for general information to case studio to the local law.
Finally, realise your idea! This delicate part helps the user step by step from the presentation of the project to find a Palestinian SME to inspire the new born joint-venture with case-study.

UX/UI, Web Design


We’re well versed in the graphic treasures in and around the London Underground but Adam Chang is on a mission to introduce us to the New York subway system in the same way. His beautifully designed NY Train Project site is in turn a celebration of the beautiful design to be found in the city’s underground stations; from intricate tiling and interesting murals to some terrific typography.

Read more

From CR Blog

UX/UI, Web Design


There was a great deal of coverage of the opening of the 9/11 Memorial Museum when it opened last week, and on the whole the arts and design press focussed on the architectural angle. But museums are (or should be) much more than buildings; and Brooklyn-based interactive design studio Local Projects was tasked with bringing this complex and controversial chapter in contemporary history to life.

Read more

From It’s Nice That