On Christmas Day 2013 I was heading to the playground with my wife and our 18 month old daughter. We were living in Buenos Aires, it was a hot day and the streets were empty.

I had been thinking about starting an agency and we were throwing around names. I don’t know which one of us said it but once it landed in my head I instantly knew it would be called Ueno, named after one of our favorite parks in Tokyo with a nod to Buenos Aires.

And then seven years passed. Ueno became my life’s work. We found success early, grew fast, hired great people, signed more and more amazing brands and won awards.

Don’t get me wrong, there were lows too, a lot of them. But somehow we managed to take every hit and get back up stronger than before.

Through the years we’ve worked with some of the most ambitious brands in the world. We worked with global industry leaders in finance, media, culture. Name a tech company and odds are we worked with them.

In fact, one of the jokes on our website for years was that we had worked with every tech company except Twitter.

But that changed in late 2019. I got a Twitter DM from my friend Dantley Davis. He had just joined Twitter to run their design and research teams and he wanted our help on a project.

The next few months we worked to help establish a new vision and product strategy for one of the cornerstone teams at Twitter. After some early hiccups the project became a huge success. So much so that a few hours after the executive review I got another DM from Dantley. This time asking if we would consider joining Twitter.

I’ve had a lot of good client presentations (and a lot of bad ones too) but this was a new high.

But as flattering as the question was, those conversations were put aside and we continued to work with Twitter as an agency. We worked on a number of new streams helping their product and brand teams.

And with each project our partnership grew stronger. Our people and theirs working together as one team.

Now, 2020 was a hard year for most people. That’s not news to anyone. And the early days of Covid hit Ueno very hard. We even had to let some of our amazing people go. But then by summer we were back on our feet. Not just that, we started to grow faster than ever. The work poured in.

And of course I love all our clients but one relationship kept standing out.

The work we were doing with Twitter was interesting, it was impactful, it had buy-in from the top and it felt real at a time when the world felt less and less so.

So a few months ago me and Dantley started to talk again. I wanted to see how we could work closer with Twitter. That conversation evolved and we picked up the thread from before, what if we actually just joined Twitter full time?

And the more I thought about it the less crazy it sounded. Or maybe, let’s say it sounded like the kind of crazy that could be a lot of fun.

So, now I can finally get to the point.

Today I am happy to announce that Ueno is joining Twitter to help build the future of one of the most influential brands in the world. (And yes, I know the header image kind of spoiled the surprise.)

What does that mean for Ueno?

Well, it means that the story that started that Christmas Day in 2013 is coming to an end. Ueno will close its doors.

As a founder, this is not a decision I made lightly. I put so much of my life into Ueno. I actually kept track, so far it has been 24,895 hours (hey! that’s the name of the article!).

24,895 hours actually on the clock, that’s not including all the time when I was supposed to be off work and something kept creeping back into my brain.

24,895 hours of doing client work, interviewing new potential hires, building our own brand, creating processes, sending slack messages, designing, talking, writing, thinking, laughing, crying.

24,895 hours of working with many of the best people I have ever known. Building a team and a culture that was resilient, constantly learning, tackling new challenges, adapting to every obstacle.

People have asked me if it’s hard to walk away after all this time, all this work.

And my honest answer is no.

The feeling I have is pride.

I’m proud we are able to leave on a high note. I feel like we won the agency game and there were no more things to prove. No more worlds to conquer.

And so instead of going on just for the sake of it I’m proud we are able to end the story with a happy ending.

Lastly, I’m proud we can start a new story together with new challenges, new worlds.

So, let’s start the clock again, I’ll see you again in another 24,895 hours with the story of how Twitter took flight.

24,895 hours later was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

From Eva Schipper, a designer in Seattle, via Twitter:

Dear Ueno,

How you use time tracking for client work, and how do you motivate teams to use it accurately?

Jessie Mizrahi, Senior Producer at Ueno NY, cheerfully answers:

Hi Eva — thanks for your question.

On the surface, tracking time is important because it tells someone how much to bill against projects. But that’s far from the whole story. For us, the real value of time tracking is in what it teaches us about how we work.

By logging and reviewing hours, we can learn from our patterns and make more precise estimates in the future. In turn, we are smarter with how we spend our days, better able to protect our team’s time, and ultimately supporting the best quality of the work. This makes us all happier people.

The formula: Hours = effort (not $)

We haven’t totally cracked time tracking, but over the years we have learned a few things. Here are some of them.

Setting it up

When we scope any new project, we estimate the distribution of hours and roles over time, with an associated projected level of effort for the asks.

Ideally, we will ask the team that will eventually do the work to also build the estimate. This gives everyone an active say in the process and the framework that will inform the hours.

Then we take the brief and translate it into a plan — proposing milestones and deliverables, with some flexibility for the unknowns, where possible.

Once a project is up and running, we regularly check our original estimates against the day-to-day realities, and most importantly, the best solution to the task at hand.

For now, we’re using Harvest to track time daily, but we’re always exploring additional tools. We like Harvest for the high-level snapshot, ease to scale up and down, invoicing, and its integration with Forecast, our resource management tool. But it could be better at task integration and providing complete in-flight project status.

Keeping it real

A team member will often ask their producer something like “do we have the budget for me to log the full day or should I log the rest of my time somewhere else?” While this is well-intended, it's super important for us to always log what's real (even if it hurts our margins).

The best practice is something like this:

• At the start of your week, check how much time you’re allocated for a task
• If it looks right based on what you know, proceed!
• If it looks too high or low, flag it and share your thinking. A producer will then work with you to either adjust the scope of the ask to the hours, add additional time to the task, or figure out efficiencies in workflow.
• Once you finish work for the day, enter the actual time it took.

As long as we’re communicating early and often, it’s best to enter what is true. Otherwise, we might think things take less or more time than they do, put that estimate forward again in the future, and create a cycle of stress.

Being clear (but not too granular)

There’s a line between providing clarity and over-engineering. Case in point: I once had a coworker who showed me her timesheet, where she had logged 15 minutes for “eating a burrito.”

Being too granular with time can give us the feeling of being monitored or like we’re doing something wrong if the hours don’t match the assignment. It’s important to be accurate, but balancing as you see fit is totally acceptable.

Part of this is also the granularity of time entry categories. Do we need to distinguish between design categories (e.g. concept, production, motion), or specific deliverables (e.g. brand strategy, Visual ID) within a project tracking tool? Sometimes yes, sometimes no — it depends on what we’re measuring.

It’s important that we’re intentional with the reasons why, sharing these with the team on the onset, and making sure we aren’t spending more time in the tool than we need to.

Being motivated

The time tracking tool is ideally an aid, not a chore. And logging hours is kind of like cleaning your room — it’s better to a little every day than to wait until you have a big mess.

The first step in motivating people to regularly log their hours is to remove a feeling of “right” and “wrong” entries. Just tell them to enter what’s true and flag when things aren’t lining up, and all will be well.

People are also more likely to enter their hours when they understand the tangible benefit. That means giving everyone visibility into estimates and actuals, and an active involvement in the planning process. When we build the hours as part of the project itself, it’s less of an admin item and more of a guideline for the process.

So, to answer your question…

• Involve the full team as part of the estimating and assessment process
• Encourage your teams to communicate early and often — there’s no “wrong” number of hours as long as we’re all in the loop
• Clearly convey any project-specific time-logging guidelines, but don’t sweat the tiny stuff
• Help everyone understand the why

Hope that helps,
— Jessie

Jessie Mizrahi is a Senior Producer at Ueno in New York. She kindly reminds you to log your hours.

Do you like email? Because Ueno wants to send you email.
Do you like work? Because Ueno wants to hire you.

