#22 Why it’s important to have 2 different UX portfolios

Illustration showing a person looking at two UX portfolios in a drawer

UX portfolio is the most important component when you market yourself and apply for a job. Yes, your previous work experiences are important too, and your college degrees still matter to certain extent. But UX portfolio is the most concrete and tangible proof of your work.

Nothing beats that.

I would suggest that you have 2 UX portfolios:

  1. In-depth process walkthrough portfolio (PDF or ppt or Keynote)
  2. Online portfolio

In-depth process walkthrough portfolio

Hiring managers and recruiters are looking for candidates who can actually deliver tangible results. Well, what does that mean?

So a UX designer’s job is to solve a user’s problem. In order to prove yourself to hiring managers and recruiters that you can deliver, you need to show the process through tangible artifacts. You need to show your thought process and decision-making process.

This means that bunch of screenshots of a final product don’t mean much.

Because screenshots don’t tell any story about why.

  • What was the process that you took to get there?
  • What kind of key decisions did you make along the way?
  • What were the reasoning for those decisions?
  • What kind of user research did you do?
  • What were the key findings from those user research?
  • What was your role and contribution to the project?
  • What were the things that didn’t work well?
  • What were the things that worked well?
  • How did you define the problem in the first place?
  • Or was it defined by someone already?
  • How did you work with PM and engineers and other stakeholders?

These are types of things that hiring managers and recruiters need to know in order to evaluate UX designer candidates.

All these can be captured in a process walkthrough document. This is an in-depth walkthrough of your process throughout the project, which will give its audience a detailed view of how you worked. Typically, it’s better to create this type of portfolio in a presentation style such as PDF, Powerpoint, Keynote.

Pick one or two of your strongest projects, and create in-depth process walkthrough. This works great for in-person onsite interviews, where you will be given 30 minutes to an hour to present your work.

Hiring managers and recruiters are looking for your problem solving process and ability. How you define a problem, how you approach and solve the problem, how you learn what worked and what didn’t, how you iterate your design based on those learnings, and what your process is to go through all those/etc.

In-depth process walkthrough portfolio should be able to answer all those questions.

Ideally, when you work on any UX projects, you should make a habit of documenting your process along the way. 

Once project documentation becomes your habit, you will be in a far better position than before, so that you are always one step away from putting together an in-depth process walkthrough portfolio.

Online UX portfolio

Another UX portfolio that you should prepare is an online portfolio.

This should cover wider range of projects without getting too much into details to show a variety of projects that you worked on. Just include basic information such as project/product name, year, your contribution, key accomplishments.

This online portfolio works well when you initially apply for a position.

Many people use portfolio platforms such as Behance, which is probably the easiest way to get started. The downside of using such popular platform is that your portfolio page could easily get lost in the crowd, because there are so many similar portfolios competing yours.

If you can afford it, creating your own WordPress portfolio site with your own domain may make it stand out from the crowd.

But this is more time consuming and expensive solution, so it’s definitely not for everyone.


Check out YouTube version too!

Also, check out How to start your own UX project too!

#21 What you need to keep in mind when considering a bootcamp (2020)

A person being skeptical about UX bootcamps with a title text.

So UX bootcamps have become one of popular paths to become a UX designer. In principle, having various educational options and opportunities are good. But there are certain things that you need to be aware of and keep in mind when considering taking a UX bootcamp.

I totally understand that choosing what’s best for you is a stressful process, because there are so much information out there, and people say different things. Obviously when you try to put in your hard-earned money, you really want to make sure that you are putting it to the right one. Some people desperately wants to know which UX bootcamp is the best.

But here is a reality.

There’s probably no one who can precisely answer that question, because there’s no one who has ever taken ALL the existing UX bootcamps!

With that said, I wanted to bring up a few key things to keep in mind to help you find the best way to move forward.

1. Bootcamp certificates don’t mean anything to hiring managers and recruiters. 

Your portfolio does. Your college degree still does to certain extent, which acts as a filter when hiring managers and recruiters have to go through thousands of resumes.

2. Be careful if a bootcamp course includes coding as mandatory.

That’s a warning sign. That’s their tactics to charge you more money. Coding is absolutely not necessary for a UX designer. Check out my other article dedicated to this topic.

3. Don’t think just finishing a bootcamp will make you an experienced UX designer right away. 

It doesn’t. Being a UX designer is a journey of continuous learning. Bootcamp is just one part of that journey. You need to actually work on real UX projects to learn and get better, and that takes time.

4. Don’t become a victim of bootcamp’s bloated marketing messages

Many bootcamps make bloated marketing messages around becoming a full-stack UX designer who can code, or immediately getting a job with a high salary right after graduating. Some bootcamp graduates seem to become victims of this, resulted in showing arrogant attitudes thinking they know everything but they don’t.

5. Large bootcamps are becoming like UX candidate factories, pumping out candidates with identical portfolios 

They keep pumping out bootcamp grads to the job market, which caused many lookalike candidates with identical portfolios following the same process template. This happens more with larger bootcamps because of the scale factor. You need to be aware of this so that you can differentiate yourself from the crowd.

6. Instructor hit or miss

Sometimes you get unlucky, and have assigned an inexperienced instructor who just graduated from a bootcamp. This might be due to bootcamps trying to take more students than their own capacity to grow their businesses.

These altogether start generating some negativity towards big-name bootcamp grads among some hiring managers and recruiters.

It finally comes down to how much effort that you put into whichever course you end up taking, and keep learning with a humble mind even after completing the course.

Because taking a course is only the beginning.  Being a UX designer is a journey of continuous learning.

As long as you have this right mindset, which exact bootcamp or online course that you end up taking becomes less important.

Below are some interesting articles about bootcamps that you might want to check out.

Questions you need to ask before going to a UX Bootcamp

The UX of Getting Started in UX

Check out YouTube version too!

#20 How to start your own UX project (5 steps)

A person standing without knowing how to start his first own UX project.

So UX is something that is hard to learn if you don’t actually do it. By working through UX projects, you will learn so many things as you go. You can only learn effectively by doing. That’s the best way to learn. It’s OK even if you feel like you are not ready. Which is why it’s important to work on your own UX project!

Let me show you one of UX process frameworks that you could use to start your own UX project. There are many frameworks out there with slight different variations, quite a different ones and so on and so on. Which framework to use is less important.

The most important thing is how you actually work through your project, and solve a user’s problem through a user-centered design practice.

OK, with that in mind, let’s take a look at the process framework.

  1. Problem statement
  2. Competitive Benchmarking
  3. Concept development
  4. User test
  5. Design iteration

It’s simple enough, right?

OK, let’s take a closer look at each step.

Step 1: Problem statement

This is where you define what problem that you are trying to solve in your UX project. Find a UX problem, and define it clearly. It might be easier if you pick something that you use on a regular basis, whether it’s a mobile app, a web application, a software program, or an electronics device/etc.

Step 2: Competitive benchmarking

Find example products that tackles similar problem that you are trying to solve, analyze pros and cons so that you can learn from those. This is a great research opportunity to look for how people are tacking similar problems and coming up with solutions. If you cannot find an exact match that is totally fine. As long as it has some similarities to your project so that you can learn from it, that’s fine.

Step 3: Concept development

This is where you come up with UX concepts to solve the problem in form of task flows, wireframes and prototypes.

Step 4: User test 

Once you are done with creating your UX concepts in form of task flows, wireframes and prototypes, it’s time to put your concept in front of your users!

Find 5 target users and conduct user test sessions.  Put your concept prototype in front of them and find what works and what doesn’t. Summarize all the findings.

Step 5: Design iteration 

This is where you iterate your design by incorporating findings from the user test.


As you work through these steps, document all the process as you go. 

This documentation basically becomes your project in-depth walkthrough, which can be put into your portfolio.

It would be ideal to have 2 different portfolios: a) online portfolio covering many projects with less details for initial distribution , b) PDF portfolio that shows in-depth walkthrough of your 1-2 strongest projects, which is effective during in-person job interviews.

If you want to learn more about working on your mock project to great details, check out RealWorldUX basics course and basics light course from the link below.


Check out YouTube version too!

Also, check out Being a UX designer is a journey of continuous learning!

#19 A UX designer does not need to learn how to code (fact)

An image showing a person confronted with a sea of code, but relieved to find out that he does not need to learn how to code as a UX designer.

I answer many questions in UX online forums such as Reddit. And I see that many people seem to misunderstand about this. So I wanted to clarify: A UX designer does not need to learn how to code.

99% of UX designer positions out there in the job market don’t require coding skills.

Especially if you are starting out to become a UX designer, don’t worry about learning how to code. Because you absolutely don’t need it.

