Jordan Hudgens: This is a user experience project. In the User Interface course, we'll get into making it actually look good, but in this project, we're simply going to focus on the user experience. What we want you to do is go through.

Start with step one, which is the prime objective. Define what the prime objective of this system is. It needs to be a little bit more specific than "this is a portfolio application." It comes down to what you want people to really see and the type of experience you want them to have.

Jesse Cook: Whenever doing a marketing website--and where you're marketing yourself--you'll ask, "What am I trying to accomplish? Am I selling a product?" Yes. You're selling yourself. You're the product, so after identifying what the prime objective is, all your content should be trying to achieve that objective. With any marketing site, whether it's a purchase, subscribe, or Contact Me button, these are the things that you want your users to do, whether they're possible employers, partners, or customers. So, identify, first, what you want these people to do, and who these people are, and then make sure everything about this website revolves around that.

JH: The deliverables for this project are a sitemap and a low fidelity wireframe.

The sitemap will show all the pages on your portfolio application, and how users can navigate from one to the other.

With the low fidelity wireframe, it is not going to look the way that your final website is actually going to look. Instead, this is going to be a high level and focus on navigability and what components will be on each page.

JC: The site map should be pretty easy because you don't have a whole lot of actions, or a lot of pages. As far as tools, for the sitemap I use Lucidchart. That's really good for teams but also they have a free trial. Like I said, it's dealer's choice as far as diagramming conventions.

For the wireframe tools, I personally use Adobe XD. That's kind of an expensive program, so a free alternative is InVision, which has some pretty good features.

JH: You can use either a paid application or, if you're just starting to get into this, then a free tool like InVision is perfectly fine.

If you end up focusing your development career in the UI/UX world then you'll most likely be using some of the more expensive and advanced tools. But in order to complete this project, you can use completely free applications or free trials of those.

JC: If it's a little daunting at first, get a whiteboard or a piece of paper. If you just want to focus on one thing at a time, and you don't want to learn a new piece of software then whiteboard and sketchbooks are great options. I spend a lot of time on the whiteboard because I might want to quickly sketch out three different options. You don't have to necessarily dive right into the deep end. If you're feeling a little bit hesitant or apprehensive then, absolutely, feel free to try it out.

JH: And my best advice for going through this project successfully is really to follow the pattern that Jesse's outlined. Notice how it started with the most generic, high-level concepts such as the overall goal of the system. Then, with each step down the creative process, things got more and more detailed. Don't try to jump in and build your wireframes right when this video's done. Follow the process. Having a good portfolio application is important, but the much more important thing is actually learning these skills and this workflow so that later on these things become second nature.

JC: When going through this process, identify the difference between user interface and user experience. For this part, when you're focusing on user experience, think about the content that you're going to be putting in there. This is when you're actually thinking through storytelling. With a marketing site, you're trying to tell a good story. You're trying to identify what propositions you want to talk about, and in what order. Think about when you want to slip in those calls to action. It might change a little when you start putting it into the design, but during the wireframing, you should be thinking about the content.

If there's one piece of advice I can give you it's to keep the content as small as possible. Have your headlines very direct, be very precise, and then any supporting smaller text that's underneath it keep as minimal as possible. You want to communicate in as few words as possible, especially with an employer. You don't want to waste their time telling them what your favorite fruit snack was when you were 10.

JH: Now, depending on your experience level, you may not have knowledge of all of those different components. You may not know what your specialty is going to be. That is perfectly fine. I don't want that to stop you from going out and building this. Instead, you could put something like: "This is what I think my specialty is." It could be a full stack developer or a front end developer, but make those a focal point. You're not locked into that believe me. You can change at any time. I constantly am changing my own portfolio applications

Right now this is all about developing the right system because it's one thing to hear it from us. It's a completely different thing when you actually get into the weeds and start building out these types of sitemaps and wireframes. You're going to find there are some nuances that you really can only learn when you're doing it yourself.

Good luck with the project, and we'll see you on the next course!