Dear Ueno: How do you use time tracking for projects? was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

I’m writing this on a flight from Tokyo back to New York. A 12-hour flight is long enough to think and reflect about what I experienced in the amazing last five days of talks, creativity and fantastic ramen.

I came to Japan for the Awwwards Conference, to give a talk about Designing Like a Supervillain. It’s about Superheroes and their nemeses, order and chaos, the necessary tension between them, and how this can be extrapolated to the creative world. I hope people liked those stories and had a good time. I definitely enjoyed sharing them.

Speaking at an event like the Awwwards Conference is always a pretty fulfilling and eye-opening experience. Seeing all those speakers sharing their stories and fantastic work is very inspiring, but I particularly enjoy the moments in between the actual keynotes, sharing conversations with attendees and other folks in the industry.

I like to listen to those stories, challenges, dreams, aspirations. It helps me to get a feeling for what’s happening out there. We are usually so trapped in our routines that sometimes forget that we need to interact with people outside of our little bubbles.

And, above all, I like the feeling of seeing other people’s work and stories, and experience what in Spain we call “healthy envy” — the feeling of seeing a really great website, film, installation or product that someone else created, and thinking, “I wish I’d made that.”

The paradox of “healthy envy”

Being trapped on a plane on a long flight gives you time to reflect. As I’m sitting here, I’m thinking about the subject of my talk — how creativity comes from a necessary tension between order and chaos. And I’m wondering if the “healthy envy” that I experienced could also contribute to this creative tension.

Don’t get me wrong. Envy is toxic, and there’s nothing worse than been blinded by it. It makes us sloppy, focused on the wrong things, and make very stupid mistakes. Envy basically turns us into assholes.

I’m talking about the “healthy” version of envy, the one that stimulates us, the one that pushes us to find ways to be more creative, the one that drives us forward, the one that makes us embrace a mindset of competition and rivalry.

We’ve seen dozens of examples of great rivalry, especially in sports. Larry Bird vs Magic Johnson, Martina Navratilova vs Chris Evert, Anatoly Karpov vs Garry Kasparov… So many. The beautiful thing that resonates with me is the respect all these athletes have for their rivals. Their rivalry makes them better, and everybody benefits from it.

Easy riders, raging bulls

There are quite a few examples of rivalry in creative contexts: Michelangelo and Raphael, Picasso and Matisse, Morisot and Cassatt, Van Gogh and Gauguin — but my favorite example goes beyond one-on-one competition, taps into a whole generation of makers, and perfectly illustrates how “healthy envy” can unleash extraordinary creativity.

I love movies, and I’ve always been fascinated by what happened in American cinema from the late 60s and throughout the 70s, and how creative and prolific those years were. For me, that was the last great era of movie making.

This burst of creativity is sometimes known as New Hollywood or “the American New Wave,” and the filmmakers responsible for it were people like Martin Scorsese, Francis Ford Coppola, Brian de Palma, George Lucas, Robert Altman, William Friedkin, Steven Spielberg and many others. A whole generation of auteurs that produced dozens of movies, some of them authentic masterpieces.

What the 70s generation in the US did to cinema was to challenge the old studio model, where a film director was essentially a hired hand whose job it was to follow the studio’s orders. The New Hollywood directors were inspired by the raw realism of the stories coming from directors in France, Italy or Spain. Those directors were auteurs — artists depicting real stories, not afraid of pushing the limits of morality: sex, violence, drugs...

Those 12 years brought us so many masterpieces that it’s unfair to name only a few, but I’ll do it anyway: Easy Rider (1969), The French Connection (1971), Godfather, Part I (1972) and Part II (1974), The Exorcist (1973), Chinatown (1974), Jaws (1975), Dog Day Afternoon (1975), Taxi Driver (1976), Star Wars (1978), Raging Bull (1980). And so, so, so many more…

How is this possible? You could think it was just a coincidence that all this talent was together at the same time in the same place, but the fun fact is that all these directors were friends, and with that friendship came rivalry. They all knew each other, hung out together, shared experiences, and competed to see who was going to make the next great hit, the next masterpiece. That healthy (and sometimes not-so-healthy, I have to admit) competition was enough to produce the best movie, being the best auteur.

They frequently gathered to discuss their processes, their ideas and scripts. They shared first edits of their creations to be exposed to other points of view. They improved their films based on the input of their colleagues, and by exposing themselves to their tough comments. They also embraced “healthy envy,” letting the success of their peers motivate them to try to beat them in their next creation.

Of course this is not a fairy tale, and New Hollywood was a generation that in the human and psychological side of things was pretty self-destructive. But despite that (nobody is perfect!) it’s a great example of how rivalry, friendship and the creative tension of a shared passion can influence the work, infecting ideas and craft, making them better.

That’s one reason I like going to conferences like Awwwards in Tokyo. It’s full of moments where I have the time to talk with my friends in the industry — we have to do it more often! — and share dreams and frustrations, victories and defeats, and show work we’re proud of. Moments that make me really feel we need to embrace more a mindset of healthy rivalry.

How does having a rival affect us?

What makes a great rival? How can rivalry motivate us to be better versions of ourselves? You know who you admire, you know who you compete with in this industry — let them be your frenemies. Be open, generous and honest in your relationship so you can be motivated by their creativity and craft, and they with yours.

Good rivals help us achieve bigger goals

Having a good rival gives us a metric. It helps us define where we are and how far we can go. A good rival makes us more ambitious, pushes us to set higher goals for ourselves, and raises our standards.

Good rivals keep us on our toes

Ignoring the noise that’s all around us can be a fine strategy, but knowing what our rivals are up to reminds us not to get too comfortable resting on our laurels. Success is fleeting, and you’re only as good as your last project. Don’t think you’ve found the formula and start repeating yourself. Look at what your rivals make and let yourself be inspired. There are always new ways to improve.

Good rivals keep us focused

A rival who always works hard to deliver and who always finds innovative solutions can make us more focused, more committed, more persevering to improve our own performance.

Rivalry improves the whole industry

Great rivals like Bird and Johnson or Venus and Serena made their sports more popular and exciting. The work of those directors during the 70s changed cinema forever. A great creative rivalry not only can push you to make better work, but also can help you improve your industry, making it more exciting for the generations to come.

Rivalry can be the path to a great friendship

It may not always be obvious, but rivalry is a form of respect. You don’t consider someone your rival unless you respect them. And the beauty of a good rivalry is that works both ways. Healthy competition can lead to mutual respect, which then can lead to great friendships. I’m blessed with the friends I have in the industry and how they stimulate me with their good work to get better. I hope they feel the same.

Loving your rival

Rivalry is not risk-free. If we do it wrong it can take us to very dark places. We need to avoid the downsides of unhealthy rivalry. This is not about winners and losers, is not about beating the adversary. It’s is about how rivalry makes you better, and makes the playing field you share with your rivals better too.

I always thought that the same way a superhero needs a supervillain to become better and stronger, we need to find someone (or several) who stimulate us and challenge us to get the best out of ourselves. The ones that create the tension we need to be more creative.

And when you find your rivals you need learn to love them with respect, sometimes they will beat you, sometimes you will. But avoid toxicity, always be generous with your friendship. Our industry is too small for asshole prima donnas.

Love your rival. You’ll only get better.

And now, if you’ll excuse me, I’m going to lie back and use the time until this flight lands in New York to come up with a plan (only slightly evil) to best all my own rivals.

Adios,
— David

David Navarro is Executive Creative Director of Ueno NYC. But as he’ll be the first to tell you, titles aren’t everything. (Just ask him on Twitter.)

Want to engage David in healthy rivalry? Because Ueno is hiring.
Want more questionable advice? Because Ueno has a newsletter.

