UXwanabe - Learn the softskill of UX and grow your design career

How I became a User Experience Designer

December 1, 2017 by Tim Chan

Script I wrote for a talk I did for IxDA Hong Kong

Recently I went on a panel for IxDA Hong Kong, the local chapter of the global organizer. The topic was “How I became a User Experience Designer?”. Since I already wrote a script in advance, I figured it would be a nice idea to share it here such that it might benefit a wider audience. Here it is.

Who are you?

I am Tim Chan. I am a Senior UX designer and I work for a company called GoAnimate. GoAnimate, what is it? It is a tool that lets you create videos through drag and drop. Think of it as PowerPoint, but for video creation.

We have more than 10,000 props and characters to choose from and you simply drag and drop what you want from the library, and you can add actions to the characters, do voice over and even do lip-sync for them.

What is your background before you entered the UX industry?

It goes all the way back when I was in high-school. I studied this course called Design & Technology, and I learned this word — Ergonomic. It basically means design for the human body. For example, if you are designing a chair, make sure you know how tall your target audiences are. It made so much sense to me. This planned the seed on how I perceive design should be — Designing for people.

Fast forward to 3 years ago, I was working in a telecommunication company. My title was Marketing operation officer, basically what I did was: When a marketing campaign rows out, a lot of people in the company needs to know what is going on. Company website needs to be updated, Customer service and Retention people needs to know what is changed. My job was to make sure that a) everyone gets the updated info and b) everyone can find the info.

So we had a very basic intranet at that time, basically it was just a bunch of links. I wanted to improve this, so I thought to myself, I want to meet the people that is going to use this site, so I walked into the call center, and I immediately knew that the intranet is not going to work for these people, they have customers yelling on the phone in one hand and other CS people talking over you in the other hand. It was quite a stressful environment and it became very crucial that information is organized systematically so that people can find information very quickly in this kind of situation.

This was the first time I was designing for people, trying to understand their goals and what kind of environment they will be using the product. This kind of user centered thinking set my foundation of becoming an UX designer.

How did you get into the field? And how your previous background contributes to what you do now or not?

I was lucky enough to be assigned to a mobile app project from the telecom company. My intranet project was a success and I was handed this opportunity. I put in everything I learned in building the intranet into this mobile app.

I accidentally stumble across the word UX when I was learning about Mobile UI and I realize what I had been working all along (Thinking in user’s perspective) is what a UX designer does. I know I was good at doing this kind of stuff, you know, really grilling into how people will feel and act to your product. For the company, this was only a project, but for me, I wanted to keep doing this forever, so I was surprised that someone in this world actually gets paid by continuing doing this kind of stuff, so I jump into UX right away.

What is it you actually do at your work on a daily basis?

I work in Product development for an online tool.

It is not that glamorous, 50% of my time is spent on writing functional spec, it is document that describes in detail how each features work. It describes a lot of “if this then that” scenarios and document how to handle edge cases. This is an important document because it describes decisions in details and allows you to track bugs in the future. It allows it to be shared with all kinds of people, people in CS and people in Marketing needs to know how your feature works.

20 % of my time is spend on testing the features and document usability issues found. Debating with Developers whether something is a bug or bad design…etc.

20% of my time is spent in meetings, presenting to the team, figure out what is the next features to work on, brain storming, writing patch notes..etc.

10% of my time is doing wire-frame and user flow.

You can say that 70% of my time is spent on communicating my design.

What are the opportunities you see in the industry?

As long as employees and founders respect their customers, there will be plenty of opportunities. There are a lot of start ups hiring UX designers now, but that doesn’t mean they can do good UX work. If the founder insists they are going to put and ad. on every step along when people use their app, or use design that tricks or manipulating people, then there is no UX at all.

UX is a new trend right now and its striving, so there is no shortage of jobs. Only shortage of good company that respects their customer and allow UX designers to do good UX work. So As long as companies respect their users, there will be opportunities.

What are companies looking for in designers?

That depends on the kind of company you are interviewing for, and actually, what kind of company you want to work for.

In general, a lot of company and start ups doesn’t fully get what UX is, so they might not know what they want. The responsibly lies on you to teach them what it is and how they can support you. Don’t get frustrated when they don’t “get it”, just because people didn’t know something doesn’t mean they are anything lesser than you. They are not the professional, you are, and frankly these kind of companies are better for you, as a newbie, because the barrier to entry is much lower and they are less likely to attract the experienced designers, which will out qualify you.

For other cases, company that has an established team, they will be looking for someone that totally can bring in and explain their design process, it is much harder to apply to these type of company if you didn’t have an “UX” in your title because they are looking for people that is already qaulified, not people that is just starting out.

What tips do you have for newbies?

