#24 How to convert web designer’s portfolio to UX portfolio

Illustration of converting web designer's portfolio into UX portfolio

A lot of web designers want to transition to UX designers, as that seems like an easy thing to do on its surface. If you are serious about moving in to user experience, you need to spend some time to work on your portfolio towards that direction, in order to convert your web designer’s portfolio to UX portfolio.

As a web designer, I understand that you may have only done web-based projects or websites. And the final output for those projects might be something that you are not happy with, or not what you intended. 

But you can actually take those projects and turn those into case studies by shedding lights from a UX perspective.

You can articulate how you would reframe the project from a UX point of view, and rework on the project based on that new perspective and process.

If you have a project with a final output that you don’t feel comfortable, you can document the whole process, and clearly point out what went wrong, what you would have done if you were given enough resource and opportunity, then actually work on ideal design to prove your point.

  • Document the process of your project from start to finish
  • Point out issues along the way:
    • what went wrong
    • what you would have done if xyz (e.g. if you were given enough resource…)
  • Try to be as objective as possible, don’t just blame others. It’s OK to criticize, but when you do, you should propose a solution.
  • If the final product turned out to be very different from what you originally designed, compare those two, and point out pros and cons for both.
  • Come up with a revised plan and strategy to improve the process and output.
  • Include user test as part of the process so that you can learn from users.
    Create a design mockup based on the revised plan and strategy above.
    Articulate improvement points of your new design.
    Point out potential issues of your new design too.

The key point here is for you to clearly demonstrate how you can learn from your past experience, analyze issues, come up with a better plan including how to collaborate with other stakeholders such as clients, developers and managers, and improve your design output.

If you can put your serious effort and pull out these together, I think the whole documentation of your thought process to an improved design output can become quite convincing in showing your problem-solving skills and a healthy, positive mindset as a UX designer.

You first need to get through a stereotype label that recruiters and hiring managers will immediately put on you that, ”you don’t have enough experience”.

A UX designer solves a user’s problem, rather than simply creating fancy visuals. And you need to concretely show your ability to do so.

Being a UX designer is a journey of continuous learning.

In addition to above, you should constantly work on your own UX projects to further build your experience and portfolio. Check out my other article on how to work on your own UX project.


Check out YouTube version too!

#28 Prototype Resource Map: Comprehensive guide to today’s 8 popular UX prototyping tools

A diagram of “stitch screens with wires” interaction model and transition dropdown menu, with name of 8 prototyping tools.

Although tools are not the most important things to learn as a UX designer, inevitably you need to use it in order to achieve your more important goals, to solve user’s problems. This article covers today’s 8 most popular UX prototyping tools including Sketch, Craft, Axure, Adobe XD, InVision Studio, Principle, Framer X, and Figma. First, it compares key aspects such as price, basic prototyping features, Sketch compatibility. Then it covers a high-level overview of each software program in terms of pros and cons and uniquenesses.

I understand there are many more tools out there, and other people may have different opinions. I also acknowledge that I am not familiar with every single tool available. I chose these 8 tools based on a combination of popularity and how these tools played key roles in the modern history of prototyping tools, and likely to take part in the future.

When Adobe Flash started going down, Axure took over in Web 2.0 Era, then Sketch came along to become a de facto standard. But lack of prototyping and cloud features in its early days opened up other new tools to emerge around Sketch, such as InVisionPrincipleCraft plugin for Sketch, and Adobe XD with a new voice capability. Framer X is tackling a challenging developer handoff problem, which could be the future of prototyping. Figma is getting more tractions lately because it was built for cloud-based collaboration, which is becoming a norm in today’s accelerated remote work situation.

Trends in today’s prototyping tools

Today’s trends in prototyping tools are ”stitch screens with wires” interaction model, accompanied by auto-animate transitions that smartly animate transitions between two screens connected. This makes prototyping super-fast and intuitive for non-tech-savvy UX designers.

