UX/UI projects for beginners #4: Agency website


This is the fourth design portfolio project for UI and UX designers. A detailed client brief that is time-boxed, detailed, and crafted to give you a hands-on experience of doing a real project. Each portfolio project is meant to help you create work you can add to your portfolio.

The other projects in the series from UX Design Mastery

UX/UI portfolio projects for beginners #1 Blog Website

UX/UI portfolio projects for beginners #2: eCommerce site

UX/UI portfolio projects for beginners #3: Travel App

A little about me

My first job in design was for a small design agency as the Lead UX/UI designer. 

I met the CEO over coffee for my interview and he hired me on the spot and asked me to name my salary.

That totally took me by surprise because it meant I had successfully transitioned from being a Java Developer to being headhunted for a design role within a year. He had pointed to the fact that my portfolio had demonstrated enough creative potential to get the job done rather than work experience. 

You see, I had not done an internship, gone to a design school, or worked in a design company but I still had great portfolio projects that I had conceptualized from nothing. The design projects were detailed, tackled a real problem, and demonstrated my design process and design skills.

The same thing could happen to you. I was fortunate that I had practiced my design skills to the point that someone could see the value I could bring to their company. 

A key takeaway is I had designed solutions to projects aligned with what I actually wanted to do on the job. 

So if you want to work for an agency do a number of campaign projects. If you want to work for an app development house, do a number of mobile app designs. Treat all your conceptual projects as gateways to where you want to be. This is what these design projects are for.

Today’s project is to create a responsive agency website for desktop and mobile.


About Design portfolio projects for UX and UI designers

Included in each design brief is the following:

  • Timeline (For this to be realistic each brief has a timeline that is as close to real-world work as possible)
  • Objectives (What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)
  • Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)
  • Target audience (Users always come first and the design must accommodate the target audience’s pain points)
  • References (If you are not sure where to start, clients normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)
  • Deliverables (Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)
  • Recruiter advice (Portfolio advice from creative directors, CEOs and leading design creatives from the biggest companies)

Let’s get into it.

This time we look at an agency website project.

UX UI Design Portfolio Project 4: Designing an Agency website

Client
Choose any design agency brand of your liking

Timeline
2–3 weeks

Objectives

Create a responsive website that allows an agency to:
 • Market who they are, what they do and what they stand for
 • Showcase their work case studies and awards they have won
 • Contacted by potential clients
 • List available positions and receive job applications

Platform

Please design a design agency website for desktop (1200px wide and mobile view 365px wide)

Limitations/Specifications

The site must load quickly hence any interactions or large imagery must be kept to a minimum.

Target Audience

Deliverables

  • Compile a case study on Behance(Get a free account) laid out like this; Name of project, date, your role, project type(Concept)
     • Research: (Refer to the References provided)
     • Highlight 3 enhancements or unique features you have included in the solution that makes the site unique and allows it to stand out from other design agencies
     • Sketch of conceptual and initial ideas
     • Wireframes and prototype of 
     ⁃ Homepage with work, values, team, and contact us calls to action
     ⁃ Our work with filter by industry, date, and awards
     ⁃ About us with values and team bio
     ⁃ Contact us with a map and form
     ⁃ Careers with a culture section and application form


These should be both desktop and mobile screens

 • Testing and Results section: Show your wireframes to 5 people and ask them using your designs what they think about them, what they would improve, and an overall rating. Take their feedback, iterate the designs, and have a final round of testing with 5 users. See that you improve your overall rating. If not go back to the drawing board and change your designs and retest.

References

References that the company would like their website to follow in terms of structure and layout. It will be your job to replicate something close to these websites but add your creative flair to it.

https://ueno.co/
https://basicagency.com/
https://dixonbaxi.com/

Advice from recruiters

Simon Mogren, Head of Design, BBDO

I don’t want to see every piece of work that you have ever done. Pick your favorite pieces. It doesn’t need to be for the most famous or biggest clients as long as you are proud of it and want to talk about it.
I would like to see more personal projects in portfolios. The work that you did in the best of conditions and with full artistic freedom

