The UX Designer Toolkit: 26 Methods, Tutorials and Free templates š
By Julio Castellano.
People often ask me āWhat do UX designers typically do in a work day? ā š¤.
To answer this question and explain the process and methods we use, I have designed this toolkit. It includes explanations of popular UX and Product design methods, tutorials and free design templates to help you create them straight away.
Whether you are studying, just curious or a professional designer, you will find this article useful to have on hand. Bookmark it and refer to it when you are looking for activities to do for projects.
See where these methods fit into your projects with a design framework and use them to help you create great human-centred designs for people around the š.
To help you understand at what stage of a project to use these methods, I have mapped them to the Double Diamond of design, a design framework that includes these stages.
- Discover š®
The first quarter of the Double Diamond model covers the start of the project. Designers try to look at the world in a fresh way, notice new things and gather insights. - Define š
The second quarter represents the definition stage, in which designers try to make sense of all the possibilities identified in the Discover phase. - Develop š§
The third quarter marks a period of development where solutions or concepts are created, prototyped, tested and iterated. This process of trial and error helps designers to improve and refine their ideas. - Deliver š¦
The final quarter of the double diamond model is the delivery stage, where the resulting project is finalised, produced and launched. In this article I also cover techniques to monitor and improve the product post launch.
More info on the Double Diamond šš
The Design Process: What is the Double Diamond?
How to apply a design thinking, HCD, UX or any creative process from scratch by Dan Nessler.
Field notes š
- Designers donāt typically do all these activities shown below. They tend to pick and choose depending on what they need for a project. They learn which activities are the most appropriate for a given situation with project and work experience.
- Design projects wonāt always follow the steps in the Double Diamond, that will depend on the type of project, budget, scope and timeline.
- The Double Diamond of design is great to present back to the business or clients to show which stage of a project you are in. Imagine it as a map where you can show your co-ordinates šŗ.
- There are many other good design frameworks to follow such as:
Ideoās Human-Centred Design Process and
Stanford Design Schools Design Thinking Process.
Letās dive right in š.
DISCOVER AND DEFINE šµļøā
Research, experiment and collect information š® š.
1. Kickoff meeting
This meeting is great to do at the very beginning of a new project or feature addition. Itās aim is to cover the products goals, teams roles & responsibilities and to find out if any work has previously been done for the project. For all you know this may be a second attempt or a redesign. Its good to get all the previous work completed on hand. The kickoff meeting is also a good time to talk about project success metrics and the design framework that you will be using during the project.
Tutorials:
Templates:
2. Stakeholders Interviews
This technique is use-full when starting out in a new job or on a new project where you need to have empathy for and understand the stakeholders. When you conduct the interviews you need to be clear about your objectives which could be:
- Understanding the impact of proposed changes in a business and how that will impact the UX.
- See what wants and needs the stakeholders have for the upcoming project.
- Start to form a relationship and have empathy for the stakeholders you will be working with on the project, these changes you design could impact them in a big way.
Tutorials:
Templates:
3. Customer Interviews
Once you have interviewed the stakeholders you are in a good position to interview customers. This structured interview is generally conducted in person with your user base that you engage through internal channels or recruiters. This qualitative method will give you many good insights into what people are, saying, doing and feeling about your product or business.
Tutorials:
Templates:
https://www.interaction-design.org/literature/article/how-to-conduct-user-interviews
4. Empathy mapping
The first step in the design thinking process, empathy mapping is a collaborative visualisation used to describe what we know about a particular type of user, you can use insights from your customer surveys for this. It works by dividing user feelings and actions onto an X quadrant where you break down what a person says, thinks, feels and does. Designers do empathy mapping to put themselves into a personās mind and feelings.
Tutorials:
Templates:
5. Personas
Personas are a representation of your target market and customer base. These artefacts are useful to create at the beginning of a project. To create a persona you can either base it off assumptions of what your target market would be (Proto-persona) or you can create them from data from exisiting products. If creating new personas be sure to include stakeholders in the persona creation workshop so you donāt get push back later on. Personas serve as a great reference point throughout the life cycle of a project, personally I like to print them out and stick them up in the UX wall space and send them out to stakeholders.
Tutorials:
Templates:
6. Value Proposition Canvas
Once you have created your personas it is a good time to do the Value Proposition Canvas. The goal of this is filling in the sections of the canvas with pains, gains, jobs to be done and product services. This will help you to really understand your customers and therefore design better, more appealing products for them.
Tutorials:
Templates:
7. Contextual Inquiry
Contextual inquiry is an interview method used to understand relevant parts of your users lives. The way to do this is by going out and actually talking to the user groups in their working and living environments and getting real qualitative feedback. The four principles of the contextual inquiry are:
1.Focus: Plan for the inquiry, based on a clear understanding of your purpose.
2.Context: Go to the customerās workplace and watch them do their own work.
3.Partnership: Talk to customers about their work and engage them in uncovering unarticulated aspects of work.
4.Interpretation: Develop a shared understanding with the customer about the aspects of work that matter.
Tutorials and templates:
8. Competitive Analysis
A competitive analysis is a technique that involves researching by looking at and using competitor websites and apps. You want to see how their design stacks up and what features they may and may not have. You also want to see what they do well, what they do badly and what is their unique selling point. Using a grid with screen shots and listings helps make this work easy to understand.
Tutorials:
Templates:
9. Heuristic Evaluation
Jakob Nielsen, a renowned web usability consultant established a list of ten user interface design guidelines in the 1990s. These heuristics have been used in many of the products designed by some of the most successful companies in the world such as Apple, Google, and Adobe. These 10 rules of thumb are used to measure whether the digital product is user friendly or not.
- Visibility of system status.
- Match between system and the real world.
- User control and freedom.
- Consistency and standards.
- Error prevention.
- Recognition rather than recall.
- Flexibility and efficiency of use.
- Aesthetic and minimalist design.
- Help users recognise, diagnose and recover from errors.
- Help and documentation.
Tutorials:
Templates:
10. Brainstorming
Brainstorming is a method for generating ideas to solve problems. It can be done easily and cheaply and usually involves getting a group of stakeholders or designers together under the direction of a facilitator. In the area make sure you have plenty of large sheets of paper, sticky notes, pencils, pens and snacks. The idea is to create a relaxed free-thinking environment with the aim to solve a problem, playing some music can also help relax people and put them in the mood! š¼
Tutorials:
Templates:
11. Storyboards
Creating storyboards is a great way to think deeply about using a product and show people your idea in a visual way. By storyboarding out your idea you can explain the concept at a deeper level and help build up empathy towards your idea.
Tutorials and templates:
12. UX Measurement Plan (KPIs)
As a UX product designer you will find yourself needing a way to measure if the design work you and your team have created is effective or not. This is useful for you and the business as they will surely want to see the value you are creating for the company. Once you know who your users are and have an idea of what you will be designing for them you are in a good place to create your plan.
Tutorials and templates:
13. Customer Journey Map
A Customer Journey Map or User Journey Map is a diagram to see the steps taken by customers as they engage with a service. It allows designers to capture the customers motivations and needs in each step of the journey, giving the designer the ability to identify problems and then design appropriate solutions as they appear along map.
Tutorials:
Templates:
14. Sketching
A crucial part of the designers toolkit sketching gives you to ability to get ideas out of your head quickly, easily and cheaply. By sketching you can present concepts to your team and stakeholders and if not liked or the idea not possible itās easy to throw away because you havenāt invested much time. Sharpies, fine liners and pencils with A3 paper are my favourite sketching tools.
Tutorials:
DEVELOP AND DELIVER š©āšØ
Prototype, design, code and test š§ š¦.
15. Sitemaps
Creating a sitemap is a great way to work out how you want your users to use and navigate your digital product. You can create sitemaps for apps, websites or any digital experiences for that matter. They are also extremely useful for other designers and people on your team to see how your proposed design solution will work. Just like any design start with a rough idea of the sitemap structure and then build it out digitally. Below I have added a link to a great new tool FlowMap below.
Tutorials:
Templates:
16. Card sorting
Card sorting is a excellent way to figure out and organise the information architecture of a digital product. Once you have set up your card sorting session you will get your participants to organise topics into categories that make sense to them, and you may also want them to label these groups giving you menu items. For the sorting exercise you can use actual cards, pieces of paper, or one of several online card-sorting software tools that I have linked below.
Tutorials:
Templates:
17. Wireframes
Wireframes are a visual guide used to represent the functional elements of websites, apps and mixed reality projects. They display hierarchy and key elements. Useful to discuss ideas with team members and clients, and to assist the work of designers and developers.
Amongst other things Wireframes:
- Connect the siteās information architecture to its visual design by showing paths between pages.
- Clarify consistent ways for displaying particular types of information on the user interface.
- Determine intended functionality in the interface.
- Prioritise content through the determination of how much space to allocate to a given item and where that item is located.
Tutorials:
Templates:
18. Wire-flows
Wire-flows are a combination of wireframes and flowcharts. They can document workflows and screen designs when there are few pages that change dynamically. These are great to present the team and stakeholders to illustrate complex interactions and paths through a digital product.
Tutorials:
Templates:
19. User Flows
User flows are a visual representation of users actions to complete tasks within a product. User flows makes it easier to identify which steps should be improved or redesigned, they also let you discover what steps you may be missing. Its a wise idea to create user flows before jumping into UI design.
Tutorials:
Templates:
20. Prototypes
An essential UX method which I can probably write a whole article about. The most basic definition of prototype is, āA simulation or sample version of a final product, which is used for testing prior to launch.ā with a prototype you can prevent losing time, money and resources by only developing a successfully tested product. Prototyping is essential for resolving usability issues before launch, by user testing with them you will see the areas that need improvement. These days there are many prototyping tools to choose from on my last count there were about 30 of them š¤Æ.
Here is a good article on all the best prototyping tools:
https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9
I find that you are better off picking a couple of them and learning how to use them very well. Four of my personal favourites are:
1. InVision. This tool is great for quick and simple prototypes you can share designs quickly and easily and has good integration with Sketch. https://www.invisionapp.com/
2. Axure. For more complicated prototypes where you may need users to type details into fields or perform specific complex actions. https://www.axure.com/
3. Sketch Prototyping. The best UI design platform Sketch, now offers prototyping directly inside of it. It is easy to use and share making it a convenient way to quickly bring your ideas to life. https://www.sketchapp.com/
4. Principle for Mac. This excellent tool allows you to create fluid and complex interactions that can be difficult to achieve so easily with other software. http://principleformac.com/
Tutorials:
21. Usability Testing
Usability testing is one of the crucial qualitative UX methods. I would say if you only have time to do a few of the mentioned activities make this one of them. The goal of usability testing is to identify any usability issues, in your products. To do the testing you will need a prototype or a coded working product ready to go. You will then need a script of questions to run the test participant through and it is a good idea to record what is happening and keep on file. I find usability testing one of the most interesting UX methods.
Tutorials:
Templates:
22. Guerrilla Usability Testing
A variation on the above, Guerrilla testing is great when you donāt have the time or money to organise big lab style sessions. The great thing about doing testing this way is that you can literally walk around your office or local cafe and ask people to participate if they have 5 minutes. You will still get good results from this testing and it is better to do this than no testing at all. I find 5 people is a good number to test with and Nielsen Norman group has studies on why that number works right here: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
Tutorials:
Templates:
What now?
If you are following the process above and have been closely working with UI designers, Product and the Development team you will now be ready to launch your project āļø š ! This is provided that everything is coming back positively from the user testing and stakeholders, if itās not continue designing, testing and presenting to everyone.
Once the project is released the fun is just beginning š¤. It is an excellent idea to monitor and improve it with real data and insights from analytics and more user testing. As UX and product design is an iterative process you will be continually upgrading and improving designs and features. See these post release methods below:
23. A/B Testing
A/B testing is a great method to compare two or more versions of a webpage or app design against each other. You do this testing in order to find out which design is working better and validate a new design before you release it. A/B testing is essentially an experiment where two or more variants of a page are shown to users at random, and statistical analysis is used to determine which variation performs better for a given conversion goal. There are some great tools to help with this like Optimizely and Google experiments.
Tutorials:
Templates and tools:
24. Data Analytics
A powerful tool in the designers kit. Data analytics can reveal true insights and statistics on what people are actually really doing with your products. This is particularly useful as it will reveal different results to qualitative usability testing sessions. Presenting data analytics findings with an action plan back to stakeholders is a great way to show which streams of work you and the design team could be focusing on. Personally, I like to use Google Analytics to monitor the data.
Once you have tagged sections of your products and set up a plan of what you will monitor and why you can use the data analytics to:
ā¢ Monitor which sections of the products are being used
ā¢ Monitor where people are dropping off completing tasks and converting
ā¢ Observe the effectiveness of your marketing strategies
ā¢ Observe which features are being used or ignored
ā¢ Understand which is the products most used platform
ā¢ Understand where people are entering your product from
Tutorials:
25. Net Promoter Score
The Net Promoter Score is an index ranging from -100 to 100 that measures the willingness of customers to recommend a companyās products or services to others. It is used as a proxy for gauging the customerās overall satisfaction with a companyās product or service and the customerās loyalty to the brand.
This is helpful to incorporate in your UX research plan and present back to the business.
Tutorials:
Templates:
26. Google HEART Framework
The Google Heart Framework is a great way to measure a product once it has been launched use it to measure success on your products. I have personally put it into use on projects in large companies and it works! There are five metrics used in the HEART framework:
1.Happiness
Measures of user attitudes, often collected via survey.
Eg Satisfaction, perceived ease of use and net-promoter score.
2.Engagement
Level of user involvement.
Eg Number of visits per user per week, photos uploaded per user per day and number of shares.
3.Adoption
Gaining new users of a product or feature.
Eg Upgrades to the latest version, new subscriptions created, purchases made by new users.
4.Retention
The rate at which existing users are returning.
Eg Number of active users remaining present over time, renewal rate or failure to retain (churn) and Repeat purchases.
5.Task Success
Efficiency, effectiveness, and error rate.
Eg Search result success, time to upload a photo and profile creation complete.
Tutorials and template:
I hope you have enjoyed the article, it took me many hours to research and write it for you. Give some claps if you did šš.
Stay tuned for The complete UI Designers Toolkit coming soon!
If you enjoyed this check out my other articles here:
And please feel free to connect with me online āļø.
Until next time, happy designing š©š¾āšØšØš»āšØ.
More where this came from
This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