Left: a diagram of how "stitch screens with wires" interaction model works, Right: an example dropdown menu for transitions with auto-animate highlighted.
Left: “Stitch screens with wires” interaction model, Right: Auto-animate transition smartly look for same objects between two screens and create animations based on parameter changes on size, position, opacity level/etc.

Currently, Sketch is the most popular prototyping tool. However, Sketch is very limited when it comes to creating transitions and micro-interactions with animated effects. This is where other tools have strengths, and all of them have some sort of compatibility with Sketch. Let’s dive in to comparisons of 8 popular prototyping tools.


Section divider title graphics including the title, Comparison of 8 popular UX prototyping tools.

Comparison of 8 most popular prototyping tools

Price

A pricing table of all the 8 UX prototyping tools. It includes notes and free trial period.
Price comparison of 8 prototyping tools
  • Sketch one time price is $99 which includes 1 year of software updates and Sketch Cloud usage. Optional renewal is available for $79/year for software updates and cloud.
  • Adobe XD is free.
  • Axure is $495 for its perpetual license, or $29/month subscription.
  • InVision Studio and Craft are free, but are limited to only 1 prototype in InVision Cloud for free.
  • Principle is $129 (one time fee).
  • Framer X is $15/month or $144/year, based on 1 year subscription.
  • Figma is free with a Starter plan, up to 3 prototypes.

Basic prototyping features


Comparison of basic prototyping features:
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end. The author of this article does not have affiliations with any companies listed.

Legends for diagrams shown in a table above, interaction models and artboard structure.

Because the whole point of prototyping is to quickly test concepts, ease of use and speed are critical. In most real world situations, time is very limited, so ability to quickly create a basic prototype just by connecting screens together is super convenient, and that’s all you need in most cases.

From this perspective, Sketch, Craft, InVision Studio, Principle, Figma, Adobe XD, Framer X all do great jobs with similar “stitch screens via wires” interaction models.

Principle creates all the transitions automatically, allowing some controls via timeline UI. This is great for creating a nice animation instantly. But it doesn’t offer the most basic “preset transitions” such as slide, push or dissolve like other tools. For this reason, Principle is positioned slightly to the right in the chart compared to others (except Axure).

InVision Studio also provides a timeline UI similar to Principle, but it also provides basic preset transitions, which makes it a bit easier when it comes to basic prototyping.

Axure uses a very different interaction model. A user has to specify and add every single interaction via Interaction Editor. Interaction Editor is a very powerful tool for building complex interactions, but lacks speed and glance-ability for basic prototyping.

A matrix of 8 UX prototyping tools plotted on a price vs. ease of use plane.
Chart 1: Price vs. ease of use — basic prototyping: Ease of use is evaluated based on the author’s perspective, especially in terms of how easy to build a basic prototype by connecting multiple screens together via transitions.

Above chart shows how 8 tools are positioned on a price vs. ease of use plane. As you can see all the tools except Axure fall under bottom-left quadrant.


Basic prototyping features — animation adjustments

A table showing ability to adjust animations in basic prototyping feature across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end. The author of this article does not have affiliations with any companies listed.
A matrix of 8 UX prototyping tools plotted on a ease of use and fine-tuning capability plane.
Chart 2: Ease vs. fine-tuning capability — basic prototyping: Ease of use and fine-tuning capability are evaluated based on the author’s perspective, especially in terms of how easy to build a basic prototype by connecting multiple screens together, and how much controls you have in terms of sequences, timing and ease in/out.

This chart illustrates how much controls you have when creating a basic prototype, when it comes to sequence of multiple animations, timing and duration of animations, and ease in/out effects. Software programs are broken down into 3 groups.

The group in the top-left quadrant have a good balance of an overall ease of use and ability to fine-tune transitions and animations without too much work. These include InVision Studio, Principle and Adobe XD. All three do pretty good job in creating auto-animate transitions. Although similar, Principle seems to create the smoothest animations in most cases.