A UX designer’s job is to solve a user’s problem. This includes defining a problem, and then coming up with UX design concepts that solve that problem in form of task flows, wireframes and prototypes.

Ultimately digital interactive products need to be coded by engineers in order to launch in a market as a real product. A UX designer needs to work closely with engineers in order to have her design implemented in code. 

For this reason, a tight collaboration with engineers is absolutely critical for a UX designer. There’s no question about it. But that does not mean that a UX designer needs to learn how to code. What’s more important is to learn how to communicate with engineers effectively. This is more about being a good listener, and understand where engineers come from, how they work, what their priorities are, and what they need to accomplish their goals.

A UX designer should be a good listener with a compassion, so that she is empathic when listening to her users during user research. This same soft skill can be and should be used when communicating with engineers, or anyone, really.

UX design is something that you can only learn by doing. Only through working on actual projects, you will gain experience and get better. And along the way, you will face many questions, you will feel a strong need or a burning desire to want to learn certain things.

That’s how you should and will learn new things, new skills, new specific areas within UX, or outside of UX.

Being a UX designer is a journey of continuous learning.

Somewhere along the way of your journey, you might come across a strong need and develop a strong interest towards learning how to code. If that happened to you, that’s the exact right timing when you should learn how to code. If this doesn’t happen, that’s totally fine too! This could happen when you are talking to an engineer,  and the engineer mentioned something that made you curious about. Or when you want to prototype a very dynamic UX concept that you came up with, which was not possible to show in a basic click through prototype.

If you happen to come across these situations and develop a desire and interest to learn how to code, that’s good, go for it. Even though in general, a UX designer does not need to learn how to code, there are certainly benefits for a UX designer in learning how to code.

Let me show you why.

  1. Having some understanding of code allows a UX designer to be more grounded and practical when coming up with a UX concept. As a result, your UX concept will likely be more implementable and realistic.
  2. Understanding how to code makes it a bit easier to talk to engineers, because you can understand what they say and how they think much better with greater details.
  3. Having a coding skill may open up a new creative possibility for a UX designer, so that she can build a more dynamic, code-based prototype to visualize innovative concepts that may be hard to prototype otherwise.

From my own experience as a UX designer, I benefited quite a lot especially from #3, and that was a driving force for me to want to learn how to code so that I can achieve what I wanted in a prototype that I built.

One caution for you: Coding is a totally different beast, which requires a totally different skillset and mindset part of your brain! You can easily get drowned once you dive in.

In my case, even though I did quite a bit of coding to build dynamic prototypes, I came across a lot of occasions where I had to do a lot of debugging to find out what went wrong when things were not working as expected.

This was quite painful, because coding was not my core expertise, not what I wanted to focus on. My focus and priority has always been visualizing UX concepts in the most compelling way. If a code-based approach is the best way to achieve this, that was when I went for coding. So coding itself was never the main thing. But lot of times, you end up spending a lot of time figuring out errors in your own code. Coding is very interesting. It has an art in its own way. For example, writing a function with variables and logics is very creative, flexible, with so many possibilities. I enjoyed it very much for sure.

I’ve met a very few UX designers throughout my careers who have natural talents and interests in coding, who can do amazing things by code such as generative arts. But there aren’t many such people.

Ultimately, it comes down to what’s most important for you as a UX designer.

Keep reminding yourself what’s the most important thing to you.

As long as you always ask yourself about your priority, you will find your answer in you.


Check out A prototype is worth a 1000 pictures to learn about the effectiveness of a prototype.

Check out the YouTube version too!

#30 What I learned from COVID-19 data visualization

An image of a laptop showing COVID-19 data visualizations

Designers have tremendous power and responsibility to handle data and communicate the message visually through various media. The way two designers slice and present the data could make the stories in the two graphics look completely different. This hugely affects the perception and understanding of the viewers.

Today, we are flooded with all sorts of COVID-19 related information, visualized in various different ways. While it’s important to stay up to date with the latest information, I felt many visualizations that I see are often short-sighted, and lack a holistic perspective. Among the majority of these, I was able to find a few really good data visualizations that helped me understand a broader perspective. I’d like to share those with you.


Volume comparison with influenza

While the COVID-19 outbreak is terrifying, I strongly felt a need to calm down and view data objectively, so that I can take actions effectively and efficiently without reacting irrationally by fears. I also felt I have a responsibility as a designer to contribute to the world in this respect, which is why I decided to write this article.

Number of people infected to influenza annually vs. number of people infected to COVID-19 as of 4/2/2020 
Source:  US National Library of Medicine, Worldmeter
Number of people infected to influenza annually vs. number of people infected to COVID-19 as of 4/2/2020
Source: US National Library of Medicine, Worldmeter

The above chart shows there are up to 1 billion people who get infected with influenza every year, according to US National Library of Medicine. The latest data on the number of people infected to COVID-19 counts 1.7 million as of writing this today according to worldmeters.info. It’s still April, and the number is continuously growing at a rapid pace, so I don’t know how far it’s going to go.

On the other hand, I usually don’t pay much attention to the massive impact that influenza has every year. My typical attention on influenza has been nothing more than vaguely thinking “oh, it’s another flu season again…”.

This time, however, I paid more attention for the first time on how massive the effect of influenza has always been. Something that I probably never bothered to look at if COVID-19 never happened.

Fatality rate: Influenza vs. COVID-19 as of 4/2/2020
Source: US National Library of Medicine, Worldmeter
Fatality rate: Influenza vs. COVID-19 as of 4/2/2020
Source: US National Library of Medicine, Worldmeter

Fatality rates visualized with Y-axis manipulation

When I looked at the death count of both COVID-19 and influenza above, the fatality rate in COVID-19 was drastically higher than influenza. The break down by age of the fatality rates showed me a brutal reality that older age groups were significantly higher in COVID-19 compared to seasonal flu as seen in a chart below.

Source: OurWorldInData.org

But I noticed that the maximum value for Y-axis was set to 6%, mapped from the highest value which was the fatality rate of people with 60+ years for COVID-19. Since this graph shows percentages out of total, the maximum value should be set to 100% to give viewers the correct ratio of the data.

So I recreated a graph based on the same data, setting the maximum value of Y-axis to 100% (see below). It looked a lot different from the original chart. The magnitude of all the bars looked less threatening because the highest value was 6 out of 100%. This is how it should be rendered for a percentage-based graph in my opinion.

However, most of COVID-19 fatality rate charts that I see show the maximum value of Y-axis mapped to the highest value like the example above. This is not a data manipulation, but I think it ends up exaggerating the fatality rates of COVID-19 to be more frightening than needed. This article written by Ryan Mccready describes these tactics as one of the common ways to manipulate viewers.

OurWorldInData.org’s graph recreated with Y axis maximum value set to 100%

Top 10 cause of death worldwide

A bar graph showing top 10 cause of death in 2016 with COVID-19 death. Source: WHO, W
Source: WHO, Worldmeter

While looking into COVID-19 statistics, I also wanted to look into how many people die with what kind of causes annually and globally. According to WHO, a total of 56.9 million people died in 2016 worldwide. This number blew me away. In another words, we already live in a world where so many people die every year for various causes.

This is absolutely not to say that we don’t need to worry about COVID-19 by any means. But at the same time, I needed to understand the big picture from a global point of view. For example, 1.4 million people died from road injuries alone. Most of the time, I don’t even have a chance to see such global statistics. COVID-19 pandemic gave me an opportunity to consider all these numbers around deaths in a global context. It also made me appreciate the fact that I still live healthily today.


History of pandemics

I came across a stunning data visualization of the history of pandemics created by visualcapitalist.com below. This introduced me to a history of pandemics. It gave me a broader perspective that humans have always lived in this continuum of constant pandemics. Below is a quote from visualcapitalist.com.

THROUGHOUT HISTORY, as humans spread across the world, infectious diseases have been a constant companion. Even in this modern era, outbreaks are nearly constant.

Visualcapitalist.com
A diagram "History of Pandemics" 
 with pandemics visualized in virus-like spheres. Source: Visualcapitalist.com
Source: Visualcapitalist.com

While this diagram was visually intriguing and the content presented was very good and informative, I found a few issues as stated below.

  • Abstracted and generalized virus-like representation was visually interesting and drew my attention in the first place, but it was a more or less cosmetic effect.
  • The three-dimensional depth of field towards Z-axis made it impossible to visually compare the sizes of virus-like spheres from different eras.
  • It was unclear how the values were mapped to the sizes of the spheres. Was it radius, or the mass? If mapped to the mass, it was not visually intuitive.
  • Color coding seemed arbitrary.
  • Spherical form factor made it hard to plot precisely on a timeline.
  • Because visual size comparison along the timeline was not possible, the designer duplicated another set of spheres just for the size comparison.

