Product Design

How to interview for an UX position

February 1, 2019 by Tim Chan

Insights from a designer that became an interviewer.

Last week, I interviewed someone for the first time. It was for a junior UX designer position and for all my professional careers, I have been in the interviewee’s seat. Being in the opposite end of the table has been an eye opening experience for me, and I have learned few things that I wouldn’t have otherwise.

In this article, I want to share some insights I learnt that would help you interview better for an UX position, so here it goes.

Insight #1 — Your interviewer is on your side.

Look, I might have a Senior in my title, but I am just a designer that is looking for another designer to help me with my job. As an interviewer, I am not here to test you or throw you a challenge. I am actually on your side. Why? Because…

Company hires to solve a pain.

When a company decides to hire someone, they are in pain. They are at a point where they either A) Figured out putting the designers on over time just wouldn’t produce the same kind of work Bob did before he left 3 months ago or B) Needed to do something but they don ’t have the knowledge or time to do it themselves.

Hiring people costs a lot of time and money. Especially in the time where everyone can take a weekend course and slaps a “UX designer” title on their LinkedIn profile. It takes a tremendous amount of time just to figure out whether someone actually does UX or UI, or is just simply does not have a clue there is a difference.

The interviewer’s job is not to screen out people — screening out people is just a by-product. His job to find someone to fill a role that they desperately need as soon as possible, so he can get back to do his work, the work he is paid to do and hopefully get a raise he deserved.

This is were you come in.

Insight #2 —The interviewer wants you to be THE ONE.

Any decent company gets hundreds of resume sent to their mailbox when they post something on the web. By nature of normal distribution, 80 % of them are mediocre, 10% of them are terrible. The hiring manger have to sort through the pile of resumes and hopefully find those 10% that is qualified, then persuade them to work for him.

Imagine being a hiring manager. You start screening for potential match, finding and arranging time that works for both sides, coming in at 7 a.m or staying late after work because your candidate can’t take a day off, then during the interview, the candidate does not show up. Or when they do show up, they completely blew it and have no idea what they were talking about. Maybe you found someone that was really good, but you don’t have the budget for what they asked for. In other cases, after a few rounds of interviews and an offer was given — just before you think the dust is settled — the candidate turned you down and has accepted an offer from a competitor.

Most interviews takes at least an hour, realistically you can only do 3 to 4 interviews a day. Sometimes a bad interview just completely ruins your mood and you start to question whether there are still good people out there, and you can’t focus on your work for the rest of the day.

The point is, interviewing people takes a lot of energy from the hiring manager. It is exhausting. In the end of the day, the hiring manager just wants to go to his boss and say “This is our guy, give him an offer”. This means that he is secretly hoping that this interview — the one you are having right now — would be the last one he has to give. He wants you to be the one.

Why am I going so lengthy about the hiring process? Because I want you to have empathy. Hiring managers is people too, they have their own hopes, fears and dreams. As an UX designer, you should already know what empathy is don’t you? Once you start to treat your interviewer as a person and understand their pain-points, you will start to operate in a total different level.

Now off to some tips about how to interview for an UX role.

Tip #1 — Defend your work, not yourself.

When the interviewer asks you about the design decision you made on your project, it is easy to get defensive because you see it as an act to question your ability in delivering good work. You are defending you instead of your work.

In fact, I would argue you shouldn’t even defend your work. Defend implies having your guards up and fighting off anything that is coming to your way. Once you start doing that, you put yourself in a disadvantage. You are not ready for a discussion, you are ready for a fight. You are now fighting to justify why you should be in this room instead of selling why you should be right fit.

Here is a little trick to avoid being defensive: Assume good intentions. This means assuming the interviewer is genuinely interested in understanding how you make decisions.

Think of the interview process as an usability study and the interviewer is your user. Examine questions coming out from the interviewer with a scientific lens and treat this as an opportunity to improve your presentation skills. He is confused about something you said or did. Why is he confused? What doesn’t he understand? What does he mean by saying that? Why is he asking this question? Does he have other ideas about the project that you haven’t thought of?

Tip #2— Answer the question

It is easy to get defensive when the interviewer asks you about certain choice you made. When you haven’t thought about it, it puts you off guarded. You don’t want to be seen as a designer that hasn’t thought through things, so you start going in circles and making things up, but you are not really answering the question.

This puts the interviewer in a weird spot because he will start to wonder if he ever asks you to justify your decision, will it take him 15 minutes every time to get to the bottom of things?

Its OK to not have answers to things. We have all worked for someone and we understand that in the perfect world we want to do everything “properly” such as running analytics to see whether our design performs better than the old one, or run surveys to record users satisfaction about the new design.

Of course the world is not perfect and business is full of constrains, so an answer like “No we did not measure whether the new design perform better because the problem was urgent and we needed some fixes real quick. Our new design was based on our own experience and industry best practices. We hope that we can go back to revisit it when we have the budget in the future.” is sufficient in most cases.

Tip #3— Lead the interview