Be realistic — What I mean is that design is a total different skill set. It doesn’t matter how senior you were in your previous company, or took a 3 months hardcore course in UX, when it comes to UX design, you are still very junior at this craft. Some people thinks that since they were a manager before, and they took an UX course, they could just magically become an UX manager or had a managerial role in UX. Well, that is not entirely impossible, but would be incredibly rare. Frankly speaking, how confidence are you in leading a design team that had more experiences than you and you had 0 practical design experience? And how much respect will you have from the team? Chances are, you had to start at the bottom. So, as a junior UX designer, are you going to be OK with that pay grade? That is the first question. Let’s say you still want in, what are the actual career path out there? Some company only has Junior → Senior and that’s it, there is nothing further, are you going to be okay with that? There aren’t really that much jobs out there that gets what UX is and can offer a good career path in the same time. Also, plan for the worse, this UX thing might not work out for you. Think about what if you don’t like UX, what are the outs? Think about how the skill you learned as an UX designer can be transited to other places.
Portfolio — Prepare for a portfolio because it is one of the most important things that will get you into the door. It proves to your potential employer that you care about this stuff (After all, you spend a good chuck of time doing this) and how much you get what UX is. The best kind of portfolio are actual works you did, they are much better than made up projects because you are dealing with real business needs and with real constrains. Business needs and Constrains, the 2 most important thing most junior designer doesn’t get. A portfolio showcasing real work can separate you from those designers. Take everything that can be related to UX and document it, take pictures or whatever. You might skipped some steps during the journey and the project might be 80% done. You might skip the user research or user testing part because your company didn’t allow you or what knot, doesn’t matter, be creative, ask your friends, family or colleagues or people from other departments. No one has to know you didn’t do things sequentially. Make sure you don’t just documented What happened, but also Why the decisions has been made. If you really can’t relate anything from your current job into UX, by all means create a fake one, just know that the portfolio would have less of an impact.
Job Hunting — You need to be very, very knowledgeable to what UX is about. The reason for that is a lot of company doesn’t know what UX is and would have a wrong expectation of what kind of people they are hiring. The worse case scenario is that people that hired you know nothing about UX at all. This might be OK if all you cared about is getting the title such that you can look for “Real UX” jobs in the future. But if you don’t want to waste time doing that, you need to get good and wielding these company out, in order to do so, you need to have a thorough understand of what an UX designer actually do and can tell from the company’s jobs ad. whether they get it or not. So, figure out what you want. Is it “A” UX job or a good UX job.
Job interview — Use this opportunity to interview the company as much as they interview you. Find out what UX means to them, find out how much support they have for the UX team (Do they even have a team?), find out whether they have any budgets allocated to user research or usability testing. Ask them how regularly do they do that and how hard is it to gain approval. Really grill them to make sure there is no BS lying around.

There are no quick fixes in product design

August 22, 2017 by Tim Chan

Throughout my years in product design, I had been through numerous occasions where supposed “quick” or “small fixes” turns out to be complete scope creep, or they created problems that drains time in the future because of hasty decisions made in the past. It is a nightmare.

What is a quick fix

A quick fix is whenever one faces with a problem — without close examination — decided that the problem is a small one and thus gave it little time to work on. Sometimes one even made up a solution on the spot without consulting matter experts (aka Design by meetings).

So what is wrong with doing things quickly when you knew the problem was small? The problem is this exact “this must be a small problem” mindset.

Let’s break down why this is bad thinking.

1. You assume you understand the problem

Problem comes in many forms. Often, you need to spend some time to carefully study them in order to reveal their true nature. When you are just look at the problem from the surface and try to come up with a solution, it is like trying to finish someone’s sentence without understanding the context. You are no better than guessing.

The quick fix mindset makes you stop digging to the root cause of the problem and makes you jump right into the solution. It forces you to believe that you know it all, and prevents you from looking deeper.

2. You believe the quick answer is the right answer

Let’s just say the problem — is in fact — a small one. You want to find an elegant answer that takes the minimum effort to implement. That doesn’t mean that you would be able to find the solution quickly.

Since you already skipped ahead and decided that this will be a quick fix, you assumed that there must be a quick answer. You jump right to the first answer you came up with and assume it will work. You want it to work.

The problem here is that design is ambiguous; there might be many right answers — all depending on what you are looking for. But if you think there’s only one right answer, then you stop looking as soon as you find one. You can’t see the good ideas behind you by looking twice as hard at what’s in front of you.

3. You decided that everything is going to be okay

Now that you have picked a solution to work on, the next step is to execute it — the standard creating wire-frame and writing specification stuff. The problem now you see, is that since you already decided that you solution is the answer to the problem, it has to work for you. You became overly optimistic or even, tunnel visioned.

Should we talk to the developers to see whether our idea is feasible or not? Nah…my design is simply and shouldn’t be that hard to implement, there is no time for that. What if users do x instead of going through the desired path? Nah… I don’t think user will do that, it is an edge case.

You are likely to make bad calls with this way of thinking. You won’t see the damage you have made. Not today, not tomorrow, but when it is time to pay your debt, it will hit you hard.

4. You create design debt

The shortcuts you took and the little things you ignored will pile up. They became debts to be paid in the future. Since each components is intertwined with each other, the time it takes to solve a problem in the future is not linear, it is exponential.

Quick design almost always means there is a lack of documentation, both on describing how the feature is suppose to work, and more importantly, why the feature was designed that way. No matter how nonsense it seems now, the old logic exists for a reason. You have to be very cautious in adding new stuff while making sure you understand how the old stuff works, and if you choose to ignore the old design, you are very likely to walk into trouble.

Design debt — once accumulated — becomes a bad debt, one that is possible to pay. This is how a legacy system becomes untouchable. Touching one feature means going through the documentations of 10 other features. If you did not fully document how each these features work and why they were designed that way, chances are, the risk of changing it is too high and you are forced to stay away from them.

5. Your crappy design is permanent

If you messed up and the design doesn’t work, your crappy design is going to be permanent. Why? Because you have already worked on it. Your team, or even you would believe that you would improve it in the future. This won’t be the case.

The further away the promise, the easier it is to make. And the more painful it is to ultimately deliver. When the time comes to fulfill the promise, employees would rather be working on newer, cooler ideas rather than old promises. No one wants to put aside progress to make up for the past.

