Category: Portfolio Projects

So you’ve decided to start a career in UX/UI Design. Great! The market for User Experience and User Interface Design jobs is booming and there’s never been a better time to become a Web Designer or Product Designer. To get a job in the field, however, you’ll need a great portfolio. But when you’re just starting to learn design fundamentals and play around with the technical tools of the trade like Sketch and Illustrator, how do you come up with ideas for projects? Enrolling in a flexible and super affordable UX Design bootcamp is one great way to get started quickly (follow that link to check out one of the best short-term UX bootcamps around!)

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!

One of the most exciting things about design is that there are so many types of projects you could work on, from app design to website design. The most important thing early in your education is to try out lots of different types of projects to see what you like. Once you get a feel for the type of design you enjoy most, you’ll start to specialize and come up with your own concepts for projects that solve real problems. Employers love to see junior designers who have chosen a specialty and developed a deep expertise in that field, filling their portfolios with comprehensive projects backed up by user testing and solid research.

But like we said, early on you should experiment with lots of types of projects to see what you like best! In this article, we’re outlining a few simple UX/UI design portfolio projects you can work through to let you experiment with lots of different ideas quickly.

Ready? Let’s go!

The right process to follow for these projects

For all of these projects, start with research. Look at the designs on the websites and apps of similar companies to see how they’ve solved the same problem. Take notes and write down what you like and dislike about similar digital products.

Next, create user personas to understand who will be interacting with these designs and to help you visualize what their goals will be when they land on the page you’re designing. After that, brainstorm and sketch! Get out a pen and piece of paper and sketch out high level ideas for the design based on your research. Get as many ideas on paper as you can in 10 minutes.

Next, open a tool like Sketch (hint: you get 3 free months with our Portfolio Starter Kit) and create a wireframe of the page you’re designing. If you’re feeling ambitious, you can create a digital prototype in InVision to show what actually happens when a user interacts with each element of the wireframe.

Then show your designs to a friend and ask them to provide feedback as though they were a real user of the product. Once they’ve given you feedback on the design, incorporate it into your wireframe and then start creating the high fidelity version of the design. Add color, typography, copy, and make it look as slick as possible.

Be sure to research grids, color theory, and typography so you understand how to use these elements harmoniously to create a beautiful final product. Alright, now that the basics are out of the way, let’s get on to the projects!

Product Page for an Ecommerce Website

In this project, design the product detail page for a product on an ecommerce website. A product detail page is the page on an ecommerce website that describes the product you’re considering buying, showcases it visually, and lets you actually add it to your cart or purchase it directly. Depending on the product, a visitor might be able to customize specific features like size and color, read reviews, and view other technical specifications.

Start by coming up with a company. For this project, you can either choose a real company that sells products online or a fictional company you come up. If you choose a real company, think about industries you like and identify a company whose ecommerce conversion rates or overall user experience could be strengthened by a redesign. If you come up with a fictional company, think about industries you’re interested in that sell some form of product online and choose a product to sell. This could be anything from fashion to digital products.

Your final deliverable for this project should be a high-fidelity version of the product detail page for one product.

Portfolio Site Splash Page

In this project, you’ll design a static splash page for your personal portfolio site. A splash page is a non-scrollable landing page that visitors to a website see before they continue to the main content of the website. Splash pages are generally used to quickly introduce and/or promote an organization, product, or individual. Think of it like a visually pleasing greeting card that gives visitors a quick overview of who you are and entices them to learn more.

Splash pages generally include a strong call to action and button to encourage visitors to continue on to the main website. If you don’t have enough projects to have a full portfolio site yet, a splash page can also serve as a great temporary landing page so you can start to establish an online presence while you work to build up your portfolio.

Start by reviewing your current portfolio site. And if you haven’t created a portfolio site yet, take some time to put together a list of the information you’ll want to include on your splash page. Generally, a strong splash page includes this information:

• Your name and/or logo
• A brief description of who you are and what you do
• One or more Calls to Action enticing visitors to visit your full site
• A beautiful background image or original graphic element
• Social and/or email icons

Pricing Page for a SaaS Startup

For this project, you’ll design the pricing page for the website of a Saas (Software as a Service) startup. A pricing page generally includes detailed information about the price and features of different tiers of a company’s product. Most pricing pages generally include the following information:

• Unique names for each plan
• Pricing for each tier (including options for monthly and/or annual plans)
• The main product features of each tier
• Calls to action to learn more or sign up

For this project, you can either choose a real SaaS startup or a fictional startup you come up with on your own. Try to include at least 3 price tiers in your final design and choose one of the tiers as the “target tier” that you’ll try to convince people to purchase with your design.

Startup Landing Page

For this one, you’ll design an above-the-fold landing page for a startup’s website. A landing page is the first page that a visitor sees when arriving on a company’s website. Since first impressions are crucial online (and since most visitors will only spend a moment or two before deciding whether to invest additional time learning about a product), a strong landing is a crucial factor in a startup’s growth.

The page should include a short description of the product, a few main benefits or use cases, and a clear call to action to compel the visitor to continue learning more or to sign up immediately. If you choose a real company, think about industries you like and identify a company whose conversion rate could be improved by a more effective landing page.

Mobile App Homepage

For this project, you’ll design the home screen of a mobile app of your choosing. For this project, you’ll choose an app and redesign the first screen you land on after logging in or signing up. The home screen of most mobile apps serves as an informational landing page or dashboard that showcases relevant information to a user depending on the function of the app

Think about the experience of a user just landing on a client’s app for the first time. How do you convey the necessary information simply and effectively while also clearly showing them the different options they have to navigate to other parts of the app? Get experimental with the structure for your page!

Conclusion

You can spend as long as you want on these projects, but we’d suggest limiting yourself to a couple of hours in order to get used to the types of constraints you’ll likely encounter in a full-time job. Most of all, have fun with it! Use these projects to experiment with different ideas, layouts, and graphic elements. If you’re happy with the final design, you can develop it into a more comprehensive portfolio piece using the projects in our Portfolio Starter Kit, but your initial focus when working on these mini projects should be on testing and experimentation.

Want more help coming up with ideas for detailed projects and then building them up into fully-formed portfolio projects? Consider our short-term Build Your Portfolio program where you’ll work with a mentor over a few weeks to create an amazing portfolio for yourself!

And if you want a more detailed step-by-step guide to help you work through projects like this, our Portfolio Starter Kit includes more detailed versions of the projects in this article as well as 30+ more projects and tons of resources to help you create an amazing portfolio!

Follow process and always consider the user

Before we dive into the 7 projects you should consider working on, we want to make a quick point of emphasizing how important it is to follow process when working on UX projects. Every employer and recruiter we talked to told us the number one thing that makes them pass on a portfolio is a lack of explanation or context. Many young designers make the mistake of diving straight into Sketch or another wireframing or prototyping tool before conducting necessary research. This is a bad idea! Employers want to see a portfolio site that explains why you made the decisions you made rather than just seeing the final deliverables mocked onto a desktop or phone. If you’re studying Visual Design, your final portfolio might be a bit more abstract, with designs based on your moodboarding, ideating, and sketching rather than deep industry research and usability testing. However, as a UX designer, it is crucial to base all of your design decisions on research and to constantly be iterating based on user feedback and usability testing. While a branding campaign or icon design project might be difficult to tie back to specific results, all of your UX/UI work will likely be directly tied to specific KPI’s (Key Performance Indicators) that your client or employer will use to determine whether the designs are successful at achieving their goal. So be sure to research your industry and client prior to starting any projects and then create personas and use cases so you understand how users will be interacting with your designs. And once you create an initial prototype, review your designs with users (this can be friends or mentors), watching how they interact with it and iterating accordingly.

The 7 projects every aspiring UX designer should work on

Here are the 7 types of UX projects that you’ll likely experience at some point in your career. We’d suggest trying out one or two projects in each category so you can at least be familiar with the process for creating each and also get the chance to see whether there is any particular part of the UX world that you’re especially passionate about.

Digital Publication or Blog

This might be a UX project type that you’d normally skip over, but multiple employers told us that being able to craft a unique digital blog or content site is a great skill to possess. While you might think that the availability of thousands of DIY blog templates available on platforms like WordPress and Squarespace makes the need to design a beautiful blog from scratch a thing of the past, this might make a case for the importance of this type of design work. Companies are putting more and more money into content marketing (creating owned written content that is used as a lead gen tool for acquiring inbound traffic) and most content marketing is tied directly to a business’s marketing budget and growth. Being able to design a unique blog that optimizes for lead capture and is beautiful enough to convince visitors to come back over and over again is a great skill to be able to promote in interviews! For this project, we’d suggest designing a homepage, category page, and article page. Your final deliverables should include sketches, wireframes, and a working hi-fi prototype of the final site including a basic Style Guide.