Love your rival was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello.

Hello?

Is anyone there?

Does anyone read these things?

You know, I always thought that growing older would make me think more about the past, but for me it’s the opposite.

I don’t really think about the past that much. Once it’s gone it’s gone. I’m much more interested in tomorrow than yesterday.

But our marketing department told me I had to write this piece, so I’m writing it.

And you are reading it, so we’ve got that going for us.

Anyway, that was the intro. Let’s get this thing started.

The work

Should we talk about the work first? I guess that’s appropriate.

This will go fast, so pay attention. And it’s in alphabetical order so nobody gets jealous.

We created a brand and a product for Allianz. We made a new site for Cisco.We created a new brand and experience for Cowboy Bikes. We made a new site for Cruise. We created a product for Discovery. We helped Eventbrite re-brand. We worked with Facebook on things like Stories and Messenger. We worked with Google to reimagine two of their core products, and on multiple other things. We helped Huawei re-think their IOT strategy. We designed a new site for the Icelandic Tourist Board. We created apps for the LA Phil and the Hollywood Bowl. We created a new brand for Lumosity. We worked with the New York Times on telling future-facing stories. We worked with Robinhood on helping people understand finance. We created a new product system with Splunk. We created a brand, product and site with Square. We worked on a thing with Strava. We started a major new product and strategy initiative with Twitter. We started working with Venmo on a cool thing. We helped Visa on another cool thing. And we helped Walmart create a new category in shopping.

We worked with about 40 other amazing clients but both you and I are much too busy, so let’s just end the list here.

What I will say though is that even after all these years, it’s the work that gets me excited. I just love being in a group of people all working together to solve a problem. It doesn’t really matter what the problem is.

I’m lucky enough to be able to work with some of the best clients in the world and I just want to say that I’m grateful.

And that’s all I have to say about that.

Ueno turns 5

Last year we turned five years old which prompted us to collaborate with international superstar Tory Satins.

I think the song that came out of it might be the best song ever made.

Until the disco version is released. Then that might become the best song ever made.

And then other stuff happened

It was actually a jam packed year.

We put on a conference in New York called Uenoland, I really liked that. We hired a lot of smart people, I also really like them. The whole company went on a retreat to Vancouver, I got to sing Old Town Road in karaoke with one of our interns — hi Adrien! The president of Iceland gave me an award and I called him the wrong name. We won Webbies and FWA’s and Awwwards and other awards. We moved to a new office in Iceland. According to Inc Magazine, we were one of the fastest growing companies in the U.S.

And so on.

There were sad bits too, but I’ve left them out.

Some of them were very sad.

It wasn’t all roses. Life doesn’t work that way.

But all in all it was mostly a good year. As far as I can remember I think I quite liked it.

But going back to where I started, I’m not sure we should spend too much time thinking about the past. It’s done.

I mean, we can learn from it and whatever but the exciting parts are happening now. Like right now.

And tomorrow could also be amazing. I think we should focus on that.

So, here’s to 2020.

Be kind to the people who need it, and treat yourself every now and then. Get an ice cream or something.

Life is short, and it goes fast. Make sure you find some moments here and there that make it worth living.

That’s what I’m going to do now that I’m done writing this. My kids are waiting.

See you soon.

Haraldur Thorleifsson is the founder and CEO of Ueno. But you knew that.

Want to work for — sorry, with Halli? Because Ueno is hiring.
Want to get mail from — sorry, with Halli? Because Ueno has a newsletter.

Ueno 2019: A year in review was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

From Nathan Lindahl, via Twitter:

Dear Ueno,

Your case studies are always top notch, especially that copywriting. Got any tips for crafting a killer case study?

Valgeir Valdimarsson, a writer at Ueno, has tips:

Dear Nathan,

I thought you’d never ask.

When you sit down to create a case study, the most important thing to keep in mind is that like all forms of business poetry, case studies have one purpose in life. Namely, to convince someone of something.

For people who are uncomfortable with the idea that they are in the business of convincing others, this can be a problem. If you are one of these people, feel free to call yourself a “storyteller” and to call what you do “storytelling.” This is charming and mostly harmless. It may even have the advantage of helping you convince more someones of more somethings.

But I digress.

My point is that your case study exists to convince three different but related groups of people of three different but related things.

1. Future clients. When you have managed, through some sorcery, to make a prospective client contemplate hiring you, they may go digging about on the internet to inspect your work. On finding your case study they should come away convinced that you know what you are doing. They should also be convinced that the clients you were working for knew what they were doing. Most importantly, they should be absolutely convinced that under absolutely no circumstances will anyone be fired for hiring you.
2. Future recruits. You want to convince smart and talented people (preferably smarter and more talented than yourself, if that’s even possible) that working for you — sorry, with you — would be a really excellent idea. You want these people to think that your clients (see 1) are really great, that the problems you solve are really interesting, and that you go about solving them in very thoughtful ways. They should also be convinced that they could actually learn something from working with you. How convinced should they be about all this? At least enough to enthusiastically click on any link that will take them to a list of your open positions.
3. Your future self. At some point in the future, which is where we will all live by then, you (or one of your colleagues, see 2) will go back and inspect your case study. Why exactly will your future self be doing this? Melancholy? Nostalgia? Confusion? Narcissism? Blackmail? The reason is unimportant, and I don’t judge. But it will happen. And when it does, you want your future self to come away with a renewed conviction that they are, as many people like to say, awesome. Or at least that they used to be, back in the days when they were still you. Your future self should be able to proudly look back, be reminded of the care you used to put in your work, and be inspired — yes, inspired I say! — to continue onwards and upwards. In other words, you want your case study to add something to your agency’s institutional memory and both represent and perpetuate your glorious company culture.

Then you mix it all together and that’s more or less it.

Important: When you’re trying to convince people of something, it’s an enormous advantage if what you’re trying to convince them of happens to be actually true.

But wait. There’s more.

Completely disregarding what I said earlier about storytelling, I highly recommend that you have a story in mind as you create your case study. That’s because you are really a “storyteller,” and a case study is essentially a drama in three acts:

There’s a hero. The hero faces an obstacle. With the help of a magic spell, the hero overcomes the obstacle and lives happily ever after.

To get the details of this story right, you’ll need to talk to a bunch of different people.

1. Your first stop should probably be the creative director responsible for the project. If they know what they’re doing, which they invariably and obviously do, they will have exactly the kind of intimate in-the-trenches, big-picture knowledge of the project that allows them to outline the story better than anyone else. They will also know the visual assets better than most, and have the “resources” (by which I mean other designers they can boss around) to create new ones when needed.
2. Should your project involve any kind of technical wizardry, you should also confer with your tech director.
3. If your project is a breathtaking demonstration of your agency’s other talents, such as photo- and/or videography, thinking (also known as “strategy”), copywriting (also known as “business poetry”), illustration, or anything else, you should talk to your photo- and/or videographers, thinkers, business poets, illustrators, and all the rest.
4. It should go without saying that a producer, should you have the unexpected fortune of having one made available to you, can be most useful.
5. And while you may not want to directly involve the people who are responsible for things like making clients happy, hiring good people, and keeping the spirit of company culture alive, you should at least have a picture of them on your desk to remind you that they’re relying on you.

Least and last on this list, your own job is to make sure the whole thing makes sense — that your case study tells the right story to the right people, and that it’s told in the unmistakeable voice, and warm, fuzzy tone of your brand.

And speaking of your brand, the story you are telling in your case study should align with your agency’s own Big Story. (In Ueno’s case that Big Story would be something like: Working with industry leaders and startups, helping them solve problems, seize opportunities and build relationships, in a way that makes a meaningful difference to their business and to their clients. Or words to that effect.)