Figma recently added Smart-Animate feature, but currently it’s lagging compared to above three programs. Framer X can do fine-tuning but only via code. Sketch and Craft does not support fine-tuning. They only support basic preset transitions.

Axure can do many complex interactions, but only via Interaction Editor, which is not the simplest way from basic prototyping perspective.


Sketch compatibility

A table showing Sketch compatibility across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

Currently, InVision Studio is the most Sketch-compatible program, which supports opening Sketch file directly as well as copy & paste objects and symbols from Sketch.

Adobe XD supports opening Sketch file directly, but copy & paste from Sketch doesn’t work. Principle can import Sketch file almost the same way as opening, but copy & paste does not work. Figma can import Sketch file but takes time. Copy & pasting a Sketch object does not work. Framer X accepts copy & pasting a Sketch object, but cannot directly open or import Sketch file. Axure can take copy & pasted Sketch object, but only via Axure plugin installed to Sketch.

A matrix showing 8 UX prototyping tools on a price vs. Sketch compatibility matrix.
Chart 3: Price vs. Sketch compatibility: Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

Advanced prototyping

A table showing advanced prototyping capability such has ability to build full interaction, micro-interactions, and voice interaction.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.
A matrix showing 8 UX prototyping tools on a price vs. advanced prototyping capability plane.
Chart 4: Price vs. advanced prototyping capability: Evaluated based on the author’s perspective.

When it comes to advanced prototyping capability, Axure covers pretty much any interactions possible to simulate how the actual product is going to feel like via Interaction Editor except voice interaction. But Axure does not support videos. (Axure supports GIF animations)

Framer X is another tool that has a potential to add a lot of advanced interactivity to a prototype. One of the unique advantages of Framer X is that it supports video and audio. You can even embed YouTube video and run it inside your prototype, which is pretty powerful. While Framer X has a store to download many useful components, many of advanced interactivity need to be added via code.

Principle has an interesting and unique feature called Drivers, which can add various micro-interactions quickly to make the prototype look real.

Adobe XD allows you to create voice interaction, which stands out from competition in this area as no other tools support that.

Sketch, Craft and Figma are fairly basic, so does not support advanced interactivity at this point.


Running a prototype on mobile

A table showing capability of running a prototype on mobile across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

All the software programs have mobile apps to run a prototype except Framer X. Framer X is lagging in this area, where a prototype can only run inside a mobile web browser via QR Code.


Sharing a prototype online

A table showing ability to share a prototype online across 8 UX prototyping tools.
Capability of sharing a prototype online across 8 prototyping tools

Principle falls short in this area as it does not have a cloud. In order to share a prototype in Principle, you need to either send a Principle file and have it open from Principle mobile app, or export a prototype as a Mac Desktop app to be viewed on a Mac that doesn’t have Principle app installed. This means you cannot share a prototype with Windows users.


3rd-party ecosystem

A table showing 3rd party ecosystem of 8 UX prototyping tools such as plugins, store and others.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

While Sketch remains strong in this area with its abundant plugins, Adobe XD and Figma are catching up. Framer X has a unique approach with its Store, which is super-easy to browse and download functional components such as YouTube Player. Moving forward, Adobe may have a powerhouse advantage in a near future, as seen in innovative new feature such as voice interaction. Many of popular Sketch plugins are already getting ported to Adobe XD too.


Collaboration capability

A table showing collaboration capability and price across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

As for collaboration within a team, Principle falls short. Adobe XD and Figma offers free collaboration feature. Sketch offers a separate subscription for Team feature. Axure has a separate software that supports Team feature called Axure RP9 TeamInVision Studio offers additional subscription for Team feature. Craft uses InVision Cloud. Framer X has Small Teams plan that allows access to Team Store.


Section divider graphic with a title "overview of each tool".
Sketch logo as a section divider for Sketch section.

1. Sketch (based on version 63.1)

Sketch UI showing 3 screens connected using prototype feature.
Sketch UI showing 3 screens connected using prototype feature.

Sketch is the most popular tool, a de facto standard with various 3rd party plugins. But the default transitions are minimum, animate from right, bottom, left, top only.

