how to build a killer product design team? - UX studio

1

THE 5 THINGS MANAGERS SHOULD KNOW ABOUT DESIGN If your company develops web or mobile products – be it application or even an own webshop –, this article is for you! You might not have recognized so far how many untapped possibilities you have in your interfaces.

2

Design is not just a pretty skin When American CEOs are echoing how important design is, many people think about shiny and cool interfaces. But it’s more complicated. Caution, a Steve Jobs quote is coming! “Design is not just what it looks like and feels like. Design is how it works.” So, besides the aesthetic outlook, an extremely important part of design is how the interface works in the users hands. What will the user see first, and what will she perceive later? What processes will she go through, in what direction are we trying to draw her attention? How and why will she understand things? Why will he remember us? The nice outlook is just the tip of the iceberg; a good UX designer can help you in way more profound questions that might turn out to be important from a business perspective as well.

3

Good Design Improves Understanding Most of those who try an SAAS product but don’t subscribe for it do so because they don’t exactly understand how the application works and how could they benefit from it in their own lives. At the first use, we have maximum 5-10 minutes to give answers to the user for those questions. Tutorials are futile attempts, because no one will watch them – we know from experience. The real interface of the software has to be designed in a way that explains how it works.

Design Is About Experimentation In order to create a successful design, we have to do loads of experimenting. Johny Ive, the star-designer of Apple, has created 561 prototypes before debuting with the final version of the Leica M camera model you see below. If one of the world’s leading designers has to do so much experimenting, how could you expect anyone to create something perfect at once? 4

Good Design Is Teamwork. And you have to take part Many people believe that when they have something to be designed, they just make a deal with a designer and only meet again when the designer is handing over a wonderfully completed design. Well, bad news: it doesn’t work like this. Design is the result of loads of experimenting and testing. The designer needs constant feedback in order to proceed in the right direction. No one knows your business better than you do, so you actively have to take part in the design process. The designer leads the process and summarizes the outcomes, but your intellectual capacity is needed for this just as much!

5

Design Must Be Measured And Tested It is the design that outlines what users understand in your product. Design determines what they see and in which direction they proceed. Seeing all this, it is evident that such an important factor has to be measured and tested. Research is an inherent part of UX design. For example, in our team two persons solely work on testing our ideas; there are thousands of methods and tricks to do so: user tests, fieldwork, A/B tests, interviews, remote tests, guerilla tests, 5-seconds tests, ghetto tests, grandma tests, etc. And then there are the analytics and statistics. Without applying these, you whistle in the dark. Choose a designer or a team who are constantly aware of these areas.

6

+ 1 Extra: Design Is Not A Project: It Is An Ongoing Process Lastly, a trivial mistake: to take design as a single project. A company that produces digital products needs constant programming, marketing, sales – but it needs constant design just as much! There is no such thing as a finished design. There are always new functions on the rise, and old functions always need to be improved. We work in a subscription-based model with our clients, because they recognized their need for constant support in design. A developer team without a design team is a few bricks short of a load. Sometimes they just cannot see yet how to “get the missing bricks”…

7

THE UX DESIGN 
 PROCESS The thing most of our clients love, is our design process. The way we approach and solve problems. Let me show you this in a few sentence to have a clear picture of what we do at UX Studio.

8

1. Personas and Analytics We always start with putting together personas to know who we design for. We also look into your data to analyze how people use your product. How are they moving on your site or app and what are their favourite contents? We also going to collect basic demographic information about your users.

2. User journeys A user journey is one of the most interesting part of the whole process. It helps us to see the big picture and define the steps the users will go through. We can design better experience if we think in processes, instead of screens.

9

4. User testing

3. Wireframes and prototypes

User testing is a key to understand how real users think about the app and how they use it. We will find out what is unclear and why. We also find the points where users get stucked. You will get the videos of the tests and a written report with a list of the problems and suggestions. We iterate on the prototype until everything works well.

When we have the journeys we design the layout of the interface. Put the elements in place, define the proportions, the copy and the navigation. With clickable prototypes we can test the UI with real users, early before putting too much effort into the development.

10

5. Look & feel drafts This phase is to explore different styles based on the target group and define the character and the atmosphere of the product. We will create a collection of inspirations to different styles – links, images from other apps and sites and deliver 2-3 look & feel drafts to a specific screen from the wireframes.