[Intermission: Take a look at some recent Ueno case studies for Dorsia, Clubhouse, Copper.]

But what about the clients?

You may have noticed that a few paragraphs ago I helpfully postulated that a case study is a drama in which a hero overcomes an obstacle with the help of a magic spell. The surprising thing, to some, is that you are not the hero of the drama. The client is the hero. You are merely the magic spell.

My point, for lack of a better word, is that you should not use your case study an excuse to show off to people like yourself. (That’s what Dribbble is for.)

When a client comes to you with a project, they’re really coming to you with a problem and/or an opportunity. And they want you to use your skills and experience to help them solve the problem and/or seize the opportunity. A case study is your way to show that you understand this. So don’t just show the pretty end result of that process. Show how and why you arrived at the end result.

(Did that just get super earnest at the end? It will not happen again.)

Since you mention copywriting in your question, I’m assuming you’re not a designer. I jest — that’s an unfair jab at designers, for which I would apologize if I thought any of them were still reading this.

It’s not complicated. Your case studies should sound like your brand. In Ueno’s case, that might mean something like this:

Assume that your reader is an intelligent and thoughtful person. Use simple, direct language. Don’t use big words to come across as smart. Avoid buzzwords and clichés. Avoid acronyms or abbreviations. A case study isn’t entertainment, but there’s no harm in being at least a little bit entertaining. Having said that, don’t be clever just to be clever. Write like a person talking to a person, not like advertising talking at a person. Don’t use nouns as verbs, and don’t say “utilize” when you mean “use.”

Final piece of advice, and perhaps a plot twist: Maybe you don’t need a fancy case study after all? Case studies are hard. They’re a lot of work. Maybe more than they’re worth. It depends.

As I mentioned at the beginning of this possibly overwrought answer, case studies are essentially about convincing people. And there may be plenty of other ways to get your point across.

Maybe your “case study” should just be a series of tweets, Instagram photos or Dribbble shots?

Just saying.

Hope this helps,

Your pal,
— Valgeir

Valgeir Valdimarsson sort of works at Ueno, and has written about business poetry and hearing voices. He invites you to follow him on the Social Capital Quantification Engine™️ but he fears you will be disappointed. He spends his spare time successfully not trying to convince anyone of anything.

Are you convinced that it’s good to work at Ueno? Because we are hiring.
Are you convinced that you need more email? Because Ueno has a newsletter.

Dear Ueno: How do you craft a killer case study? was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

Bradley Gabel in New York asks via email:

You often mention strategy and how it informs design. How do you build strategy on your projects?

Cort Cunningham, Strategy Lead at Ueno NYC, answers:

Hi Bradley,

Good question! While strategy as a formal practice is fairly new at Ueno, it’s been integral to our work since the beginning as we see strategy being inextricably linked to design. So, how do we approach strategy and why does it matter? Where to start…

A starting point

The word “build” in your question is a critical one, and whether intentional or not, I’m glad you mentioned it. Any built form needs a strong foundation and this is where strategy plays the most important role of any project: to provide a considered point-of-view and a clear path forward. It takes immersing ourselves in our client’s business and asking a lot of questions about the project. (When I say a lot of questions, I mean a lot.) It also takes observing, listening, and surrounding ourselves with people and artifacts that will help us gain insights. The point of course is to synthesize those learnings and craft a complete narrative — from reflection to insight to provocation.

Strategy is also just a starting point. At Ueno, the entire project team works together from start to finish. You mention strategy informing design which is true. And sure, a strategist’s time might be more concentrated at the beginning of a project. Yet strategy is not a one-and-done affair, and can often be informed by design.

Too often, strategists operate by their lonesome, churn out a brief, then it’s up to the creative team to do something with it. Consequently, the work only goes so far, or the client relationship becomes short-lived. We aim to build long-term relationships with each of our clients, so the entire team is invested in the work — from immersion to final output. I may be the one leading the strategy workshop or conducting the customer interviews, but with different perspectives in the room comes a new way of seeing something or realizing what’s worth exploring further. I can’t tell you how many times a designer or producer has noticed or said something in particular that has given me a new thought or a different way to perceive something that had otherwise gotten stuck in my own head. A strategist needs to provoke new lines of thinking which means keeping things open for new knowledge and future iterations.

There are a number of ways that Ueno “delivers” strategy through the entire project and relationship. Here are a few.

Create space

What if we build space into the scope to allow for meaningful understanding throughout the project?

Adequate space and time are crucial for meaningful strategy. Before any project scope goes out the door, the producer shares it with the team to make sure we’re accounting for enough time and resource for gathering research and insights at the onset of the project as well as shaping the brand narrative and product experience along the way. Sometimes immersion sessions and “down and dirty” research findings can set the foundation as we find ways to gain knowledge at later stages of the project. Other times we need to go deep with customer research and cultural immersion. Regardless, our aim is always the same: How do we create space for discovery of what we don’t yet know, that could unlock something we never thought possible?

“Somewhere, something incredible is waiting to be known.”
 — Carl Sagan

Structure + chaos

What if the final form strategy takes shouldn’t always be pre-defined?

Building this space gives us room to find an alchemy between structure and chaos. There are effective frameworks that we deploy and fruitful exercises we conduct, yet every project is different. And if the process seems a bit chaotic, it’s because we’re going wide and letting our curious minds venture into the unknown.

I always try to bring the team along for the journey by shaping an initial strategic narrative, but the last thing I want is for strategy to feel formulaic or already written. Insights can come from anywhere — especially the not-so-obvious places — so purposeful distraction is often in order. This of course can drive producers a bit mad as they need to quantify every deliverable, but sometimes it’s better not to have too many preconceptions about the final form the strategy should ultimately take.

“The challenge is to innovate by learning from the world.”
 — John C Jay, Future of Creativity

The art of stealth

What if a strategist’s secret weapon is the ability to adapt to any type of project or environment?

The role of a strategist calls to mind Ninjutsu, or the “art of stealth” practiced hundreds of years ago in the mountainous regions of Japan. Trained assassins, ninjas honed their skills of invisibility and camouflage by becoming one with nature. I’m not suggesting that strategists play the role of assassins (although they should be adept at stealthily killing bad ideas and misguided project goals), but rather that we should be a quiet force that can adapt to different environments, empathize with others, and train our minds and senses to notice our surroundings.

Perhaps it takes embedding with the client’s team to understand their day-to-day process or delving into their analytics to see what their data could tell us. No matter the environment, we can be ready to attack each problem through first-hand knowledge and personal conviction.

“The only way to see the path in the wind is to become the wind itself.”
 — Leza Lowitz Shogo Oketani, Jet Black and the Ninja Wind

Know your audience

What if a strategist sought to find answers in shared human experiences rather than mere data points?

The strategic aim of this piece of content that you’re reading right now is to tell everyone who reads it how strategic we are here at Ueno. But I also wrote it to answer a question posed by one particular person: you, Bradley Gabel in New York.

Knowing your audience means seeking to understand them as humans and to understand the experiences they share. This means going beyond generic category definitions — millennials love experiences! — or viewing data as absolute truths — conversion doesn’t lie! — and instead looking deeper for ways to shape and tell a story.

Thus, when the product or campaign finally shows up in the real world, it’s more likely to be authentic to the brand, demonstrate an understanding of the audience’s needs, and make people to actually want to engage with what you’ve created.

“Instead of looking for answers in the vast amount of data we collect, maybe we can find them more surely in those rare moments when we take part in a shared human experience.”
 — Kim Goodwin, Offscreen Magazine Issue 21

A comfortable discomfort

What if making people uncomfortable were a strategist’s way to create fruitful creative tension?

