10 UX/UI Projects to Help You Build Your Portfolio

Starting a new career in UX can be a daunting task, particularly when you’re starting from scratch. Maybe you’re a visual designer wanting to expand your design repertoire, or perhaps you’re a product manager wanting to cross the bridge into product design. No matter where you’re starting from, what is really going to help you along and make you stand out is building a portfolio of UX work.

Pro-tip: We recently launched the ultimate short-term (and super affordable) mentorship-driven bootcamp to help you build an amazing design portfolio that will land you a job. Read about it and sign up right here!

Building a portfolio can be very time consuming—most do it over months if not years. When you’re just getting started, sometime it’s helpful to work on simpler projects that can help you master the basics of User Experience design. These smaller projects will jumpstart your creative problem solving for end users, which will ultimately inform how you think through larger scale projects.

The first step to becoming a UX designer is to learn the principles and technical tools used throughout the creative process, but once you’ve done that—whether it was through a book, an online course, or even a bootcamp—what’s next? You’re probably itching to start designing your own projects. There is an endless list of potential projects you can work on to hone your skills and you’re probably overwhelmed and unsure of where to start, so we’ve put together a list of a few simple and universally applicable projects you will undoubtedly encounter as a professional UX designer, which are great places to start practicing. The projects listed here will be UX components that you’ll be designing and reimagining throughout your career, optimizing them for the company or product you’re working on. As such, being familiar with them, and able to design them with the end user in mind is crucial.

One of the most important things to do when working on portfolio projects is ensuring they fit the industry, field, and type of projects you want to be hired for in the future. If you’re interested in mobile app design for financial technology products, don’t fill your portfolio with web design projects you created for fictional zoo or soft drink companies. In general, use commons sense and only work on projects that are actually interesting to you. However, don’t let that stop you from going outside your comfort zone to learn new skills or areas of UX design.

Your Process

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…

Landing Page

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.

Signup flow

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?

Login Page

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.

Settings

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.

Profile page

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?

Analytics Chart

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?

Search Page

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?

Donation page

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.

Product Page

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.

Checkout Flow

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?

Help/Support Page

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.