Transcripts
1. Introduction: Hi, I'm Thomas Laurie and I'm a digital product designer from Ontario, Canada. In this class, we'll cover everything that you need to know to put together a strong portfolio from scratch. We'll cover, picking the projects for your portfolio, what makes a strong case study portfolio project, we'll go through how to design your portfolio website and some other considerations that you may want to design, to accompany your online portfolio. Today, I'll be showing you some examples of a portfolio that's in progress that I'm designing and give you some considerations as to what you may put on the homepage and on a case study page where you go into depth for a project. I'll be doing all of that today and Figma. Figma is a cloud-based digital design tool, you can access it from anywhere, it's free and it's collaborative. One of the most difficult things about building a portfolio to work in product design is that, you want to capture someone's interests so that they can understand what your strengths are and what your focus is and understand some of the interesting things about a project that you worked on. But you don't necessarily want to give it all away, because when it comes time to interviewing with somebody, you want to be able to share a few more interesting facts about your projects that maybe they haven't seen on your website. I hope that after taking this course, you'll feel like you have everything that you need to know to get started building your first portfolio, and I'd love for you to share your projects and get feedback and interact with other people in the project gallery. Thanks so much for joining the class and let's get started.
2. The Role of the Portfolio: The exact job of a Product Designer can often be really difficult to pinpoint because it can look different at many different companies. But at a high level, product designers are the people within an organization that are responsible for designing user centered products. One of the most interesting things about the field of product design is that there's no set path into it. People come from many different backgrounds. Some people study psychology. Other people come from engineering in human computer interaction programs and other people who may come from a graphic or visual design background. For example, my background is in graphic design and I worked in a number of different graphic design roles where I was working in a marketing environment but also working on brand. For myself, it's really important that the type of work that I'm doing in product design is still really aligned with the things that I enjoy doing. A lot of the work that I do is very focused on visual design and looking at opportunities for some of the brand attributes to come through in a digital product through the user interface. A product design role may look different from company to company, especially depending on the scale and size of the company. In some smaller companies and startups where maybe there is a less mature or smaller design team, because there are so many different skill sets required by a product designer. Often, the designer needs to wear many different hats, which could include things from user experience to user interface design to prototyping to doing user testing. In other companies where there's a larger design team, often because of all of this different skill sets. People will specialize in those specific areas. If there is an area that you're really passionate about. There are opportunities for you to be in the realm of product design but focus on specific area. Because the field of product design is so diverse, your portfolio is really your one opportunity to tell people who you are, what you're interested in and what you're good at and also communicate what it is that you want to work on. Your portfolio is really important because it's going to be the first impression that a hiring manager or someone reviewing your portfolio is going to get from you. You want to make sure that it's an honest reflection of the things that you're interested in. If you tried to show too much or it may be too much of something that you're maybe not that passionate about, you could give the wrong idea to an employer and ultimately, you want to find a product design role that's going to value the things that you're interested in so that you're happy to coming to work every day. Approaching a digital product design portfolio can be different than a traditional graphic design portfolio that maybe focuses a little bit more on the superficial and end result qualities of the project. Those are all really important to show. But with a product design portfolio you want to be able to tell a little bit more of the story and how you learned about users and put their needs at the forefront in creating what that end result became to be. That's really what we're going to focus on in this class. Get you into the mindset of telling a story with a portfolio piece and bringing together some of the things that you may not instantaneously think about inputting into your portfolio which could be some of your rough work or some of your charts and graphs from your research or surveys that you conducted. All of those things that helped shape the end result. They're all really important things. If you're still working on some of your portfolio projects that you would like to show in your portfolio. Remember not to throw away any of that rough work or any of the things that you don't think are prettier glamourous enough to show anyone. All of that stuff is really useful to communicate how you thought and how you approach the problem. Up next, we're going to be talking about finding your story and telling it through your digital portfolio.
3. Finding Your Story: It's easy to feel like you have to have this really specific background or you went through these steps that other product designers went through, and that's really not the case since product designers come from a diverse range of backgrounds, the best thing that you can do is to try to talk about how your own experiences in your own background are assets and advantages to the way that you approach your work. Those things that may seem unrelated at the surface level could actually uncover some really deep differences in how you approach projects, and at the same time, those are all the things that make you unique and memorable as a candidate for a product design rule. Try not to limit that story just to your professional or accomplishments that you think are directly related to the role or a job that you want to get. Think about all of the things that are unique to you that make you, you, so these could be your hobbies and your interests. All of these things become talking points in an interview or icebreakers or even things that communicates something about your willingness and desire to learn new things. One of the things that I'm interested in and outside of design that is completely unrelated to product design is woodworking, and even though there's no direct relationship, I also don't have a formal background in woodworking, and throughout that process I've learned how to do it with just being self-taught and finding resources online, and sometimes something like that, which is completely unrelated, could also demonstrate your willingness to learn new things and grow on the fly in a fast environment. Also consider how your background, even an unrelated background, led you to decide that product design was something that she wanted to do. In my experience, I was working previously in a marketing role, still doing design, but one of the things that I found was that it always felt like a lot of the decision-making was coming down to one person's decision and it never really felt right to me, and in a lot of cases, it's what drew me to doing more user-centered product design. I felt like I was finally able to ground a lot of the decisions that I was making from a design perspective into decisions that tie directly back to a user, so there was a way of validating a lot of the assumptions that you made in finding out whether you are right or wrong and then evolving that overtime. Spend some time thinking about your story and figure out how you can distill that down into one or two concise sentences that show how you're unique, and spend some time thinking about how you may elaborate on those short sentences and blow them up into maybe two short paragraphs that go into a little bit more detail, but still concise about who you are and what your unique background is.
4. Curating Your Portfolio: Now we're going to dive a little bit deeper into what your portfolio might look like. There's lots of different formats and ways of presenting your portfolio. But if you're going into digital product design, I would say an absolute must is to have a portfolio website that shows some of your work has a method of people contacting you or finding you online and whenever related social networks that you want to link people to and also, again, tell a little bit about your story and your background. What I've put together is a mock portfolio. Which is one way to present a portfolio and I'll take you through a couple of the different pages that you might want to include on your website and also how you might structure a case study for a particular project. In simple what I've put together here is a example of what the home page may look like on desktop and how it might look in mobile. This is really good place for drawing on what you've explored in that past exercise which is distilling your experience down into a couple of concise statements that let people know who you are. What I've done here is I've got this header graphic, it clearly states what my name is. My name is Thomas, but I want to be a little bit more conversational. I'm introducing myself as Tom and that I'm a product designer and where I'm located. Then my subline in that just explains a little bit more about where my experience comes from and how long I've been working in the industry and the things that I'm passionate about. It also gives them a little idea of what some of my interests and hobbies are. Then of course below it, I've got a call to action which will take you to the About page if someone wants to learn a little bit more. Then the main thing that you want to include right on your home page is probably some links to your case studies. Now how many you include is really up to you. But if you're going to go into an in-depth case study format, my recommendation would be a minimum of two or three, but definitely no more than five. On the About page, I've tried to build off of what I established on the Home page. But I've gone into a little bit more detail just having a couple of quick paragraphs that say where I've worked or where I'm working now or what I'm passionate about, anything that you really want to come through. I've also led with these headlines that talk about what I'm passionate about. For example, in my case, as I mentioned earlier, I'm into woodworking. I also race bicycles, and I really like modernist graphic design. That's just something that has always inspired me and you'll see a lot of those cues in the visual style that I've taken within the design of the portfolio itself. Then if you want to, you could also include a photo of yourself so that people know who they're talking to. It gives them a face to the name. Then below, I've also just highlighted a couple of things that are not necessarily design projects but it shows my involvement in the design community. Opportunities I've had to speak and then opportunities that I've had to write about topics relating to design. Now we're looking at what an example case study might look like, so in this particular case, I am dealing with an app project for a mobile app that is fairly heavily researched focus. A lot of the data that needs to present is either written data or its diagrams or its numeric data which you will want to come up with some interesting visuals to communicate that to break up the monotony of having a page that's completely text. What I've done is I've started at the top, just introducing the project and at the top of your page as much as I want you to focus on telling a story and not being so focused on the end result, polished visuals. This is actually a great place to just put a little snippet of what those end result visuals look like just to capture the person's interest and then you can take them back to that point by the time you get to the end of the case study. In this project, I have structured it with the problem and then highlighted some of the research that I've done and to make the research a little bit easier to consume, I've also put together a couple of diagrams that help illustrate some of the problems that I wanted to solve with the app. Then as we move down through here, I talk about some key findings. What I found in this particular project was, as I was doing the research and as I was interviewing users, I actually found some really interesting facts that really helped change the direction of the app. Instead of creating this app that was designed to help people find routes that were going to be quicker for some to get from point a to point b, I actually found that there was actually an opportunity to differentiate the app by focusing on routes that were not only fast, but there are routes that were stress-free. It changed the focus of the app and that really drove how I approached the app and what some of the visuals were. As I go through the research in some of my explorations, I'm including some of the sketches that I did. In this particular case, I put together some paper prototyping and just put some paper prototypes in front of people and that was one of the ways that I got really quick insight into whether I was on the right track or wasn't on the right track. That would be something that you may want to include. Even if it's not super polished, it could just be a scan or a photograph of some of the work from your sketchbook. As I went through that research phase, it became really clear for a minimum viable product, what are the core features that this app needed to have and so I highlighted all of those three things and rather than trying to design for every single feature that could possibly be in an app like this. I really focused on the things that if the app didn't include anything else, but only these three things, what would they be? In this particular project, because I have a background in graphic design and I really wanted to convey this sense of communists and playfulness. I thought that the visual design and the visuals within the app needed to be really strong and so I also included a little section here where I talked about how the name of the app and how the visuals came together and what they were designed to convey. Then as you get to the end of the case study, I've included a few example screens that were designed for within the app so someone can get a sense of what that visual design was. When you're pulling all the content together for your case study, there's no need to show every single screen of your app or every single detail about the research and process that you went through, there's going to be more opportunities to elaborate on that. For example, if you're using this portfolio to land a job interview, when you go into that interview, you're going to have an opportunity to present your work again. What you don't want to do is go in there and launch your website and just walk through the same content that they've already seen. Being able to put together a presentation down the road that maybe goes into a little bit more details and shows them some of the things that you didn't put in your website is a really great way to show them enough, but not give the whole project the way. Don't be afraid to be selective with the screenshots that you do include. You will have opportunities later to show more of that detail in an interview, so when you're selecting which projects that you want to show in your portfolio, try to think about the type of work that you want to do, the type of work that you're strong at doing and if there's one project that doesn't really have an interesting story behind it, maybe pick the one that surprised you a little bit more along the way in terms of something that you learned or something that maybe went in totally different direction than you expected it to. Those are always the types of projects that you'll have the most takeaways and you'll have a lot more interesting things to talk about in an interview setting when you go to talk about that project again. I pick this particular project because not only does it do a good job of showcasing my skills as a visual designer it put me outside my comfort zone doing a lot of research, which is an area of design that I don't have as much experience as some of my other skill sets and I wanted to give myself a project that was going to give me the ability to do a lot more user research and a lot more user interviews and just let that design process guide the final direction of the app and so this case study tries to tell a little bit of that story and show that data in an interesting way and show how the insights from that data really helped shape the final project. One thing to consider when selecting projects for a portfolio, especially work that you plan to share publicly on your portfolio website is ensuring that the work is not protected by any NDAs. If you do have a project that is protected under an NDA, try to figure out what capacity is protected in terms of sharing it with somebody else. Some companies may allow you to share if you take off any brand names or any form of corporate branding off of the project and other companies may not allow you to show that work at all. Try to keep that in mind when you are putting the portfolio website together. One way around this, if you do have a lot of projects that maybe can be shared but not publicly shared, is to explore the option of having a password-protected website. If you're dealing with a recruiter or a hiring manager, you could share the password and only people that had that password would be able to access the work. What happens if you don't have that perfect portfolio piece? Well, this is an opportunity for you to conceptualize something that demonstrates the type of work that you want to do. You could make up a totally fake project. But if you do do that, try to approach it in a way that's real-world. Give yourself real-world constraints, do real research and make it as real as the project could possibly be. In the particular example that I shared, it's a completely fabricated app. But I grounded it in real research and real data and real interviews as if I was designing a real app. Even though it may not be a real thing that was ever produced, it still shows your attention to detail and the way you approach solving a problem. Another thing you could also do is try to redesign the aspect of an existing app. But I'll caution by saying a lot of the app redesigns that people have done sometimes explore these redesigns at a very superficial level and so if there is something that you would like to redesign, try to find something that is a product that you use that maybe you've struggled with a certain part of it that you think could be better and really go into depth about maybe how you fix that one feature or how you would re-approach that and that little part of a project can be an interesting case study itself without having to redesign an entire app and the example that I showed, I really focused my efforts on designing the functions that I would need within an app to create a minimum viable product that just shows one flow from a user, selecting a destination and figuring out how that person's going to get to the destination. There's probably all other add-on features that would be really useful in an app like that but for the purposes of demonstrating a proof of concept, it wasn't really necessary to go into that level of detail. If you're strapped for ideas on coming up with a conceptual of project that has some real-world constraints, you can check at a website called briefbox.me and if you sign up, you have access to something like over a 150 different briefs, which will be example projects that you could take on and treat like real-world projects. Up next, let's explore some design considerations that you may take when putting together your digital portfolio.
5. Designing Your Portfolio: Here are a few design considerations that you may want to take into account when designing your digital portfolio. After I had an idea of roughly what I wanted to include on the website, I started doing a couple, really quick thumbnail sketches just to explore some really basic layouts. After those sketches, I decided to make a page in my document just how some of those explorations. Right here, I just started playing around with some really basic wireframes of how I might structure things. Doing some explorations of what the grid system might look like and how much information I wanted to organize. As I went through this exercise, there was a couple of main approaches that I explored in the portfolio. Here's where this idea came together of having just these three case studies with just these three big tiles that were right below, the hero banner that introduces me, and that became a reoccurring theme throughout a few of the different approaches. Another approach that I considered was having more of a centered approach here and cutting down on the copy and just having three or four big thumbnails on the front page that would take you into the different case studies. As we take a look through some of these mockups and wireframes, there's a lot of similarities between them, but I'm just exploring variances of how I want to show the different metadata for each of the projects, and how the grid system actually differs between some of these projects. Another option that I got down to being my final two compositions that I wanted to explore was, one was just focusing my website around these three different case studies. The other thing that I explored was doing those three case studies, but maybe making them a little bit less prominent on the homepage and then exploring how I might show a second tier of projects. If you had some other projects that you wanted to show that maybe you don't go into the same level of depth as you do as a case study, there's may be another way of treating and giving people access to some of those projects, but still drawing both of the attention towards your more in-depth case studies. I recommend treating your portfolio as simple as possible, and just let all of your great work speak for itself and let the design of the site communicate a little bit about your personal brand or your aesthetic, but ultimately make it easy to navigate and get to the different sections of your website. Another consideration for the design of your portfolio is consider the aesthetic of your portfolio and what do you want it to convey. I really like clean modern design, really heavy on grids and structure. I also work in an enterprise corporate environment where I need to perform that design. That's the type of aesthetic that I gravitate towards. But if the type of work that you want to do is for kids apps where they may be a little bit more fun and whimsical, then consider how you can bring in a little bit of that playfulness and fun into the design of your portfolio, but in a very subtle way without taking away from the projects that you want to show. Since I'm using Figma to design products, I already have a lot of the projects that I'm working on already within my fig my account. When I'm putting together this case study, what I was able to do is go through and pick out some of the different screens that I wanted to use within my case study. Then flipping back over to the case study page, I really liked the idea of creating a very simple skeleton that allows you to present the work. In this case, even though I've already established these accent colors for the rest of the website, when you do get down into the case studies, one thing that I decided to do was rebrand this entire case study page as if it was a page dedicated to this app. Rather than using all of the accent colors that I was using in other pages of the website, I've decided to pull some of the accent colors and use in design choices from the app itself so that this feels like a page that is designed around the app and rather than taking screens and aspects of the app and trying to shoehorn it into a design that doesn't really match. One thing to consider when mockingup some of your screens for our mobile phones or web apps is contextualizing them within device mockups. In this particular case, this is a trend that I've been seeing a lot lately where a mobile app screen gets put onto an isometric or angled view of a phone. These images look really greatest as hero banners like maybe at the top of your case study. But I recommend not relying on them heavily as you go through the case study. Just that level of distortion doesn't really allow somebody to appreciate all the nuance to your design because everything is skewed. They'll get a much better idea of what your app screens look like if they just present them in a very flat straight on way. One of the most important parts of any design project is getting feedback. If you're newer to design, don't be afraid to get some of that critical or negative feedback. All of those things will help you become a stronger designer. One of the things I really like about Figma is that it's a truly collaborative product where I can invite other collaborators into the project with me and they can design alongside me or even leave comments and give me feedback directly on my portfolio website. As I'm working on this, I'd like to get some feedback from my friend Beca, so I'm going to share this project with her. Beca will receive the link in her email, and then she'll be able to log in and browser from the project with me. Now that I've shared the link with Beca, Beca has received a link in her email and now she's clicked on it and she's in the project with me. I can see Beca's cursor moving around and now Beca is going to be able to either move some things around or drops some comments wherever she feels there's some feedback that she has for me. This is one of the workflows that I find really useful because I can share the file with as many different people as I want, and I can get commenting, inline or right in my design without ever having to share an external file. Up next, we'll talk about a few quick tips on how to build your online presence.
6. Building Your Online Presence: In addition to your online portfolio, you also may look at building a bit of a supplemental online presence. That can be a really useful thing for people to be able to find you and directly to your portfolio website or just add color to your online portfolio. But treat it as just that, something that supplemental. Your portfolio should really be the key piece that you want to drive people towards in telling your online story. One area of your online presence that you may consider is joining one of the online portfolio communities like dribble. Dribble can be a really useful area to attract people to your work and maybe link them to your website. But ultimately it's not the place that you want to build your online portfolio. It can be a great place to show some in progress work. But keep in mind, these are open and public communities where people can leave comments on your work. So just be mindful. It is a space online that you're not in complete control of, but it still can be a useful place to share your work. In increasingly important area to build your online presence is going to be on digital resume sites like LinkedIn. This is an opportunity for you to talk about what you did in different roles that you have an expand on your background. But it's also a great place to let recruiters know that you're looking for work and also link back to your portfolio website. Twitter can also be a really great place to interact with other designers. And it could be a place where you can follow your mentors and people who you think are doing really great work and don't be afraid to reach out to those people to see if they even want to give you feedback on the portfolio or building or areas of your portfolio that they feel like you're lacking, that you could really expand upon as you refine your projects and build your online portfolio. But keep in mind, there's lots of activity that goes on Twitter and ultimately, a potential employer is probably going to look there. So just be mindful of what you post in the conversations that you engage in. Lastly, another way to build your online portfolio would be to look at writing blogs or maybe contributing articles to websites like Medium. Platforms like Medium gives you a much larger audience than you might get on your own personal blog. It's a great way to share some insights on a project that you've worked on or talk about some of the things that you've learned and share some tips with other people that are sort of going through a similar journey. Ultimately, that practice of writing about your design will really help you become more articulate about the design decisions that you're making in your own projects. It'll make you a lot more comfortable in speaking about those projects when you go into an interview and you have to walk somebody through some of the work that you've done. I know a lot of this may seem very basic and rudimentary, but these are all important things to consider when you're building your online presence and trying to demonstrate to potential employers that you're actively engaging in contributing to the design community. In the next video, we're going to be talking a little bit more about how you can present your portfolio in an interview setting.
7. Presenting Your Portfolio: In terms of the projects that you show in your portfolio presentation, these projects could be the same projects that are on your website, but plan to go into a greater level of detail. If you are on the fence about how many projects you want to include on your website and maybe there's one that you decided to leave off but you still would really like people to see, that might be something that you save for later for that interview where you're getting a chance to show them something they haven't seen before rather than just the projects that are on your website. If you do have any projects that are bound by an NDA, depending on the details of that agreement, you may be able to share that privately rather than publicly on your website in the context of an interview setting. So if you do have that option, that might be the perfect type of project that you just leave off the website and plan to show the interviewer something brand new that they haven't seen. Of course, your interview is going to be bound by a time constraint and that time can vary anywhere from half an hour to an hour and a half. Some companies may have you out and interview with multiple people in one day, especially if you're applying to a job that's outside your region, they may try to be respectful for your time and rather than having you go back and forth from multiple interviews, they may just decide to do it in one day. In any case, you should be prepared to present and be able to scale up your presentation from a short half an hour presentation to maybe a little over an hour of presentation, of course, saving some time for question and answers. But in any of those situations, it's really important that you be able to go into at least one project, maybe your strongest project in a greater level of details, because the chances are you probably won't have the option to go into three projects at a really high level of detail. But you should be prepared too for all of them in case there's a specific project that the interviewer asks about and you'll be well-prepared to talk about any project that's in your portfolio. When you're going into an interview, every interview could be structured slightly differently, but at one point within that process, you're going to have to share your work, which may happen right at the beginning or it may happen after some initial conversation about why you're interested in the job and those establishing questions. Once you get into your work, you should be able to talk about that work in a greater level of detail and share some of your experiences and highlight some of your strengths that came through in that project. As you're trying to structure and sequence the interview, if you have a particular project that maybe highlights one skill set, but not another skill set that might be important, but you have another project that does, those points within your presentation may be good segways into transitioning to another project, highlight another skill set that really came through on a different project so that the employer can understand that you're a well-rounded person and that you have experienced in the number of different areas. An interview is also a great place to really get into some of the challenging aspects of your projects which you wouldn't necessarily cover or write about in one of the case study pieces in your portfolio. You can talk about some of the challenges or organizational or approval challenges that you've had and how you overcame those or dealt with those situations. Those are all really telling examples of how you're going to perform in a team when you're dealing with real-world constraints and budgets and things that don't always go as planned. Due to the nature of a product design role, because as I mentioned, you are required in many companies to wear a lot of different hats, there's probably a good chance that you're not an expert in every single skill set that you might be required to have for the job. So don't be discouraged along the way if you feel like you're a little bit of an imposter or you don't know it all, that's okay. You'll be able to talk through the skills that you have that you're really strong in within your portfolio interview, but be honest and talk about the skills that maybe you don't have as much experience in and express your willingness to learn. Most companies want to hire people that maybe don't know every single thing about a particular role, because if that person comes into that role and is already an expert in everything, well there's not a lot of room for them to grow. But if you knew somewhere between 60 and 80 percent of the things that you need to know, but there's still that 30 percent leftover for growth, an employer is going to see someone who's enthusiastic to learn and grow and evolve and mature in that role.
8. Final Thoughts: As you evolve your portfolio and work on new projects, always make sure that your portfolio is a reflection on the type of work that you want to do and is always highlighting your strengths in the direction that you want to take your career. You never know when someone's going to stumble across your website or find you on LinkedIn and want to see what you're working on. You never want to have something that is out of date; that's not reflecting your interests. As you're working on new projects, always consider that those projects could become potential portfolio pieces and it's always more difficult to go back in time and try to remember all the nuances and details that you want to include in a case study, so try to do that as you go and collect those things, make notes, and put some screenshots and sketches aside so that they're easy to find when you have a chance to update your portfolio and try to do it as you go rather than leaving it to the last minute before or you try to get ready for that important interview. So we've reached the end of the class and hopefully you've left feeling like you've got a better understanding of how you can put together a strong product design portfolio. I love to see what you're working on and if you have any comments along the way or questions, I'd be happy to answer them even if they're technical questions about using Figma, please feel free to drop them in the discussion section. Thanks so much for taking the class and I can't wait to see your portfolios.
9. What to Watch Next: [MUSIC]
Thomas Lowry, Senior Visual Designer at OpenText