When the interviewer asks you to walk through your portfolio, he is asking you to lead the presentation. He is no longer leading the interview now, you are. You own the stage, so start act like a leader and act like you know what you are doing. For the next 10 minutes, the stage is yours.

Tell them what the problem was, and the kind of research you did to uncover things you didn’t know before. Tell them the surprises, then tell them the kind of designs you tried and how you picked the final winner.

This is the part you should not screw up. I will give you the benefit of the doubt when I am the one asking you questions that is not related to your portfolio, because you might not have thought about it. But questions about your portfolio? It is your work and you should know it by heart. I assume you have practiced your presentation at home. You should know your stuff inside out, you should expect when and what the interviewer is going to ask you and be able to answer any questions with confidence.

Don’t literally walk through your slides pages by page though, you should adjust your presentation based on the audience. For example, the Head of Marketing might want to focus more in the before vs after and the results, while the UX manager might focus more on the process you went through. Adopt your pitch such that you keep your interviewer engaged.

Tip #4 — Make it hard to say NO to you.

As mentioned in Tip #2, in the end of the day, the hiring manager just wants to go to his boss and say “This is our guy”. What this means is that as an interviewee, you should do everything you can to make it hard for the interviewer to say NO to you.

How?

By removing all hesitations the interviewer might have about you. As an UX designer, apply the technique you learnt from UX and treat yourself as a product, then identify your flaws and solve them one by one. Ask yourself; “If I were in the interviewer shoes, what kind of questions will the interviewer have in his mind that I need to address as soon as he meets me? What are his biggest concerns? Which part of the interview process will he likely to drop-off (decides I am a NO-GO)?

Sometimes you don’t have to be the best designer out there to get a job, you just have to be better than everyone else that came to the interview, and this simple thought exercise might give you the extra edge.

Conclusion

While we as UX designers are good at designing user experience for digital products out there, it is easy to lose sight that we are in fact a product too. And how we position ourselves, and how much we understand about our users — determine whether the product — us, will sell or not.

If you can get an opportunity to interview someone, or just simply sit-in quietly and take notes, do it. It was a truly eye-opening experience for me and I guarantee you will learn a lot about how to become better at interviews. Until next time, may you apply empathy to everyone around you.

How to design for constrains

September 3, 2018 by Tim Chan

A case study on designing loading state

I like to consider design as a spectrum. On the left hand side, you have the Minimal Viable Product (MVP), the absolute bare minimum you can do to ship the product. On the other end, you have the Dream UX design, where I define it as the “If I have infinite time and resources this is what will I do” kind of design.

The challenge for every designers is to push their design towards the right hand side as much as possible while considering about the constrains. In a company, this typically means time and resources. How one can embrace this constrain and thrive in this environment is what separates novice and seasoned designers.

In today’s article, I want to walk you through how I designed loading states for Vyond, a start up I previously worked for. Where we slowly tweak our designs based on different constrains and finally coming up with something that strikes the balance between UX and available resources. Lets get right into it.

Background

When we were redesigning the Vyond product the Video Maker a year ago, we took a lot of shortcuts to hit the schedule. As a result, we didn’t create any loading states and is causing some frustrations to our users. Now that we have time, we decided to fix this.

Why is loading state important?

Loading states is a way for a system to tell users that it has received their command and is now working to make things happen for them. Without a loading state as a feedback, users won’t know what is going on and it violates one of the top 10 principles of usability design — Lost of control.

Understanding the problem — Talking to Engineers

To create good loading states, first we need to understand how things are loaded in the back-end. At this stage, you basically ask 2 questions:

Can it be done?
If yes, at what cost?

Here is an example, in the below UI, we are going to display a row of templates for the customer to use. We want items to load one by one from left to right. Can it be done? The short answer is yes. However, developer told us that there is no way to control which item to load first because items comes with different file size, and they will appear as soon as they are rendered. Which means item 3 might show up before item 1 if the file size is smaller.

← Expectation: we want items to load from Left to Right | Reality: items shows up in whatever order they want depending on its size→

The only way to load item from left to right visually is to wait for all items to finish loading, then displaying them one by one from left to right. This means users will spend more time waiting and staring at the blank state. This goes against one of the purpose of the loading state, which is to mask waiting time!

The importance of talking to Engineers

As you can see from the example above, understanding whether our ideas is feasible up front saves us time from designing something that will never see the light, and we can spend our time to focus on something that can actually work.

Another important thing from this exercise is helps us to have a better understanding roughly how long each component will load, so we can design appropriate on each scenario.

In case you are curious, for the above example, we decided to use skeleton loading in the end to help mask loading time.

Continue iteration

Let me show you another example. In the below UI, when user clicks an item from the left panel, the item will show up on the blank area on the right hand side.

Here is how the interaction works:

Click an item from the Library.
After a short loading time, the item is shown on the Stage.

Originally when you click an item, nothing happens. You will be staring at a blank canvas for 2 seconds before the item finishes loading and pop up. The delay and lack of feedback makes user feel the system is not responsive and triggers user to repeat their action. Which causes user to add multiple items unintentionally, and they have to wait even longer.

The Dream UX vs Reality

To approach this task, lets start with the dream UX, the holy-grail:

In an ideal world, when you click an item, item is shown immediately on the blank area.

This is what The Dream UX looks like, zero loading time!

Of course in the real world, items can’t appear instantly because it takes time to load them, but I don’t take “impossible” for an answer until it was proven, so I decided to ask the question:

Is it possible to render items immediately when we click on it?

The answer is yes…with a cost. Item takes time to load, if we want to have the appearance that items is shown immediately when we click on it, we have to preload the items in the backend. It is similar to when you download a big file, you decided to browse Facebook for the duration. Since you are preoccupied, you have the perception that you are not waiting for it to download, but the file is still taking its time behind the scene.

To achieve the “immediate response” effect, we need to “hide” the preload time somewhere such that users don’t feel like they are waiting for us. When user enters the Vyond app, we show them a loading screen before the app is fully loaded. Can we add this loading time to the loading screen?

Loading screen for Vyond’s Video Maker app

Yes we can! This is how we imagined the flow would look like, after the “Item loading” time has been absorbed by the “App loading” time:

The **Item loading** time is absorbed by the app loading time

Here is the catch, we have more than 20,000 items in our library. If we preload all these contents in the loading screen, this will take us more than 5 minutes. That’s quite a long time to wait, compared to the time to loading an item which only takes about 2–3 seconds.

Expectation vs Reality. Putting Item loading time into **App loading** time actually makes loading longer

Someone on our team suggested that can we preload only the items “above the fold” — items that are visible to users without them scrolling. The problem is that having instant access to those items doesn’t help us to achieve our goal of having 0 loading time, since this approach only benefit only roughly 100 items that is above the fold.

This is a time for us to pause and ask ourselves the big question —Is it worth to keep thinking about this direction?

As product designers, it is always important to keep asking yourself this question. Because you always have limited resources and a lot of problems to tackle, spending more time on this problem means you will spend less time on another problem.

In the end, we decided that we have tried our best for this 0 loading time direction and it didn’t work. Let’s find another way.

Building the gap

OK so we can’t show items instantly on the canvas, but we can try to do other tricks to mask the loading time. Below are some ideas:

Idea 1 — Real size selection box

When user selects an item, show its selection box but without the item inside it, the selection box has the same size as the item the user selected.
Display the real item when it finishes loading

What I like about this idea — It is clear that the item is loading and it helps to mask loading time

Why this idea does not work — Showing a real size selection box requires the server to load the size data of the item, this means until it can get that data, users are still staring at a blank screen and the loading time remains unchanged.

Idea 2 — Fake selection box

When user selects an asset, show a fake selection box. The fake selection does not represent the size of the Real item.
The fake box is replaced by the actual item when it finishes loading.

What I like about this idea — It gives instant feedback that the item is loading.

Why I don’t like this idea — After all, the selection box is fake and does not represent the actual size of the item being selected.

Idea 3 — Thumbnail images

When user selects an asset, show its thumbnail. Thumbnail is replaced by the real asset when it finishes loading.

What I like about this idea — It gives instant feedback and gives users a preview of the real thing as early as possible.

Why this idea was shut down — This idea seems really good on paper, however when I took this idea to the development team, I was told it would take more time to code it then we had planned. Which brings me back to the topic of this article — How to design under constrains.

Design is about trade offs. On one hand, we have and ideal solution that might deliver 90% of value to the user, but it will take 5 days to code. On the order hand, we have an Okay idea that will deliver 70% of value to the user, and takes 1 day to code.

In our case, time is limited, so we have to choose what is the best design within the constrain. Not what is the best design.

Making a choice

In the end, we went for Idea 2. We chose a box size that represents 80% of all item’s size. Which means that in 80% of the cases, the fake selection box is the perfect size and it represents the actual size of the item selected. I was actually surprised that it looked way better than I thought. Another reason why you should do prototype.

Here is what it looks like in the end:

Case 1: Item selected has the same size of the Fake selection box.

Case 2: Item selected does NOT have the same size with the selection box, the REAL size is rendered afterwards

The constrain of time forces us to focus on what really matters, it forces us to make a choice. We chose Idea Two that takes 1 day to code versus the other option that will take 5 days. It is the best design based on the given constrains because we want to solve customer’s problem tomorrow, not 5 days later. For us, delivering value to customers is the only thing that matters.

Sometimes we might think: “If only we had more time, we would have the perfect design”. The question is, perfect for whom? Perfect for the company? Perfect for the customer? Did customers really asked for perfect? Or is it for our own designer ego? In the end of the day, giving your friend a present on their birthday is way better than the “perfect” gift that is late. Embrace imperfection. Embrace constrains.

Conclusion

A dream design is just that — A Dream. The real world is a place full of constrains and a lot of things is beyond our control. We as designers, are problem solvers, not dreamers. The sooner we understand this, the better we will become. I would like to end this article from a quote from General Patton:

“ A good plan, violently executed now, is better than a perfect plan next week.”

The perfect design is the one that makes users pain point go away today, not tomorrow. Until next time, may your constrains helps you become a better designer 🙂

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

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.

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.

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.