Sketch UI with a blow-up of Prototyping animation options.
Sketch prototype feature, 5 animation options
  • Pricing: $99  (includes 1 year updates, 1 year Sketch Cloud. Optional renewal is available for $79/year for software updates and cloud. )
  • Free trial: 30 day
  • Mac only

Pros:

  • Abundant plugins
  • De facto standard
  • Strong symbol features
  • Smart Layout

Cons:

  • Limited transition animation options
  • No fine-tuning capability for animations
  • No micro-interaction support

Running a prototype locally, on mobile and in the cloud

https://youtu.be/xI0w4xdk9Ww
  • Clicking a preview icon on the top right corner allows you to run a prototype locally.
  • Sketch Mirror app can mirror an open Sketch file on your Mac through the same wifi connection. To mirror a prototype on a mobile app, click Notifications on the top right of the desktop app window, and select a mobile phone running Sketch Mirror app.
  • Uploading to a cloud allows you to share a prototype with others via a link. This is a great way to share a prototype with others and get feedback.

Smart Layout, plugins

  • Smart Layout allows automatic resizing of buttons and layouts based on the text lengths.
  • Abundant plugins are one of Sketch’s biggest strengths compared to its competitors. All the installed plugins appear under Plugins menu, and can be disabled via Preferences/Plugins.
  • Rename It, one of Sketch plugins lets you rename selected layers or artboards in bulk with numbered names. Adding “%N” in Name field after your desired text string (e.g., rectangle, square, thumbnail) results in layer names with your [desired text string]+number.

Collaboration – Team  feature

  • Sketch has a Team feature which allows you to collaborate. You can access this feature by logging in to your Sketch Cloud, then select Create New Team.
  • Adding team members cost $9/month per contributor, or $99/year per contributor.

Sketch related useful inks


Craft logo as as section divider for Craft section.

2. Craft plugin for Sketch (Based on version 1.0.94) 

Craft toolbar embedded inside Sketch. Craft-based prototype links shown in blue.
Craft toolbar embedded inside Sketch. Craft-based prototype links shown in blue.

InVision’s Craft plugin enables a slightly better prototyping capability directly within Sketch. These include gestures such as tap, swipe, and transitions such as dissolve, push, slide.

  • Pricing: free
  • Mac only (as it’s a Sketch plugin)

Pros:

  • Free (if you already have Sketch)
  • More transition controls than Sketch
  • Smart Duplicate, Data features

Cons:

  • You need Sketch
  • Transition options are still limited
  • Sticky header not supported
A blue arrow appears from a selected layer, and shows an option to link back/close, external URL, or artboard to link to.
Pressing “C” while a layer is selected brings up a blue arrow to link to another artboard, link back, or external URL.

Prototype menu and toolbar are embedded in Sketch

Because Craft is a Sketch plugin, Craft menu appears as an embedded toolbar on the right side of the screen. Clicking on a circular head of a blue link arrow brings up prototype menu. Prototype options that Craft has are slightly more than Sketch’s options as below.

Prototype menu appears when a start of the blue arrow is clicked. Craft toolbar appears embedded in Sketch UI. on the right.

Running Craft prototype locally, in the cloud, on mobile

  • Craft prototype is very similar to Sketch prototype. Currently a “sticky header” feature is not available.
  • A prototype uploaded to InVision Cloud can be opened in InVision mobile app to run on mobile. Only one prototype is allowed on a cloud with a free InVision account.
https://youtu.be/b1k5Pvp3epc
Craft prototype running on mobile via InVision mobile app.

Data, Stock

  • Data pulls real content from a range of sources and place it directly in your design.
  • Stock allows you to find and place high-resolution imagery from Getty and iStock to your design.

Collaboration

Once a prototype is uploaded to InVision Cloud, clicking on “+” icon allows you to invite a person to collaborate. 

InVision Cloud UI showing that clicking on "+" opens a popup to enter email to invite people.
Clicking on “+” opens a popup to enter email to invite people.