This thing has already been worked on, so it will get shuffled to the bottom of the to-do list. To your users, your crappy design is permanent.

Why do we like quick fixes

What is going on in our mind that makes us like quick fixes so much? I believe there are 3 main reasons.

We want peace of mind

When problem arises that wasn’t something we anticipated, we felt uncomfortable about it. Our first reaction is to find a quick way to make it disappear.

One way to do this is to trick yourself into believing everything is going to be okay. The logic goes “I don’t want to deal with this right now, so whatever came up is going to be a small task”. Hence, we became overly optimistic in both the severity of the problem and our ability to resolve it. It didn’t really matter how big the problem really was, as long as you can get away from it.

We want to work on something cooler

We tend to pay attention to things we care about (Don’t we all?). Small problems always comes with an unattractive batch on them. It feels small, it feels redundant. It feels like we were not going to have a fun time solving it.

More importantly, we are not going to gain much credit on fixing small issues. You might even want to hide the fact that the problem exists, because they shouldn’t exist in the first place if your designs were good. We would chose to ignore the small problems it if we were given the choice.

We are tight on schedule

This is most common reason. There is a deadline and the resources is tight, then this problem came up and it seems that you have to squeeze some time to fix it. You compromise for quality and tell yourself there won’t be next time, of course, there is always a next time.

Conclusion

There is nothing wrong with wanting to fix a problem with the minimum amount of effort if possible, that is what we should strive for. However, do not mistake you intention of using small effort to fix a problem translates to the problem being small.

Slow down. Fight the impulse of jumping to conclusion right away. Spend some time to investigate, bring in the expertise from different employees and discuss together.

If you are really in a rush, time box the time needed to investigate. It is better to spend some time to understand the problem now, than to realize a few months down the road your design doesn’t solve the real problem.

And if you really don’t have time to do all this, know that you are trading quality for speed. Your bad design will always come back to haunt you in the future. Know your debts and plan for it.

A beginner’s guide to Microinteraction

June 26, 2017 by Tim Chan

If you are working in digital products, chances are you’ve heard about the term Microinteraction, but what is it and why is it important to us? If you are new to microinteraction or want to have a better idea of what it is about, read on.

What is a Microinteraction?

Microinteractions are “invisible” designs that help users to complete their tasks seamlessly. The word “Invisible” is in quotes to convey they are not really invisible. Most of the time microinteractions has minimal UI, and when it was done right, users should rarely notice it existed because they will be so focused on their task. You will recognize a microinteraction when you see it, famous examples includes: Autocomplete, Autocorrect and Drag & drop.

Why is Microinteraction important to us?

As Charles Eames once said:

The details are not details. They make the product.

Microinteractions are, despite their small size and near-invisibility, incredibly important. The difference between a product you love and a product you tolerate is often the microinteractions you have with it. They can make our lifes easier, more fun, and just more interesting if done well.

In this article, I am going to walk you through — step by step — on how I designed micro-interactions for GoAnimate. Let’s get right into it!

Case study : Designing interactions to resize objects in GoAnimate

Suppose you are working on a graphical software, something like Photoshop. You want to make this circle just a little bit bigger, how do you do it?

Most people would say “Easy! Click on the circle and drag its corners”. Let’s break this down, there are actually 2 steps involved in here.

1. First, you knew that if you click on the circle, you would probably see something that looks like this:

Click on the circle to reveal some boxes and lines

2. Then, you knew that dragging the boxes on the corner will make the circle bigger or smaller.

Drag on the boxes on the corner will resize the object

Wait, how do you know all this stuff? How did you know how to control this circle without reading a menu on how it is supposed to work?

You knew what to do because you have seen or done something similar before. Within a split-second, your brain quickly recognizes the pattern and tells you what to do, it becomes “intuitive” to you.

Why is it important to understand this?

There is no such thing as “intuitive”

The truth is, there is no such thing as “intuitive” in digital design. For something to be intuitive — by definition — it has to be something that you knew what to do instinctively without being taught.

Nobody knew how to use a mouse when they first saw it because the thing that makes it useful (the cursor) only exists on a digital screen, there is no cursor in the real world. Once you are trained, controlling a mouse becomes natural and intuitive to you.

Let me introduce our first principle for designing microinteractions:

Principle # 1 — Don’t start from zero

Always start with what users already know. This is important because it saves you time from reinventing the wheel, helps you to reduce the design complexity, and also lowers the learning curve for the user.

Designing the interaction

Let’s go back to the resizing circle example I gave earlier. We can break down what most people would expect on how to resize the circle in the following steps:

Click on the shape to display its control points.
To resize the shape, drag any control points.

These are the basic rules from the user’s perspective. For us, that is all we want the user to know. Anything beyond that is too complicated for the user. However, on our side, we have a lot of details to think through. Let’s zoom in to point 2 together:

To resize the circle, drag any control points.

How does this work exactly?

Decision #1 — Resize in real time or not?

Do you resize the circle while you drag or do we resize the circle after you finished dragging (Continue to show the original size of the circle before you mouse up)?

For GoAnimate, we considered 2 things: a) Since we are not a graphical design tool, we see little value of showing the original size of the object. b) resizing in real time feels more responsive. So, this is what we went for in the end.

We now have our updated rules:

Click on the shape to display its control points.
To resize the shape, drag any control points.
The shape is resized in real-time.

Decision #2 — Should the object be resized proportionally?

In most applications, users can hold the Shift key while they resize to retain the proportion of the object. Otherwise, the object can be resized freely and can be distorted. This kind of interaction has become a convention.