Different 3D visualization can make data easier to compare

Below is how I recreated the data visualization, which allowed a viewer to:

  1. See a precise plotting of each pandemic on the timeline
  2. Compare size of pandemics visually

Obviously it no longer had the colorful virus-like spheres that the original diagram had which drew my attention in the first place. Instead, those were replaced by a bunch of boring bars in a 3D space!

But it achieved successfully in presenting above two aspects without having to duplicate another set of data.

As you can see, a devastating impact and magnitude of Black Death was massive, which was missing in the original diagram as it was far back along the z-axis timeline thus rendered much smaller.

History of pandemics visualized differently for easier comparison - 3D bar graph, created by the author.
Data is based on Visualcapitalist.com and Worldmeter
History of pandemics visualized differently for easier comparison – 3D bar graph
Data is based on Visualcapitalist.com and Worldmeter

Interestingly, this 3D visualization allowed an overall holistic view of the data along the timeline while each data still being relatively comparable, as opposed to a 2D bar chart below which became a mess.

In the 2D bar chart, 1800–2000 area was too narrow to fit in all the pandemics that concentrated in that time period. As a result, too many callout lines were overlaid on top of each other and the bars, making it hard to track and read which one was which.

When it came to the most recent 5 pandemics, it was impossible to show on the same plane, which forced those to be separated in a callout box on the top right corner.

History of pandemics visualized differently in a simple 2D bar graph, which ended up a mess, experimented by the author.
Data is based on Visualcapitalist.com and Worldmeter
History of pandemics visualized differently in a simple 2D bar graph, which ended up a mess.
Data is based on 
Visualcapitalist.com and Worldmeter

Cause and effect of social distancing brilliantly visualized

Here’s another chart that I found extremely powerful and convincing in showing the effectiveness of social distancing, and the consequence of abandoning it too early. I found this in Vox’s article titled How we know ending social distancing will lead to more deaths, in one chart.

The highest peak comes after social distancing measures were lifted, with the death rate falling only after they were reinstituted.

Source: Vox
A graph that shows the effectiveness of social distancing from St Louis case. Source: Vox
Source: Vox

From visual design perspective, the chart above is nothing special. Rather, it’s a very basic black and white line graph accompanied by bars on the bottom.

However, the content that it carries has significant value in my opinion. This is a clear evidence of how social distancing was effective in a pandemic situation. The way the death rate line graph was combined with the timeline of school closure and the public gathering ban was a brilliant execution to highlight a clear cause and effect relationship between those elements visually. I would say this is a masterpiece of infographics.

Instead of constantly showing fatality rates in Y-axis-manipulated graphs, a quality chart like this should be shared and circulated more across our news and social media. That would be far more informative, helpful and effective for viewers to understand the criticality of social distancing because it clearly illustrates its effectiveness without further explanation. That’s the power of data visualization.


Understanding a big picture is an important first step to take actions

Confronting with loads of COVID-19 data visualizations while sheltering in place gave me an ironically interesting opportunity to think through these as a designer and it motivated me to write this article. It made me realize that asking good questions and understanding the big picture is crucial in order to grasp the situation unbiased, so that I can take the correct actions with confidence.

  • Can I get a big picture of past pandemics in our history?
  • Do I know the impact of influenza every year in volume?
  • How many people die every year worldwide for what causes?
  • Why is social distancing important?
  • What can I do to help myself, my family, and others?

The whole situation reminded me of Rachel Carson’s quote from her famous book, Silent Spring, which I borrowed in a Global Village animation that I wrote about in my previous article.

The human race is challenged more than ever before to demonstrate our mastery, not over nature but of ourselves.

Rachel Carson, Silent Spring 1962

I feel like we as the human race are challenged to not only care about ourselves but also care for others. To demonstrate our mastery, understanding is one of the first important steps. I took this step, and now I feel more prepared than before.


This article was published on Medium in Nightingale, the Journal of the Data Visualization Society, as a collaboration article with Nightingale’s editor and healthcare data visualization expert, Amanda Makulec, and Jason Forrest, Nightingale’s editor in chief.

If you are interested in data visualization, check out the following articles too!

#18 Prototyping: How I see a lesson from Flash holds the future

Prototyping tools' logos on a timeline from 1987 to 2018

Prototyping is critical part of UX process. Obviously, prototyping tools play significant roles, and we have seen various software programs throughout the past decades. Among these tools, I would like to focus on Adobe Flash (now called Animate), and share what I learned from using it for years, and why I think a lesson from Flash holds a future of prototyping. Let me dive in.

History of modern-day prototyping

When we think about the future of prototyping, it’s worth looking back in a history. A chart below shows major prototyping and authoring tools from 1987 to 2020. On the bottom, I added key product/service launches that impacted the world, which provides an overall historical context. The list is not exhaustive, but you get the idea.

A timeline of each prototyping tool's launch and discontinuation year. Major product launches were also included for contexts
History of prototyping / authoring tools, 1987–2020

The rise and fall of prototyping tools have always been heavily influenced by the underlying technology trends, which can be divided roughly into 4 eras; 1) Multimedia Era, 2) Flash Era, 3) Web 2.0 Era, and 4) Mobile Era.

Strictly speaking, Microsoft Powerpoint, Adobe Photoshop, Illustrator, After Effects, PDF are not prototyping tools. But in early days (and even today), designers used/use these tools to create simple prototypes. Prototyping can be done using any tools, including hand-drawn sketches on paper, after all.

Processing never took part of the mainstream UX prototyping, but it created a distinctive, interactive/generative art community, which gave birth to Arduino, a popular hardware prototyping platform.

Among these, Flash launched in 1996 by Macromedia, which later acquired by Adobe in 2005.


Flash in a historical context

Left: MOSAIC UI screenshot, Right: Flash 4 UI
Left: Mosaic web browser (Source: wired), Right: Flash 4 user interface

In early 90s, When the internet went mainstream with the birth and wide adoption of web browsers, the basic HTML was extremely limited. It was Flash that came to rescue this limited environment of early web by enabling various rich interactions within its embedded SWF file in an HTML page. Since its launch in 1996, Flash quickly became the center of rich internet web development platform. During mid 90s to early 2000s, Flash was dominant as a prototyping tool as well as a web development platform. Many Flash-based games flourished. Even the initial YouTube on PC web was Flash-based, until Google switched to HTML5 video in 2015.

During early 2000s all the way up to 2019, I lived with Flash. I literally created hundreds of Flash prototypes. During these days, I worked on various advanced concepts too, and Flash was perfect for that.

It was true that Flash had many technical, implementation problems such as sluggish performance, poor memory management, being buggy, unable to bookmark specific “page” inside Flash, a browser plugin always had to be updated, and so on.

However, from a designer’s perspective, Flash offered an almost ideal environment for several reasons.


Flash took almost any media effortlessly

So what was so special about Flash? Flash was extremely flexible and forgiving in terms of how you create and what you could create. It took almost any media effortlessly including text, images, vector graphics, videos and audio files. This was huge at the time when software programs were siloed based on different media types. Whatever media types that you brought in to a stage in Flash, you could handle pretty much the same way to scale, group, animate, and add interactivity. Flash even had a camera object, that you could manipulate almost the same way as other objects.

A screenshot of Mono*crafts website
Mono*crafts — A Flash-based website that inspired may designers, 1999

In a nutshell, Flash gave designers a freedom to push their creativity to a whole new level which was not possible in such an easy way before. During this time, many creative and inspirational works came out from various designers’ experiments such as Mono*crafts above.


Nested timelines

The left screenshot highlights which Movie Clip is clicked on stage to reveal the nested timeline on the right in Animate UI.
Adobe Animate (previously Flash) UI showing a main timeline (left) and its nested timeline when an object is clicked (Right)

One of the most powerful features that Flash had was its nested timelines. This was essentially object-oriented programming done visually. Micro-interaction animations could all be embedded within each object on a page. Although it could get complicated, this was very simple and straightforward model for designers to mentally understand and work with.

Controlling multiple timelines via basic commands

On the timeline, the last frame is highlighted, which is where an ActionScript code was added, shown in ActionScript window. An example of how to control a timeline prototyping in Animate.
Adobe Animate: Timeline control via ActionScript command

These multiple timelines typically needed just the basic controls such as play, stop, loop/etc. Even if you were a designer with no coding experience, these were easy enough to handle. For example, “stop();” to stop an animation, “gotoAndStop(1);” to rewind the “playhead” to the beginning of the animation and stop, or “gotoAndPlay(1);” to keep looping the animation. As seen in the screenshot above, all you had to do was to add a desired line of command on the last frame of the animation timeline.