Craft related useful inks


Axure logo as a section divider for Axure section.

3. Axure (Based on version 9.0.0.3687)

A screenshot of Axure user interface
Axure user interface

Axure has established its own unique place as a go to prototype tool to build a more robust, complex prototype with various interactions, not just screen-to-screen click throughs.

Many experienced UX designers still use Axure because you can do more, but the trend is more towards software programs with “connect screens with wires” interaction model, because that’s much faster to create simple prototypes.

  • Pricing: $495 (perpetual) or $29/month
  • Free trial: 30 day
  • Both Mac and Windows

Pros:

  • Advanced prototyping capability
  • Can build almost any interactions (except voice interaction)
  • Unlimited cloud

Cons:

  • Most expensive — $495 perpetual, or $29/month.
  • Does not use popular “connect screens with wires” interaction model
  • Font Awesome not supported in mobile app
  • Least Sketch compatibility

Interaction Editor and Condition Builder

  • Interaction Editor allows you to add various complex interactions. Various list of events, actions and tiggers are available in Axure’s Interaction Editor to be able to create complex interactions.
List of available events, actions and triggers available in Axure’s Interaction Editor
  • In Interaction EditorCondition Builder allows conditional branching of interactions. This is basically If statement in code done visually.
An example of creating conditions with logic in Condition Builder.

Running a prototype locally, in the cloud, on mobile

  • Clicking Preview button opens a browser window and runs a prototype.
  • Publishing to a cloud allows you to share a prototype easily with others to collect feedback.
  • Axure Cloud mobile app can open a project published on a cloud. Font Awesome did not render.
https://youtu.be/NatQKa2AlEU

Sketch plugin, widget libraries


Axure RP9 Team

  • Axure offers team (collaboration) feature as a separate product.
  • Subscription is $49/month per user, which is more expensive than regular license.
  • Perpetual license is $895 per user.

Adobe XD logo as a section divider for Adobe XD section.

4. Adobe XD (Based on version 28.4.12.3)

Adobe XD user interface in Design Mode.

While Adobe XD entered the market late, it has a unique voice interaction feature, which no other competitors support.

Its Auto-Animate feature is pretty strong and simple, however, there’s no timeline UI like Principle or InVision Studio to make adjustments.

It can directly bring in Photoshop files, Illustrator files. It can also open Sketch file directly.

  • Pricing: free
  • Both Mac and Windows

Pros:

  • Voice interaction capability
  • Can open Photoshop/Illustrator files
  • Free

Cons:

  • Mobile app requires uploading a file to the cloud first
  • It takes long to open a file in a mobile app
  • Font Awesome not supported in mobile app

Prototype mode — trigger and action

  • Adobe XD separates Design Mode and Prototype Mode. Below screenshot shows Prototype Mode.
  • AmongTriggersTime allows a timer function. Voice is the most unique feature of XD, which is one of triggers.
  • Among transitions, Auto-Animate is a pretty powerful feature that can smartly animate a transition between screens.

Running a prototype locally, in the cloud, on mobile

  • Clicking a Play button runs a prototype locally.
  • A file needs to be saved to a cloud in order to run a prototype on Adobe XD mobile app.
  • An XD file saved on Adobe Cloud becomes accessible from Adobe XD mobile app. Font Awesome didn’t render.
https://youtu.be/w4VMd5yq5WM

Repeat Grid and voice interaction

  • Repeat Grid auto-copies what’s selected as you drag a handle. You can bulk-adjust margins too. It’s a smart productivity tool that works great when creating tables or lists.
  • Voice interaction capability is the most unique and advanced feature that Adobe XD has. Below you can see the voice prototype in action. Note that you need to hold down a screen while speaking up your voice command that you specified in Speech Playback.
You can type in a voice command that you want to use in Command field after selecting Voice from Trigger.
For a Speech Playback, you can select different voice, then enter what you want that voice to speak up.
https://youtu.be/DYgYs7VlF_4