6. Deatiled designs Finally we will make detailed design for one screen first, then for all. Every screen and state will be designed. PSD files, fonts, icons, style guide, documentation, will be prepared for developers.a

11

7. A/B testing To optimize the design and find the best solutions with the highest conversion or task completion rate we are going to advice on what to test. We will recommend you different variants from the most important texts that we can test (value proposition, call to action) and several design solutions to test.

How can we do all these things in an agile way? We will delegate a talented designer and a UX researcher to your product. They are going to work in week-long design sprints closely together with your team. At the beginning of each week we will do design and then we make user tests or other research. With this method you will get tested design inputs that your developers can build in their next sprint.

12

4 WAYS UX CAN HELP TO FOSTER BETTER COMMUNICATION AND COLLABORATION As a product manager you may know that each parts of your company speak different languages. Sometimes they just have different interests. And your role is to build a bridge between your teams along these interests. So here I just compiled some useful tools what you should use if you want to be a perfect bridge constructor.

13

Workshops to get everyone on the same page At UX Studio we organize workshops at the beginning of the design or developing process. Like persona or customer journey workshops or look and feel workshops. Who has to attend this workshops? Every people who has a tiny bit responsibility for the product. Like you as a product manager, a marketer, a developer a designer and someone from the business strategy department. The purpose of this workshops are to get to know better each other and to have a same picture about the product, features, goals, etc. in everyone’s mind. And this is a good opportunity to explain everything to everyone as well. We start every collaborations with our clients with workshops after the kick off meeting. Our experience is that they love those workshops. Of course you have to be creative to motivate everyone to take part in every tasks. You have have to care about the number of attendees and the time length as well. 14

Weekly design meetings These meetings have to be attended by someone from each department. Like a member from the UX design team and from the developer team. Also have to have someone from the business or marketing departments. The purpose of this meetings are to talk about what happened in the previous week and who's going to do what on the next week. You can also speak about challenges and difficulties. This is one of the best way for everyone to understand the others and represent their interests. At UX Studio we organize design meetings for our clients every week. There we show the results of the ux researches, what we did about design and what we going to do next. And based on our experiences I just highly recommend to you that don't have more than 5 people in a meeting and it can’t be longer than a hour and a half.

15

Wireframes to discover hidden problems If you are an old furniture in the business you may remember that times when everything exists on papers. There were tons of papers full with diagrams and descriptions of specifications. Who likes those? I tell you: no one. Why? Because no one likes to read. And the more important reason is because this was a source of so many misunderstandings. But the time goes and now you have a several possibilities to build clickable wireframes.

My opinion is that this is the best way to explain everything to everyone. This is one of the most efficient way what we use as a communication platform. A good wireframe worth more than thousand pages. You can represent features, pages, flows and even movements to the business person, a user and to the developer as well. And they are going to see the product from the same point. As it is going to be exist in the future. And a good wireframe not just the best communication platform but the best validation tool as well. Most of the users test what we do at UX Studio created on prototypes. When you have a prototype that is going to be the first time when all the details and questions comes up that you haven’t thought about before.

16

User research to have answers for controversial questions Is it a communication tool? Of course user research is more than just a communication tool. But it has a communication aspects as well. Have you had a meeting when there was an important question and all participants had different opinions. How did you decide? Or even worst question: Who decided? Why don’t you let the users to answer these questions. If you do some user tests there will be some exact data behind the question. And bumm the question is already answered. A user research can give you an objective picture instead of some subjective opinions. And you can decide easily in a every divided situations. User research are the best way to share informations to everyone because they can see how the users used the product. Do you need better communication? At UX Studio we record every user tests and represents the key elements to our clients. Do I have to say that they love watching these videos?

17

HOW TO BUILD A KILLER PRODUCT DESIGN TEAM? A good product design team can do a huge job in making your product successful. They can make your product easier to understand and easier to use. UX research can deliver essential customer insights. Design workshops and prototyping can improve communication within your team and help in building an agile environment. A good product design team can make PO’s and PM’s life much easier. If it is so useful, how can you build one?

18