Showing an ActionScript example of AddEventListener with a custom function assigning an interactivity to a Movie Clip.
Adobe Animate: adding an interactivity in ActionScript

Above shows another example of adding an interactivity to a Movie Clip in ActionScript 3.0. Now ActionScript 3.0 became more complex compared to the original ActionScript 1.0. With ActionScript 1.0 or 2.0, you could add these scripts directly onto a Movie Clip without having to write a custom function. These interactivity allowed designers to intuitively play and stop animations, and jump between different screens with ease. Most of the time, this was more than enough to build quite sophisticated prototypes.

Animation was baked in by default

Showing an example of tween animation of a circle moving from left to right.
Adobe Animate: tween animation

Because Flash initially started as a vector graphic animation software, animation capability was always baked in throughout the program by default. Designers were able to animate pretty much everything in Flash, and this was huge in the time of early web with static pages.

Flash gave designers a fresh, blank canvas to play around with virtually any media, with an ability to animate objects and add interactivity with ease. Who doesn’t want that?

Blending graphical vs. coding approach

Tween animation of a circle from left to right.
Tween animation
Showing ActionScript that defines an animation of a circle.
ActionScript-based animation

Another unique aspect of Flash was its ability to blend graphical approach and coding approach. As mentioned earlier, if you were a designer and wanted to work only through graphical user interfaces, you could absolutely do so by drawing an object and create a tween animation on a timeline. You needed to add basic ActionScript to enable interactivity mentioned above, but that could be minimum.

If you were an experienced designer with some coding knowledge, you could write your own ActionScript functions to enable advanced interactions on top of what you designed visually and animated along the timeline. You could combine tween animation with code-based animation. You could combine static objects in a library with a dynamically created ActionScript objects. The choice was yours, whether the ratio of graphic approach vs. coding was 80/ 20, 50/50, or 20/80, whichever was right for you.

An example of a longer ActionScript, showing part of a for loop.
ActionScript-heavy approach

If you wanted to go 100% with code without drawing anything graphically, you could do that too. Code-savvy designers or engineers were able to define everything in ActionScript without creating any Movie Clips manually on stage, using either Flash or Flash Builder.

This was fantastic for designers because there was always a way around if you bump into coding problems or tween animation problems for example. Designers didn’t want to spend too much time debugging their half-ass codes, because perfecting a code in a prototype was never their goals. They could easily switch to tween animation to get around. Or if tween animations fell short for what you envisioned, adding a bit of ActionScript could solve that problem.

Single prototyping+development platform where designers and engineers can work together seamlessly

A Flash file created by a designer was a deliverable to an engineer, the engineer didn't have to reproduce the front-end.
Designer to engineer handoff model in Flash

Flash provided a unique platform that allowed both designers and engineers to work on exactly the same platform. This was great because designers could create visuals, animations and interactions in Flash, and delivered Flash files to engineers. Engineers who received Flash files did not have to reproduce the front-end, which is the typical workflow in today’s web and app development. All they had to do was to add ActionScript to complete the product. In this workflow, the handoff from a designer to an engineer was perfectly executed in form of a Flash file (FLA), without the designer having to produce additional deliverables such as bitmap assets and design specifications separately.

When the world transitioned to HTML5 and mobile, we lost this flexibility that designers and engineers used to have on Flash platform.


Web 2.0 and Axure prototyping

Logos of major web 2.0 services on a timeline from 2003 to 2006 with Axure, one of popular prototyping tools after Flash.
Today’s many popular web services emerged in early 2000s when Axure launched

In mid 2000s, Web 2.0 dramatically changed how we experience the internet from static to dynamic without having to rely on plugins like Flash. Facebook, Gmail, Twitter, Skype, Google Map, YouTube were all born around this time and became widely adopted by the mainstream internet users. WordPress also launched, and automated content management of many websites which used to be manually maintained before.

Axure user interface, Interaction Editor, and available events and actions that you can choose in Interaction Editor when prototyping.
Axure Interaction Editor

Axure launched in 2003 to address emerging needs of designing Web 2.0 applications. In a way, Axure attempted to have a Flash-like capability via Interaction Editor without having to code. While Axure’s Interaction Editor is well designed and powerful, it somehow feels a bit too cumbersome to build complex interactions just by clicking and selecting every single event and action, compared to defining those in Flash ActionScript.

Axure UI with a Publish Project popup overlaid on top.
Axure cloud publishing feature

Axure was lot lighter than Flash, and published a prototype in native HTML5 without a need for any plugins. Axure shipped with it’s cloud service for free, so designers didn’t have to worry about setting up their own web server to host their prototypes. It was all included. Today, cloud share feature is a must for all the prototyping tools.


World became mobile-centric

Infographic from BroadbandSearch showing mobile traffic has grown 222% in the last 7 years, now accounts for 53.3% of total.
Image from BroadbandSearch

When iPhone launched in 2007, Apple did not support Flash because Flash was too heavy on mobile. More details on why Apple dropped Flash was described in “Thoughts on Flash” written by Steve Jobs in 2010 on Apple’s website. In 2008, Apple App Store and Google Play launched, and the center of the internet shifted from desktop to mobile. Today, the internet usage on mobile accounts for 53.3% of the total internet traffic, surpassing desktop according to BroadbandSearch.

Because Axure started as a tool to primarily design desktop web applications, it fell short in designing mobile apps. As mobile started to take over the world, many new tools emerged with mobile-first approach. Wide adoption of mobile phones also raised a bar for customers’ expectations on user experiences on mobile devices and even desktop web applications.

Today’s prototyping tools

Logos of today's modern prototyping tools placed on a timeline from 2003 to 2018.
Modern prototyping tools emerged between 2000s and 2010s

Today, UX designers are tasked to design, test and iterate UX concepts with much shorter timeframe than before. Modern tools are offering easy + smart features to keep up with demands for these fast iterative processes. This is where we are, with Sketch, Craft, Balsamiq, InVision Studio, Principle, Adobe XD, Figma and Framer X, and more.

Left: a diagram showing how "stitch screens with wires" works in today's prototyping tools, Right: a dropdown showing auto-animate as one of options.
Left: “Stitch screens with wires” interaction model, Right: Auto-animate transitions

Recent trends in prototyping tools are ”stitch screens with wires” interaction model, accompanied by auto-animate transitions that smartly animate transitions between two screens connected.

Various smart features are also developed such as Smart Layout in Sketch, Duplicate and Data features in Craft, Repeat Grid in Adobe XD, Stack feature in Framer X, all of which automate otherwise mundane repetitive tasks beautifully. All these make prototyping super-fast and intuitive for non-code-savvy UX designers.

While these are great accomplishments, many of these are geared towards increased productivity for most typical design works. Somehow I feel these are optimized too much towards today’s mobile standards and expectations, leaving very little space for designers to explore beyond those standards.

This is probably due to what the market demands. Every company and startup is aware of the importance of user experience today. Everyone wants to create its own website and app, as fast as possible. This fast-paced market demand pushes UX designers to work faster. And with today’s expectation on user-centered design practice, everything is moving towards similar directions, similar designs, and similar patterns, because that’s what users are used to and familiar with.

There’s nothing wrong with this from a pure user-centered design perspective. But at the same time, this concerns me. What happened to out of the box thinking, pushing the envelope, experimenting with new ideas, sailing to the unknown?

As much as UX designer’s job is to solve users problems and create delightful user experiences for its users, it should not be JUST listening to what users have to say and simply implement what was heard in form of conventional patterns and standard designs.

Based on users’ voices and observations, UX designer’s job is to imagine and create a better future. This is where more of a free-flowing imagination and creativity need to come in. And prototyping tools should accommodate this as friction-free as possible. Many of today’s prototyping tools don’t seem to put weight on this aspect.


New experiments towards the future of prototyping

A screenshot of Framer X store showing featured components uploaded by community members. Components are ready to use in  prototyping.
Framer X store

But I do see a few interesting experiments happening towards pushing an envelope. For example, Framer X has an online store feature where users can upload and download custom components. Framer X also has pretty powerful code-based extensibility such as Frame Motion. It also has an ambitious vision to take care of handoff from a designer to an engineer.

Adobe XD’s voice interaction capability is quite impressive too, which you don’t see anywhere else. Voice interaction has already become part of our daily lives, and its presence will only grow further.


I really hope that the next evolution of prototyping tools explore more free-form flexibility so that designers can experiment wild ideas and push their creative limits all the way to come up with unexpected, innovative and groundbreaking concepts.

From this perspective, lessons from Flash still holds super valuable. What Flash did in the early days of the internet truly inspired many designers and helped them push their creativity.

