Product and UX Design Deliverables to Include in your Portfolio
Learn what is needed to become a valued UX or Product Designer and the UX deliverables that will allow product designers to breakdown a project, understand business problems, and find effective solutions to meet user and business expectations.
As a product designer, it is important to always be prepared with your portfolio. This will allow you to show your work and how you solve business problems for the client. In this article, we will look at the most common deliverables for product designers. Each one is important in order to outline your design solution and show how well you understand user experience. Keep in mind that every project is different, so make sure to tailor your deliverables to fit the specific needs of each project.
Understanding Business Goals
As a Product designer, understanding business goals is a fundamental step in the Product Design process. In order to create a successful product, it’s important to understand the vision for the product, the reason or need for the product in the market and the existing issues that you’re trying to solve. This includes understanding the problem you’re addressing along with the target users and market, proposed solution, and any technical specifications. By understanding all these elements, it allows you to craft your design solution in line with business goals, so you are hitting the mark from the off. When including this section in your portfolio, keep it short and to the point. Only address the elements we discussed above and try not to include too much unnecessary jargon.
Conducting User Research
User research is a field of inquiry that UX designers use to better understand the people who will be using their product. This type of research helps to inform the design process by providing insights into user needs, motivations, and behavior’s. Market research is a type of research that can be used to inform the design of a product. This type of research looks at trends in the larger market context and can help to identify user needs that are not being met by existing products.
Conducting user research allows UX researcher and designers to define the user pain points and goals. User personas are one tool that UX designers use to synthesize user research findings into a format that can be easily referenced during the design process. By conducting user research and market research, UX designers can gain a better understanding of the problem they are trying to solve and develop more user-centric solutions. Remember when creating your Product Design portfolio, you are not just showing off your solution and pretty UI. You should include the User Research used to understand the existing problems and the problems you look to address.
Sitemaps, Information Architecture and User Journeys to Understand Your Users and Build Better Products
Most designers find it easier to understand solutions visually. Including sitemaps, Information Architecture and User Journeys are a great way to visually show how to organize your website or app’s content and flows. A sitemap will help you to organize and lay out all design components and information within your product and gather information to create dynamic user flows for a better user experience.
User Journeys are created after research and when you have validated the user goals, current pain points and the content needed for your product. The goal for a user journey is to guide the user through the product through a series of steps, showing how the user may interact with the product. This may help to identify issues within the journey before any designing happens.
User flows are an extension of user journeys, showing in more detail the steps a user will take to complete a task. User flows can be helpful to designers and developers as they can see what screens or content is needed and in what order. Experience maps are another way of showing the user journey but from the perspective of the emotions a user may feel. This could be useful for products that are emotional in nature or need to evoke certain emotions from users.
Showing Sitemaps and User journeys within your portfolio shows that you have considered the user experience when designing your product and how users will interact with your product. Including experience maps within your portfolio shows that you have considered the emotional response users may have when using your product.
Wireframes — Designing Solutions Without Designing
Time for some pen and paper… if your timeline allows for it that is. Wireframing is a vital part of any UX process. Think of it like laying out what needs to go where and what order you want to display your screens. Wireframes come in many different styles from sketched wireframes to low fidelity to high fidelity. Using your User Research, User Persona and User Journeys allows you to design for what is needed and discards the unnecessary. Sketched and Low Fidelity Wireframes are actually a real time saver and allow design managers and stakeholders to understand your design flow and decision making without being distracted by colours, typography, or imagery.
You may want to jump straight onto designing visually appealing UI, but wireframes are not to be skipped in your process and are a must for your Product Design Portfolio. Don’t be afraid to screen-grab your wireframe directly from your Figma, XD or Sketch app and place it into your portfolio. Wireframes are not meant to be pretty; they are there to create discussions and make design decisions and iterations fast.
Making it ‘Pop’ with Prototyping
Prototypes are like an interactive wireframe and can be used to test your design with users. They are a great way to bring life into your design and create interactive flows to test your product. Being able to display and use your design, whether its low or high fidelity, is great way to get a better understanding of the product you are looking to create. I recommend starting with low fidelity as it doesn’t take as long to create, allowing you to get feedback quicker and make changes faster.
Low fidelity prototypes can be anything from pen and paper sketches that you scan in and link together using a tool like InvisionApp or MarvelApp, all the way up to using a tool like Sketch, Adobe XD or (my personal favourite) Figma to create high fidelity prototypes. High fidelity prototypes should only really be created once you have user feedback on your design direction as these take much longer to create. Remember, the point of a prototype is not to be a finished product but to gather feedback through user testing and design iterations. Including prototypes in your Product Design Portfolio shows that you can iterate quickly and make design changes from user testing and feedback.
Let’s Get Visual
Visual Design is used to create visual elements that communicate messages to achieve specific goals. Visual design is an essential step in the product design process, and it’s not just about making things look good. Visual design is an opportunity to implement a brand’s color palette, typography, establish visual hierarchy and usability with the layout, contrast, and overall visual experience. In other words, visual design is much more than “making things pretty”, but an opportunity to finalize designs decisions.
Colours and Typography play a crucial role in visual design to connect the business brand identity and create an emotional response in users. When done well, visual design can make a product more enjoyable to use and help users achieve their goals. In your portfolio, this is where you can show off your design decisions and the inclusion of visual elements to make your design stand out above the competition. When getting hired, hiring managers sometimes have no idea about UX or Product Design. So having great visuals allow them think of you as a great designer, increasing your chances of getting interviews.
Design Systems and Guides Make Life Easier
The final step in your UX process is creating design systems and guides for developers. Sometimes these are referred to as Design Guides, Design Systems or Style Guides depending on what company you are dealing with. If you come from a visual or graphic design background, then you may see these labels and refer them to something else, but they are used to inform developers to make sure your designs are implemented correctly.
They contain all the nuts and bolts; typography, colour palettes, breakpoints, iconography etc. that a developer needs to know to be able to build your designs. Creating these Design Systems are important as they make sure everyone is on the same page (literally), making it easier for developers, designers, and project managers to refer back when something isn’t quite right or if someone has a question.
You should also be including things such as hover states, disabled buttons, link colours etc. in these systems so that they can see how you expect things to look and behave. Creating design guides or systems can be tedious and take some time depending on your workflow. To apply good UX design practice when designing will save you a lot of time for creating these. I know it’s hard but, LABEL YOUR DESIGNS! If you are using Figma, XD or Sketch then you can create your colour and typography systems before you start your visual designs. Also, by creating components for buttons, cards and other elements can save time for not only you but the developers when implementing your design. Other tools like Zeplin are a huge time saver when shipping your product for development but no matter what software you are using, making sure your design system is clear and precise will allow for less iterations and changes after development.
For some great examples of design systems and best practices make sure to check out Google’s Material Design System and Apple’s Human Interface Guidelines. You will be designing for both so best to study them regularly check for updates.
Time To Design
Now you have a good overview of what is needed to include in your Product Design Portfolio it’s time to get stuck in and start building your portfolio. If you are starting out, remember to follow the guidelines, don’t reinvent the wheel and keep it honest and straight forward. Practice makes what? … nope, not perfect. But practice does make improvement! The more you practice the better you’re going to get.
If you are looking to work with me on building your next product, then feel free to reach out!
Contact me via email at email@example.com to arrange a chat.