A few months ago David Navarro, our Executive Creative Director, said to me, “You make me uncomfortable.” It took me a moment to realize that he meant it as a compliment. I keep coming back to that point as a shared goal for both strategists and designers in the fight against mediocrity.

Strategy isn’t rehashed words on a page for everyone to nod their heads or feel better about themselves. If it is, the work won’t be all that interesting and people won’t be the least bit interested in engaging with the work anyway. Strategy is about exploring different directions to find creative tension where ideas can thrive; it’s about learning, un-learning, and re-learning new patterns and behaviors; it’s about finding better words to shape a narrative that feels fresh, interesting, and relevant.

“The illiterate of the 21st century are not those who cannot read and write, but those who cannot learn, unlearn, and relearn.”
 — Alvin Toffler

Creative hybrids

What if strategy is at its best when it can flex in different directions based on what a project needs?

As a strategist, my primary purpose on the creative team is to fuel creativity. On any given day, I might be developing a brand strategy, crafting a narrative strategy for a website, or creating an editorial strategy and seeing it through production. Often it’s all of the above, and more.

At Ueno, we want everyone on the team to be able to quickly switch gears and flex in different directions depending on the nature of the project, because in reality it’s all connected. This is of course not to argue against pure product strategists and comms planners who bring a deep specialization to their craft. Rather, it’s an argument for collaborating across disciplines, with the goal of seeing things from all angles so we can help our clients solve real problems.

Think holistically

What if strategy’s delivery date is a constant?

Seeing things from multiple angles means we can create work with many dimensions. We often ask our clients, Where does this initiative sit in the larger marketing plan? What comes next? A new content series? Future product expansion? Rather than be blinded by scope or deliverable, strategy’s true value is when it not only answers an immediate need but also creates a plan for new opportunities. When a product or campaign launches, it’s a manifestation of how we have envisioned the world to look and interact in that moment. With a strategic foundation open to new learning, we can build upon it over time with new ideas. We’re in the business of creativity. The more we can help our clients understand their customers better, put meaningful work into the world, and show how an investment in creativity leads to business success, the better off everyone will be.

For Bradley, and anyone else who kept reading until the end, thanks for fighting the trend toward brevity and letting this strategist provide a long-form response to your essential question.

Thanks for listening, and happy strategizing!

Cheers,
 — Cort

Cort Cunningham is Strategy Lead at Ueno NYC. He’ll be the first to tell you he’s a dog-loving vegan who really loves Berlin, but he might just be too humble to mention that he’s also the Managing Editor of Vegan Good Life Magazine, which you should totally snag a copy of the latest issue out now.

You’ve got questions. We’ve got answers. Email hi@ueno.co with the subject line “Dear Ueno” (let us know if you want to remain anonymous) or tweet at us with the hashtag #DearUeno.

Want to work with Cort? Because Ueno is hiring.
Want more email in your inbox? Because Ueno has a newsletter.

Dear Ueno: How do you build strategy on your projects? was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

A question from Gaz Jones, a developer in the UK, via email:

Developing in React, we sometimes find it difficult to plan how many components to use and how to split up our projects into components. How do you plan your React components?

Einar Birgir Einarsson, a developer at Ueno Reykjavík, literally couldn’t wait to answer:

Hey Gaz, thanks for the question.

Here’s what we do: First we write a component, then we refactor it about 50 times, and finally we delete it when the design changes. (Just kidding. But not really.)

Let me try to explain what has worked for us, and hopefully you can glean something useful from my ramblings.

1. Think of the design in components!

The first thing we usually do is going through the whole design to map out the components. We try to spot elements that appear repeatedly throughout the design, and look for variations or modifiers on those elements.

As a rule of thumb, we keep things small and tidy. The larger the component, the harder it usually is to work with. We try to follow the principle of separation of concerns and single responsibility, so we break things down when possible.

Ideally each component should only be responsible for one thing. Components tend to grow too much, and when you notice that happening, jump in and refactor — decompose and break it into smaller components.

As you work, keep an eye on which components you keep revisiting or changing. That’s usually a hint that you might have to refactor things.

2. Create tickets!

In our project management tool we keep a dedicated board for each project. We create tickets for each section of a page, and sometimes even for each component, often adding screenshots for clarity.

The number of tickets we create at this stage never adds up to the eventual number of components we build, and it doesn’t need to. We start with broader strokes. For example, we would create a single ticket for a Carousel component, even though we know that the carousel will probably be composed of a few components (see Step 3, below).

Breaking the design into many component-based tickets is a good foundation for planning your components. Here are some of the benefits:

• You easily spot shared and re-used components, along with their variations.
• Everybody on the dev team has a good sense of the scope of work ahead.
• Stakeholders have a better view of the project status during development.
• Any developer can to jump in, pick an isolated component from the backlog, code it, and add to the Project Elements page (see step 7).

3. Code the components!

Let the coding commence! By this stage, we have a big list of tickets for possible components in the “to-do” column of our project management tool.

One of those tickets might look like this carousel bit.

At a quick glance, we can spot a bunch of components and sub-components:

• At the top, there’s a TextBlock with a heading and some copy.
• Then there’s the Carousel itself, including several carousel items,
• each of which looks like a Card component of some sort.
• On the bottom left we have the CarouselButtons,
• and on the bottom right we have the beautiful yellow CTA button.

We could easily break this down a lot more, but this is a pretty good start.

For more on how to analyze and dissect a component, take a look at the technical run-through in the official React documentation.

4. Care for the component hierarchy!

Now that we’ve identified the components, we organize them into a hierarchy of components and sub-components.

We’ve noticed that the TextBlock, Card (used as a carousel item) and the CTA button are used throughout the design, making them fit perfectly into the top-level component bracket. The CarouselButton however was only used once, in that particular carousel, making it fit nicely as a child-component of the Carousel component.

So, we might end up with a project structure like this:

.
├── node_modules
├── src
│   ├── assets
│   ├── components
│   │   ├── button
│   │   ├── card
│   │   ├── carousel
│   │   │   ├── Carousel.tsx
│   │   │   └── CarouselButton.tsx
│   │   ├── header
│   │   ├── layout
│   │   └── footer
│   ├── containers
│   ├── hooks
│   ├── pages
│   │   ├── home
│   │   ├── about
│   │   │   └── components
│   │   │       └── collage
│   ├── styles
│   ├── utils
├── ...

In this example, let’s say we also have an image Collage component that is only used on the About page. Components that are only used on a single page (like the one you may have noticed buried in the /pages/about/components/ folder-tree above) are grouped in a components folder at the page-level.

So, in short:

• /components: All shared or main components go into the top-level components folder.
• /containers: For our — yes, you guessed it — container components. Container components don’t handle any presentation directly, but are comprised of presentational components, and pass data down into them.
• /pages/{page-route}/components/: This is for components that are local to one particular page, and not re-used anywhere else. Down the line, if things change, for example if a designer has re-used a page-level component elsewhere, we just refactor it up to the top-level component folder afterward.

This folder-structure is very handy for our code-splitting setup, helps us keep things tidy, and mitigates component-naming issues.

(As you know, naming stuff can be hard, especially in large projects. For example, Ueno.co, has around 60+ unique pages. Some of those pages have unique intro sections, and since “intro” is a pretty good but generic name for a component we’ve ended up with nine different components called Intro. With a route-based directory structure, there’s no need to pollute the top-level components folder with ‘intro-privacy’, ‘intro-homepage’ directories. Each Intro component can just reside in peace as a standalone component specific to its context/page.)

5. Keep it simple! And remember the layout components!

We try to keep components as layout-agnostic as possible. An individual item — the Card component, for example — would only be responsible for its own UI/presentation elements, while a parent component would take care of positioning it on the page.