Ecommerce Website

If you’re interested in working in an industry that focuses on selling products (physical or digital), it’s probably a good idea to have some experience designing ecommerce sites. For an ecommerce project, you should focus primarily on maximizing conversion rate for visitors to the website, with a product search page that makes filtering and searching simple and intuitive, as well as a product detail page that makes it easy for visitors to gather information about the product and purchase it. While metrics are a key focus of any good ecommerce site, you should also try to create a compelling and unique visual look for the site to differentiate it from the millions of other ecommerce sites on the web. For this project, you should choose a client in an industry you like (you can either make up a fictional client that sells a product you’re passionate about or choose a client whose ecommerce site you think could benefit from a redesign) and design the Product Search, Product Detail, and Checkout pages for this client.

Lead Gen Landing Page

One of the simplest but most impactful UX projects you might work on for employers and clients is designing a simple landing page whose sole purpose is to convert visitors into signups or leads. This is generally done via signup forms, lead gen forms, or simple user registration widgets! Your job is to design a page that maximizes the number of visitors who submit their info (i.e. become leads) so the client’s sales team can follow up with them afterwards and try to convert them into paying customers. For this project, come up with a client in an industry you’re passionate about and think about the type of information you’d need to gather from a visitor to convert them to a lead. Also consider what information they’d be most interested in learning before being convinced to “convert”.

Mobile App Design

Mobile app design is one of the most popular UX/UI specialties and for good reason. People spend more time on their phone than on any other device, so being able to design simple and intuitive apps that delight users is a highly desirable skillset. For this project, think about problems you encounter in your everyday life and think about how a simple app product could solve those problems. This could be as simple as a productivity or reminder app or as complex as a social network. For this project, think about designing a simple onboarding flow, as well as the in-app screens and user dashboard or profile. Your final designs should include personas and use cases as well as sketches, wireframes, and a final prototype beautifully mocked up.

Email Drip Campaign

This is another one of those projects that might seem nonobvious or less-than-glamorous. However, it’s another project that can show employers that you understand their KPI’s and are able to convert those metrics into beautiful designs that help them grow their business. Emails are an important in the marketing and acquisition funnel of most companies and there’s a good chance you’ll have to design at least a few early in your career. For this project, you’ll identify a business client and design a series of 4 emails for them, designed to convert new subscribers or trialers into paying customers of their product. Come up with a product that these users have trialed and think about the flow of information they’d be receiving over the 4 email series, with a focus on moving them down the acquisition funnel.

Marketing Website

Similar to a lead gen page, a marketing website is a customer-facing site that a business or startup uses to promote and explain their product and to convert visitors into customers or trialers. For this project, come up with a client in an industry you care about. Think about how your design can showcase relevant information about the product and help them reduce their high drop off rate and help move visitors from the discovery phase (search engine, social media marketing) to the conversion phase on their marketing website. Research successful marketing websites to understand how brands optimize their marketing website for conversions.

Web App Design

Finally, we’d recommend working on a web app product. Similar to a mobile app, a web app is a digital product that users engage with via their computer. A few popular web apps are sites like Facebook, Gmail, or Trello. For this project, think about a problem that exists in your target industry that could be solved by a simple (or complex) app. Then design the signup flow, in-app screens, and dashboard for the app, presenting your final work as a comprehensive case study including sketches, wireframes, and a hi-fi prototype mocked onto a device.

What next?

Now that you know the types of projects employers want to see in UX/UI portfolios, jump into it! Try as many projects as you have time for and once you find yourself being drawn to a specific field of UX or UI Design, start to deepen your expertise in that area. Employers love to see subject matter experts who have experience across a variety of different types of work, so remember to keep practicing multiple types of work even if you decide to focus on just one. If you have an idea for a client or product you want to design, but aren’t sure how to get started or what process to follow, never fear! We developed our Portfolio Starter Kit and Career Bootcamps to teach you how to take your ideas and turn them into well-researched projects that follow the proper design process and will impress employers so you can stand out from the competition.