The 3 most important ingredients The most basic thing is to have designers and researchers with the right skill set. It has 3 major components (yes I will simplify things a little bit here): UI design: so someone who can draw the 
 pixel-perfect, beautiful screen designs UX design: someone who can build wireframes and prototypes, and define the most important structures and flows, communicate with other players, brainstorm and run workshops UX research: someone in your team must be able to test your designs with real users, validate feature ideas, do interviews, evaluate analytics, build personas, and deliver the necessary customer feedback

That doesn’t mean you need 3 people. In many startups it is a one-men show, which is a quite risky thing. Research is very time consuming, so if you have just one men doing everything she is probably too busy to do research and thus the most important part is missing from the machine: the feedback from the end users. At UX studio we have product designers, who can go through the whole design process from UX to UI design, and they work alongside a UX researcher, who is helping them with user feedback. 19

The magic is in the design methods So you got the right ingredients, but the recipe you use is also very important. You need the team to use the best methods you can find. You need a design process to make sure your team will be able to deliver the results. Establishing a design team with the right methods can improve the performance of your product sprint-by-sprint. That makes the difference between junior and senior guys. Senior people know these methods, they have real-life experience and know what you should do in your specific project. So hiring a junior as a one-men show will probably do more harm than good. Hiring a senior guy with a junior to help might work. At UX studio we do 9 different things to help our designers to improve themselves. We have an intense training program where we teach these methods. Above that we invite designers from other companies to talk on every second Friday. We have mentoring, common sketching sessions, and every designer get weekly feedback from 3 different sources (from research, from her designer mate and our clients too). It’s not a surprise, that they learn very fast in this environment. And as a studio we have experience with many different products and clients, so we know what works best in each case.

20

Put the pieces together Finally you need a good product manager who can put all the pieces together. Her most important job is to emphasize the business goals, give feedback and make sure the design team will get whatever they need to do their job. Stakeholder buy-in is also important, so in many cases the product manager have to convince the top management to hire and run a product design team. At UX studio we work in week-long design sprints. It makes it possible to move fast and iterate. We start every sprint with a design meeting, where our designer and researcher meet with the business leader and the technical leader of the product. On these meetings we show the designs we made, and the research results we got. We also make the important design decisions together and agree in the tasks for the next sprint. Building up a killer design team is not easy, and it is a totally different job from building dev teams. It’s not something you can do in a few weeks. We can help you out with an experienced product design team working just on your product. They can work closely together with your team and establish a design culture in your company. Even companies with in-house design teams are hiring us when they don’t have enough resources, or they want their teams to see the best methods in action. 21

CASE STUDIES

22

How we made call-centers’ life happier with heavy user research You often hear “this call is recorded for quality assurance”. And they really do quality assurance. A person at the callcenter goes through all the calls, replays them and checks if the operator was polite enough, informed the customer well about their options, etc. Put yourself in the place of this person for a minute: let’s say you have to evaluate 100 calls that are 3 minute long on average. 100 calls is not much in a call-center where they make thousands of calls daily. But to listen to all those 100 calls takes you 100 x 3 minutes, that is 5 hours! 5 hours if you listen to them immediately one after the other, with no lunch break, no coffee break. That is a straining work to do all day. We worked with Calgo Call Center, one of the market leader call-center software. We visited many call centers, and watched how people work there. Our user interviews found that quality assurance specialists do not always listen to the complete call. They try to search for the critical points of calls: Did the operator inform the client about conditions properly? Did the client reply “yes” unambiguously? Did the operator note the arranged appointment accurately? Experienced QA specialists know when to expect these critical points in a call – eg. clients usually say “yes” 45 seconds before the end of the call. So a QA specialist would subtract from the length of the call, click there on the progress bar, and if it’s not what they are looking for they make another guess and click again. Player in a typical

23

Based on these findings we agreed with the Calgo team on two new features. 1) Visualize the sound of the operator and the client. This way the QA specialist can see instantly when the operator was reciting a long “condition list”, or when the client did reply. So QA specialists can go straight to the critical points. 2) Option to change the playback speed (without affecting the pitch of the voice). As it turns out calls are still understandable at 1.25x speed and experienced QA specialists can even go up to 1.75x and still follow the call. All in all these two features halved the time necessary to do the QA work.Call-centers are happy because QA is now way more efficient. QA specialists are happy because they don’t have to do arithmetic and guesswork when listening to a call. Quote from a QA guy: “The new player is f**n great! Awesome! I am in love with it. It saves me hours. Every day.” 24