I look forward to a world where experimenting with wild new concepts becomes a breeze for designers AND engineers!

I also look forward to a world where a prototype created by a designer IS the front-end of the final product, where engineers plug in their code to turn it into a real product. Engineers should not have to reproduce the front-end already created by designers, and designers should not have to create additional deliverables such as design specifications and bitmap assets for engineers to reproduce their designs.

This article was originally published on Medium in UX Collective on March 25, 2020.

Also, check out my article “Prototype is worth a thousand pictures“.


#17 How to Visualize Layered Data to Show Holistic Relationships

I worked on infographics for one chapter of UNDERSTANDING USA, a TED conference textbook back in the year 2000. So why talk about infographics from such an old book now?

The loss of my favorite teacher, Krzysztof Lenk, gave me an opportunity to reflect on what I worked on under his direction back then. What I realized was that there are so many insights from this project that can still be applied to today’s work of UX designers and information designers. I would like to share my re-discovery of the project.


Book: UNDERSTANDING USA, in 3 color variations

UNDERSTANDING USA was a textbook for TEDX conference, which took place in Monterey, California, on February 23–26, 2000. This was the same conference where Global Village (which I wrote about in my last article) was presented. I initially worked on UNDERSTANDING USA before Global Village.

In 1999, Krzysztof Lenk and Paul Kahn from Dynamic Diagrams were invited by Richard Saul Wurman (the founder of TED) to be part of a team of 12 information architects to contribute to the book. I had an opportunity to work with Krzysztof and Paul on this project.

A copy of TEDX UPDATE letter by Richard Saul Wurman, 11/13/1998

Below is a quote from Richard Saul Wurman on how he introduced the concept of UNDERSTANDING USA in his letter to the contributors on November 13, 1998. He initially called it “Atlas of Understanding.”

The Book: Atlas of Understanding:

To answer the complex TEDX questions, my staff and I are researching government statistics, recent studies by foundations and think-tanks, timely articles by leading journalists and relevant material from industry groups and trade associations.The resulting book will be the Atlas of Understanding — a comprehensive fact-based guide to the fruits of our research. The Atlas will be the TEDX Bible, its blueprint, its compass and its yardstick — striving to be Solomonic in its fairness and impartiality.

But please don’t make the mistake of thinking of this book’s neutrality will translate into something dry, academic and boring. On the contrary, I intend to make the Atlas a showpiece, a demonstration of how complex data can be accessible, engaging and entertaining — without sacrificing its integrity or its nuances. How? There exists within the upper echelon of America’s graphic designers an elite group I call the Information Architects. These talented designers (some of whom are profiled in my 1997 book Information Architects) will condense the TEDX research into its most revealing and informative components. Their extraordinary graphs, maps, video, computer simulations and a host of other media will bring the TEDX information to life. The Atlas will be like a master class in effective information design. Trust me; it won’t be boring.


TEDX Eleven broad social issue areas

When Krzysztof and I visited Richard Saul Wurman’s house in Newport, Rhode Island, we were handed over a box full of statistics, hundreds of pages. The topic our team got assigned was “Global Economy / Foreign Trade / Immigration / Balance of Payments / Business / Workforce / Jobs”, among eleven broad social issue areas defined by Richard to be covered by the TEDX Conference.

Deep dive into piles of statistic data

A glimpse of actual statistical data provided by Richard Saul Wurman for the project

Typically, most design works start with content that is already curated, edited, and selected by a client, an editor, or a writer. However, in this project, we were able to start from which statistics to pick and choose from piles of raw data, loosely organized based on broad questions provided by Richard Saul Wurman as a guide.

Key questions provided by Richard Saul Wurman

Obviously, in order to pick and choose, you first need to fully understand all the statistics packed in the box. This by itself was a lot of work. But it was a lot of fun too, getting immersed deeply into the sea of data.

In the box, the statistics were organized by folders based on topics. Krzysztof would give me one or two folders at a time, and I would take those home, scrutinize all the data, take notes, hand-drawn graphs and charts out of tables, and playback my learnings to him at the next meeting at his studio.

A glimpse of hand-drawn sketches made for UNDERSTANDING USA

When I went through this data-immersion process, I gradually started to paint a picture, started to connect dots. Then I was hit by various “ah-ha” moments when various connected dots came together all of the sudden and started to shape a new meaning.


Visualizing layered information effectively and holistically to show its inter-relationships

Why do U.S. foreign trade gain a little and lose a lot? — one of the spreads from UNDERSTANDING USA

One of the interesting things from an information design perspective that came out from this project was how to visualize layered information effectively and create a holistic view of encapsulated data and their relationships. The above spread showed data about foreign trade, based on a simple question: Why did U.S. foreign trade gain a little and lose a lot?

The spread was designed in a way so that a viewer naturally went through a three-step progression in order to fully understand the information. The page greeted its viewer first by (A) introducing a basic definition of foreign trade, showing what trade surplus and deficit meant through a simple diagram. Then it continued to (B) a basic concept of a balance of trade, top countries that U.S. traded, and how the U.S. had huge trade deficits.

Information architecture: 3 step progression A>B>C

After these introduction made by A and B, the third step, (C) a highlight of the story was represented on the right page in the form of a pair of three-dimensional diagrams, which illustrated a contrasting two diagrams side by side, one showing the top five countries that U.S. had trade surpluses against, the other depicting the top five countries that the U.S. had trade deficits against, as of February 1999.

These three-dimensional diagrams attempted to highlight stark contrasts at multiple levels altogether, such as:

  • An overall trade surplus vs. deficit (and the deficit was overwhelmingly large)
  • Among the top five countries with a U.S. deficit, Japan and China stood out significantly
  • Among the top five countries with a U.S. surplus, the Netherlands stood out slightly, but no match for how Japan and China stood out in deficit
  • Machinery and transport equipment was the biggest category in both surplus and deficit, with a deficit from Japan being the largest by far

Now, some people might question the use of three-dimensionality incorporated here. But our team, primarily Krzysztof and myself, concluded that this three-dimensional approach enabled not only an aesthetically intriguing visual impact but also a meaningful interrelationship between complex layered data. As a result, while it did require some time to decode the meaning of the diagram, we were able to create a holistic view of the foreign trade problems that U.S. faced at the time, presenting all the above in one pair of diagrams.

Below outlined the basic process our team went through from the data analysis to the final design.

Process: understanding raw data to visualize, define, pick and iterate the design

Making information understandable to humans — Holistic overview, broad patterns, and interrelationships

Today, we live in a high-paced information world, where a huge amount of data is constantly captured via sensors, collected via various software, analyzed via machine learning algorithms, and then visualized through computer automation. We live in a world where data visualization is ubiquitous.

More than ever, we need designers to design frameworks for these data visualizations to accommodate ever-increasing demands. Because most of these data visualizations require data to be fed into “template designs” automatically, it’s getting out of designers’ controls.

Computers have a superior ability to perform astronomically complex and massive calculations within a second. But at the end of the day, it’s humans who make the good use of those data collected, calculated, and presented automatically by computers. In order for us humans to grasp the meaning of data, we need to visualize data in a way that humans can comprehend.

Humans are bad at precision and massive calculations. What humans are good at, however, are seeing a forest as a whole, rather than precisely counting how many trees make up the forest. We seek a holistic overview, broad patterns, and trends, interrelationships between various data points. These holistic overview, broad patterns and trends, and interrelationships between various data points are what we base our actions on. These are the types of things that designers are responsible for. And I believe these are the areas that we as humans are still better at over computers.


Designing for a user naturally puts the user and the content at the center

Because 12 designers (information architects) were invited and designed each assigned chapter of the book, the book as a whole ended up a bit chaotic, even though the information contained was really amazing, and it certainly became an entertaining showpiece as Richard Saul Wurman envisioned. It was really interesting to see how various information architects ended up trying to flex their visual muscles with cool effects, vibrant colors and beautiful pages. On the contrary, Dynamic Diagrams remained grounded with a more controlled, classic visual design style, focusing on the content rather than presentation effects to wow the viewers. Ironically, Dynamic Diagram stood out from the rest.

Example pages from other information architects, UNDERSTANDING USA

The above-left spread was designed by Ramana Rao, presenting “Food: How did food production keep pace with population growth? How much of what kinds of proteins do we consume?” The page was beautifully designed, so it was successful in attracting viewers into the page in the first place. However, a dominant photograph took too much attention away from the graphs themselves, which made the graphs look insignificant.

The above-right was designed by Hani Rashid and Lise Anne Couture, visualizing “Transportation: How do Americans get around?” The sculptural object looked intriguing because it was so unusual. Again, it was successful in stimulating the viewer’s curiosity, but at the same time, the way the statistical graph was mapped onto the surface of such an irregular form factor made it hard to read.