Helen Rice, Fuzzco

We want to see work that is consistently good. The best portfolios take a well-rounded and curated approach to showing work. Ideally, we’d see a handful of solid logos, examples of web design, examples of illustration, and some editorial work.
They should briefly describe the work and the particular role they played. We get a little nervous when someone’s portfolio includes a lot of team projects. We want to clearly understand someone’s strengths and weaknesses before we hire them.

Audrey Liu, Lyft

Telling the story of your work — how it all relates, why it’s important — matters. Additionally, it’s important for designers to show that they understand the goals of their work and that those goals touch on both user and business needs. A pet peeve of mine is when there really isn’t a good reason behind the work, or the designer doesn’t show any interest in or understanding of its impact on the business or user.

If you would like a portfolio project PDF of this design project along with other projects you can download it below. Included is a portfolio project layout template that outlines how to present your project your final case study. 

UX/UI portfolio projects for beginners #3: Travel App


This practice project/Client brief is the third one in this series from UX Design Mastery after the one for a Blog website and an eCommerce project.

Design Portfolio Projects

Blog website

Design Portfolio Projects

eCommerce

Design portfolio projects for UX and UI designers

Included in each design brief is the following:

  • Objectives (What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)
  • Timeline (For this to be realistic each brief has a timeline that is as close to real-world work as possible)
  • Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)
  • Target audience (Users always come first and the design must accommodate the target audience’s pain points)
  • References (If you are not sure where to start, clients normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)
  • Deliverables (Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)
  • Recruiter advice (Portfolio advice from creative directors, CEOs and leading design creatives from the biggest companies)

A little about me

Creating a portfolio project is hard work.

I still remember when I did not have a single project in my portfolio that would really make me stand out and get noticed by recruiters. 

I had just left my job as a Java Developer and was about to put all my effort into starting a design career. 

One of the very first successful projects I created was a conceptual mobile app for a local airline. I had recently been on a trip which was frustratingly delayed and poorly communicated to passengers. 

So I decided to creatively express my opinions through a conceptual project and it was responsible for me getting hired for my first design job. 

Its also my most appreciated project .

I hope this travel app project you work on, provides you with as many opportunities as I have received. 

Let’s get into it

Design Portfolio Project 3: Travel App

Client Brief

Client: Choose any travel brand of your liking

Timeline: 1–2 Weeks

Objectives

Create a mobile app design that can:
 • Allow a user to book a flight, a hotel and car on a specific date for different destinations
 • Find the best deals on flights, hotels and car hires
 • Ability to select holiday activities
 • Organize all travel plans into one itinerary
 • Notifications

Platform

Please design a travel app for either iOS or Android. So we require mobile screens. Pay attention to

iOS guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
Android guidelines
https://material.io/design/usability/accessibility.html#hierarchy

Target Audience

References

Please conduct some research on the following travel apps that we love and get ideas for functionality and features to include

https://itunes.apple.com/za/app/kayak-flights-hotels-cars/id305204535?mt=8
https://itunes.apple.com/us/app/expedia-hotels-flights-car/id427916203?mt=8

Deliverables

• Research (refer to references provided)
 • Highlight 3 enhancements or unique features you have included to make our app stand out and solve user pain points
 • Sketches of initial ideas
 • Wireframes
 • Visual mockups screens of
 ⁃ App Onboarding
 ⁃ Home screen where a user can book a Hotel, a Flight, a Car or an activity in a popular city
 ⁃ Listing page of Hotels
 ⁃ Map view showing hotels location
 ⁃ Itinerary screen
 ⁃ Possible notifications

 • Results section: Feedback from testing with 5 random people
 • Fonts: Brand related
 • Colors: Brand related
 • Link to this project

Nice to have

Video walkthrough (Screen record using QuickTime an Invision prototype interacation)

Pro-tip

