Posts

Posted on

#7 A delight from Starbucks free reusable cup

So I go to Starbucks quite often.

Recently I got a free reusable cup as part of their holiday campaign. So this is the free reusable cup. And quite honestly, I’m quite surprised to find out that I am really pleased with it.

There are multiple reasons for this.

First, I don’t need to feel guilty about wasting paper cups anymore every time I get a cup of coffee, now that I can bring this cup.

Bringing your own cup also gets you a 10 cent discount, which is nice. Plus, if you are up for the 2nd cup, you can get the refill just for 50 cents, which is good too.

While all these are definitely nice small things, these are not what I wanted to highlight today.

The number one reason why I’m so pleased with this cup is that it does not drip coffee at all from a gap between the lid and the cup.

This dripping problem is something that I was annoyed with a paper cup in the past. It didn’t happen every time. There were probably more times that it didn’t happen, honestly speaking. But it definitely happened once in a while. And when it happened, it was pretty bad because the coffee dripped straight on my shirt or pants and made stains!

I couldn’t quite figure out what caused it, but it seemed that when you happened to have a cup and a lid that are slightly loosely fit with each other, AND when a small amount of coffee happened to get caught in a thin gap towards the edge of the lid, that seemed to cause the dripping to occur.

When this happens, its most likely that the dripping will hit your clothes because of the angle that you hold when you sip a coffee like this.

It’s a small thing, but it does ruin your otherwise pleasant morning coffee experience.

Ever since I started using this reusable plastic cup, the dripping issue never happened.

Because it’s made of sturdier plastic, it seems to have a very tight fit between the lid and the cup.

This tight fit is probably the primary reason for preventing it from dripping a coffee from in-between the lid and the cup. Because in case of a disposable cup, it’s a combination of a thin plastic lid and a paper cup, two different materials. And, a paper cup may shrink or bloat which could affect the tightness of the lid. I’m not sure how Starbucks people are even aware of these things.

But something as subtle as this could make a pretty big impact on our daily user experience. It’s not something that is super cool or anything.

But it gives me a piece of mind for my coffee experience now that I’m free from that annoying dripping problem.

And it’s quite amazing when you think about it that some of the things that brought me such a pleasant experience is a free, reusable plastic cup, rather than a shinny new gadget!

Even if you primarily work on user interfaces for digital products, it’s interesting and valuable to think about these user experiences of physical products.

At the end of the day, even user experience of digital products will have some sort of touch points in a physical world. And you may find some UX problems of your digital product in a physical touchpoint.

Check out YouTube version too!

Posted on

#6 UX happens within a person’s mind

So we, user experience designers typically work on user interfaces of digital products, whether it’s a mobile app, a web application, or an embedded product user interface for an electronics device/etc.

Naturally, many people think that UX designers only build digital user interfaces and that’s all they care.

A user interface is certainly a touchpoint and a trigger for a user experience to happen, for sure.

But a user interface itself is just a medium, just a trigger. 

In order for a user experience to happen, you need to have a user, who interacts with a product via its user interface.

Furthermore, in order for this to actually happen, you need a certain context, a reason why this user is interacting with this product via its user interface.

Then you will start to realize that what initially seemed like a symbolization of UX (a product user interface), is only one component of a user experience, and user experience is something much bigger.

So what do all these mean to UX designers?

What this means is that one particular product user interface could provide an excellent user experience in one context, but may provide a terrible user experience in another context.

It also means that the same product user interface could result in an excellent user experience for a user A, while it could end up producing a poor user experience for a user B.

This also means a person’s user experience is also influenced by her cultural, educational and social background.

I recently had an interesting experience when talking to one of my friends.

I created a chart comparing a few things, and initially used a circle to represent “yes/positive”, an “X” to represent “no/negative”, a triangle to represent in-between.

I am Japanese, born and raised in Japan, so I still have Japanese cultural background after having been lived in the US for quite some time.

My friend, who is originally from India, seemed confused about these symbols that I used in the chart.

Only after seeing her confusion, I realized that how I used these symbols are completely based on my Japanese cultural background.

In Japan, teachers mark student’s answer sheet with circles for correct answers, crosses for wrong answers, and triangles for imperfect but not completely wrong answers.

However in Western culture, teachers use checkmarks for correct answers, and circles to highlight wrong answers!

It was funny because I kew all these differences through my own experience in the past.

And I’m a user experience designer with years of experience!