This goes back to a principle of user-centered design that became common practice for today’s designers, primarily UX designers.

Whether it’s a user experience for a digital product, a data visualization, or infographics, or any products, the design should never be treated as a “designer’s playground” to selfishly satisfy themselves. Designers should always work FOR users/viewers/audiences. Design is just a vehicle to deliver the message to its users/viewers. When that was successfully done without ego, the design itself recedes to the background, almost becoming transparent, so that a viewer is fully immersed with the content itself.

These insights are what I re-discovered from a 20-year-old print-based infographics project, the importance of putting a user and the content at the center as a designer, which is the very essence of user-centered design. In order to properly execute this, you need to go through a process of content analysis to acquire a deep understanding of the content. And finally, this deep understanding of the content gives you an ability to present a holistic overview of the information in a meaningful way so that humans can easily comprehend and act upon.

I am grateful that I had a chance to reflect on this project now at the beginning of the new decade and share my journey with you.

Chapter cover and all the page spreads from Business chapter, UNDERSTANDING USA

Here’s a PDF version of business chapter of UNDERSTANDING USA.


A bit more background…

Profile of Krzysztof and Paul from UNDERSTANDING USA

Richard Saul Wurman is an architect, information designer, a founder of TED. He is also an author of Information Anxiety, one of early books that pointed out the problem that we all face in today’s world: information overload, and resulting information anxiety. He coined the term “Information Architect”.

UNDERSTANDING USA was a textbook for the TEDX Conference in Monterey California, on February 2000. Richard Saul Wurman invited 12 information architects to design infographics of various social issues, including Krzysztof Lenk and Paul Kahn from Dynamic Diagrams. Krzysztof was one of my thesis advisors at RISD.

This article was originally published on Medium in Nightingale on 3/24/2020.


#16 UX Resource Map: a holistic perspective on UX resources to help aspiring to-be-UX designers

There’s so much out there, I don’t even know where to start.

This is how you feel when you want to become a UX designer and want to make the first move. I know, it’s overwhelming, right? We now live in a world of information overload, which gives us information anxiety.

This UX Resource Map will help you understand what resources are currently available and what path may be the right fit for you, so that you can make an informed decision appropriate for your current needs moving forward to become a UX designer.

Obviously, the lists here are not exhaustive by any means, but it should give you a birds-eye-view to get started with your own research and journey.

UX resources are roughly grouped into these 5 categories:

  1. College degree programs
  2. Bootcamps
  3. Online courses
  4. Books
  5. Blogs

Cost vs. time

The chart below shows how these 5 categories are compared relative to each other in “cost vs. time” plain.

Cost vs. time: how college programs, bootcamps, online courses, blogs and books position
Cost vs. time: how college programs, bootcamps, online courses, blogs and books position

College degree programs are the most expensive with longer timelines typically 2–4 years.

Bootcamps are the next expensive category, typically taking between 12 weeks to 2 years.

Books typically cost somewhere between $10-$50, and take a day to a week to read through.

Online courses vary from a few minute courses to 30 minutes, 60 minutes courses, some with multiple videos.

Blog articles are typically 1–10 minute read depending on the length and depth of the topic.


Cost vs. structured information

Cost vs. structured information: how college programs, bootcamps, online courses, blogs and books position
Cost vs. structured information: how college programs, bootcamps, online courses, blogs and books position

Especially from UX starter’s perspective, whether the information is well structured or not is critical when choosing a resource. At a high-level, the more you pay, the more structured information that you will get overall.

Obviously, with college degree programs, which have 2–4 year time frame with relatively expensive tuition, you will get the most structured information.

Bootcamps also gives you a fairly well structured information, focusing on practical skills including technical aspects, rather than theory and academic research.

Books are generally well structured within itself, but because each book focuses on its own specific topic, you need to pick many books and structure those by yourself to have a decent coverage of the basics.

Blogs are similar to books, except each blog article tends to be more polarized, and less structured in general.


Cost vs. comprehensiveness

Cost vs. comprehensiveness: how college programs, bootcamps, online courses, blogs and books position
Cost vs. comprehensiveness: how college programs, bootcamps, online courses, blogs and books position

As for comprehensiveness, it is similar to structured information.

College degree programs with 2–4 year timeline offer the most comprehensive information.

Bootcamps in general have fairly comprehensive coverage overall, focusing on the practical aspect. But because of this practical focus, some bootcamps stresses the importance of becoming a “full-stack UX designer” a bit too much. Keep in mind that you shouldn’t aim for this especially as a UX starter. And in reality, most UX designers are not expected to work as a “full-stack designer”.

Most of online courses lack comprehensiveness, and only scratches the surface primarily with high-level theory lectures. Those are good general overview knowledge primarily for just to get a sense of the topic.

Books could be comprehensive in terms of its focused area, but each book is focused on a specific area, and it’s challenging to get a comprehensive coverage of UX basics just through books only.

Blogs are the least comprehensive resources. By nature, that’s not what blogs are meant for anyway. Blogs are for very specific opinions on very specific topics based on the author’s perspective, some of which are very informative, insightful and useful.


Cost vs. practicality

Cost vs. practicality: how college programs, bootcamps, online courses, blogs and books position
Cost vs. practicality: how college programs, bootcamps, online courses, blogs and books position

When you take a look at practicality, bootcamps are the most practical resources among these 5 categories in general.

Bootcamps are intended to focus on practical skills so that their graduates can get jobs. For this reason, they also put emphasis on technical skills too.

On the other hand, college degree programs don’t necessarily focus on practicality. It focuses more on students’ pursuit of their particular interests deeply and academically. For that reason, some of their curriculums may not necessarily be the most up-to-date.

Some blogs may have practical stories based on the author’s real world experiences, which could be very informative.

Books vary depending on the author’s approach, intent and the background. But in general, it tends to be more on the theoretical side, partially due to its format limitations.

Many existing online courses tends to get theoretical with lecture style, which focuses more on high-level theories. Some of the reasons for this is because in order to get concrete and practical, you need to show case studies in-depth, which are typically not possible due to copyright and confidentiality issues.


Cost vs. pace flexibility

Cost vs. pace flexibility: how college programs, bootcamps, online courses, blogs and books position
Cost vs. pace flexibility: how college programs, bootcamps, online courses, blogs and books position

When it comes to whether you can learn at your own pace or not, college degree programs and bootcamps put you into their calendar structure such as semesters. So at a high-level, you need to work in a forced-pace environment, even though there may be some flexibility in terms of duration to complete a course, whether in 2 semesters or 3 semester, 1.5 year or 2 year, for example.

On the contrary, online courses typically allows you to proceed at your own pace, which gives you more flexibility and control over your time management.

As for books and blogs, it’s completely up to you as to how fast or slow you read through.


Cost vs. collaboration opportunity

Cost vs. collaboration opportunity: how college programs, bootcamps, online courses, blogs and books position
Cost vs. collaboration opportunity: how college programs, bootcamps, online courses, blogs and books position

Collaboration is an important part of a UX designer’s work. In most projects, you will be working as part of a team, which means you do need to collaborate with other team members.

College degree programs and bootcamps both offer good collaboration opportunities typically in form of team projects. These provide many chances for you to be immersed in a group environment working with your peer students on a project. The current limitation is that these team projects typically don’t have members from different disciplines such as engineering or project management.

However, some very few bootcamps may give you an opportunity to work with engineers.

Online courses, books and blogs don’t offer collaboration opportunities primarily due to their format limitations. Online courses and blogs could potentially allow participants and readers to exchange comments via message boards.


UX related colleges in the U.S., cost vs. time

Numbers and links are all subject to change, whenever listed institutions make any changes on their end.
Numbers and links are all subject to change, whenever listed institutions make any changes on their end.

While this is not an exhaustive list, it covers some of the most well known programs in the U.S. relevant to the field of UX. As you can see, college degree programs are very expensive, ranging from $48K to over $200K. As for the duration of programs, in general, undergraduate programs are typically 4 year long, while graduate programs are typically 2 year long with some exceptions.

UX related college programs ranges from HCI (Human Computer Interaction), interaction design to digital media. At the moment, college degree programs are relatively more respected compared to UX bootcamp certificates, as it is a huge commitment for anyone to go through 2–4 year program with substantial investment.

If you can afford that kind of money and time, and would like to take a long shot devoting yourself deep into learning, pursuing a college degree program could be the right fit for you.

As for graduate programs, many people apply after having some real world work experiences.

Some people get accepted by these graduate programs even though coming from different backgrounds.


UX bootcamps in North America, cost vs. time