For common layout patterns, we often use generic layout components. They have global positioning and dimension values that put our items in the right spots, which is their only purpose. Some examples of generic components: Container to add spacing to either side of a group of child items; Grid to align items in a row with spacing in between; and Section to add padding at the top and bottom of some items.

The JSX structure of a typical React component could look something like this:

<Section>
  <Container>
    <Grid>
      <Card />
      <Card />
      <Card />
    </Grid>
  </Container>
</Section>

To get up and running as fast as possible the dev team at Ueno created the super great create-ueno-app starter. We think it’s the easiest and fastest way to create new web projects with next, gatsby, create-react-app and mobile projects with react-native. All of them are powered with Ueno’s configs, and they include some of the basic layout components that we use in most of our projects.

Read all about our starter-kit here. And then try it for yourself!

6. Beware of prop creep

A few words of caution about “prop creep” (a phrase I literally just coined, by the way). Designers change their designs. Sometimes this happens late in the game, but more often changes creep up, one by one, over the lifespan of a project. What was initially a small and simple card component can expand, change functionality, or get all kinds of nice-looking variations.

Down the line our simple Card component might need the headline to be above the card-image, but only sometimes. Sometimes it might need a purple background. Sometimes the headline needs to be just a tiny bit smaller and copy text bigger. Sometimes the card wants to have an amazing box-shadow. And so on, and so on.

Adding a boolean/modifier prop for different variations might work perfectly fine at the start, but can get terribly out of hand with more changes to the design. You can end up with a monster of a component.

Perhaps it’s better to break it down instead of creating one huge Card component to rule them all. Endless flexibility can sometimes bring endless, agonizing hours of work for tiny changes.

Just food for thought, alright? Use your judgment. You’re smart!

7. Create an Elements page for all your components!

For each project, we create an “Elements” page. It’s a simple page that usually contains an example of all our components and how their props affect them. It’s a great reference page and usually our starting point for every project. It can also help other developers to quickly see what’s available at the top-level.

We slowly build up our Elements page and once we’re done implementing our components we can build up the main pages one by one, out of our components.

Like all of my advice, this approach is highly recommended!

Life is complicated, and you can’t plan for every eventuality. Having to revisit a component and break it down into more pieces later on is perfectly normal. Just try to keep it simple, think of the wise Mr. Robert C. Martin’s single-responsibility-principle, and break that component into more bits and pieces when needed.

Now go, and plan your components!

Hope this has been useful,
— Einar Birgir

Einar Birgir Einarsson is a developer at Ueno. You may remember him from Twitter. And from when he told you how to compress videos. And from this playlist he made for you.

Need advice? Send your Dear Ueno question to hi@ueno.co or via Twitter.
Want to get a silly profile photo? Because Ueno is hiring.
Want more email? Because Ueno has a newsletter.
Want even more answers? Because we have even more answers.

Dear Ueno: How do you plan your React components? was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

From Jan Raven de Klerk, a freelance designer from the Netherlands:

What is your design process like? Is it pretty similar for every project?

Sasha Lubomirsky, Executive Creative Director at Ueno SF, is here to answer:

Hey Jan,

Ah yes, process. It’s important to have one — and just as important to be comfortable throwing it out. Process gives us trusted and time-tested ways to do good work, but in reality every project is so different that being wedded to a specific process doesn’t make sense.

So I’ll share our process, but just know this: sometimes we have all of these pieces, sometimes we just have some. Sometimes it’s as linear as it looks, other times it’s a zigzag or a mishmash of several at once. Sometimes we make up something completely new.

Either way, these are the six core components that we most commonly lean on throughout. What we do — and how — quite simply depends on the needs of that particular project.

Immersion

Immersion is where we and the client have a mind meld. We take in everything there is to know about the product, project, and people we’re working with. We share how we work, and our points of view. We get to know each other on a human level.

In general, our approach to working with clients is very much a partnership. We don’t have a “big reveal” after squirreling away for weeks, but instead keep in touch often, checking in and collaborating. This all starts with the immersion phase, and in particular, the initial kick-off we have together.

Two examples of what we might do in the immersion process:

Hopes and fears

We almost always do a post-it exercise where we put all our fears and hopes (in that order — end on a high note, people) around the project up on a board.

This serves several purposes. Firstly, when all the things that might cause concern are on the table — let’s say baggage from previous projects, or competing priorities — it’s much easier to make a plan on how to avoid them. Secondly, we align on what everyone is dreaming of and excited about. And thirdly, and more subtly, it sets a precedent for being raw and open about uncomfortable, vulnerable things.

Collaborative creative brief

During the immersion, as we’re taking everything in, we’re often documenting it in something we call a collaborative creative brief. This includes answers to such questions as: what are this project’s goals? Who are the target users? How does this impact the business? Who are the key stakeholders? You’d be surprised how much lack of alignment there is here until you spell it out, project it on a big screen, and read verbatim.

This all keeps us on the same page. It keeps us focused. And it’s a living document — if and when things change, we have to all agree on that change and update the brief.

Strategy

After immersion, we’ll often transition into strategy. Strategy manifests in a lot of different ways depending what’s needed for the project, but put simply it’s a strong, articulated point of view on why the project exists. It’s the foundation we create that everything is built on, before pen or pixels hit the page.

A couple of examples of deliverables that often come out during this part of a project:

A unifying strategy presentation

In a way, a unifying strategy presentation is an evolution of the collaborative design brief I mentioned above. The difference is that the unifying strategy presentation is actionable — it fuels the creative process, and is the beginning of the creative journey. It answers fundamental questions like: what is our POV, who are our target users, what are key insights?

It also elaborates on secondary but equally important questions like: what is the positioning of this service in the competitive landscape? How is this culturally relevant? What are our plans for overcoming obstacles, including the ones outlined in “hopes and fears” (see above).

This is a source of truth we return to again and again, both as a guiding light for ourselves, but also as a useful document clients can use with other partners such as investors or new teammates.

Foundational research report

In this early stage, there’s often a need for foundational research to help us understand the humans we’re designing for.

For instance, we recently had a client come to us with a new target market they were interested in pursuing. They didn’t know exactly what product to make for them. Step one to that? Understanding who exactly those people are, of course. Only then can we begin to come up with concepts that make sense for them. So before we ever got to designing the concepts, we did persona research and outlined the different types of users, and what their keys needs were in the client’s domain. After that, the concepts came easily, and we knew they grounded in real users’ needs instead of blind guesses.

Concepting

Speaking of concepts, now that the foundation is set: it’s sketching time. The more ideas the better, the more outlandish the better. Let’s get weird: this is the time to not have constraints, and to dream big. (Constraints are critical, but they come later.)

Eventually, as we work closely with the client, a couple of concepts emerge as the ones we take forward to explore.

Some common deliverables:

User story vignettes (product)

In product-oriented projects, our stacks full of sketches start to coalesce into some big ideas. We take those ideas, give them a clear name, design some key screens, and write a brief user story associated with it.

Often two or three of the strongest concepts will then graduate to what we call user story vignettes — prototypes close enough to the real thing to give us a strong sense of the concept’s core potential. In these prototypes, built in InVision, Principle, or Framer, we only pay attention to the most important flows, since our goal here is the core potential, not the edge cases.

Moodboards (brand)

For brand projects, our concepts usually manifest in a massive artboard of ideas. Its purpose is to visually explore and set the mood of the forthcoming web site, product UI, out-of-home campaign, business card, tote bag, or whatever it may be, showing a collection of UI elements: general typography, text link styles, form fields, button states as well as photography and color palette. It’s fairly informal and allows for experimentation.

The goal is to lead to a visual vocabulary that enforces the upcoming brand exploration. It’s full of sketches and nascent ideas, and is critical on aligning on aesthetics and visual styles.