Yet still, I completely forgot about all these, and my behavior was heavily dictated by my own cultural background without me realizing it.

This episode illustrates just a tip of an iceberg in terms of how each person’s user experience of a particular product is influenced by her own cultural, educational and social background, which shapes her perception and understanding when experiencing a product.

All of which is why, conducting user research and clarifying the target user are so important when working on a user experience project.

Check out YouTube version too!

Posted on

#5 Prototype is worth a 1000 pictures

For a UX designer, a prototype plays a critical role.

A picture is worth a thousand words.

A prototype is worth a thousand pictures.

As an example let’s say,  “I want to create a stop-motion of a clay model performing pushups”.

From a product point of view, this could be an instructional video product, or part of an exercise app, but let’s not too worry about that, as we are focusing on differences between words, a picture and a prototype.

If I want to communicate my concept in words as descriptive as possible, it would be something like this:

A stop-motion of a clay model performing pushups.

  1. Create a human figure using a clay
  2. Put the clay model in a pushup starting position
  3. Take a still photo of the clay model in a pushup starting position
  4. Bend arms of the clay model slightly to represent an initial progression of the pushup movement going down towards a ground, and take a still photo of it.
  5. Repeat step 4 until the clay figure is fully in the bottom position of the pushup touching the ground.
  6. Import all the photos into an animation software, and place photos in a sequence. This is the first half of pushup sequence, from a top position to a bottom position.
  7. Copy above sequence, and reverse the order of still images to create the 2nd half of pushup sequence, pushing up from the bottom back to the top position.
  8. This completes one pushup movement.
  9. Copy and repeat the cycle the desired number of times

Stop-motion: An animation technique where you take many still shots of an object with slight changes, put those in sequence, and playback one after another in order to make it look like the object is moving.

Now this lengthy text description can be visualized in one diagram, which is basically a picture.

Showing steps from 1 to 6, each has illustrations and descriptions
A diagram describing a stop-motion of a clay model performing pushups with illustrations

As you can see, a picture, in this case a diagram, makes it easier for human to comprehend the concept better compared to a lengthy text because it’s visual, therefore you can immediately see it.

Now, while this picture, which is a diagram, is easier to see compared to text-only description, it still requires some sort of logical decoding to fully understand what’s explained, and does not convey the feeling of the final product.

It’s like looking at an instructional manual for assembling a furniture.

You can see what kind of furniture that is, but you don’t get the feeling of what it’s like when its built.

We, humans respond to things emotionally.

Before we understand things logically, we sense and feel things intuitively, emotionally first.

OK, let’s go back to our clay model stop motion.

So here’s a “prototype” of the clay model stop-motion.

Stop-motion video of a clay figure doing pushups

As you can see, it immediately gives you a live, vivid impression including the color, the texture, the motion, and so on.

Now, I intentionally made the picture rough and black and white to make the prototype stand out even more with a stark contrast.

I also intentionally used an example which is not a typical UX project with some digital user interfaces.

I wanted to really highlight the differences between words (text), picture and a prototype through a simple, straightforward example to make the point clearer.

A definition of prototype is broad.

According to wikipedia, “a prototype is an early sample, model, or release of a product built to test a concept or process.”

A fidelity of a prototype ranges from extremely low to extremely high.

It all depends on the context and the intention.

Engineers often make so-called functional prototypes. These typically look ugly, and focus on the functionality part. In these engineering prototypes, the primary goal is to prove that the functionality actually works.

In UX prototypes however, the functionality part is not the focus. The overall experience is.

What this means is that functionality part can be, or should be faked. But the experience part should be simulated as close as possible to the final product.

This includes emotional aspects of the product, such as feeling that you get from colors, textures, tactility, motion, sound, or even smells and tastes in some cases.

So the value of a prototype is to simulate the feeling of a final product as much as possible under given limitations and constrains.

Sometimes, you may only be able to make a wireframe prototype. Or even a rough paper prototype. Or a simple click-through prototype without any transitions. Or just an animation sequence without any interactivity.

Industrial designers always make physical mockups, low fidelity ones with clay or a 3D printer to test forms, then high-fidelity mockups at a mockup studio with real-looking material and finish.

Whatever those are, in whichever fidelity those may end up having, prototypes are going to be far more effective, valuable and meaningful especially for a group of people to get on the same page, compared to just images or text description.