Go through an entire booking experience to understand how the app is design.

Advice from recruiters

I wish more portfolio websites included little descriptions of what the designer’s role was in a specific project, or even pointed out some specific problems or personal thoughts about aspects of their designs. Too many portfolios now are just vanity shots and client name-dropping without actually communicating what was done. 

James Cabrera, Senior Product Designer, Refinery29

Going the extra mile and making sure it’s easy to consume, well-presented, and filled with helpful context about your projects tells us a lot about your communication skills. Ideally a portfolio should be more than just a collection of pretty thumbnails and mockups — it should speak to your problem solving skills.

Ryan Le Roux, Metalab

If you’re just starting out as a designer, a good alternative to unsolicited redesigns are personal projects. These self-initiated projects are a great way to build up your design and product skills, while also putting something out into the world for people to use. You’ll learn a ton from the experience of launching something and the feedback you’ll get from your users will definitely make you a better designer.

Elyse Viotto, Shopify

If you are interested in ting the PDF download of the travel app project and all my extra example case studies download below.

UX/UI portfolio projects for beginners #2: eCommerce site


One of the greatest challenges with transitioning into a UX/UI design role without any design work experience or educational background is proving your skills to a prospective recruiter or client.

This is the s project in the series after UX/UI portfolio projects for beginners #1 Blog Website

You may have already read up online on how to become a UX designer or a UI Designer but unfortunately you still have a vague or generic guide that comprises of:

  • Doing an internship 
  • Mentorship 
  • Reading books 
  • Doing courses
  • Learning design tools 
  • Going to meet-ups

The truth of matter is that you will need a portfolio with detailed design projects that effectively communicates to recruiters and clients that you are the right person to hire. 

But such design projects are few and hard to come by unless you intern with a really good company that has cool projects. 

Most unsolicited redesigns and Dribbble shots lack technical feasibility and real world constraints to be taken seriously. 

So what can you do to address this problem?

A little about me

My own journey into design from being a Java Developer was a challenging one when it came to creating a portfolio recruiters would take notice of.

I did not know what projects to put into a portfolio. Mobile, Desktop or app designs?

What level of detail did recruiters want to see from my work?

And just generally were to begin.

I am going to share with you two things worked for me and helped me get started.

  1. Looking at other designers work. I was a member of Behance community and would spend hours going through the most popular projects, most awarded projects and how they were structured. 
  2. Creating detailed design projects of problems I found on forums and in the news.

I did not get a massive following of designers on Behance but what I did have was a collection of about 6 well thought out projects that helped me sell my skills. Calvin Pedzai on Behance
I

These projects got me headhunted by a digital design company who were impressed by the types of projects and the level of detail.

Each design project related to what the design companies were looking for and hiring me was a no brainer despite the level of experience.

To help you get the same opportunities and create a well-rounded portfolio, I decided to create a series of detailed briefs or practice projects that you can use.

Design portfolio projects for UX and UI designers

Included in each design brief is the following:

  • Recruiter advice (Portfolio advice from creative directors, CEOs and leading design creatives from the biggest companies) 
  • Timeline (For this to be realistic each brief has a timeline that is as close to real-world work as possible)
  • Objectives (What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)
  • Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)
  • Target audience (Users always come first and the design must accommodate the target audience’s pain points)
  • References (If you are not sure where to start, clients normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)
  • Deliverables (Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)

This practice project/Client brief is the second one in this series after the one for a Blog website.


Lets get into it

This time we look at an eCommerce website project. 

I decided to design a solution for this brief as well so you can check out what I produced in about a week and a half, after hours. 

Ecommerce project by Calvin Pedzai

Design Portfolio Project 2: Ecommerce website

Client
Choose any clothing brand of your liking

Timeline
2–3 weeks

Objectives

Create a responsive eCommerce website that can:
 • Tell the brand’s story alongside the products (VERY IMPORTANT)
 • Showcase the latest products and bestsellers on Homepage
 • Access to the cart throughout the site
 • Show all category sections
 • Allow readers to sign for an account
 • Ability to Search through content
 • Immerse the user into the ethos of the brand