If we go with that, the rule becomes:

Click on the shape to display its control points.
To resize the shape, drag any control points.
The shape is resized in real-time.
To retain proportion, hold Shift while you drag.

Most of the time we will err on the side to follow conventions. However in our case, since GoAnimate provides a library of pre-made content to our users (such as Characters), those contents look pretty bad when they are distorted. There is also no strong use case to support the claim that distorted content will be useful in helping our users to tell stories. So, we broke the convention of holding Shift to scale proportionally, instead, we did the opposite: By default, all objects resize proportionally, and hold Shift to resize freely.

Here are the updated rules:

Click on the shape to display its control points.
To resize the shape, drag any control points.
The shape is resized in real-time.
The shape resizes proportionally unless you hold Shift while you drag.

We have considered that holding Shift to distort an object may be hard to discover. However, we are okay with it because our primary goal is to help users resize proportionally. This is one of the choices we got to make in order to make the interaction customize to our primary use case.

Decision #3 — How does the drag interaction works?

Our goal here is to figure out what kind of interaction feels the most comfortable and natural to the user. Here is what I immediately came up:

Since the control point exists in the corners, drag in 45 degrees to resize.

To make it easier to drag, let’s make the drag-able area 20px, meaning as long as your cursor is within that area, we count that as a dragging action. Now we have something like this:

Needless to say, this is going to cause some serious usability problems because the limited draggable zone is going to cause a hard time for most motor functions. Users will probably be expected to do something like this when they want to enlarge the circle:

This makes more sense. Can we do better?

Let’s try the following:

To resize the circle, drag any corner outwards enlarges it, dragging it inwards shrinks it.

All we need to do now is to define where is in and where is out. It should behave something like this:

The idea is that whenever the user drags the corner, we are going to draw an invisible line perpendicular to the corner. If the cursor is then moved “outside” of this line, the shape enlarges, when it is moved “inside”, the shape shrinks.

If we add all these up, our final rules become:

Click on the shape to display its control points.
To resize the shape, drag any control points.
An invisible line is drawn perpendicular to the control points, if the cursor is in the outer area of the line, enlarge the shape. If it is in the inner area, shrink the shape.
The shape is resized in real-time.
The shape resizes proportionally unless you hold Shift while you drag.

As you can see, resizing a shape might just be simply “Dragging the corners” to the user, but behind the scene, there are 5 rules working closely together to make this happen. This brings us to our next principle:

Principle # 2 — Absorb complexity

Remember 2 things, a) people didn’t come here to use your product, they came here to get something done. Learning how your tool works were not part of that goal, and b) user cannot read the rules of the microinteraction you designed. The only way they can understand the rule is to take an action, see what happens through the feedback, and adjust their mental model accordingly.

In the case study I provided, you can see that although there is a lot of logic going on behind the scene, all the users need to know to resize an object is boiled down to 2 rules:

Click on the shape to display its control points.
Drag any control points to resize.

As designers, it is our job to absorb the complexity of our product and enable users to do the things they need to do without having to think about how to do them. The more we can absorb, the more the users can focus on their goals.

Conclusion

Well, this has been a long article to talk about the basics of microinteraction. Making something intuitive takes hard work, but in the end, it is the little things that separate an okay product and a great product.

If you are interested in learning more about microineraction, I strongly recommend you check out the book by Dan Saffer, the title — unsurprisingly — is Microinterations. Even if you don’t see yourself designing mircointeractions anytime soon, this book will give you a fresh view on how to approach design problems and I guarantee you will learn something from it.

Until next time, may your microinteractions be intuitive.

Disclaimer: I am no longer a GoAnimate employee and I’m not posting on behalf of GoAnimate.

UX review for League of Legend’s screensaver app

January 4, 2017 by Tim Chan

League of Legends has created a Screensaver App. I personally had a few experiences downloading artwork from games and I understand it is a very cumbersome process (Right click, save, repeat..) and an app to help people download everything at once seems like a cool idea. I am curious to find out how it works.

Part 1 — Testing the Discoverability of the app

Let’s start from the beginning, is this app discoverable? In order to use this app, first users have to find it.

To answer this question, we can look at how well it fits into the user journey. Every journey has a goal, and this is what I defined as the user’s goal, from their perspective:

I want to find cool artworks and make them my screensaver.

With a clear goal in mind, we can start with picturing the common user journey that most people have from downloading cool artworks.

I thought of 2 journeys on top of my head.

Journey #1 — Search focused:

Go on Google and type “LOL artwork”.

The first result lands me to this page. This page is a sub-page under Media, which I will talk about it in a bit.

League of Legend’s artwork page, under Media.

To my surprise, the screensaver app cannot be found here, so the discoverabilty of this app failed in this journey.

Let’s look at the second journey.

Journey #2 — Browse focused:

1. Go to the game’s website.

2. Look for a section called Media, usually there is where the artworks and game video lives.

I expect to find a section called Media because it has long been a convention for a lot of game websites, were they put all the game play videos, in-game graphics and conceptional arts under this place.

Example of how various game website put their screenshots and graphics under the “Media” section

Not so successful here, there are multiple sections on the main navigation of the website and non of them directly gets me to artworks. Here is the list of the navigation headers in the home page:

News
Game
Universe
Nexus
E-sports
Boards
University
Support
Merchandise

Where would you expect to find the artworks from the name of the headers?

Game? Nexus? Nope. None of them leads you to their artworks. The problem here is that some of the navigation names have very weak information scent (the extent to which users can predict what they will find if they pursue a certain path through a website) and there is no way to know what is behind the link before you click on it.