UX designers should be smart and creative in how to fake and simulate the experience of a final product in the most effective way possible at any point in the process of a project.

From this perspective, UX designer is like a magician!

It’s actually quite fun when you successfully faked certain user experience of a product in front of your audience as if it’s working for real!

Check out YouTube version too!

Posted on

#4 One small UX problem that annoys me in Google Calendar

As a UX designer, it’s important to cultivate your perspective to spot and find UX problems around you.

It does not have to be something big. It could be big, it could be small, it could be medium. It could be simple, it could be complex.

I use Google software suites including gmail, Google Calendar, Google Drive, Google docs, spreadsheets pretty much on a daily basis.

Overall it works well, but when you use it on a daily basis, some of small things start to get annoying.

In Google Calendar, when you create a new event, you click on a timeline where you want your event to be.

This brings up a popup window so that you can quickly type in an event title, then set other primary information such as time, guests, location and description, then click Save.

Time usually has a default value in 30 minute increment, such as 11:30am or 3:00pm based on where you click in the first place.

This is good, as you would typically set an event in 30 minute increment in most cases.

However, I quite often create an event with a start time that doesn’t fall into 30 minute increment, such as 11:10am, 11:15am, 3:20pm.

That’s when this small annoying problem occurs.

When I want to correct “11:30am” to “11:45am”, I tend to want to select and highlight just the “30” part and then type “45” to replace it,   because that’s the only part that I want to change.

But this method in Google Calendar doesn’t work!

As soon as you highlight just the “30” part and release a mouse or a trackpad, the highlighted area  automatically expands to include the entire text field “11:30 am”, which is against your original intention!

As a result, you have to type the entire “11:45am” in order to change it.

Once you do this, it sticks and it works.

This is a small thing from a larger scheme of things.

But it’s quite annoying, because I’m so used to editing text by just highlighting the portion that I want to change in all other places such as word processor, spreadsheets, mail apps, powerpoint and so on.

Also, the text highlight automatically expanding beyond what I initially selected feels forced.

Now I also found out that in Google Calendar, it works if you insert a text cursor between “30” and “am”, and enter delete key to delete “30” portion first, then type in “45”.

Sure, this is another typical way you edit text across all the different applications.

But with this way, you have to click more.

  1. click between “30” and “am” to insert a cursor
  2. Press delete key to delete “0”
  3. Press delete key again to delete “3”
  4. Enter “4”
  5. Enter “5”

And obviously, if you were to type the entire start time, it’s going to be:

  1. Enter  “1”
  2. Enter “1”
  3. Enter “:”
  4. Enter “4”
  5. Enter “5”
  6. Enter “a”
  7. Enter “m”

Compared to my originally intended way:

  1. highlight “30” with a mouse
  2. Enter “4” 
  3. Enter “5”

The fundamental problem here is that, Google Calendar works almost as expected in terms of how text input and editing should work for the most part, except this small flaw, which goes against what we have been trained to do when it comes to editing text in all other places.

It’s also interesting to note that this actually works in Google Map. 

In Google Map, when you set a driving direction for a specific date and time for an arrival or departure, you can actually highlight just the minutes section and replace it with what you type in. 

So it’s inconsistent between Google Calendar and Google Map.

As a customer, I appreciate all the Google cloud apps, and I respect the company.

I use many of Google cloud apps on a daily basis, and quite dependent on those.

For the most part, Google cloud apps work pretty well, and I respect how their design team has developed Material Design to where it is now.

But because of that, something like this bothers me, and hurts the overall user experience.

What do you think?

Check out YouTube version too!

Posted on

#3 Magic of being hands-on

I cannot stress enough the importance of being hands-on.

What do I mean by hands-on?

As a UX designer, being hands-on means actually work on UX projects, defining a problem statement, researching competitors, creating UX concepts in forms of task flows, wireframes and prototypes, conducting user test sessions, summarizing user test findings, iterating design based on the findings…and so on.

One of unique abilities that a human has is to be able to think and imagine things that hasn’t happened yet.

This is great, so that you can simulate various scenarios in your head to be prepared for the future.

But at the same time, this ability sometimes gets in your way.

You tend to overthink too much of your future.

And when you do, you tend to think of negative scenarios, and start worrying about those which are totally illusionary!

One of the best ways to avoid this is to always remain hands-on.

Once you start focusing on your current concrete task for your UX project, it shifts your attention from illusion to reality.