Platform

Please design for responsive web. So we require desktop screens, tablet and mobile screens.

What should be delivered

Limitations/Specifications
 • Page performance (Loading time)
 • Limited Screen size on mobile

Target audience

Young males and females 25 to 35

Target audience: Blake

Blake, 31
PAIN POINT
Faster way of discovering products when searching.

Target audience: Sarah

Sarah, 26
PAIN POINT
Can I change the quantity of the products I add to cart?

Target audience: Crystal

Crystal, 28
PAIN POINT
How do I know these products are worth purchasing and reliable?

References

Please conduct some research on the following eCommerce websites that we love and get ideas for features to include

https://www.beatsbydre.com/
https://boostedboards.com/

Deliverables

  • Research (refer to references provided)
  • Highlight 3 enhancements or unique features you have included to make our eCommerce site to stand out and solve user pain points
  • Sketches of initial ideas
  • Wireframes
  • Visual mockups on desktop and mobile of the

-Homepage
 ⁃ Category page with filters
 ⁃ Product detail page
 ⁃ Menu/Search
 ⁃ Cart

  • Results section: Feedback from testing with 5 random people
  • Fonts: Brand related
  • Colors: Brand related
  • Link to this project

Nice to haves

Video walk-through (Screen record an Invision prototype)

Additional message from client

Go through an entire shopping experience offline and online to understand how products are sold.

Advice from recruiters

Sketches, wireframes, unused design concepts, etc. That is the work. The final design is just the end of that entire design process. Getting to see that thinking and decision making is a big differentiating factor when deciding on who to hire.

Aaron Stump, VP, Creative Director Invision

Imagine us sitting in our weekly meeting room at 5 p.m., the last meeting before home time. We open up your portfolio and see several screenshots of mobile interfaces under a project name. The work seems relevant but there’s no description of what we’re looking at. We don’t know what you did, what the goal was or how you feel about it. We’re left with questions and move on to the next portfolio. Never forget your user.

Stanley Wood, Spotify

A more effective use of time would be explaining how a project solved a client’s problem, how designs were changed based on client feedback, and anything they wished they could have done but couldn’t, for whatever reason. Those stories are far more useful and interesting than someone trying to sell their talent. 

Todd Dominey, Mailchimp

More Inspiration (Your cheat guide)

If you would you like a PDF of this design project you can download it below. Included are 2 additional eCommerce case studies and 5 online examples that you refer to from the best agencies and design companies in the world.

UX/UI portfolio projects for beginners #1 Blog Website


One of the hardest things to do when starting your design career is to create a design portfolio of impressive work.

But many have not had any substantial design work experience and the UX/UI projects they have done, are not worth putting up.

The Dribbble portfolio work they have is beautiful but often not technically feasible and has not enough real-world constraints for the work to be considered industry standard.

How do you start a design career without work experience or a college degree?

What level of detail is best to provide in a user experience designer portfolio?

How do you build a UI design portfolio?

Well, I’m glad you asked.

A good portfolio is made up of relevant, well considered detailed design projects.

At UX Design Mastery, we have created a simple and not overly complicated series of portfolio projects or practice projects, that will test your skills and help you create a well rounded UX/UI portfolio project that a recruiter will definitely take notice of.

Included in each portfolio project is a client brief that has the following:

  • Timeline (For this to be realistic each brief has a timeline that is as close to in work)

  • Objectives (What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)

  • Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)

  • Target audience (Users always come first and the design must accommodate the target audience’s pain points)

  • References (If you are not sure where to start, client normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)

  • Deliverables (Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)

A little about me

(You can skip this part if you are ready to get down to some work)

When I started out in design, I had no portfolio projects or commercial experience because I had not been to a design school, let alone worked for a design company. I was coming from a technical background (software developer) but knew design was a passion because of a part time design job I did for a real estate company.

