In order for the projects in this article to become good candidates to include in your portfolio, we’d recommend coming up with a specific client (real or fictional) that you’re going to build these projects for. Before beginning design work be sure to ask yourself some essential questions, and if the client is fictional, improvise the answers. Who is this product for? What problem is the product solving for them/what are they trying to achieve? What device will your user mainly be encountering your product on?
Next, be sure to organize that information in a way you understand and create a user flow. This can be simply written on post-it notes. The goal of a user flow is to visualize the path you want a user to take through your product to achieve their goal.
Then, allow your user flow to inform how to begin wireframing the product. Keep information architecture and design hierarchy in mind when wireframing—this is the phase to visually organize all of the information you’re trying to provide to your viewer, including calls to action.
Finally, once you are happy with your wireframes, begin a higher fidelity design process introducing color, typography, and graphics or imagery. Once you have a high fidelity mock-up of your product, it’s crucial to put it in front of potential users in order to watch them interact with your product and make iterations based on your observations. Since these may only be fictional products to start, getting input and feedback from a UX mentor can be a great place to start.
Now that we’ve laid out the basics for how to work through some of the projects, it’s time to get started! Here are some UX projects that will be applicable across pretty much any client/product you work with…
Think about the experience of a user just landing on a client’s website for the first time. How do you convey the necessary information about the product simply and effectively while also clearly showing them the different options they have to learn more, sign up, and navigate to other parts of the site? Design a basic landing page for your client. There’s no right or wrong information to include, but for anything you do include, be sure to justify it in your process and briefly explain why you’re showing it in the way you’ve chosen.
Subscribe / Lead Generation Page
Many clients will want to have lead generation pages that maximize the number of visitors who turn into email subscribers, or leads. Design a few possible lead gen pages designed to maximize conversions. Consider what information your client would logically want to capture from visitors, and how to make the email capture process as simple and intuitive as possible.
Similarly to the lead gen page, design a user signup flow that simplifies the signup process for anyone creating an account on your client’s website or app. For this, you can decide whether the signup flow should be web-based or app-based, depending on your client. Should the signup flow be a simple modal on one page or is it a multi-step process that requires you to capture more information than name and email?
So your user has registered. Great! What does a login page look like for your client? Do they need to sign in manually or can they choose to sign in via an existing platform like Facebook or Google? What if they forget their password? What happens if they input the wrong password? Consider all of these to create versions of a login page for every possible scenario.
Once a user is signed in, how do they change their settings? Create a flow that guides a user through the relevant screens on the settings page. Consider things like changing passwords, adding/deleting payment info, tracking orders, and more. Remember to only include applicable elements for your client.
So what does your user’s profile page look like? What information is actually relevant for them to provide in order to have the best possible experience on your site or app? This is another situation where less is more—don’t ask someone to include information about themselves that will never surface in their use of the product. Will this information be public facing or private? Does the information affect the look of the actual product or is it only used on their profile page?
This might not be relevant for every product, but if you are building a technology or SaaS product, there’s a good chance that paying users will have some sort of dashboard to view data, reports, or information about their customers or users. Consider your client and think about what sort of information their users might want easy access to? How do they want to view the data on this page? Should it be pivotable, sortable, downloadable? How do you want to present the different options for viewing reports?
No matter what type of product you’re working on, there’s a good chance that there will be some sort of search functionality. For this, consider what the initial search screen looks like. Does it live as a bar at the top of the site or does a user need to click through to a dedicated search page? After searching, what does the results page look like? Can the user sort results by any specific criteria?
Again, this might not be fully applicable to every client, but a donation page is something that many sites in the nonprofit or government space rely heavily on for their businesses. Create a Donation page—similarly to a Lead Gen page, focus on optimizing the elements of the page to maximize donations by visitors.
For e-commerce websites and/or apps, design a product page laying out all of the products for sale. Are they categorized? Can you sort by product type, by color, by size, etc? How many products display per page? What information is displayed alongside the image? Perhaps there is a “Quick View” or an “Add to Cart” button. Is their pagination or an infinity scroll? These are all good questions to ask when designing a product page.
Product Detail Page
For e-commerce clients, design a sample product page for any of their purchasable items. What information and visuals do you need to convey? On a single page, how does a user change quantity, size, color, etc.? Are there user reviews on the page? If so, where do they surface? Do you show related products? If so, what aspects of the product dictate the type of related items to show to the user?
Shopping Cart Page
Once a user has added items to their cart and is ready to checkout, what does the final shopping cart page look like? Think about things they’d want to do on this page—maybe change quantity, delete items, and move to the final checkout page.
Once the user clicks “checkout” on the shopping cart, what pages do they need to go through to get to the final Confirmation page? When should they input credit card info in relation to seeing the final price with tax and shipping included? Where do you include the ability for them to redeem offer codes?
Finally, what does your client’s help or support page look like? Depending on the product, this could include various things. If it’s a Saas product, there might be a dedicated customer service team available for live chat or phone calls. If it’s a free-to-use product, there might only be a Q&A page and email address for serious issues. Consider how and when you want to present different options to people. Think about how you can answer as many user questions as possible before they feel the need to communicate with you directly via chat or email.
So there you go! We’d recommend picking 3 or 4 projects from this list that you think are the most important for your client’s (real or fictional) product and focus on them. Include high-level process and reasoning for your decisions in your final portfolio. Most recruiters recommend not writing pages and pages of process for a single project—just include the necessary information and justification for each aspect of your design to show that you are thinking about things from a user perspective and only making decisions when they are in the best interest of the user.
And if you want to review your projects with a professional UX designer, you can schedule mentor chats with a UX mentor at RookieUp anytime you need some inspiration, project feedback, or portfolio advice.