If I can’t do it right here, I will just close your app Sometimes designers are so busy designing a navigation structure, they forget that most of the people won’t even give a try to the menu. They will just leave your app, if they can’t do what they want on the screen they are. In our recent project with RisingStack we found this problem two times. Let me show it to you. The app’s name is Trace. It is a web application for developers working with microservices. Don’t be scared if you don’t know what microservices are, it is actually a very simple concept. Instead of building huge, multipurpose software, developers like to break their apps down to smaller chunks, running individually in the background. If you use Facebook you have the feeling that it is one app. But on the servers, in the background, it is many smaller services working together. One microservice can handle the chat, an other one can put together your news feed, and a third is responsible for managing events. If one of these services breaks down, the rest will still work, so it is a more flexible infrastructure. With Trace developers can monitor those services, and see how they are communicating with each other. We tested the app with real developers working with microservices. One of their tasks was to add a new service to monitor. You can see the old design here. If you want to add a service you have to click on the menu button with a profile icon on the top right corner of the page. Nobody found it.

25

In our new design we introduced a new vertical menu. It takes less space, so we can put out the important functions on the top. So now it’s easy to add a new service. Developers can also add custom alerts to each service, so they will be notified when something goes wrong. It is an important function, because they don’t want to check the services all the time, they will just come back when there’s an issue with something. In the old version they had to click on the Alerting menu, hit the Create a new alert button and fill out a form to do that.

26

During our tests developers usually clicked on the services in the diagram when they wanted to do something with them. They haven’t looked for alerting in the menu at all. So we added a Setup Alert button into the service details modal. This way, people will be able to add alerts when they click on a service. Developers set up alerts based on the values they see on the graph. With this new solution they don’t have to go back and forth between the alerts page and the graph view to check the data. Now it is faster and more convenient to set up an alert. So you shouldn’t hide important functions into the menu. They have to be on the screen when the users need them. 27

How to build trust in self-driving cars? Self-driving cars will hit the roads in a few years. One day we will wake up and these new machines will be everywhere around us. Solving the technical challenges is one thing. But how will we deal with the human side? Will we feel safe surrounded with robo-cars? Autonomous cars are like planes. You know they are safer than normal cars, but still, you have some bad feelings. Building trust is not an easy thing. When we face a challenge like this at UX studio, we usually start observing how people behave and test different ideas with quick prototypes. People look at the driver’s face when they want to make sure that he or she is in control and sees everything. This instinctive human behavior won’t disappear because of some new technology, so it’s better to adapt to it. We imagine the self-driving cars with one display in the center. Everyone in the car can see it and it shows the state of the car all the time. This will be the “face” of the driver that you can check if you want.

28

We trust machines when we know how they work and we can predict what they will do. Humanoid robots are scary because their bodies suggest more power than they actually have. Big machinery in a factory is scary because you don’t know what it will do after you touch that big red button. Except if you are one of the few trained professionals, of course. On the other hand, a vacuum cleaner bot is not scary because you know how it works and what it does. So we designed a UI where the car always shows what it is doing in that exact moment, and what it sees around us. We have a schematic view of all the cars, bikes and pedestrians, which proved to be easily understandable during our user tests. You can be sure that the car is aware of every obstacle. We also display the route so you can predict the car’s moves. I don’t think people will watch this display all the time. But when there’s a risky situation it’s always there in the same place in the middle, so you can check it quickly. We experimented with different signs for the objects that need special attention, like bikers or people crossing the street.

29

First we highlighted the important obstacles with red. When we tested this interface with people we realized it does more harm than good. The red sign indicates danger and people want to do something to prevent the problem which is not possible in a fully autonomous car. So they became stressed. In our next iteration we drew red lines instead of the red boxes. The lines separate the car from the people like a fence and ensures you that the car is paying attention to those pedestrians and bikers. People understood the concept, this design was way more successful on the tests.

30

Watch the video!

#################################### #################################### #################################### #################################### #################################### #################################### #################################### #################################### ####################################

31

NOW IT’S YOUR TURN... Start using this methods and techniques in your business. If you need any help or just want to share your success, please contact us!

Zoltan Fekeshazi [email protected] +36 20 367 42 88

32