Testing

After the concepts are fleshed out comes a critical moment: putting them to the test. What this looks like depends on the specific type of design effort.

For product design, this often means putting concept prototypes in front of real people. For brand, it means stress testing the concept in a bunch of different contexts. At this point, after some testing, we usually align on one big general direction, the most promising one.

Two things we commonly do during this stage:

Usability studies (product)

Often we’ll do usability studies with our prototypes, formal or informal. Ideally, the people we recruit for testing will share traits with the target user we defined in the earlier research phase. The studies can take place at many different stages or be ongoing — one big push in an early concept part, as well as several iterations as the concept is fleshed out further.

Future-proofing (brand)

We go through various thought experiments, imagining different scenarios for the brand. The business landscape will inevitably change for our clients, and they and their brand may one day find themselves in situations they haven’t even conceived of yet.

As a result, we test our design ideas by applying them to tangible real-world examples that are relevant to their business today — but also give them a vision of the future. Stoke their imagination of what the brand could be if nurtured properly. A brand should allow for the business to evolve and grow, and it’s important to think through that earlier rather than later.

Creating the system

Even if you have great concept, you still have some awfully important work to do: put the big idea into an understandable system, and get all the details right. For instance, how is the system organized? What is the detail of every page? How does it vary if the user is new vs. returning? And so on.

Example deliverables from this stage:

Information architecture (product and marketing)

Information architecture is how all the puzzle pieces of an app or a site fit together. A clear and transparent organizing principle makes your product easier for your audience to use, and easier for you to scale as needs evolve.

Users flows (product)

In the concept phase, you may already have explored some of the hero flows, i.e. the primary, most common paths that users take within your app. But there are still a lot of other flows to consider, whether it’s secondary flows, or experiences that vary by user type. This is the time to go deep on the details and get all those flows down. Given the number and complexity of screens, this is often a nontrivial amount of time.

Documentation and delivery

Lastly, we finalize the assets. This means delivering the documentation of the system that was created, and outlining all the meaningful components of the design so that any future designs will be relatively straightforward to create.

Some critical components at this juncture:

A well-annotated design system

The design system is the toolkit the team uses going forward. The complexity of the system varies by project, but often includes guidelines around everything from common components, colors, type, to error message styling. These reusable bits make sure that the current implementation is solid, and that there’s an easy starting point for any future endeavor, both in terms of design and development.

Uenoversity

At Ueno, we like to teach a team how to fish. So beyond the design guidelines, we always include an in-person handoff with the client team, helping answer any questions and set the team up for success going forward.

If something more tailored and in-depth is required, we offer a master class called Uenoversity, where we provide deeper tools and guidance with a full-day workshop that consists of a complete brand overview, hands-on tactical training, a design sprint and follow-up “homework” to review. The goal is to answer all questions and stress-test the brand using real-world examples.

Lastly, in all components, we always think about bringing the chocolate, one of our core values. How can we go above and beyond? How can we give that extra bit of delight both for the client, but just as importantly, our target users? This is the part that we sprinkle in, throughout the process, no matter if we follow the above to a T, or more commonly, have some completely new process that is exactly what that specific project needs.

I hope that answers your question!

Best,
— Sasha

PS. Thanks to Aaron Poe and David Navarro for working together on the above.

Sasha Lubomirsky is Executive Creative Director at Ueno SF. Follow her on Twitter. Or don’t! Do what you want! It’s your life!

Want more advice? Send your questions to hi@ueno.co or via Twitter.
Want more email? Because Ueno has a newsletter.
Want to read more? Try this post by Ueno’s David Navarro on the difference between a designer, a senior designer, a design lead and a creative director.

Dear Ueno: What’s your design process like? was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction, or: Why I stole the notes from Shangri-La

This story begins with your hero — me — finding myself reading Rilke’s I Live My Life in Growing Orbits, in Robert Bly’s translation, naturally, at the podium of the 6th floor ballroom of the Shangri-La Hotel in Vancouver, BC.

I had come to Vancouver to attend Ueno’s annual company retreat, an event that is something like a boarding school for designers.

I hadn’t been asked to speak that evening after dinner, but there I was.

The workshops earlier in the day had yielded some great insights. We had talked about the design process. We had talked about the winds of change. And, observing the rule of threes, we had talked about a third thing.

Our head of finance had dressed like a pirate, and told us to “log yaaar hours.” Our head of partnerships had talked about partnerships, then immediately moved to New York. Our head of development had talked about how development works, and thrown candy at everyone.

We had made little notes. Then stuck those notes to larger notes. Then stuck dots on our favorite notes.

All in all, the company’s annual metaphorical firmware update had been a screaming success.

And thanks to the amount of drinking, and my reading of Rilke, the team was now closer than ever.

Sometimes I like to imagine that I’m myself, but from 30 years in the future, and then just live a situation in that mindset. Like Scrooge wistfully looking through a frosty window at his past. Even the most mundane events can seem nostalgic through that lens. Yes, even a company retreat.

My inner cultural anthropologist, on the other hand, lives like he’s from either end of 10,000 years from now. The notes that people took during the workshops set him to work. If anyone found these in 10,000 years they’d think “How cute. The beginnings of civilization.”

If an ancient Sumerian found these they’d think:

A: What is this material?

B: How are the colors so brilliant?

C: What are all these scratchy runes that go along the horizontal lines?

D: I must show the others.

I thought all of the above.

Which is why I stole the Notes from Shangri-La…

Artefacts 1 to 21

Artefact 1. This first artefact, a charmingly primitive attempt at self-expression, gives us great insight into the proto-human mind.

Artefact 2. How is music made? It is made by pre-existing music. Which came first? The music, or the music? What is music? Thankfully, we now know that it is complex. And it is also what is up.

Artefact 3. Music can also trigger good things. Including profit.

Artefacts 4 and 5. These two documents were found in a pile of debris after a particularly intense workshop on customer relations. Having a similar colour palette, they seemed to be related. In the second document we see new artistic developments with the layering of colours. Also, a kind of ink transfer printing method seems to have been used to render images of a young man with pointy hair.

Artefact 6. In this piece we see the same kind of of ink transfer printing method used to render a “Cat” and a “Dog”. The large coconuts, or olives, in the upper right introduce a new colour to the palette. From previous documents we learned that music can be complex, but now we also learn that technology tends toward complexity by diving large problems into smaller and smaller problems. This can’t be good.

Artefact 7. Here we have the most cogent notes thus far. From someone who may have actually been paying attention. Most likely some kind of thought leader.

Artefact 8.

General reminders to the designer-self:

1: Make Stew
2: Use it in a project.

An interesting note of note is:

“DISTANCE — VIDEO CALLS — COMMUNICATION FLOW”.

Before the advent of paper information could only travel via a human. And only at the speed that said human was moving. You could get on a horse, and move the information faster, but even then there was only one copy of the information. In the human’s brain. Paper was a disruptive technology when it came along, allowing humans to make copies of the information in their brains. Seems like some kind of witchcraft if you ask me.

Artefact 9. Here we have our first piece of fine art. A lovely rendering of what seems to be a brunch table with a plant on it. I imagine that the pitcher is filled with ice cold lemonade. Also notable is the quote “Death is guaranteed, a good childhood is not.” I think Mark Twain said that.

Artefact 10. With a large primitive face illustrating the anxiety that comes along with positions of leadership, and jagged lines illustrating what you’ll find if you actually open up your mind, we have a raw and vulnerable display of the 21st century ego/id.

Artefact 11. Here we have a lovingly rendered representation of an un-named “cola” drink with a fly buzzing near it. And a quantification of the time required to draw it. One hour.