For example, what does Nexus mean? Is that related to the game’s universe?What does Boards mean? The rank ladder board? Job board or the community feedback board?

As I continue to look for a section called Media, it turns out they do have a Media section (Search “LOL media” on Google) where I honestly don’t know how to get to this page if I had started from the Homepage.

League of Legend’s Media page. Cannot be access from Home page.

As mentioned, this page does not include the screensaver app. Which I think is a huge miss-opportunity because this would be the most natural place for it to live.

Both user journey failed to discover the screensaver app.

The main reason?

The app can only be found on a separate landing page (http://screensaver.na.leagueoflegends.com/en_US), and it has no hyper link that connects to the Media section. You can find the screensaver app if you search “LOL screensaver” on Google.

Recommendations

Here is how I envision the ideal journey would look like:

1. Go to the game’s website

2. Look for a section called Media, usually there is where the artworks and game video lives.

3. If I navigate to Media > Artwork, I can see the screensaver app. It tells me I don’t have to right click and save every image one by one and can download all artworks at once, awesome!

I understand there might be some legit business reasons for the company to decided that Media is not important enough to go on the Top navigation, so as a compromise, I would recommend to put Media as a subcategory under Game or Universe to make it more discoverable.

Of course, the way we structure the contents doesn’t have to be final as we can run user tests and card sorting exercises to see whether our choice makes sense.

Furthermore, I would also recommend to put the screensaver app under the Media or Artworks section such that it shows up naturally when people needs it.

Part 2 — Testing the app experience

Since this article is about reviewing the app experience, I would just skip the download and install part because these are pretty standard stuff.

Launching the app

To set LOL’s artworks as your screensaver, you have to select the option “League of Legends” in your screensaver menu. Although I do wish after the app is installed this step is done automatically for me, there might be some technical constrains that would prevent that from happening. Otherwise, this would be a pretty streamlined process if it is achievable.

The screensaver app is launched once you select “League of Legends” as your screensaver and hit “Settings”. It replaces the OS “Settings” menu that would have pop-up normally. It looks like this:

Immediately 2 questions came to my mind:

1.Why is there a back button? The backward arrow ( ←) signals that I can go back, but there is nothing to go back because this is a pop-up menu. What further confuses me is that having a Back button implies I might have missed some steps along the way. The arrow is labelled “Exit” which makes no sense to me because this is a pop-up menu, if I want to close it, I will click the big “x” on the menu itself.

2. Why do I have to name my own playlist? I mean, assuming if I do want to spend time to create my own list at all, wouldn’t it be better to just let me get started right away, and pick the cool artworks ASAP? I never remembered the last time I have to name my screensaver list. I have been forced to stop what I am doing and make a decision. It requires me to think, which is bad.

Why is it bad?

Thinking is work and most people hate work.

To be more precious, people hate unnecessary work.

By asking me to give the list a name in this early stage, the app forces me to pay attention to the app itself instead of letting me focusing on what is more important to me, which is to setup the screensaver list.

A better flow would be first letting the user select what goes into the list, then ask them to name it after they are done. Give them the option to skip the naming part if they don’t feel like it, and if they do, give them smart names as defaults such as List 01,02..etc. Even better, don’t require them to name it at all because who the hell wants to give their screensaver a name?

Selecting artworks

Let’s move on and see how does the rest of the experience looks like. After I give my screensaver list a name, I enter this page.

I am under a tab called Champions. This tab contains the artworks of different champions and each thumbnail acts as a category. Click on the thumbnail brings us down a layer where it reveals more artwork of that champion.

Click a champion thumbnail reveals more artworks from this Champion

Two comments about the experience of selecting artworks:

After you selected the artworks inside a category, if you wish to move on or go back, you will have a tough time to exit this category. The exit button is not easy to find. You have to scroll all way way Up and click on the Downward arrow (↓) in order to exit.
There is no UI where you can have a clear overview on which artworks you have already selected, apparently, you have to click Next if you want to get an overview. To me, Next means I am ready to move on, but I am not ready to move on because I need to see have items I have selected first. Online stores have learned that naming the last step “View items and check out” is better that just calling it “Check out” because user feels more secure to have a final chance to look at their items. Applying that to here, maybe calling it “View selections” will make user feel more comfortable.

Below is the overview UI after I clicked “Next”.

Click on “Create” generates a screensaver list

The final UI shows the list I created in a list format:

Now it became apparent that the reason for requiring users to name the list as the first step of their journey is because the app allows users to create multiple screensaver list.

My question is that how many people would actually do that? Can you imaging someone creating multiple lists and switching every few weeks given that fact that screensaver is not seen very often? If people are bored at what they are seeing, won’t they just go to the existing list and adjust it? How helpful is the multiple list feature in this case?

I have reached the end of my UX review of this app, but along the journey, I felt that this app focuses too much on letting users to create and customize and multiple lists, without fully understanding whether this is in the best interest for them. Should creating a custom screensaver list be the centralized experience for the users? I am not convinced.

How can we improve this?

I think the best way to improve something is to start by questioning whether every feature has earned its place to be there, and ask questions, lots of them. For example, I would put myself into the user’s perspective and ask something like…

As a user,

Do I care which piece of artwork goes into my screensaver? (For me, I don’t really care as long as it looks cool enough. Maybe a few from my favorite champions but other champ works too).
Do I want to create my own screensaver list? (Yea, that sounds cool)
Follow from #2, do I want to spend time creating my own screensaver list? (Not really…)
Do I want to create multiple screensaver list? (I don’t really see why that would be useful for me, maybe someone else might find it useful)
Follow from #4, how often do I want to change my list? (Why would I do that, can’t I just update the already existed list?)

You can see that if I were the only user for this app, the current version would totally suck for me (I don’t want to create my own list, I just want some cool enough artworks and I don’t see the point of having multiple screensaver list).

Of course, I am not designing for myself and I shouldn’t take my own opinion as the answer. The above questions is best answered by interviewing the target users and understand their motivations, and this would give us good insights on where the design direction should go.

Think about how to delight the users

Delight is often achieved by guessing correctly what people want and provide it as defaults. To come up with these defaults we can start with what we know.

What we know

Person who download this screensaver app has a really high chance that they are a League of Legends player.
Most players are impatient.

Base on the above, we can start to brainstorm ideas that can delight users and save them time.

Wouldn’t it be awesome if we can extract the game’s data and generate a screensaver list based on player’s most used champion? There is a high chance they want to see their beloved champion on the screensaver right?
What if we pre-generated a list with cool artworks for users, such that users don’t have to do it if they chose not to? What if they can open the app and click on a button that says “Randomize artwork for me”?
If users want to create their own list, would it be easier for them to edit existing ones instead of starting from scratch?

Conclusion

While it is easy to poke holes on someone else’s work, it is much harder to give concrete and actionable insights. As a designer myself, I understand the complexity of product design and I tried my best to provide possible solutions along the way such that this will not be a typical critique but no answers piece.

Overall, the visual appearance of the app looks pretty good and it resonate well with League of Legend’s brand, and I do understand sometimes, not every aspect of the company can get the resources and care as one wishes it to be. I hope in the near future, as the company continues to grow it can cater the user experience on different areas because to a user, every touch point matters.

Thank you for reading.

Case study — Redesign Template feature for GoAnimate

October 17, 2016 by Tim Chan

GoAnimate is an online platform that enables people to create professional-looking videos — from scratch — using drag and drop tools. It helps businesses and consumers to tell their stories in an engaging and cost-effective way.

In GoAnimate, there is a feature called “Template” where user can drag & drop a ready made scene with backgrounds and characters included in it. This saves users time to create a scene from scratch.

A Sample of GoAnimate templates for the HR category

Since the launch of the Template feature, we were happy to find out that a lot of users quickly adapted to use Templates to help them create videos more quickly. However, through watching user testing videos, we have identified a few usability issues we would like to address.

My role

I was the lead UX designer for this project, and worked along side with another UX designer and one engineer. I executed user-testing sections, interaction desgins, user journeys, wireframes, prototypes and design specs.

The Process

Understanding the problem

We ran 6 rounds of user testing sections through Usertesting.com, below is a summary of usability issues we identified based on user testing sections:

1. Lack of visual hierarchy. Since Templates and assets (individual items such as props and characters) were grouped together visually, some users had mistakenly identified certain Templates as an asset to be added on the stage.

Text templates and text components (3d icon from right) were put together which confused one of our testers.

For example, one user has mistaken a Text template as a way to add text to the scene. Hence, when they click on that template, everything that is currently shown on the scene is replaced by that Text template. Although this the correct behavior for selecting a Template, but not what the user was expecting. As we can hear verbally from the user how confused she was.

2.Difficult to navigate between Templates categories. With the old UI, users had to choose a Template category very carefully, because if they cannot find what they need in one category, the only way to browse another category is to click the Back button and select another category.

Current design of Templates, user had to choose a category carefully or they will be force to hit Back multiple times.

Imagine you were on hunting mode, where you really wanted to find something urgently, and you had to hit Back multiple times because each category you clicked did not contain what you want. It starts to become irritating very quickly. In short, the old deign has high interaction cost which a good design should always try to avoid.

Understanding stake-holder needs

Apart from serving our user needs, it is also important to take into account different stake-holder needs. Our marketing team said that they wanted a way to promote certain templates based on seasonal (e.g. Christmas specific) or user’s job roles in order to give users a more personalized experience. With that in mind, I sketched out the user and marketing needs on a whiteboard and shared that with the team.

Setting the North Star

Before we started to work on anything, we needed some guiding principles that everyone can agree upon. This helps us to evangelize ideas, gain alignment and drive decision making.

When we asked our users why they chose to use our tool instead of our competitors, many pointed out that “Using Goanimate is much quicker”. Indeed speed is a feature on its own. We quickly decided that speed is the number one thing that we should care the most.

Everything that we were going to work on will be about helping users to create their first video in a shortly manner. Our design must be able to promote featured templates without slowing the user down.

Sketching out the User Journey

We want to understand what challenges a new user might face when they first came to our tool, sketching the joruney out helps us to identify area that users might need help with. These helps may came in any form (micro copy, contextual help..etc)

A user journey on what a user might went through

Brain storming ideas

It took us a long time to find the right solution because every sketch I made seems to not satisfy our goal, which was to:

Have a clear Hierarchy.
Easy to navigate between templates.
Able to promote certain templates.

In the end, something sticks. We took queue on browsers tabs designs, where the tabs will be our categories. It is easy to navigate between tabs and we can pin certain tabs just like in browser to promote some templates.

A collection of sketches to brain-storm the template idea

Paper prototype & Interaction design

We quickly jumped into creating a paper prototype to test out our ideas. We cut out the pieces to help us understand where the template menu should belong in terms of structure and layers, where it would come from when summoned and where it would go..etc.

Paper prototype illustrating structures and layers

Interaction design

I used Atomic to create an interaction design prototype and presented it to the team to communicate how the template menu should behave. I collected feedback and did a few variations. Below is the final design:

Functional prototype

We worked alongside with our engineers to create a working prototype. We presented this prototype to our stake-holders, including our CEO, while explaining the problems we are trying to solve and how this designing is the right solution. Once we got everyone on board, we then moved on to create the real thing.

https://youtu.be/HH9c-UHnsKs

Functional specifications

At this stage I prepared a document called “Functional specifications”, it documents how the feature is suppose to behave and also the design decisions we made along the way.

Some designers advocate on not writing specs and prefer to use wire-frames and prototypes as the final spec. I am also not a big fan of heavy spec, however I find the process of writing the spec forces to me to think about the problem more clearly. Flawed logic is also easier to discover when you put the interactions into words because you are not distracted by anything fancy.

The final product

Below is the final product and the problem it addressed:

1. Clear Hierarchy

We have moved the Template menu to the bottom of the UI, shown when user clicks the Add scene button or click the Swap scene button. With this new UI, the case where users mistreat Template as an asset and accidentally replacing the current scene will no longer happen.

Putting Templates at the bottom makes the adding scene interaction much more intuitive because users are most likely to want to see templates when they want to add a new scene (Triggered by clicking on the Adds scene button). The Template menu now show up when users need it and stay out of their way when it is not.

2. Easy to navigate between categories

We have introduced a Tab feature that works very similar to a browser tab, users can easily navigate between categories they care without the speed bump from the old design. They can also customize their work space to show only Template categories that are relevant to them, and hide those that are not.

Tab design for easy browsing between categories

User can customize what categories to shown

3. Addressed the marketing need

We don’t want first time users to be overwhelmed by the number of Template categories out there. Hence, by default, we only show a few starter categories, or categories for promotion to help users quickly get started. This approach helps to promote certain categories without coming as too “salesy”.

A set of starter categories helps users to get start quickly

User testing follow up

We ran a few more user testing follow ups to see how well the new design went compared to the old one. We were happy to see that all users were able to distinguish the difference between templates and other assets. The starter templates helped the users to easily get started and they had no difficulties navigating between templates.

Running user testing sections to test out the new template design

Results

While I cannot show you the sales number, one of the things that made me proud of my job is seeing how customer appreciate the work we put out there. Below are some of the praise that we receive since the launch of this project.

“Sweet mercy the new editor is AMAZING! The level of fine-grain control that we have over elements now is fantastic, and the intuitiveness and responsiveness of the interface is fantastic as well!”

“I’m liking the new alpha video maker format. Particularly the time line which makes it easier to visualize the sequence of actions than the older format.”

“Just by the interface alone it is night and day better…”

“ know using it is at our own peril since it’s Alpha, but I’m already using it for production level videos because of how much more streamlined and powerful the new editor is. Fantastic job GoAnimate, you’ve raised the bar once more!”

“I have so much to say! So many things! I’ve been using new UI/UX for about an hour and overall I’m in love! … Anyway, The timeline improvements are huge.”

“User friendly, clear extra simple, but still great quality & tools”

“Hi, congratulation for created great new platform design for testing, which is more light, easy and well organized timeline.”

Lesson learned

Confession time: we actually created the North star (or the design vision) after we started designing the UI. I decided to put it this way in the portfolio because it is easier to follow.

At first, I thought the requirements were very clear and there is no need for a design vision. It didn’t take us long to hit a bottle neck, as the design was going nowhere. Non of us were happy about our sketches because it couldn’t address all our requirements.

It is until we went through a lot of debates and it became apparent we must align our vision. Things started to go smoothly afterwards and we can finally come up with a design that everyone is happy about.

In short: Never cut corners or you will always suffer in the end!

Thank you for reading.

Case study — Information Architecture for GoAnimate

October 17, 2016 by Tim Chan

GoAnimate is an online platform that enables people to create professional-looking videos — from scratch — using drag and drop tools. It removes the pain of traditional time-consuming production process by providing pre-made props and templates.

With 10,000+ props in their library that were categorized poorly and with very basic search capability, GoAnimate users had a hard time looking for what they want. GoAnimate needed a better way to organize their contents and improve their search experience, this is were I came in.

My role

Research and design information architecture, produce tagging and metadata guidelines for content creators, and designed functional spec on improving the searching experience. I was the lead UX designer for this project, and collaborated closely with the content team and one engineer.

The Process

Understanding the existing system

Before I start, I wanted to fully understand why the problem existed in the first place. I did in-depth interviews with the content team to gain a better understanding on how they work.

The biggest problem I uncovered was that there were no guidelines on how contents should be categorized. Each team member will organize contents based on their own feelings. No wonder why contents are scattered along the place. On top of that, the search engine only supported search by file names, which was a really limited experience.

Break down the problem

There are 3 big problems I need to answer:

When should a concept become a category? For example, for an Office table, should it belong to a category called Office or Corporate? Why and why not? What about Furniture?
How to make the categorizaton scheme scalable? I want to create a scheme that not only support what we have currently, but can also support new contents in the future.
How can I make an item retrievable by using multiple keywords? For example, I want to find a Macbook. If I search Mac, Laptop, Electronics or Apple I expect to be to find my Macbook. How do I make that happen?

Research — Understand how human organize information

I knew my problem was not unique, the challenge of organzing information has existed way before I became an UX designer. I decided to do some research on how other people has solved this problem.

Since our library covers a lot of concepts, my research needed to cover a wide range of topics as well. I looked at product based categorisation systems such as ebay, Amazon, Walmart…etc, and activity based such as Meetup.com. I also looked at library classification schemes across the world to have a better understanding on how human classify knowledges. Lastly, I also looked at government websites, yellow page and other recruiting website to understand how we categorize job functions.

Researching different categorization scheme, even yellow page!

I decided that item exists in multiple categories would make most sense to our tool. For concepts that does not have the privilege to become a category, we will use them as tags for search engine retrieval. Below is a sketch on how I was brain-storming how we can categorize a character:

Brain storming how I might want to tag a character

Research part 2— Conduct card sorting exercise

We invited test 3 participants to our office for Open-ended card sorting exercises. We observe how they group things logically together and asked a lot of questions to understand why they chose to group things a certain way. I noted there are similarities between the participants and used that as a guide to create the categorization scheme.

Participant is conducting open-ended card sorting exercise

Brain storm how we can categoize items based on results from card-sorting exercise

Create categorization guideline

Based on the results from the card sorting exercise, I created a categorization guideline internally on how to categorize items inside our library. The guideline went through a few changes afterwards to cover more topics and make the wordings more clear.

This guideline gives us a unify understanding on how contents should be categorized. Instead of debating which content should go under which category, it saves time for the content team to do things that is their expertise — to create remarkable contents.

We also worked with the development team to design an admin UI that allows the admin user to easily assign categories:

Search

Reusing left-overs

As we are only interested to offer user no more than 30 categories to avoid overwhelming them with choices, not every category name we came up with made it to the final cut.

Those categories names exists because that there is more than one way to categories something, which means that those terms is perfect for us to use as tags which will help us with the search.

Tagging

Search engine retrieves information through meta-data, also known as tags (e.g. hash-tag # in Instagram). It helps the search engine to understand that an item carries multiple meaning. Fundamentally, tag is a category.

It is easy to tag 1 or 2 items, but when you are tagging 10,000+ items, things start to become tricky. You will start to miss some important tags or you will start to over tag, either way, the process is not efficient.

Importance of guidelines

To ensure that each item has good quality tags, I came up with a set of guidelines on how we should tag items, the team has to consider 3 questions for every items:

What is this item.
Where can you find this item.
What does it represents.

The tags will start from specific concepts and gradually move towards more generic ideas. For example, and “Office chair” will have tags the looks something like: Chair → Office → Work…

Other considerations — Variance terms

Language is a tricky thing, there are different words that actually mean the same thing. For example, Cell phone or Mobile Phone refers to that thing you can call people while walking down the street.

To avoid spending time to come up with variations of terms duplicate tagging, we grouped words with similar concept or meanings together. We chose one term — the Controlled term — as the tag we will used internally. Other variations are called Variance terms.

The control term table is very simple spreadsheet file. One column is the control term, and the other columns are the variance terms:

With this Controlled terms table, we don’t have over tag just in case we might miss some keywords.

Now when user search the variance terms, since variance terms and controlled terms are linked, we will be able to return results.

Improving the search experience — Front end level

After I have designed how we can come up with tags and how it would work in the backend, I started to look for some micro-interactions that can improve the search experience. Below are interactions I added:

Search suggestion saves time for user to find keywords

As users types in the search box, provide suggestions based on what he is typing. This helps us to a) educate the user what items we have and b) save the user’s time by making him typing less. Also added arrow keyboard shortcut to help user easily navigate between the suggestions.
Offer typo tolerance such that users do not have to worry if they misspelled something.
Bold the matched text.