Numbers and links are all subject to change, whenever listed institutions make any changes on their end.
Numbers and links are all subject to change, whenever listed institutions make any changes on their end.

Compared to college degree programs, bootcamps are relatively less expensive and shorter. The cost ranges from $400 to $58,000, and durations range from 4 week to 2 year.

Bootcamps have become popular in the past several years. Even though it’s relatively less expensive compared to colleges, it’s still quite an investment, so you need to be careful before making a full commitment.

Bootcamps typically market themselves with very strong messages, some of which could be misleading. Some of their most typical marketing message is that “once you complete their course, you are fully ready to take a full-time UX designer position and start earning big money.”

But you need to be careful about this so that you don’t get the wrong expectation. You should not expect just riding on their program without making any serious effort on your end will automatically get you what they promise in their marketing message.

At the end of the day, it comes down to how much serious effort that you put in during the course, and continue your effort even after the course.

Because just completing a bootcamp program will not turn you into an experienced UX designer all of the sudden. Your learning continues.


UX related books

Illustration of books

Free UX online resources

A laptop showing a web page

UX online forums

Illustration of text bubbles representing online forums

UX designer’s journey — college path

Illustration showing a person taking a college path to become a UX designer

If you can afford money and time, and want to take a log shot immersing yourself deep into learning, college path could be a good fit for you. It will give you a great opportunity and resources for you to leverage. You will have a chance to work on team projects with peer students, which is a great way to get used to collaboration setup. Internship opportunities are another great advantages that you could get from college degree programs. Internship allows you to get a real world experience while you are still a student. It could also open up a potential to get a full-time position upon graduation, if the company really likes you and if you like the company.

Some of the possible down sides are that the program could be a bit too academic, could lack practicality.

Another thing to keep in mind is that most programs put UX in a vacuum, and don’t cover how UX is positioned in a larger product team including engineers and project managers.

But at the end of the day, it all comes down to how much effort that you can put in. The more you put in, the more you will get out of it.

Also, keep in mind that just taking a college degree program and completing will not turn you into an experienced UX designer all of the sudden. And this is not the end of your journey learning about UX. It is just the beginning. Your journey continues.

College path example journey maps (based on true stories)

Example 1:

College path journey map example 1
College path journey map example 1

Example 2:

College path journey map example 2
College path journey map example 2

Example 3:

College path journey map example 3
College path journey map example 3

UX designer’s journey — bootcamp path

Illustration of a person taking UX bootcamp path to become a UX designer

If your budget and timeline are more limited, but still can afford $10,000+, bootcamps could potentially be a good fit for you. If you already have a graphic design background for example, that would make something like a bootcamp a good fit for you, because in that case you already have a design foundation to build on top of.

Similar to college programs, bootcamps offer team project opportunity, where you can work with your peer students on a project.

Some of the possible down sides are that many bootcamps tend to have a hyped marketing message around “how you can immediately earn a big money right after graduating their courses” which is not necessarily true. This caused some mixed opinions about bootcamp graduates among company’s hiring managers.

Another thing to keep in mind is that most programs put UX in a vacuum, and don’t cover how UX is positioned in a larger product team including engineers and project managers. But there are some bootcamps that allows you to collaborate with engineers.

There are quite a few discussion around whether bootcamps are worth the money. But at the end of the day, it all comes down to how much effort that you can put in. The more you put in, the more you will get out of it.


UX designer’s journey — self-taught path

Illustration of a person taking self-taught path to become a UX designer

Now there are certain people who can go with self-taught, independent path.

If you have a strong passion, will and persistency, this is a good way for you to structure your path in any way that you want even if you have a limited budget. But it definitely requires a lot of energy, effort, and trials and errors.


UX designer’s journey is a continuous learning

Illustration showing a journey of a UX designer

Whatever path you take, keep in mind that UX designer’s journey is not like choosing one resource and it’s all set. If you choose to take a college degree program, that’s great, but completing college program is not the end. Your journey continues. The same thing with bootcamp, or any other path.

Whatever you choose to do, put in as much effort that you can. By doing so, your thought process kicks in. Once it kicks in, it’s like starting an engine of your car, and it will take you further and further to the next level.

UX designer’s journey is a continuous learning. That’s what’s exciting about being a UX designer. The field of UX is still new, and it’s constantly evolving and expanding. Great UX designers enjoy this continuous learning.

If you are a type of person who can absolutely enjoy the learning process, and have all the traits shown below, becoming a UX designer is the right fit for you, and will give you an amazing experience.

Great UX designer’s traits shown in a diagram with inter-connections
Great UX designer’s traits

The above diagram shows 12 traits that great UX designers typically have.

In order to become a successful UX designer, it’s important that you possess these traits. As you can see in the diagram, many of these traits are interconnected with each other. Take a look at each trait, and see how many traits you think you have!

Are you ready to take your next step?

Good luck with your journey, and thank you for reading!

Illustration showing a journey of a UX designer is continuous learning

UX Resource Map is created by Ryu Sakai, who is passionate about helping to-be-UX designers find their ways to succeed.

This article was originally published on Medium in UX Collective on June 30, 2019.

To get the updated version, download a PDF here.


#15 Seeing the World as 1000 People: How I Learned Content Strategy Informed Design Systems for the TED Conference

Twenty years ago, I worked on a project called Global Village. It was a data visualization animation presented by Krzysztof Lenk and Paul Kahn at TED10 Conference in year 2000, and was greeted by a standing ovation.

Last year, I was saddened to find out that Krzysztof passed away. He was one of my favorite teachers at RISD. I exchanged a message with Jack Lenk, Krzysztof’s son, and he mentioned …

… one of the pieces I found (from my father’s work archive) was that Global Village animation — still looks great after all these years!

Because Global Village was one of the most important early projects that I had the honor to work with Krzysztof for, I dug into my archives and watched it again. Jack was right: Even after 20 years, the animation looked fresh and crisp, with almost a timeless quality. This sparked my curiosity as to why. I wanted to spend some time thinking through this project once again.

There are still many key elements in Global Village animation design that are relevant to today’s UX and information design practitioners. I also realized that I learned so much from this project, which has been impacting my work for all these years since. I would like to share these insights.

Global Village animation, created for TED conference in year 2000

The power of a core concept

Google search result: what if the world is a village of 1000

When you google “what if the world is a village of 1000,” you get 273 million results. This is the core concept that we used for the Global Village animation 20 years ago, borrowed from the World Village Project by worldvillage.org, which unfortunately no longer seems to exist.

The concept of compressing the 7.7 billion world population down to 1000 to get a clear picture of the earth’s overview was a brilliant idea. No question.

The core concept of Global Village, described in the text

There’s no surprise that so many people are attracted to this concept and visualized it in so many different ways. This is a great example of how a core concept at a content level plays a significant role in creating a quality design to begin with.

But when you take a closer look at various visualizations, you start to realize that design is so subjective with so many possible directions to go, depending on designers’ intentions, decisions, and interpretations.

Design is subjective

A concept of 1000 or 100, visualized in various different ways: from top-left: 1- What if Only 100 People Existed on EarthRealLifeLore, 2017, 7.8 M views | 2- If the world were 100 PeopleGOOD, 2016, 2.9 M views | 3- If the world were a village of 100BBtheSeries, 2008, 277K views | 4- If the World Was Only 100 PeopleKnovva Academy, 2018, 47K views | 5- If The World Were Village of 100 PeopleETRAFFIC, 2014, 32K views | 6- Global Village, Dynamic Diagrams, 2000

Above are screenshots of the five most-viewed videos on the topic when you Google, compared to the Global Village screenshot on the bottom right, explaining the concept of shrinking the entire world population down to a village of 1000 or 100 at the beginning.

As you can see, each has its own design and visual style, remarkably different from each other. The number of visual design styles can be endless. Each designer has their own style, and each viewer has their own preference.

Any visual design style is fine as long as it works. But it has to work across its entirety of a piece, not just in one particular scene or section. And ideally, the design system should help its audience understand the content better.


Subtractive rather than additive

How “place of origin” is visualized differently by different designers

The above shows another set of screenshots from the same videos visualizing a number of people based on a place of origin. Because it’s about geographic population, having a world map makes logical sense. However, below are questions that a designer should ask before jumping into a conclusion …

  • Does adding a world map enhance an understanding of the data?
  • Would a world map introduce another visual element that could potentially clutter the screen?
  • How does it affect an overall consistency and a viewer’s cognitive load when you have some statistics displayed on a map while others don’t?
  • What story do you want the map to tell, population of each region, or population density of each region relative to its land, etc.?
How “religion by population” is visualized differently by different designers