It was the most alive I had felt doing work.

You know what I mean.

When you get into the zone and can’t do anything else but DESIGN.

However I never fully considered it as a potential career at the time, until I left my developer job.

I decided to create a portfolio of conceptual work that would not only showcase my skills to potential recruiters but also help me track my growth.

In total I must have done 12 projects.

I would research on forums and help boards for reoccurring problems real people were complaining about and try to design an appropriate solution.

That gave each project, real world constraints and limitations that recruiters absolutely loved.

It was not long after I posted my portfolio that I got headhunted.

Repeatedly.

Without a degree or work experience. Woah.

But well thought out detailed portfolio projects.

I hope these portfolio projects do the same for you.

If you are ready to create some awesome work, let’s begin!!


Advice Quotes: (A few things to consider from recruiters)

We don’t want work that simply copies everything else. Our clients come to us to help them meaningfully resonate and differentiate. That means that we need to be on the bleeding edge of what is relevant, inspiring and thought-provoking.

Karin Soukup, Managing Partner, Collins


On a good/bad day I look at maybe 20–30 portfolios. Most of the time for maybe five seconds before I decide if it’s worth exploring further. So my first recommendation would be to make sure you grab the audience straight away. Show me something great and/or unexpected. Ideally both.

Haraldur Thorleifsson, CEO, Ueno


Show me how you’ve gone from insight, to concept, to solution, to impact with a real project example. That will help me understand how you work and think, and assure us you can do it again.

Katie Dill is Director of Experience Design at Airbnb



Client brief #1 Blog Website

Client:
Name: Vibz
Fonts: Use any you like
Colors: Use any you like

Timeline:

2 weeks to 4 weeks

Objectives

We would like a unique blog website that can:

  • Show featured articles on Homepage
  • Article page
  • Show all category sections
  • Allow readers to signup to a newsletter
  • Showcase our Instagram feed
  • Ability to Search through content
  • Guest authors
  • Social Sharing and liking of posts
  • Article ratings

Platform
Please design for responsive web. So we require desktop screens as well as mobile screens.

Limitations
Page performance (Loading time)
Limited Screen size on mobile

Target audience
Young males 25 to 35

Pain points
Searching for inspiration about lifestyle, health, news, music, movies and gadgets (Our category sections)
Get bored with uninspiring content 
Hate having to return to websites to check for new articles

References


Please conduct some research on the following blogs we love and get ideas to include

GQ website

Men’s Health

Deliverables

  • Research section (refer to references provided and find features that should be added in order for our blog to be competitive)
  • Sketches of initial ideas
  • Sitemap/journey map 
  • Wireframes
  • Visual mockups on desktop and mobile of
    • Article page
    • Homepage
    • Category page
    • Article page
    • Menu
  • Highlight 3 enhancements or unique features you have included to make our blog stand out and solve pain points
  • Results section:Feedback from testing with 5 random people
  • Link to this project’s deliverables

Nice to have

Video walkthrough (Screen record an Invision prototype)

Additional message from client

Make it pop!!!


Inspiration (Life’s cheatsheet)

If you are still unsure about where to start I have a couple of very cool blogs done by the best agencies and design companies in the world.

Here are two case studies for you to analyze:

Adidas Originals Tumblr blog by RESN
Inside Design blog by RallyInteractive

Here are other awesome example blogs:

The Awwwards site is great source of inspiration. Make sure to bookmark it and visit it often.

https://www.awwwards.com/sites/coda-story
https://www.awwwards.com/sites/oceanographic
https://www.awwwards.com/sites/the-official-squarespace-blog
https://www.awwwards.com/sites/vogue-arabia
https://www.awwwards.com/sites/sojournal
https://www.awwwards.com/sites/ubisoft-stories
https://www.awwwards.com/sites/caleo-magazine
https://www.awwwards.com/sites/disconnect

Go through them and find features you think will work for this brief.


Download the PDF version of this post so you can work through it.