Documentation

At this stage, I created a detail document that describes how the search engine works both in the font-end and in the back-end (The algorithm). I worked with the development team to refining the wording multiple times and make sure there is no ambiguity in how we want to make this project work.

The result

The project didn’t just end just because I shipped the feature. Good search experience requires continuous fine-tune and follow up. I set up a review cycle every 2 weeks to understand how well we were doing for the new search engine. We were mostly interested in 2 things:

Search term that is “valid” but returning 0 results. This means that the term should return results since the item exist in the library.
Search term that was used a lot but return 0 results because the item searched doesn’t exist in the library.

Search report on the first few week of the new search engine

Based on the search log, I was able to make some fine-tune on the search experience. For example, we were able to identify items that were searched a lot but was not tagged and also identify the need to add more contents since users were looking for it.

What we planned to do in the future

We had plans to do the following tasks, which I think is going to bring the search experience to a higher level, but in the end I have to drop the features due to time-constrains.

Auto ranking adjustment. Create an automatic system such that, when an item is more popular than others, we will give that item more weight, so it will show up closer to top in the search results.
Create a thesaurus library. A thesaurus library defines the closeness of each terms. Which means apart from the regular search results we show to our users, we can also present relative search results, something very common in the e-commerce world. E.g. “You may be interested to this…”

Reflection and lesson learned

Through out this project, my biggest learning was to understand the concept of Controlled Terms and Variance Terms.

As I was working side by side with the content team, we faced the challenge of constantly thinking of variations of a concept, and try to put all those variations as tags. Things starts to become messy as some items will have like 30 tags because of the team trying to cover every possible keyword we can think of.

It is after I picked up the book: Information Architecture for the World Wide Web — aka, the polar bear book which taught me the concept of Controlled Terms and Variance Terms and the art of organizing information, things start to change and went more smoothly.

My biggest take away is that, although some books are really boring, sometimes you just need to bite the bullet and read it. After all, knowledge is power!

Thank you for reading.