Above are more screenshots showing the statistics on religion. While illustrations and symbols are nice to have from a purely visual design perspective, it’s not immediately clear which illustrations or symbols represent which religion. A voice-over helps, but if you miss the audio, it’s hard to understand.


Consistency and repetition enhance learnability

Visual consistency build-up

The above diagram shows how each video starts to build up its design system as it progresses. As you can see, some are more consistent than others. As a designer, questions you should be asking are:

  • How important is consistency?
  • Or is breaking the consistency and keep surprising the viewer the main intention?
  • If consistency is important, why?
  • Which parts specifically should be consistent?
  • What is the balance between strictly consistent vs. space for freedom?

Content strategy

My original notes during the process of the project

In order to answer some of these questions above, you need to understand the content. You need to be crystal clear about the core message you are going to deliver to its viewers. To get there, you need to work on content analysis and content strategy.

So what is content analysis?

Content analysis is basically to carefully go over all the available content and examine what it means. Below are some questions to go through during content analysis. Keep in mind that these questions are created with Global Village in mind. Depending on a project/product, of course, questions would vary.

  • What are the implications?
  • What are the interesting facts?
  • What are the shocking facts?
  • What emotion do you get when you see it?
  • Does showing certain statistics in a particular order enhance understanding?
  • Are some statistics related to each other?
  • Are there any contrasting statistics that could be paired?

Once you answer all these questions, you will start to get a crisp picture of how the content should be laid out in which sequence to tell a compelling story. This is content strategy.

Here is the content strategy for Global Village project that I was part of.

  • In order to present so much information that spans across so many topics, we needed to minimize a viewer’s cognitive load so that they can fully focus on the content itself (various statistical breakdowns of earth’s population).
  • This means minimum visual elements and clutters, repetitive and consistent layout and animation sequence per scene.
  • Audio should only play a secondary and supportive role to assist the overall understanding of the viewer, rather than setting a forced-pace with a piece of background music, or taking a dominant role with a voice-over.
  • Content should be laid in a sequence that flows well from one topic to another.
  • Let the data itself tell a story by allowing a viewer to purely focus on the numbers so that it sinks in to reveal its meaning and impact on its own.
  • Keep reinforcing the very concept of “what if a world is a village of 1000” by always showing an empty 1000 unit screen before starting every single topic.

As a designer, it’s important to have a good understanding of the content that your product is dealing with in order to make its user experience as good and appropriate as possible. This should be done with UX researchers, UX writers, technical writers, product managers (PMs), and engineers.

Oftentime, UX designers may not have much control over the content that they receive. But UX designers still have enormous power in influencing the overall user experience of a product they design because all the content and information will be presented through a design system that they as UX designers create and specify.

How do you tell a story? How do you sequence and structure a story to make it effective and easy to understand? What is the most effective design system to realize that? These are all up to UX designers.


Content strategy to a design system

Left: My original sketches on an overall sequence, Right: Design studies on various shapes and color combinations

A designer has the power and responsibility to create a system for the product they design. A design system should be created in a way so that it fits the content and the context of the product so that the experience of the product is easy to understand and delightful to use for its target users.

In order to do so, a designer needs to have a deep understanding of the content. Only through this deep understanding, a UX designer is able to create a design direction so that all the efforts are made towards that set direction, which will result in a design system that is deeply integrated with the content strategy. A well-thought-out design system can educate a user through a use of repetitive patterns as a system so that a user can naturally learn how things work just by using it, so that she can just focus on the content or a task itself. When that is achieved, a design becomes transparent.


Subtract without losing quality

Today, data visualization is one of the hottest areas in design, with so many data being constantly captured automatically. This means UX and information designers are more and more responsible for how to visualize those data in an easy to understand manner without causing information overload. Simplicity is the key. How to subtract as many visual elements as possible without losing the quality and the meaning becomes critical.

Below shows an overall progression of three animation designs from start to finish, represented in a group of screenshots. The first one is by Dynamic Diagrams, the second by RealLifeLore, the third by GOOD.

While criticizing others are not my intention, when you take a look at all three different designs together, it’s pretty obvious and safe to say that Dynamic Diagram has the most consistent and clear design system put in place, that carries through consistently from start to finish.

Global Village, Dynamic Diagrams, 2000
What if Only 100 People Existed on Earth, RealLifeLore, 2017
If the world were 100 People, GOOD, 2016

After all, it’s user-centered design

It’s all about how to make things as easy and clear as possible for the user. It’s not about pleasing yourself by using a bunch of cool visual effects.

Today’s UX designers need to design user experiences of complex products that have many flows branching out depending on how a user makes choices, how a user enters a particular screen from which entry point, and so on. Obviously digital interactive products are much more complex compared to a data-viz animation shown here.

But regardless of the differences in complexity and media types, the fundamental approach remains the same. Just like compressing the 7.7 billion world population down to 1000 makes us understand more clearly, looking at how a content strategy and a design system impact a data-viz animation design gives us a clearer picture of its importance and impact.

This approach—having a content strategy, a deep understanding and analysis of content, and implementing that strategy into a design system—is what I learned from Global Village animation, which still serves as a foundation of my work today as a UX designer.


A bit of a background…

I worked as a lead designer for Global Village animation together with Stephen So, under directions of Krzysztof Lenk and Paul Kahn at Dynamic Diagrams in the year 2000. At the time, Krzysztof was a Professor at RISD (Rhode Island School of Design), as well as a Creative Director at Dynamic Diagrams. I was a graduate student at RISD. Krzysztof Lenk and Paul Kahn presented Global Village animation at TED10 Conference that same year at Monterey, California. Dynamic Diagrams closed for business in 2012.

Originally, TED (technology, entertainment, and design) was cofounded by Richard Saul Wurman and Harry Marks in 1984. When it was rebooted in 1990, it became a popular annual, invitation-only event in Monterey, California. In 2001, Chris Anderson’s nonprofit Sapling Foundation acquired TED, and Anderson became its Curator.

All the statistics used in Global Village animation was based on what was available in the year 2000, representing the world of late 90s.

This article was initially published on Medium from Nightingale, a data visualization journal on March 10, 2020.

#14 Does user research come with limitations?

User research is critical part of user-centered design practice. UX designers should be designing products and services for users, not for themselves. There’s no question about it.

Then, what do I mean by limitations of user research?

Just because you did user research does not guarantee you a success of your product. It’s definitely better than not doing any user research at all. But you really should not be doing user research just for the sake of it.

First of all, in order for a user research to happen, you need to come up with a research plan, you need to design a user research itself.

  • What do you want to test?
  • What are key questions that you would like to probe with participants?
  • What is the stimuli that you would like to use?
  • Is it a prototype?
  • Or is it a bunch of static screenshots, or wireframes?
  • Is it a card sorting exercise?
  • Or is it just bunch of questions?
  • What would you like to observe/take note of while participants interact with your designs?
  • When do you want to conduct the research?
  • Do you want to conduct 1 on 1 interviews, or focus groups?
  • How long per session?
  • What would be the sample size (participants, sessions)?
  • Who do you want to test with?
  • What would be the geographical spread? (region, country…)
  • How do you recruit participants?

The list goes on.

The point here is that user research itself has to be designed by UX researchers and UX designers in the first place. You should also get a consensus from a Product Manager.

This means that the quality of user research is dictated by how well the research is designed and executed. Which is pretty much dictated by UX researcher and UX designers’ abilities and experiences who are handling the work.

If you are testing a UX design concept, the outcome of user research is limited by the quality / clarity of the design itself too.

If the UX design concept that is going to be used for the research is poorly done, you won’t get a quality result. This does not mean that the design always has to be high fidelity. But it needs to be clear enough to communicate the idea/concept/flow that you would like to test, even if it’s a low-fidelity wireframe prototype.

If the research is poorly designed, you won’t get a quality result. If the research is poorly executed, you won’t get a quality result.

Because of an emphasis on process-oriented approach in UX practice, people seem to misunderstand that just following the right process will get them an excellent outcome automatically.

But it doesn’t.

User-centered design practice is not a pure science.  But it’s not a pure art either. It’s a combination of art and science with so many variables that affect the result.

Don’t get me wrong.

User research is important. Process is important. Process-oriented approach is good. But you shouldn’t get caught up too much in the process itself rigidly either. Process is just a framework. It’s just a starting point.

Because every single project is different, things may need to be tweaked and adjusted to specific needs and conditions of each project. There are so many variables that can be adjusted after all. What goes in there is the actual substance, which requires a quality of its own.

You need experience to become good at designing a right user research at a right time.

Only by going through trials and errors, you’ll learn lessons and get better.

Which is why, getting out there and start accumulating your experience is better than trying to learn everything on paper before trying things out.

After all, user research is something that you can only learn by doing.

Check out YouTube version too!