Artefacts 12 and 13. These were also found in a pile of debris after a workshop on pattern recognition, and seemed to be related.

Artefact 14. Can you recognize the pattern in these? It is about advertising and its outcomes.

Artefact 15. Note that only one person has their eyes open.

Artefact 16.

“Interpretation is the revenge of the intellectual upon art.”
― Susan Sontag

Artefact 17.

“Avant-garde is French for bullshit”
― John Lennon

Artefact 18.

Now we arrive at our first truly substantial artefact. A scathing commentary on our modern corporate hierarchies, I appreciate the use of mixed media here. The combination of 2D and 3D in this gezamtkunstwerk forges new dimensions of emotional expression.

The folded post-it notes echo Untitled — 1967 by Donald Judd, as well as Untitled 1968, 1972, 1966, and 1973 by Donald Judd, but with a bold use of colour and vulnerable media (paper) not often found in the work of Donald Judd, creating a wholly different statement about the conflicted nature of the self within the context of the modern LLC.

The post-it notes are also an obvious reference Rilke’s “I Am Too Much Alone in This World, Yet Not Alone,” wherein he states “where I am folded, there I am a lie”, calling out the intrinsically duplicitous nature of corporations that claim to be organizationally flat.

Also, that cactus is adorable.

Artefact 19.

Now this, I can’t stand. We all know about R. Mutt and his found-art “fountain,” and how Duchamp was too cowardly to claim it as his own. Duchamp’s notorious cowardice has been eclipsed here though, with authorship of this piece being credited to “anonymous,” and the piece being entitled: This Page Intentionally Left Blank.

Clearly leaning too heavily upon the influence of heady minimalist works like John Cage’s 4′33″, but with the removal of silence and time as media, and only relying upon the expected outcomes of relational aesthetics, wherein the artist is merely a “catalyst” for an experience, this piece is a mere McGuffin. It’s like buying a box just because it’s full of a special kind of “air”. A half hearted attempt for its creator to be perceived as Artist…

I think I love it.

Artefact 20. Exploring the connexion between memory and identity, and shining a harsh light on the transitory nature of experience, this piece really, uh… Speaks to me, or something.

Artefact 21. I drew this one. I imagine the cymbal making this sound: Tssssssssp.

Tory Satins is a photographer and videographer at Ueno SF. While you were reading this, he was probably going through your trash.

Want to dress like a pirate and throw candy? Because Ueno is hiring.
Want more email with links to silly posts? Because Ueno has a newsletter.

Notes from Shangri-La was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.

From Dragos Lupascu on Twitter:

I don’t know how they do it, but absolutely every Ueno-made website is loading instantly. Blazing fast. Every website, every page. Amazing!

Davíð Arnarsson, developer at Ueno Reykjavík, is happy to take the compliment:

Hey Dragos, thanks for the compliment!

When it comes to speed, you could say we’re standing on the shoulders of giants. We use open source tools which provide a lot of optimisations when working, like we do, with a stack based on React.

But before we go further, let’s back up a bit, and split performance up into two categories: server-side and client-side.

Server-side performance

To measure server-side performance we like to use the “time-to-first-byte” (TTFB) metric. TTFB is the time the client (in our case, the browser) spends waiting for data from the server after sending the initial request.

For our projects we primarily use Gatsby and Next.js. Both are application frameworks based on React, but they differ in approach.

Gatsby is a static site generator, which means that it ingests data from a data source (such as Prismic.io, a headless content management system we tend to use), and outputs static HTML, CSS and Javascript, using our React code. Being static, the TTFB tends to be very low, requiring no server-side preprocessing to render. We deploy these files to an Amazon S3 bucket for example, and set correct Cache-Control HTTP headers for the files.

Sometimes we need a running application server to implement some special logic, for example consuming some user input from a form, invoking a service with that data, and then rendering a result of some sort. In those cases we use Next.js, which renders our React application per request and enables us to do server-side logic before serving our application to the user.

Performing this logic can be time-consuming, so we do our best to cache the result of it. We use redis as a cache store because of its ease of use within Heroku, our hosting environment. Heroku is a platform-as-a-service which offers a wide variety of add-ons and integrations. Redis is one of those add-ons. Heroku serves our apps via web workers. Heroku can, depending on the TTFB, spin up many worker instances that share the load.

These worker instances are completely isolated from one another, meaning that if we were to use in-memory caching, each worker would need to build up a cache for its own use. By storing cached values in redis, the web workers share cached values, meaning that if worker A does some processing and commits some value to the cache, worker B can use that value without doing any processing of its own.

We like sticking CloudFlare in front of our apps, because it gives us a global content delivery network (CDN) for our static resources without much hassle.

[From the archives: How do I pick and set up a CMS for my site?]

Client-side performance

Client-side performance is hard to measure. It’s all about how fast the user perceives the site to be. There are some metrics we can use to our aid, of course, but more as a guidance rather than something concrete. Time to Interactive (TTI) is one such metric, which estimates how quickly the page becomes responsive to user input after rendering is completed based on network activity, among other things. You can try it with Google Lighthouse, built into the Google Chrome Dev Tools under the Audits tab. Google also has an excellent section on performance in their Lighthouse audit tool documentation.

Need for speed

Our tools provide optimisations to help lower the TTI of our React apps. Both Gatsby and Next.js serve pre-rendered versions of our React apps, reducing the time it takes to start the React app in the browser, as well as helping search engines index your content. Both frameworks split all compiled javascript and css into separate page bundles, so the user only has to download the minimum required to display each page. Keeping the file size down certainly helps!

Once the user has fetched the page and is happily scrolling down the page, we can make another optimisation, prefetching pages. Both Gatsby and Next.js have built-in support for this. Their approach differs slightly, but essentially what they do is detect anchor tags with links to other pages on the site, and add this …

<link rel=”prefetch” href=”…” /> 

… to the <head> tag of the page pointing to javascript/css for those pages. The browser then fetches and caches these resources, so that they’re ready if the user wants to navigate to that page. Take a look at this example.

Image optimisation is important too, especially if your client is also uploading images to the site, for example into an image gallery. If a site is littered with large images the user might not see anything but the site background while the images are being downloaded, leading them to perceive the site as slow. To counter this we might bake (very) low resolution versions of the images into the HTML markup with data URIs:

<img src=”data:image/jpg;(insert tiny base64 encoded image here)” /> 

Instead of seeing absolutely nothing, the user will now see the lower resolution images first. Then, once the full resolution images have been downloaded we can do something nice like animate the new images in. Also, by defining the image container size in CSS before loading an image, we ensure that the page content doesn’t jump around when the image starts loading. Here is an example of image baking.

In some cases we extract the minimal CSS required to render the “above the fold” content to a separate <style> tag included in the <head> of the HTML document. This prevents a “flash of unstyled content”, where your markup is rendered without styles while the browser is working on downloading and parsing our stylesheets.

Ultimately, being mindful of the code you write yields the best results. For example, don’t do anything super computationally expensive in your application without due consideration for the users who won’t be viewing your site on a powerful laptop like us devs. Remember mobile users — they matter too.

That’s more or less it. I hope this gave you an insight into what makes a Ueno site perform well!

— Davíð

Davíð Arnarsson is a developer at Ueno Reykjavík. He moves so fast that our photographers haven’t been able to take a picture of him yet, but he won’t be able to evade them forever. Stay tuned, and follow Davíð on Github,

Need advice? Send your question by email to hi@ueno.co or via Twitter.
Want to make fast websites? Because Ueno is hiring.
Want more email? Because Ueno has a newsletter.
Want these questions to stop? Because this was the last one.

Dear Ueno: How do you make websites load so blazingly fast? was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.