Because concrete tasks are tangible and real, it allows you to start building a positive feedback loop between your work and yourself.

Once this feedback loop kicks in, your motivation kicks in too.

Concrete tasks such as creating wireframes has tangible output that you create.

As soon as you start seeing a tangible output, you start wanting to improve it.

Even if you get stuck in your own feedback loop, now that you have a tangible output, you can get other people’s feedback, which might give you a totally different, refreshing perspective.

This positive feedback loop is a very powerful mechanism.

It serves as an engine to keep your work moving forward.

Even if you start very simple and rough, you will be amazed how much it will grow to something quite interesting fairly quickly!

As part of being hands-on, it’s also very helpful to include physical works such as creating hand-drawn sketches for your concepts, creating task flows using post-its, for example.

Great thing about being hands-on is that the more different ways that you engage with, the more stimulation that you get, which fuels your positive feedback loop engine even more.

It’s like a magic!

So, always be hands-on, start creating a tangible output, and start your positive feedback loop!

Keep fueling your positive feedback loop.

Talk to people around you and ask for comments and feedback.

Engage with physical activities to stimulate your 5 senses.

Create post-its and organize those on a wall.

Print out your wireframes and task flows and put those on a wall or a table. 

Create hand-drawn sketches.

Create prototypes.

Being hands-on is the key.

It initiates a positive feedback loop, which takes you a long way.

Happy hands-on creation!

Check out YouTube version too!

Posted on

#2 Collaboration with PM and engineer is critical for a UX designer

UX designer needs to have a good understanding of a product roadmap and a value proposition of what you are designing for.

When you are studying UX, you focus deeply within the world of UX, which tends to put UX in a vacuum.

But in reality, UX does not exist by itself.

UX is part of a larger product team.

Nothing happens without collaboration with PM and engineers.

A beautiful UX prototype means nothing if it’s not implemented as a real product, which needs to be coded by engineers.

And engineer’s work is prioritized by PM, who owns a product roadmap.

Many UX education tends to ignore this important reality.

But this is critical for a success of a UX designer.

UX advocates users through user-centered design, with must be heard by a larger product team, especially by PM and engineers.

Ultimately, UX solution needs to be balanced with product roadmap and engineering feasibility.

UX may need to be adjusted if it’s not feasible to implement under the current roadmap and engineering resources, which requires tight collaboration with PM and engineers.

Check out YouTube version too!

Posted on

#1 Being a UX designer is a journey of continuous learning

The field of UX is still new and constantly evolving and expanding. Underlying technologies are also constantly evolving and expanding as well.

As a result, UX designers are in a constant stream of new things to learn, on top of a pile of fundamental things to begin with.

Fundamentals such as…user-centered design, task flow, use cases, storyboards, wireframes, information architecture, interaction design, prototypes, visual design, motion design, multi-modal experience, design iteration, user story, user journey map, end to end user experience, OOBE, brainstorming, affinity map…/etc.

Design tools such as…Sketch, Adobe XD, Axure, invision, Balsamiq, Photoshop, Illustrator, After Effects, Edge…/etc.

User research components such as…user test, usability test, ethnography test, qualitative research, quantitative research, survey, focus group, contextual inquiry, A/B testing, user research findings, persona, empathy map…/etc.

User research tools such as…Survey Monkey, Typeform, Google forms…/etc.

Analytics tools such as…Google Analytics and so on.

UX process, methodology, and concepts such as…iterative design process, lean design process, user behavior models, design thinking, design system, inclusive design, accessibility, responsive design…/etc.

UX trends such as …flat design, micro interaction, voice interaction, chatbot, data visualization, automation…/etc.

New technology trends such as…AI, Machine learning, robotics, VR, AR, voice assistants, self-driving cars…/etc.

Larger product team process and management tools such as…agile methodology, Jira, Confluence, sharepoint, box, dropbox, webex, Kano Model…/etc.

The list goes on and on…

New technology enables new user experience, which requires a new interaction paradigm.

New UX process, techniques and tools changes the way UX designers work.

How do I keep up with all these?

Sit back and relax. No one can take everything all at once!

Everyone learns things over time. Just set a priority, and take one at a time at your own pace.

Enjoy the learning process as you go.

The fact that the world of UX is still evolving and expanding makes it so dynamic and exciting to be a UX designer!

As long as you enjoy learning new things, you will be OK!

Check out YouTube version too!