Coediting

  • To enable Coediting, you first need to save the document to the cloud. Once the document is saved to the cloud, Invite to Document icon gets activated. After clicking Invite to Document, enable Coediting, then send an invite.
  • Once fellow designers are added, you see them as color-coded avatars and bounding boxes.
Adobe XD website showing how Coedit works

Adobe XD related useful inks


InVision Studio logo as a section divider for InVision Studio section.

5. InVision Studio (Based on version 1.26.1)

A screenshot of InVIsion Studio user interface.
InVision Studio user interface showing three artboards linked with its interaction feature.

InVision Studio can open Sketch file, or can take objects and symbols copy-&-pasted from Sketch, and can create a more sophisticated prototype via its timeline-based transition capability.

When opening Sketch files, there are a few things to keep in mind. Link layers in Edit timeline doesn’t support Sketch symbols currently. In order to achieve a smooth animation, a file may need to be optimized accordingly.

  • Pricing: free
  • Both Mac & Windows

In order to publish more than one prototype to share online, you need subscription to InVision Cloud.

Pros:

  • Free
  • Best compatibility with Sketch
  • Transition adjustments via timeline

Cons:

  • Sometimes buggy and sluggish
  • Cloud only allows one prototype for free
  • Sync layers does not work for Sketch symbols

Interactions panel

  • Selecting a layer displays Interactions panel on the right.
  • Timer, one of triggers, allows certain interaction to happen automatically after a specified number of seconds.
Showing available triggers of 4 different groups: desktop, mobile, keyboard and Timer, and preset transitions.
Interactions panel: available triggers and preset transitions
  • Timeline allows sequencing multiple animations in a particular order to make the overall animation easier to understand.
InVision Studio's timeline interface. You can also adjust a velocity curve.
InVision Studio’s timeline opens when Edit Timeline is clicked from Interactions panel.

Running a prototype locally, in the cloud, on mobile

  • Clicking a Play button on the top right runs a prototype locally.
  • A prototype uploaded to the cloud becomes sharable with the link generated.
  • Prototype on a cloud can easily be shared with others to collect feedback.
  • A prototype uploaded to the cloud becomes accessible from InVision mobile app.
  • A prototype can be mirrored to a mobile app via QR Code without cloud, but it’s sometimes buggy.
https://youtu.be/4FkqgjUHnyQ
Screenshots of InVision Studio UI showing QR code, and InVision mobile app showing scan QR code screen.
Clicking on mobile icon displays a QR code, which you can scan from InVision mobile app.

Team

To use Team feature to collaborate with other designers, you need to purchase Team plan, which is $89/month for 5 team members.

InVision Cloud pricing on InVision website, showing 4 options: Starters, Professional, Team, and Enterprise.
InVision Cloud pricing on InVision website.

InVision Studio related useful inks


Principle logo as a section divider for Principle section.

6. Principle (Based on version 5.10)

Principle user interface showing 3 artboards with a prototype preview window open by default.
Principle user interface opens a prototype preview screen by default.

Principle can import Sketch file directly, and can create a more sophisticated prototype.

Its animation is very smooth, with powerful auto-animate feature, which looks for same layer names between two screens.

Components and Drivers feature allow you to quickly create various micro-interactions.

However, there are a few things to keep in mind with auto-animate feature. It could automatically animate many unwanted elements in a screen depending on how layers are named between two screens. To avoid that, your may need to prepare a file in Sketch first by renaming all the layer names carefully.

  • Pricing: $129 (one time fee)
  • Free trial: 14 day
  • Mac only

Pros:

  • Auto-animate is very smooth
  • Easy to make micro-interactions with Drivers
  • Works very well with Sketch

Cons:

  • Costs $129
  • Auto-animate sometimes creates unintended animations
  • Mobile app requires USB connection
  • No cloud service

Triggers, Timeline and velocity control

  • Auto option in Triggers works similar to Timer InVision Studio has, which allows things like a toast appears automatically after an action completes.
  • Timeline allows you to control duration, ease and sequence of certain animations, or freeze those.
Screenshots of Principle's triggers dropdown menu and Principle UI showing interaction arrows between artboards.
Available triggers and interaction arrows
Principle's timeline UI, showing velocity control popup.
Principle’s timeline UI.

Prototype running locally, on mobile

  • Prototype preview is always open, so super-convenient to test.
  • Connecting an iOS device running Principle Mirror app to Mac via USB cable mirrors a prototype on mobile from desktop.
https://youtu.be/9fqCzWqPmI0

Drivers

Below shows a dynamic header that shrinks when a scroll starts, created with Drivers. As shown below, Drivers is a powerful and useful feature to build various micro-interactions.

https://youtu.be/QNmVGDLygPo

Principle related useful inks


Framer X logo as a section divider for Framer X section.

7. Framer X (Based on v50)

A screenshot of Framer X user interface.
Framer X user interface

Framer X is some of newer tools. You can copy & paste Sketch symbols and elements into Framer X artboard, but you cannot directly open Sketch file. Prototyping features for average users are fairly basic, and does not have auto-animate capability. But for code-savvy users, you can use code to do more advanced prototyping.

  • Price: $12/month (pay annually) or $15/month
  • Trial: 14 day
  • Mac only

Pros:

  • Store for easy component downloads
  • Stack is a smart, powerful feature
  • Code extensibility, code handoff
  • Supports videos

Cons:

  • Limited Sketch compatibility (copy & paste only)
  • Basic transitions are limited
  • No mobile app
  • Monthly subscription ($12/month)

Transitions

Preset transitions are fairly basic.

A screenshot of Preset transitions of Framer X.
Preset transitions in Framer X is fairly basic.

Running a prototype locally, on mobile

  • Clicking on Play icon opens up a window to run a prototype locally.
  • Framer X does not have a mobile app. Scanning a QR code opens up a browser for to run a prototype.
Clicking a mobile icon displays a QR code so that you can scan it from your mobile phone to open a prototype in a mobile browser.

Stack, Store, Motion API

Framer X Store
  • Stack is a powerful feature for creating lists and grids. Objects dropped into a Stack becomes auto-adjustable elements. Stack can be nested.
  • Store allows you to search and download various useful components. Video Player and YouTube Player components from the Store are super-convenient.
  • For a code-savvy users, Motion API opens up various advanced prototyping possibilities via code.
  • Web version is work in progress as below.

Team

Small Teams allows members to share components via secure Team Store.

Framer X website showing pricing for Individual, Small Teams, Company.
Framer X pricing including Individual, Small Team, and Company

Framer X related useful links


Figma logo as a section divider for Figma section.

8. Figma (Based on Figma Desktop App release 85 Build 10)

Screenshot of Figma user interface (desktop version)
Figma user interface (desktop version)

Figma is unique in a way that it was built primarily as a web application saving it’s files to the cloud by default, even in their desktop version. Figma can import Sketch file, but could take quite some time to complete the import. Prototyping feature is fairly basic.

  • Pricing: Free
  • Starter: Free for up to 2 Editors and 3 projects
  • Professional: $12 per editor/month billed annually or $15 month-to-month
  • Both Mac and Windows

Pros:

  • Files are saved to the cloud by default
  • Free up to three projects, two editors (collaborators)
  • Well-designed user interface

Cons:

  • Limited transition options
  • Cannot copy & paste objects from Sketch (import only)
  • Free version limited to 3 prototypes

Home screen, prototype mode, prototype panel

  • Figma has a home screen called Drafts that displays all of your projects. Files are saved to the cloud by default.
  • Figma has Design mode and Prototype mode, similar to Adobe XD.
  • Smart Animate was added in 2019 to catch up with the competition.
Figma's various controls in prototyping: trigger, transition and action shown in screenshots.
Figma’s various controls in prototyping: trigger, transition, action

Running a prototype locally, in the cloud, on mobile

  • Clicking on Play button opens up a new tab and runs a prototype locally.
  • Clicking on Share Prototype creates a link to share with others.
  • People who received the prototype link can view the prototype via a web browser.
  • While a project is open on your computer AND an artboard is selected, Figma Mirror app can mirror the prototype on mobile.
https://youtu.be/53lQQhnVAi8

Importing a Sketch file, plugins

  • Importing a Sketch file may take some time to complete.
  • Plugins are available from Figma website.
Clicking on Import file on the top left allows you to import Sketch file, shown in Figma UI.
Clicking on Import file on the top left allows you to import Sketch file.

Collaboration — Share an individual file, create a Team

  • You can easily share your individual file with edit permission.
  • You can create a Team from Figma web UI then invite members. Team feature is free for up to 2 editors and 3 projects.
  • You can easily move your file from Drafts to a Project within a Team to collaborate.
  • Team feature is free for up to 2 editors and 3 projects. Beyond that, Figma offers 2 types of paid subscription plans for more robust feature supports, Professional with $12 per editor/month, or Organization with $45 per editor/month.
A screenshot of Figma web UI showing a Team with members and projects
Figma web UI showing a Team with members and projects

Figma related useful inks


Section divider graphic with section title: Recommendations for beginners.

So what is recommended for beginners?

There are three options depending on what’s important to you.

1: Sketch + InVision Studio

Given the de facto standard status of Sketch, Sketch with InVision Studio to animate prototypes makes a good choice. InVision Studio is free, but sharing a prototype requires cloud upload, which is limited to 1 prototype in a free account. And Sketch is not free.

2: Figma

Figma is free and gaining tractions these days because of its strengths in cloud-based collaboration feature. If realtime collaboration is a high priority for you, Figma is the way to go.

3: Adobe XD

Currently, Adobe XD is the only tool that allows you to create voice interaction prototypes. XD also has Coediting for realtime collaboration. If you want to pursue voice interaction and collaboration is important for you, XD should be the choice, and it’s free.


Thank you for reading. Best wishes to your success!


This article was published on Medium in UX Collective.

#23 How to prepare for whiteboard challenge or app critique during a UX job interview

A person working on a whiteboard challenge and app critique while hiring managers are watching.

I totally understand that you get nervous, and want to prepare as much as possible, when you have an upcoming UX job interview with a whiteboard challenge or an app critique.

Here are things that you might want to consider.

  1. Try to put yourself in a user’s shoes and feel/experience/think the product from a user’s perspective, rather than trying to see things as a smart expert observing from an outside.
  2. Try to see a forest first (big picture) rather than getting caught up in each tree (details)
  3. Focus on the most important feature/task.

All of these will help you think about how you would use the product in your life in which context (where, when, how…etc)

The product could be the app your are asked to criticize during an app critique session, or the web application you are asked to design on a whiteboard.

It’s important to put the product in a context that it belongs when it is used.
Once the product is put in a context, it will naturally reveal what works and what may not work, what you may want to improve/change, or what actions you may consider/etc.

In addition to these, here are some more general things that you should keep in mind.

  1. Try to think out loud so that the interviewers understand your thought process.
  2. Try to be as crisp and clear as possible when you speak out loud.

Hiring side typically wants to see your thought process, how you approach problems, how you articulate your ideas and communicate to others effectively. 

They also want to see if you are a team player with a good positive energy, and a right fit for their team or not.

“App critique” or “white board challenge” (or whatever it is) are more or less just a vehicle to see how these aspects of a candidate come through.

Relax, be yourself, be friendly, be excited, be confident and enjoy the whole process as if you are working as part of the team with your interviewers.

Then you will be fine!

Even if you didn’t do well during your interview, going through an interview process to prepare for a whiteboard challenge or an app critique under pressure by themselves give you invaluable lessons.

Your experience will not be wasted.


Check out YouTube version too!

Also, check out Why it’s important to have 2 different UX portfolios too!

#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.