design system case study portfolio

Building and Scaling a Design System in Figma: A Case Study

Building a design system for a multinational company means cataloging every component in meticulous detail. It’s a massive undertaking that calls for both a big-picture view and a focus on specifics. Here’s how one design system team leader accomplished it.

By Abigail Beshkin

Abigail is a veteran of Pratt Institute and Columbia Business School, where she oversaw the design and production team for Columbia Business magazine. Her work has appeared in the New York Times and been heard on NPR.

Determining how to build a design system for a multinational company means cataloging every component and pattern in meticulous detail. It’s a massive undertaking that calls for both a big-picture view and a focus on specifics. Here’s how one design system team leader accomplished it.

When Switzerland-based holding company ABB set out to create a design system , the goal was to knit together a consistent look and feel for hundreds of software products, many of which power the mechanical systems that keep factories, mines, and other industrial sites humming. It was no small task for a company with almost two dozen business units and nearly 150,000 employees around the world. For Abdul Sial , who served as the lead product designer on ABB’s 10-person design system team, scaling the library of components and patterns depended on maintaining openness and transparency, with an emphasis on extensive documentation.

The Role of a Design System Designer

Increasingly, large companies like ABB have teams dedicated exclusively to creating and maintaining design systems. “A design system allows for consistency, going to market in a fair time and not allowing production to get stuck on customizations that are not building value,” says Madrid-based designer Alejandro Velasco . Or, as Alexandre Brito , a designer in Lisbon, Portugal, explains, “Design systems come to provide structure whenever there are many people using the same set of tools. It’s like everyone having the same language.”

If a traditional style guide covers the design basics—fonts and colors, for instance—a design system has a much further reach. “A design system is a mix of a style guide, plus design components, design patterns, code components and, on top of it, documentation,” Sial says. When he worked on ABB’s design system, about 120 designers used it on a regular basis. The effort represented version 4.8 of the system, and the team dubbed it “Design Evolution.”

Design system designers play a different role than those who focus solely on individual products. “You have the bird’s-eye view of all the different products that a company is using,” Sial says.

Working in design operations also calls for communicating with stakeholders throughout a company. “Design system designers have to be social,” says Velasco. “A design system designer has to really like to work and talk with people who have different roles within an organization. They have to be able to distinguish what feedback to include in order to build the design system around the company’s needs.”

The Life Cycle of a Component

Working on ABB’s design system, Sial was guided by one overarching philosophy: “Documentation, documentation, documentation.” For every reusable element on ABB’s websites, mobile screens, or large stand-alone screens, Sial wanted to show what he calls the life cycle of a component. That meant extensive record-keeping for all components and patterns—breadcrumbs, headers, inputs, or buttons, to name just a few. “What are the journeys it went through? What decisions went into it? That way we’re not always recreating everything. Before trying something, you can read and see that someone already tested it,” Sial says.

In his experience, this philosophy is a departure from the typical approach to documentation. In the fast-paced world of product development, for example, documentation is often written at the end of the project or abandoned altogether. But for design systems, Sial says, documentation should be more than an afterthought. “A design system is never done; it needs continuous improvement,” he says. “Design system creators and consumers want to understand the thought processes and decisions in order to keep improving it.”

Documentation is especially important for a design system as large as ABB’s. “With such a large team you have to be able to scale,” he says. “How can we make sure that everybody who joins the team can quickly go to any component and understand how it started, how it was edited, and what version they are using?”

Finding the Right Tool

There are many tools out there for building design systems, including Figma, Sketch, and Adobe XD. Sial experimented with several, trying a mix of design and project management tools before settling on Figma, which offers ample space for documentation.

Sial and his team determined that every component should sit within its own file. “Most of the time, you’re working on one component at a time. If you put all the components in one file, it slows down Figma. By giving each component its own file, it’s quicker to open and you have the whole history and documentation in one place,” he says.

Setting the Hierarchy

Sial set up the ABB design system so that the file for each component and pattern has the same pages. The images that follow detail what’s on each page.

Sial recommends setting up a simple cover page for every component. In Figma, this enables a thumbnail preview of all the components and helps with the browsability of files. In the ABB setup, the cover page includes the component name and what phase it’s in: design, development, or released. The status can be easily updated when the component progresses.

Inventory, Use Cases, and Requests

This page contains examples of the numerous ways that a component shows up in a company’s digital product. In the case of a text field component, for instance, the inventory page would show how the text field looks on abb.com compared to how it appears on an iPhone compared to how it shows up on an Android device. “The inventory allows us to understand clearly what’s already there,” says Sial.

This page should also show the ways the component is being used incorrectly. “This allows you to look at your products and see where there are alignments and misalignments,” Sial says. He advises teams launching a design system project to begin by cataloging what already exists. “Start with inventory and it will guide you as you’re creating the design,” he says.

References, Best Practices, and Competitive Analysis

Sial advises creating a section of each component file akin to a vision board, showing how other companies design comparable pieces. “As with anything else, best practice is to perform competitive analysis and see how other people are doing it,” he says. “Observe other products and see their learnings.”

Tests and Data

The test results data page aggregates all the data related to testing a component, including the results of A/B testing and feedback from users and stakeholders. In short, Sial says, “It’s the whole story of a component.” Perhaps the design team tried a new variation two years ago and found it didn’t work? “Maybe we worked on that variation and we discarded it for some reason,” he says. If so, this kind of history can save significant time by making sure that designers don’t try it again.

The next page lays out a component’s scope so designers can bring a design to fruition. By the time they arrive at the scope page, Sial says, “You have a story. You understand the inventory of all the products. You know what you need to build and you know the requirements. Now it’s time to write it down and make a brief out of it.” He adds that creating the scope should be a collaborative process with the product owners, developers, and designers.

Images of the final versions of the component are found here, with the latest iteration pinned on top. Other designers should be able to review and comment on it.

The sandbox enables designers to experiment with different iterations of a component or pattern directly in Figma. “It can be messy, and there’s no standardization,” Sial says. “It’s just a playground where a designer has the freedom to do anything.”

Figma Component

The file also contains a page for the Figma component itself, a UI element that is easily repeatable throughout the design system. The designer can make changes to the component, and that change will populate throughout all the instances of that component across the company, keeping everything consistent. This page will be exported to the Figma design system library, and any individual designer can drag and drop the Figma component into their design. If the design system team needs to make a change to the component, they can make it once and deploy it throughout the company.

Style Rules

Next, the design system designers and developers create the style rules page, a kind of catch-all for elements that, Sial says, “are not visible in the design.” For example, how will the component render when you scroll down the page? It’s also where the design system team keeps track of unresolved questions or issues. He says he was surprised at how integral this page turned out to be: “At first, we thought this page was not that important, but now we realize we spend most of our time here.”

The handover notes are the instructions for developers on writing the code for the component. The handover document begins with the anatomy of the component, then includes its variations.

The ABB system handover documents also include design tokens . Becoming increasingly popular in large-scale design systems such as ABB’s, design tokens are pieces of platform-agnostic style information about UI elements, such as color, typeface, or font size. With design tokens, a designer can change a value—indicate that a call-to-action button should be orange instead of blue, for instance—and that change will populate everywhere the token is used, whether it is on a website, iOS, or Android platform.

Sial also created a Figma token plug-in to expand the scope of tokens designers can create in Figma. “Figma supports colors, typography, shadows, and grid styles,” he says. The plug-in will generate tokens for more variables, such as opacity and border width. It also creates a standardized naming convention, so designers don’t have to keep track of token names manually. “The plug-in bridges the gap between developers and designers. It allows both to work on a single source of truth for design; if one makes a change in one place, that change takes effect everywhere in the design and code,” he says.

Sial stresses that in his system, developers take an active role throughout the creation of a component. “Early on, we would involve our developers when we had something ready to show them,” he says. “Then we realized that’s not working, and now we literally start kickoff sessions with them.”

Documentation Webpage

The last page of each file contains a webpage with the final design, showing how the component looks as a finished product. “We create a page that shows how the live example will look so the users, in this case our designers, can see how it will look at the end of the day on a real website,” Sial says.

Collaboration Is Key

The role of a design system designer is multifaceted. As Alejandro Velasco says, “Designing a design system involves so many roles, and if I’m leading that, I’m the glue for the project.”

It’s an enormous undertaking and not necessarily the right move for all companies. Startups, for instance, might do better to begin with an out-of-the-box system such as Google Material Design or the IBM Carbon Design System , rather than dedicating extensive resources to creating one. Still, the time might come when that won’t suffice, says Alexandre Brito: “As soon as you have multiple designers working together, you start to realize that there’s a need for someone to build rules that are more in line with the product or brand you’re building.”

Building a design system takes work and dedication; it also takes collaboration. Sial stresses that involving all stakeholders in the development of ABB’s system throughout the process was a priority. “It was really iterative work with my whole team. It was all about listening to them and we took the time to learn and test it thoroughly and develop this structure,” he says.

Having a structure that includes extensive documentation, including history and best practices, is at the core of the Figma design system. “It’s a success because people can read the documentation all in one place,” Sial says. “They can see everything, starting from the use case to the design and moving on to the handover and the final component page. People can see the whole life cycle of a component.”

You can browse Abdul Sial’s Figma file in its entirety here: Component Template .

Further Reading on the Toptal Blog:

• Saving Product X: A Design Thinking Case Study
• All About Process: Dissecting Case Study Portfolios
• The Benefits of a Design System: Making Better Products, Faster
• Helping AI See Clearly: A Dashboard Design Case Study
• Design Problem Statements: What They Are and How to Frame Them

Understanding the basics

What is a design system.

While a traditional style guide covers the design basics—fonts and colors, for instance—a design system has a much further reach. The design system documentation for Switzerland-based holding company ABB, for example, contains design components, patterns, and code components.

What role does a design system designer play in an organization?

Design system designers play a different role than designers who focus solely on individual products. They tend to have more of a bird’s-eye view of all the products a company is using. They also must interface and communicate with stakeholders throughout a company.

What are some best practices when building a design system?

One approach is to organize it in Figma and give each component and pattern its own file. This design system case study demonstrates one approach: At ABB, each file has several pages with extensive documentation on all the ways the element is used throughout the product and all the iterations it went through. Showing the full life cycle of a component is key to building and scaling a design system.

• DesignProcess

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Toptal Designers

• Adobe Creative Suite Experts
• Agile Designers
• AI Designers
• Art Direction Experts
• Augmented Reality Designers
• Axure Experts
• Brand Designers
• Creative Directors
• Dashboard Designers
• Digital Product Designers
• E-commerce Website Designers
• Full-Stack Designers
• Information Architecture Experts
• Interactive Designers
• Mobile App Designers
• Mockup Designers
• Presentation Designers
• Prototype Designers
• SaaS Designers
• Sketch Experts
• Squarespace Designers
• User Flow Designers
• User Research Designers
• Virtual Reality Designers
• Visual Designers
• Wireframing Experts
• View More Freelance Designers

Join the Toptal ® community.

Henry Global Design System

Building a multi-brand design system from the ground up to connect global teams on a common design language foundation within stanley black & decker's brand portfolio..

UX/UI Design, Design System Management and Documentation, Accessibility Design

Stanley Black & Decker

Team Credits

Joseph Carter-Brown, Global UX Manager Liz Hunt, Senior UX Designer Matt G, UX Engineer Michael Muccioli, UX & Accessibility Designer Erin G, UX Designer Thomas C, UX Strategist Chris F, UX Researcher Paulina D, UX Research Strategist

Through 2019, Stanley Black & Decker (SBD) lacked any formalized design system. Brands existed on the web as separate identities with individual teams creating their own source of standards for UI elements, components, or modules–in both internal or outside agencies.

What we found:

• Conflicting guidelines and direction.
• Duplication of common components.
• Inconsistencies across market websites and microsites.
• Pressure for agile solutions without discovery and research.
• Siloed teams working with disjointed communication.

No design system = disconnected user experience

Challenges..

Piecemeal approaches to website technology and design have created fragmented workflows and inconsistent brand experiences across the global.

With 53k employees seated throughout 60 countries involved in over 14 unique brands , we needed a system that can manage a diverse cultural and language range.

02. Accessible

With accessibility compliance laws varying from market to market, we wanted to focus our system around the Web Content Accessibility Standards (WCAG 2.1).

03. Flexible

With a portfolio of over 500k products across all our brands we had to ensure maximum flexibility of components while delivering patterned solutions in an agile framework.

Foundations.

Critical to the success of the system was the alignment of all our teams on the foundational elements for each brand. Henry is structured to be scaled for each brand, meaning that our foundational system needed to account for every potential UI element. Our foundations supported our brand logos, grid systems, spacing scale, typography scales, color systems, and interactive language.

Fig 1. With Figma styles library, each brand was setup with color styles broken out by brand, interaction, neutral, and feedback palettes. Our typography scale was broken out by display, utility, body, and supporting styles.

We introduced a typescale that was based on display headings, utility headings, paragraph styles, and supporting styles. Our color scale allowed for a branded palette that was flexible with light and dark color variations while we maintained a global interactive, neutral, and feedback palette across all the brands for maximum contrast accessibility.

We maintained a consistent design langauge between brands by ensuring a light and dark mode variation for any button, input, or interaction. This allowed for more flexibility in element placement on pages with a wider range of background options while maintaining optimial contrast.

Component Library.

Each brand has a component library, a collection of reusable interface elements themed by their foundations file. Throughout the design system we reference different component types such as global, structural, content, data, and utility. It was critical to define the differences between component classes so that design decisions are efficient and accurate based on the context of the page.

Fig 2. Using Figma we were able to create variations on each component multiple breakpoints but also layout variations such as image left, content right or vice versa.

Each component received stepped interaction examples so that expected interactive states are clearly communicated. These are paired with detailed specifications around tab stops, keyboard control requirements, spacing, atom and molecular elements.

Every component is further refined for additional breakpoints as well as minimal and maximum content specifications. This allows for content authors to know the maximum or minimum amount of content any given component can contain.

Patterns are used to show reusable combinations of components that address common user objectives with sequences and flows. These were developed in consideration of our global market rollout approach. While not every possible pattern was developed, this documentation served as the basis for our customers most common needs.

Accessibility.

Any design system is only useful if it's accessible. While that perspective is typically user-focused, we felt it was two-fold. We wanted to make sure that we brought all of the internal teams along the journey through providing clear rationale, documentation, and education on the UX team's efforts in creating an accessible system.

Color Contrast

We focused on pressure testing all of our brands color systems, ensuring that we had sufficient contrast across buttons, input elements, headers, and themes overall.

Keyboard Control

We documented every component and interactive element through detailed specifications on how a keyboard alone would operate with the component.

Input Feedback

In following one of our design system values of transparent, we made it a goal to ensure that our interface feedback whether error states or warning states provided valuable information for our users. We devoid the system of confusing language making it clear what to expect from any given interaction state.

Content Accessibility

Working with our content writers and brand teams, we developed strategies for parsing all images and videos so that we can begin to provide alternative text, captions, and audio descriptions.

Governance and Documentation.

The UX team knew that documentation and governance around brand implementation into our design language was going to be the key to the success and sustainability of the system.

Working closely with our design, content author, and development partners–the UX team created and maintained documentation resources in a Confluence space, ensuring that we included our design principles, quick start guides, accessibility standards and best practices for designing and testing, as well as brand governance documents unique to each brand.

Fig 3. Our Henry Confluence space included a getting started guide for different roles. Our designer page included how to get started with Figma and our libraries.

Fig 4. Design principles were documented to act as the guiding force as we built new features or products using Henry.

Fig 5. Design systems were a new to SBD, so we included plenty of introductory documentation to bring all teams up to speed.

Fig 6. Extensive accessibility documentation allowed for detailed best practices and guidelines for any aspect of the system and our projects.

Fig 7. Brand governance documents were developed for each brand, which provided a high-level view of our Figma foundations document.

Fig 8. Within each brand governance document we outlined accessibility considerations specific to the brand as well as Do's and Don'ts for Content Authors.

What's next.

Come January of 2022, due to supply chain restrictions and volatility of the market related to the pandemic, our work came to a halt and the Global UX team was effectively laid off through a reduction in workforce. However, what was accomplished in the time the UX team had together was no small feat. We effectively built a white-label design system from the ground up, implemented 14 brands into their own related systems, educated and led teams across the organization on web accessibility and the value of a common design language.

Looking back at the successes and the losses, we learned some valuable lessons:

• Design systems are evergreen. They are living systems that require a dedicated team actively involed in their growth and maintenance. Facilitating adoption and cross-team buy-in is a challenge worth undertaking that ensures we all are presenting a common design language, that is familiar and consistent for any person interacting with it.
• Accessibility is MVP. Defining accessibility requirements and getting buy-in at all levels of the organization from the beginning will directly impact those difficult feature and enhancement conversations later down the line.
• Global needs requires global collaboration. Something our team was extremely cognizant of was that the Global UX team was all based in the U.S. With the help of our global partners our blind spots quickly came into view. Considerations around cultural and language needs continued to be an opportunity in our work.

While we had big plans for Henry and it's continued growth and expansion for even more potential brands–the library of tools, resources, goverance and documentation is thoroughly laid out so that adoption of this system can be picked up by any team moving forward.

Want to talk? Drop me a line. I'm always interested in hearing about new projects, opportunities, or the latest game you are playing.

[email protected]

Let's be friends.

 LinkedIn Dribbble

Design System

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared library and visual consistency across different pages and platforms.

Role: UX & UI Designer

Client: Leading global tech company

UX/UI Methodologies & Techniques:

Specific component UX research

QA of implementation

Style Guide

Pattern library

UI Inventory

Worked with a leading tech company to create a consistent design system by working closely with a design lead and developers to turn designs into reusable products using Figma as the primary design tool. Primary role was UX/UI designer.

The Challenge

Every time we started a new project or started a new phase of the project we were creating projects from scratch. This would mean setting up a new components library each time.

This meant we were designing the same components over and over again with the style changing each time to suit functionality.

We needed to:

Recreate old components

Gather all old use cases and create use cases for each component

The Benefits

It’s a single source to view components, patterns, and styles.

New changes for the same projects can be redesigned and managed at scale through the design system.

Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally.

Ability to replicate designs quickly by utilising pre-made components and elements.

Reducing the need to reinvent the wheel and eliminating inconsistency.

Reduces wasted designs or development time around miscommunications.

The Approach

We started with creating a style guide for the system. Luckily for us this one had already been done. All we needed to do was implement any new changes or elements to the system and link the existing style guide.

The style guide consisted of:

In-page annotations (how we document and layout each component within the library)

Branding (colours, typography (Web & Mobile, Logos)

Spacing guidelines

Layout grids

Border radius guidelines

These style guides are incorporated into the component library as well, to provide relevant guidance in context.

The whole team got together to create a components list based on the common components used within the projects and any new components that are needed in future. Creating this library did take significant time and resources.

The component library consists of:

Component name:

A specific and unique UI component name, to avoid miscommunication between designers and developers. This needed to be clear so that the components would work as they were supposed to without error.

State changes:

Recommended defaults and the subsequent changes in appearance.

Note making:

Page annotations and descriptions to understand what component you were looking at.

Breakpoints:

Any size indication and breakpoints for the developers.

Documentation

Documentation is always included on the same page as the component this was to explain any use cases that were created. This consisted of:

A clear explanation for what this element is and how it is typically used, occasionally accompanied by dos and don’ts for context and clarification.

Picture examples so that it was clear what we were talking about

Rules of when to use the component and how to use the component

Each component would have variants and each variant would be correctly named so that when it came to publishing the components it made it easy to understand the state changes and what you can turn off and on to get the desired component.

Project Overview

As the first UX/UI designer, I was tasked with establishing platform branding and creating the FieldAgent design system from scratch.

Creator, owner, and maintainer of the FieldAgent Design System.

I used Figma as the platform for our Design System due to its component and variant handling capabilities.

I started at Figma’s design system conference, Schema.

I listened to some of the best design system creators talk about different aspects of creating, maintaining, and overhauling design systems. I had a ton of fun and learned so many invaluable bits of knowledge about design systems.

These are a few of my key takeaways from Schema:

• Design Tokens are the single source of truth to name and store a design decision.
• Utilizing Design Tokens in a Design System to maintain design consistency
• How to structure our design system in a performant way
• Prioritizing consumability of the system over easy maintenance of the system

Managing Complexity

In order to manage the size and complexity of our design system, I divided the system into three atomic design libraries.

The Typography + Color and Iconography Libraries support the largest part of our design system, our Component Library.

Additionally, splitting up the three libraries of the system decreases loading times and network strain caused by having one massive library.

Color + Typography Library

This Library creates the base for our Design System and holds Color + Typography Design Tokens. These Tokens are used throughout our libraries, designs, and in development to maintain design consistency. Design Tokens hold a design style and also documentation notes on how the individual Token should be used.

Color Design Tokens for both light and dark modes have both been verified for accessibility when used with background color tokens of the same type.

This aids in design work and maintaining accessibility in our products, ensuring that designs are accessible without relying on the designer or developer to validate.

Additionally, I chose Roboto as the font for our platform due to its high level of readability and accessibility for all users; in addition to its plethora of font weights.

Iconography Library

The Iconography Library contains all of the icons used throughout the FieldAgent experience.

The Icons are created in their own library so they are easy to swap instances and component overrides, making for a better design system experience.

Component Library

The Component Library is the largest and most used library in the system. It was by far the biggest lift of the project and took the longest amount of time. The Component Library utilizes Design Tokens from the other two Libraries to create components structured like an atom, using with smallest molecules being Design Tokens and breaking up each component to build the smallest parts first, then combine to form a component (the atom)

This means that, for example, a button uses styles from the color, typography, and iconography libraries - and in turn is used by larger parent components, like a modal window. By building the core libraries first, and then the smallest components, changes are simple but easy to control unwanted changes by restricting access to these core libraries.

Maintaining the System

Caring for a Design System and maintaining it over time is just as important as creating it in the first place. An important part of this is thoroughly vetting additions to the design system to maintain integrity of the design system and manage unnecessary expansion.

This means that components only used on one page or in a singular instance were not added to the design system.

The implementation of the design system was a huge success. Not only did it improve our speed and consistency in mockups, but it made the onboarding experience for new team members much easier. The team has saved countless hours of tedious work because we are able to reuse components from the library and adhere to established design guidelines.

• mindful design
• student success
• product design
• ui/ux design
• watch me work
• design careers
• design inspiration

10 Exceptional Product Design Portfolios with Case Study Breakdowns

After working with many designers throughout my own career and helping many more build their job-ready portfolios, there are a few designers that I keep coming back to for inspiration and some that are inspiring a new generation of UI/UX and Product Designers to enter the field.

I've chosen 10 of our favorite UI/UX and Product Designers—a colorful tapestry of digital product architects that have evolved from graphic designers, marketers, architects, engineers and everything in-between. Their unique backgrounds and journey bring something special to our industry and illustrate how we can all do more meaningful, interesting and impactful work:

There are 10 things in particular that make these 10 designers really stand out:

• They have each honed their craft from the bottom up (whether having gone through a traditional academic program, an online course like DesignerUp , or being self-taught).
• They are all at different stages of their careers (some newly minted and others seasoned veterans).
• They continue to learn, grow, push the envelope, document and share their genuine experiences.
• They each hail from a different background (and sometimes non-design industry) that informs who they are and what they work on as a designer.
• Their evolution is apparent in their work.
• They are passionate about the problems they solve and find joy in connecting with the users they serve.
• They are transparent about their processes, thoughtful in their communication about it and not afraid to show what worked and what didn't.
• They have focused portfolios that reveal their unique point of view as a designer.
• They are a diverse group of designers from different cultural, gender and socio-economic backgrounds.
• They have so much to teach us all about design and how to use it to express authenticity and to understand and help others do the same.

Case Study Format:   http://simonpan.com/work/uber/

• The Challenge
• Early Insights
• Reframing the Problem
• The Redesign
• Design Strategy

“In a city as busy as San Francisco, over $1 million was wasted per week because of problematic pickups.”

Madeline Wukusick

Madeline is a graduate of our DesignerUp Product Design course. She was able to create an incredible portfolio working through our curriculum, blended with her background in graphic and data design that set her up for immediate success landing professional design roles.

Case Study Format:

• The Observed Problem
• The Research
• In the Insights
• The proposed How Might We Statements
• Lean Canvas and Product Strategy
• Business Requirements
• The Solutions and MVP Features
• Things that could be improved

"Thanks for helping me work through these iterations—it's been tremendously helpful! You have such a knack for fine-tuning and teasing out subtle themes that I hadn't noticed before. From these comments, I have a better sense of some of my growth areas to work on and ways in which to push myself. It also helped me realize that I am most interested in hybrid roles, or at least roles with a strong visual component. Really grateful to have discovered this course :-)" - Madeline

Not an Italian mobster; Johny Vino is an engineers' designer. I've been a long time admirer of his work every since his mind-blowing animations and micro-interactions arrested me mid Dribbble scroll many years ago. He is a thoughtful, meticulous designer that understands how to align user and business goals all while transmuting conventional interaction patterns into something that is altogether transcendent yet familiar.

Case Study Format: https://johnyvino.com/

Process, Goal and Task Oriented that varies with each project

• What he worked on
• What he aim to accomplish
• Business Goals
• Representation of complex data
• Integration

Humans are not perfect. I like to apply 3 principles to ever product I design to help me focus on that. Fitt's Law, Mimicry, Aesthetic Usability Effect

Steph Parrott

Steph is a product designer based in Toronto. Currently working on Plantd and most recently at Square in San Francisco.

Case Study Format: https://www.stephparrott.com/plantd/

• Roles and Process
• App Overview
• Feature proposal
• Design to Development
• Looking to the future and what's next

"As someone who hasn’t eaten meat in almost 20 years, I’m highly motivated to put in the work to find plant-based options, but for those starting to dabble, how can we except them to do the same?" - Steph

Tom is the co-founder of the community and event series Design Club , and an investor & advisor to Bricklane . He currently works  own clients, helping invent, design, and launch new ventures. Before that he held design leadership roles at fashion and fintech startups, and was as a senior designer at a global agency. Case Study Format: http://tom.pe/gc-dashboard.html

• Summary of the problem space, challenges, project and contribution
• Goal and Problem
• Design Principles applied
• Proposed solution and representation of dashboard and data
• Design frameworks used
• Future considerations

"The problem here is that by trying to create something for everyone, we risked helping no one. Avoiding the design equivelant of an identity crisis became a big focus of mine. I'd do this by finding ways to inject a point of view into the product. By knowing what it wasn't, as well as what it was." - Tom Petty

Want to create an incredible portfolio like these full of amazing case studies to get you hired? Enroll in our Product Design Course today!

Garett MacGillivray

Much like myself and other designers of a particular generation, Aussie/Canadian Garett MacGillivray has been around the block and through the evolution of graphic designer, web design, UI/UX Designers and now landed squarely as a full stack Product Designer.

Case Study Format: https://aucadian.com.au/project/goloop

• Exploration and Ideation
• Component Library
• B2B product interface

I've had many labels throughout my career in the digital industry. It's safe to say that I enjoy crafting digital experiences.

Elise is a Bay Area designer that jumped to the bay from NYU. She comes from an advertising and marketing background and has fine tuned her communication skills and processes vast knowledge of the tech and digital product industry has a whole having been on the broadcasting and marketing side of things.

Case Study Format: http://www.elisefu.com/work-komeeda/

• Impact/Metrics
• User testing
• User research
• Information Architecture
• Implementation
• Major Findings
• Formal User Testing

I was driven to design because I felt excited and rewarding to learn about people’s goals and desires, help them solve problems and make their lives easier.

Latiesha Caston

Latisha is a User Experience Designer passionate about holistic, accessible, and inclusive design, based in Seattle.

Case Study Format: https://www.latieshacaston.com/veggie-grill-online-ordering-experience

• The Problem
• The High-level Goal
• The approach
• Pain Points
• Optimizing flow and improving architecture
• Interaction model breakdown
• Looking to the future

"Our high level goal was to design a holistic order-ahead experience that keeps the core of what we've built, while delivering on opportunities, addressing pain points, and setting the stage for the future." - Latisha

Karolis Kosas

Having recently joined the amazing design team at Stripe as a Product designer, Karolis's portfolio is clean and minimal and his case studies really understand the mental model of the user, getting into their heads and revealing the friction points they are feeling and how he can insert a solution that improves on the experience with compromising the soul of the designer.

Case Study Format: http://karoliskosas.com/cinemaclub/

• prototyping
• Built the product from zero

Visual communication is a self-sufficient organism capable of adapting and evolving based on the input of multiple sources.Acting in such context, the designer is an initiator, establishing methods and boundaries for the system to establish itself as an independent entity.

Rohit Singh

One of o ur very own graduates ! Rohit Singh is an up and coming product designer with a focus on helping early-stage startups and new businesses blossom.

Rohit outlines his process for creating an MVP for his digital product from scratch, which serves as a sort of physical and virtual library for the poorest class of India.

Case Study Format: https://work.khadush.in/booksite-an-online-physical-book-sharing-platform/

• Inspiration
• User Interviews
• Lean Canvas
• Visual Design
• Final Words

I specialize in helping early stage startups validate their riskiest assumptions using leading design methods

After analyzing all of these case studies and working with 100s of designers in our product design course to get them ready for the job application process, we've created our own tried-and-true templates to make it easy for designers to replicate the successful format and structure of these top portfolios using Notion .

Each of these amazing portfolios tells the story of the product designer, their evolution, their process and shows what they bring to the world. But it's not easy doing what they do or knowing exactly how to show and tell who you are as designer. Having a solid design education and getting feedback from the design community is the best way to ensure that your work is up to par and being presented in a way the shows your skills and your worth.

Have a look at our partners' advice over at Pathrise on building a strong UX design portfolio .

The best design resources, in your inbox

Tips, tricks, articles and freebies. It's all happening in the DesignerUp Newsletter. View the archives →

We'll only send the occasional email and promise not to spam.

© Copyright 2022 DesignerUp. All Rights Reserved.

Accessibility in Design Systems and DesignOps

This is a case study about my experience of learning how to research, design and build accessible web components, then scale their impact through a design system.

Scaling accessibility and inclusive design across the largest bank in Canada, RBC. 

Rather than everyone individually fixing the same accessibility problems, a design platform enables an organization to propagate accessible components and documentation at scale. Requirements, standards and best practices are multiplied outwards saving time and money for product teams using the platform.

I spent 3 years helping the design platform team to ensure  RBC.design was built with accessibility and inclusion in mind.

RBC's design platform is a collaborative effort that leverages the wisdom of designers, and developers throughout the organization, working towards the common vision of unifying design and front-end development across RBC. The platform is currently used by various product teams across RBC; the main consumers are designers, developers and quality engineers.

A Space for Creative Growth

How to write case studies for your design portfolio

A good case study on your design portfolio is a great way to make it stand out. Here’s how to get it right

Illustration: Yali Ziv

MORE POSTS LIKE THIS:

Nov 3, 2021

Show and tell: sharing the story behind your creation

Apr 14, 2021

How to write your best personal statement

Feb 4, 2019

How to Write the Perfect Copy for Your Design Portfolio

Limited Time Offer! Save up to 50% Off annual plans.* View Plans

Save up to 50% Now .* View Plans

How To Write A Case Study For Your Design Portfolio

Case studies are an important part of any designer’s portfolio. Read this article to learn everything you need to know to start writing the perfect case study.

When you’re putting together your online design portfolio , design case studies are a great way to showcase your experience and skills. They also give potential clients a window into how you work.

By showing off what you can do and your design process, case studies can help you land more clients and freelance design jobs —so it can be smart to dedicate an entire section of your online portfolio website to case studies.

Getting Started

So—what is a design case study and how do they fit in your portfolio.

Let’s get some definitions out of the way first, shall we? A design case study is an example of a successful project you’ve completed. The exact case study format can vary greatly depending on your style and preferences, but typically it should outline the problem or assignment, show off your solution, and explain your approach.

One of the best ways to do that is to use a case study design that’s similar to a magazine article or long-form web article with lots of images throughout. When building your case study portfolio, create a new page for each case study. Then create a listing of all your case studies with an image and link to each of them. Now, let’s get into the nitty-gritty of creating these case studies.

Choose Your Best Projects

To make your online portfolio the best it can be , it’s good to be picky when choosing projects for case studies. Since your portfolio will often act as your first impression with potential clients, you only want it to showcase your best work.

If you have a large collection of completed projects, you may have an urge to do a ton of case studies. There’s an argument to be made in favor of that, since it’s a way to show off your extensive experience. In addition, by including a wide variety of case studies, it’s more likely that potential clients will be able to find one that closely relates to their business or upcoming project.

But don’t let your desire to have many case studies on your portfolio lead you to include projects you’re not as proud of. Keep in mind that your potential clients are probably busy people, so you shouldn’t expect them to wade through a massive list of case studies. If you include too many, you can never be sure which ones potential clients will take a look at. As a result, they may miss out on seeing some of your best work.

There’s no hard-and-fast rule for how many case studies to include. It’ll depend on the amount of experience you have, and how many of your completed projects you consider to be among your best work.

Use Your Design Expertise

When creating the case study section of your portfolio, use your designer’s eye to make everything attractive and easily digestible. One important guideline is to choose a layout that will enable you to include copy and image captions throughout.

Don’t have your portfolio up and running yet and not sure which portfolio platform is best for you? Try one that offers a free trial and a variety of cool templates that you can play around with to best showcase your design case studies.

If you don’t provide context for every image you include, it can end up looking like just a (somewhat confusing) image gallery. Case studies are more than that—they should explain everything that went into what you see in the images.

Check Out Other Case Study Examples for Inspiration

Looking at case study examples from successful designers is a great way to get ideas for making your case study portfolio more effective. Pay special attention to the case study design elements, including the layout, the number of images, and amount of copy. This will give you a better idea of how the designer keeps visitors interested in the story behind their projects.

To see some great case study examples, check out these UX designer portfolios .

Try a Case Study Template

There are plenty of resources online that offer free case study templates . These templates can be helpful, as they include questions that’ll help you ensure you’ve included all the important information.

However, most of them are not tailored to designers. These general case study templates don’t have the formatting you’ll want (i.e. the ability to include lots of images). Even the ones that are aimed at designers aren’t as effective as creating your own design. That’s why case study templates are best used as a starting point to get you thinking, or as a checklist to ensure you’ve included everything.

How to Write Case Studies

Maintain your usual tone.

You should write your case studies in the same personal, authentic (yet still professional!) tone of voice as you would when creating the About Me section of your portfolio . Don’t get bogged down in too much technical detail and jargon—that will make your case studies harder to read.

Since your case studies are part of your online portfolio, changing your usual tone can be jarring to the reader.

Instead, everything on your portfolio should have a consistent style. This will help you with creating brand identity . The result will be potential clients will be more connected to your writing and get the feeling that they’re learning what makes you unique.

Provide Some Context

Case studies are more effective when you include some information at the beginning to set the stage. This can include things like the date of the project, name of the client, and what the client does. Providing some context will make the case study more relatable to potential clients.

Also, by including the date of the project, you can highlight how your work has progressed over time. However, you don’t want to bog down this part of the case study with too much information. So it only really needs to be a sentence or two.

Explain the Client’s Expectations

Another important piece of information to include near the beginning of your case study is what the client wanted to accomplish with the project. Consider the guidelines the client provided, and what they would consider a successful outcome.

Did this project involve unique requirements? Did you tailor the design to suit the client’s brand or target audience? Did you have to balance some conflicting requirements?

Establishing the client’s expectations early on in the case study will help you later when you want to explain how you made the project a success.

Document Your Design Process

As you write your case study, you should take a look at your process from an outsider’s point of view. You already know why you made the decisions you did, so it may feel like you’re explaining the obvious. But by explaining your thought process, the case study will highlight all the consideration you put into the design project.

This can include everything from your initial plan to your inspiration, and the changes you made along the way. Basically, you should think about why you took the approach you did, and then explain it.

At this point, consider mentioning any tricks you use to make your design process more efficient . That can include how you managed your time, how you communicated with clients, and how you kept things on track.

Don’t Be Afraid to Mention Challenges

When writing a case study, it can be tempting to only explain the parts that went flawlessly. But you should consider mentioning any challenges that popped up along the way.

Was this project assigned with an extremely tight deadline? Did you have to ask the client to clarify their desired outcome? Were there revisions requested?

If you have any early drafts or drawings from the project saved, it can be a good idea to include them in the case study as well—even if they show that you initially had a very different design in mind than you ended up with. This can show your flexibility and willingness to go in new directions in order to achieve the best results.

Mentioning these challenges is another opportunity to highlight your value as a designer to potential clients. It will give you a chance to explain how you overcame those challenges and made the project a success.

Show How the Project’s Success Was Measured

Case studies are most engaging when they’re written like stories. If you followed the guidelines in this article, you started by explaining the assignment. Next, you described the process you went through when working on it. Now, conclude by going over how you know the project was a success.

This can include mentioning that all of the client’s guidelines were met, and explaining how the design ended up being used.

Check if you still have any emails or communications with the client about their satisfaction with the completed project. This can help put you in the right mindset for hyping up the results. You may even want to include a quote from the client praising your work.

Start Writing Your Case Studies ASAP

Since case studies involve explaining your process, it’s best to do them while the project is still fresh in your mind. That may sound like a pain; once you put a project to bed, you’re probably not looking forward to doing more work on it. But if you get started on your case study right away, it’s easier to remember everything that went into the design project, and why you made the choices you did.

If you’re just starting writing your case studies for projects you’ve completed in the past, don’t worry. It will just require a couple more steps, as you may need to refresh your memory a bit.

Start by taking a look at any emails or assignment documents that show what the client requested. Reviewing those guidelines will make it easier to know what to include in your case study about how you met all of the client’s expectations.

Another helpful resource is preliminary drafts, drawings, or notes you may have saved. Next, go through the completed project and remind yourself of all the work that went into achieving that final design.

Draw Potential Clients to See Your Case Studies

Having a great portfolio is the key to getting hired . By adding some case studies to your design portfolio, you’ll give potential clients insight into how you work, and the value you can offer them.

But it won’t do you any good if they don’t visit your portfolio in the first place! Luckily, there are many ways you can increase your chances. One way is to add a blog to your portfolio , as that will improve your site’s SEO and draw in visitors from search results. Another is to promote your design business using social media . If you’re looking to extend your reach further, consider investing in a Facebook ad campaign , as its likely easier and less expensive than you think.

Once clients lay eyes on all your well-written, beautifully designed case studies, the work will come roaring in!

Want to learn more about creating the perfect design portfolio? 5 Designers Reveal How to Get Clients With Your Portfolio 20 Design Portfolios You Need to See for Inspiration Study: How Does the Quality of Your Portfolio Site Influence Getting Hired?

A Guide to Improving Your Photography Skills

Elevate your photography with our free resource guide. Gain exclusive access to insider tips, tricks, and tools for perfecting your craft, building your online portfolio, and growing your business.

Get the best of Format Magazine delivered to your inbox.

10 Inspiring Examples and Expert Tips for Crafting A Powerful Artist Statement

Get Inspired by 10 Fashion Design Portfolios That Capture the Essence of Contemporary Style

Should I Catalog My Art?

Making Your Site Design More Accessible

6 Inspiring Portfolios by Members of BWP (Black Women Photographers)

Honoring Chicana Aesthetics With Photographer Brittany Bravo

2024 Interior Design Forecast: Sustainability, Maximalism, and Smart Integration

*Offer must be redeemed by April 30, 2024 at 11:59 p.m. PST. 50% discount off the subscription price of a new annual Pro Plus plan can be applied at checkout with code PROPLUSANNUAL, 38% discount off the price of a new annual Pro plan can be applied with code PROANNUAL, and 20% discount off the price of a new Basic annual plan can be applied with code BASICANNUAL. The discount applies to the first year only. Cannot be combined with any other promotion.

• Privacy Overview
• Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

20+ Outstanding UX/UI Design Case Studies

Discover an expertly curated collection of 20+ inspirational UX/UI design case studies that will empower you to create outstanding case studies for your own portfolio.

• Comprehensive end-to-end case studies covering research, ideation, design, testing, and conclusions.
• Perfect for designers building portfolios and looking for inspiration to create their own case studies.
• Learn new methods and techniques, improve your understanding, and apply them to your projects.
• Gain insights from the successes and challenges of accomplished designers.

Want to get access to 30+ more case studies including smart tagging system?

Download full version

All case studies included in this collection are sourced from real designers' portfolios and are used for the purpose of learning and inspiration. The original authors retain all rights to their work.

20 of the Best UX Portfolio Examples

So, you’re looking for some UX portfolio inspiration?

Making sure you’ve got an impressive portfolio to your name is important for both fresh-faced UX designers and seasoned industry veterans.

In this article, we’ll try to inspire you with awesome UX portfolio examples and UX design portfolio best practices.

The 20 Best UX Portfolios

Without further ado, here are our picks of the best UX design portfolio examples.

1. Gloria Lo nails the high-impact introduction

Who is gloria lo.

Gloria Lo is a self-taught product designer based in Sydney, Australia. In her own words, she is passionate about improving the lives of others through design and is constantly looking to learn new things every day.

What makes Gloria’s UX design portfolio so great?

One of the first things your UX portfolio should do is introduce you as a designer. Employers and potential clients want to know who you are and what you’re all about—and they should be able to find this out within seconds of landing on your portfolio website.

Gloria has nailed her designer introduction with a three-tiered approach. First, she treats us to a bold, eye-catching headline that describes her in terms of her favorite activities.

In just four simple verbs, we know that Gloria is a creative, multi-talented soul with quite a few hobbies in her repertoire. Oh, and these verbs “light up” in different colors when you hover over them—a nice additional dash of personality!

After such an enticing headline, we’re inevitably curious to know more about Gloria—and sure enough, her portfolio delivers. Directly beneath that unmissable heading, Gloria tells us exactly what she does and what she’s passionate about in just two sentences.

Gloria has mastered the delicate art of brevity while still managing to convey the most important information—not an easy feat!

By now, Gloria has well and truly piqued the viewer’s interest. Luckily, her portfolio also features a comprehensive “About” page, complete with a video, a section detailing her values (with the help of emojis), a very thorough testimonial from a former employer, and links to her music and artwork.

Who is Olivia Truong?

Olivia Truong is a product designer based in Boston, Massachusetts. In her own words, Olivia likes to go out into the world and capture its beauty and weirdness.

What makes Olivia’s UX design portfolio so great?

Above all else, UX designers are problem-solvers. Your UX design portfolio should therefore demonstrate how you identify and tackle a variety of user problems. Olivia’s portfolio does a great job of this, as you’ll see in her Routr case study .

Olivia kicks off her case study by framing the problem in a personal, relatable way. She doesn’t just talk about the “user” problem—she frames it as “our” problem, inviting the reader to step into the user’s shoes, just as she has done.

Next, Olivia explains, in detail, how she set about trying to solve this problem—in a section aptly named “There Must Be Something Out There”. We learn how she scoured the internet and App Store for a solution, only to find that none of the existing solutions fit the bill.

In the section that follows, “Taking The Dive”, Olivia shares the next steps in her problem-solving journey: brainstorming the elements of a successful date.

After thoroughly framing the problem and describing her approach to solving it, Olivia moves onto “The Making Of Routr.” Notice how, even when talking about her solution, Olivia consistently refers back to the original user problem.

Olivia’s portfolio portrays her as a thoughtful problem-solver—granting her huge bonus points in the eyes of any recruiter or potential client. This focus on problem-solving also conveys another essential UX trait: empathy for the user.

When reading Olivia’s case study, you don’t get the feeling that she’s just going through the motions; she’s genuinely engaged in the problem and how she can solve it for the user. That’s the sign of a passionate UX designer!

What can we learn from Olivia Truong?

UX designers are problem-solvers, so make sure your portfolio reflects that. There are two key lessons we can learn from Olivia’s portfolio: first, start each case study by framing the problem in detail, and second, frame the problem in a way that conveys empathy.

Above all, think about the language you use. Don’t just state the problem; relate to it and put some emotion behind it! Olivia describes how planning dates was a “headache” because “coming up with ideas was not the easiest thing to do in our busy lives.”

This is much more personal and empathy-driven than if she’d said “Users struggle to come up with date ideas because they’re so busy.” Last but not least, refer back to the original problem throughout—even when you progress to the solution.

Your UX design portfolio should demonstrate your approach to problem-solving. Kick off each case study by framing the problem in detail, using emotive language to convey empathy. Refer back to the problem throughout.

View Olivia Truong’s full portfolio website

5. Priyanka Gupta is the queen of the unsolicited redesign

Who is Priyanka Gupta?

Priyanka Gupta is a product designer and tech enthusiast based in San Francisco. Aside from creating awesome user experiences, Priyanka is also pretty active on Medium .

What makes Priyanka’s UX design portfolio so great?

Early on in your UX career, you might struggle to fill your portfolio with real projects. As your career progresses, you might look for ways to make your portfolio stand out. So what can you do?

Cue the unsolicited redesign à la Priyanka Gupta.

When Priyanka runs into bad UX, she can’t help but do something about it. Where most of us might just abandon ship and find an alternative product, Priyanka goes above and beyond: she redesigns the entire experience!

So, in addition to real client projects, Priyanka’s UX portfolio also showcases some rather impressive unsolicited redesigns.

One can’t help but be impressed by Priyanka’s initiative and drive. She’s gone out of her way to redesign an entire digital experience, just because she’s passionate about good UX—how cool is that?!

What’s also interesting is how Priyanka chooses to showcase these redesigns. She could just stick to the standard case study format, but as we know, she’s the kind of designer who likes to go above and beyond.

Click on one of her unsolicited portfolio pieces and you’ll be taken to a full-on, published blog post. Nice!

Despite the fact that these unsolicited redesigns are pure “passion projects”, Priyanka lends them the credibility they deserve by documenting her process in detail.

In her redesign of the Sephora iOS app , she starts by framing the problem: “Despite using the app religiously, I had trouble navigating through it. After observing that other people also experienced issues with the app, I pursued this redesign as an opportunity to improve the experience in any way I could.”

What follows is a detailed breakdown of every step she took to redesign the app, from brand analysis, user research, and affinity mapping , right through to persona creation, prototyping, and implementation—not forgetting those all-important visual artifacts that are absolutely crucial to UX storytelling!

What can we learn from Priyanka Gupta?

Priyanka is an experienced UX designer who presumably has plenty of real projects for her portfolio. This doesn’t stop her from conducting unsolicited redesigns when she comes across intolerably bad UX—as she puts it, it’s like an itch she just needs to scratch!

If you’re a new UX designer trying to build up your portfolio, take a leaf out of Priyanka’s book and complete some unsolicited redesigns of your own. This is a great way to demonstrate initiative and show that you’re a proactive designer who is willing to go the extra mile.

Just as Priyanka does, be transparent about the fact that these are unsolicited projects—a simple disclaimer is all you need.

Another valuable takeaway from Priyanka’s portfolio is the power of blogging. Priyanka doesn’t just limit herself to her portfolio website; she also shares her case studies and tips via Medium (where she’s accrued over a thousand followers!).

There are many different ways to share your process, so don’t be afraid to try a multichannel approach.

Unsolicited redesigns are an excellent way to build up your UX portfolio and demonstrate your initiative as a designer. As always, frame the problem, document your process, and tell a good story—and don’t forget to include a disclaimer.

View Priyanka Gupta’s full portfolio website

6. Lola Jiang delivers measurable outcomes and metrics

Who is lola jiang.

Lola Jiang is a California-based UX designer currently working at Google. Lola’s impressive resume includes having worked at YouTube as an interaction designer.

What makes Lola’s UX design portfolio so great?

One of the biggest challenges you’ll face as a UX designer is measuring and demonstrating the impact of your work. You know you’ve improved the user experience, but how do you substantiate that?

Look no further than Lola Jiang’s portfolio. Lola does an extremely important (yet scarce) thing: she puts the measurable impact of her UX design in the context of business needs.

Take her AI Training Platform case study, for example. Following a brief introduction to the project (literally one sentence), Lola offers the project’s outcomes: “The new design reduced task times by 68% and improved users’ subjective satisfaction by 139%.”

It’s immediate and impactful. Lola then takes us through the flow of the project, outlining the scale and scope of the work. She details the challenges, different iterations, and design, and clearly demonstrates the motivations behind decisions.

Lola rounds off her case study with a post-relaunch analysis, using concrete data to validate the final redesign: “With the original design, the set of tasks took 19 minutes. With the new design, the set of tasks took 6 minutes. Nearly 68%. Users’ subjective satisfaction with the new design (4.3/5) was 139% higher than the original design (1.8/5).”

What can we learn from Lola Jiang?

Lola does a great job of showing how she works in a business setting. This is crucial if you want to practice UX for a living, but it’s a trick that many designers tend to miss. While it’s true that you’re there to advocate for the user, it’s also important to recognize that companies have their own goals to meet—and you need to show how UX contributes to that.

If, like Lola, you can demonstrate how your work brings value, you’ll set yourself up for some serious bonus points. If you have data related to the project, this will be easy—but what if there aren’t any concrete metrics to showcase?

Even without data, you can frame your work in a business context. Set a business or product goal at the start of the case study. What do you hope your work will achieve? This is separate from the user goal, but the two should go hand in hand.

For example, creating a more pleasant app experience for the user should help to boost customer retention.

Likewise, establish a few success metrics before you begin. How will you measure the impact of your work? What tell-tale signs will you look out for after you’ve launched or relaunched the product? The best UX designers are those who can advocate for the user while meeting the needs of the business, so try to convey this throughout your portfolio.

Use your portfolio to demonstrate how you add value to the business. Set business goals and success metrics for each case study, and, where possible, include data and tangible outcomes.

View Lola Jiang’s full portfolio website.

7. Daniel Autry features “just the right amount” of portfolio projects

Who is Daniel Autry?

Daniel Autry is a designer, developer, and behavioural researcher based in Charlottesville, Virginia. He is fascinated by the social product space and is currently researching the intersection between technology and mental illness.

What makes Daniel’s UX design portfolio so great?

Daniel Autry’s portfolio features some remarkable work in the mental health space, but that’s not the only reason he’s made it onto this list. Daniel’s portfolio also helps to answer that all-too-common conundrum: What’s the “right” amount of projects to showcase in your UX design portfolio?

Before we go any further, let’s be clear on one thing: There’s no “magic number” when it comes to portfolio projects. Some people will tell you five, others will say three—you might even hear that one is enough!

Daniel has opted to showcase four projects in his UX portfolio, and while we’re not saying that he’s found THE magic number, it is a magic number of sorts.

In other words, Daniel has found the number that works for him: He features just enough projects to showcase his range as a designer while still keeping it limited enough so as not to overwhelm the user—smart UX design in action!

In the space of just four featured case studies, we see that Daniel is a versatile designer who has worked on a variety of projects across a range of sectors—from mental health to financial trading to e-learning. So, it’s not just about how many projects you showcase; it’s just as important to pick a good variety.

Besides his four featured projects, Daniel’s portfolio also includes a section dedicated to “Other Works”. Here, he links to articles he’s written on Medium, additional projects he’s worked on, as well as upcoming endeavors.

This is a great way to divide your portfolio, especially if you’re struggling to decide which of your best work should feature!

What can we learn from Daniel Autry?

Daniel’s portfolio teaches us an important lesson about the “right” number of portfolio projects: There isn’t one! Every UX designer is unique, and your portfolio should reflect that.

Don’t get too hung up on whether you should include three projects or five; focus instead on selecting a handful of projects that best showcase who you are as a designer.

If you want to brand yourself as a versatile, adaptable designer, feature as diverse a variety of projects as possible.

If you see yourself as a specialist in a certain industry, highlight the projects that demonstrate this. At the same time, don’t overwhelm the viewer: a hiring manager looking through your portfolio probably won’t browse through ten UX case studies, so choose wisely!

There is no hard-and-fast rule when it comes to how many projects you should feature in your portfolio. Choose a good enough variety to showcase your skillset, while keeping it minimal enough so as not to overwhelm the user. If you’ve got lots more work you want to showcase, add a separate section.

View Daniel Autry’s full portfolio website

8. Vera Chen highlights the importance of context

Who is Vera Chen?

Vera Chen is a product designer and former Facebook intern. She has a Master’s degree in Human-Centered Design and Engineering, and has also dabbled in singing and acting.

What makes Vera’s UX design portfolio so great?

Not only is Vera’s portfolio a beautiful thing to behold (just look at those illustrations!); it also highlights the importance of context when presenting your UX work.

Vera doesn’t just outline the problem statement for each case study—she steeps it in a solid back story, describing the events that led her there. She also clearly explains her role on each project, who she worked with, and what design and prototyping tools and methods they used.

Just by including these few extra details, Vera paints a clear picture of what the project entailed and how she contributed. Another excellent example of UX storytelling!

Let’s take Vera’s Wedding Library case study , for example. See how she dedicates two whole sections to setting the scene? First, there’s the project background which lays out the scope of the project. Then there’s the context section, a detailed story about newlyweds Murphy and Diana and the frustrations they faced when planning two weddings.

Vera doesn’t just tell us what the problem is. She shows us exactly how it came to light, and in what capacity she was employed to help solve it. By the time we scroll down to Vera’s process, it’s easy to see where each step fits into the overall project.

It’s a bit like reading a novel: you need a little bit of background before you can start relating to the characters and the plot.

What can we learn from Vera Chen?

There are two very simple yet effective takeaways to be had from Vera’s portfolio. First and foremost, provide plenty of background context—this works wonders when telling the story of each case study.

Vera doesn’t start with the problem statement; she sets the scene, describing the people, events, and circumstances that surround and lead up to this particular design challenge. Aim to precede your problem statement with a small paragraph dedicated to “setting the scene”.

Secondly, state your role on each project. What were you commissioned to do? Where did you fit into the overall team? At the same time, listing your teammates is a nice touch; UX design is a highly collaborative field, so it’s important to demonstrate individual value while acknowledging that the end result was a team effort!

For each case study in your UX portfolio, provide as much context as you can. Set the scene with a brief backstory before launching into your problem statement. This includes stating your role on the project and, if necessary, who you worked with.

View Vera Chen’s full portfolio website

9. Zara Drei bedazzles with awesome UX and UI

Who is Zara Drei?

Zara Drei is a London-based UX designer. When she’s not solving problems with beautiful, user-centric web products, you can find her playing around with electronics, making video loops, building ceramic and metal sculptures, or producing electronic music.

What makes Zara’s UX design portfolio so great?

We’ve talked a lot about the importance of showcasing your UX design process. Now it’s time to contemplate the power of beautiful UI! This brings us to Zara Drei’s portfolio—the epitome of digital elegance.

Zara specializes in creating digital products and experiences for luxury, fashion, and beauty brands, and this is reflected in every detail of her portfolio.

In fact, scrolling through Zara’s portfolio is like wandering through the beauty department of a high-end store, or flipping through the pages of a glossy magazine—and that’s no accident.

She has given as much thought to her color palette , typography , and imagery as she has to writing up her case studies and sharing her process. The result? A flawless portfolio that truly makes its mark.

What can we learn from Zara Drei?

Your UX design portfolio is not just a website—it’s part of your personal brand. Like your case studies, the overall aesthetic of your portfolio should tell a story about who you are as a designer. Consider how Zara uses color and imagery to evoke a sense of luxury throughout her portfolio; how can you create a similar effect?

Spend some time figuring out your personal brand. Are you fun and quirky? Artsy and edgy? Corporate and serious? Perhaps you’re all about eco-friendly design.

Once you’ve got a theme in mind, you can start to think about the kinds of colors and imagery that will help to convey this. Just because you’re a UX designer doesn’t mean you can neglect the visual design of your portfolio.

Your portfolio should embody your personal brand, so treat it like any other UX project and give it the high-shine finish it deserves!

Your portfolio website should reflect your personal brand, and visual design plays a crucial role. The best portfolios offer the full package—detailed case studies wrapped in stunning UI design and flawless UX—so aim to tick all the boxes!

View Zara Drei’s full portfolio website

10. Minimalism from Victoria Kazakova

Who is Victoria Kazakova?

Victoria Kazakova is a Polish UX designer, web developer, and photographer. 

What makes Victoria’s UX design portfolio so great?

In the enormous and sometimes confusing online world we trawl through daily, Victoria Kazakova’s UX portfolio wins the prize for clarity and ease of understanding. 

Throughout Victoria’s portfolio, she sticks to a minimalist design palette and clear signage, a simplicity that makes for a delightfully smooth read. 

Better still, words that spring up on command stroll through the portfolio, leading the reader from section to section. 

Charts and graphics displaying her skills and experience are so simple they appear iconic. There’s no chance the reader could feel lost or confused.  

What can we learn from Victoria Kazakova?

When it comes to graphic design, sometimes simplicity is best. The last thing you want to happen when someone reads over your portfolio is for them to feel overwhelmed with data.

Victoria’s portfolio is a great example of how responsive screens can ease the user’s journey through pages of information. 

Don’t be tempted to overload. Stick to two classy fonts and an inoffensive colorway. These simple building blocks can lead the user’s eye as they navigate your work. 

View Victoria Kazakova’s full UX portfolio

11. Yu-Hsuan offers zero-gravity UX

Who is Yu-Hsuan?

Yu-Hsuan is a UX designer, currently working for Google as an interaction designer. 

What makes Yu-Hsuan’s UX design portfolio so great?

Yu-Hsuan’s impressive role at Google means that many of her current projects are “locked” due to non-disclosure agreements. This is a common problem in the UX design community and a hurdle many designers face when putting together their portfolios. 

Yu-Hsuan’s deft solution is to focus on the illustrative side of her UX portfolio, which showcases her passion and side projects as a graphic designer and game designer. 

She also uses her illustrations to depict the otherwise locked aspects of the projects she’s describing. This gives a lovely cohesion with the rest of the content in her portfolio and reduces the jarring effect locked projects can sometimes have. 

The floating designer illustration that seems to hover over the portfolio is very cool and points at a sense of fun and creativity necessary to succeed in illustration and gaming. 

What can we learn from Yu-Hsuan?

Through her illustrations, Yu-Hsuan has subtly displayed her UX skills in her portfolio itself. 

This visual approach means the separate parts of the portfolio hang together perfectly, even when some of the projects are locked off. 

Another tip from Yu-Hsuan is to be approachable in your portfolio. Dropping in the line “Please contact me if you want to go through the case study” gives a real sense of openness, collaboration, and sharing. 

If you can’t show direct evidence of a project, don’t hesitate to get creative. A strong visual style not only shows off your design chops but helps a large portfolio hang together nicely. Also, be approachable!

View Yu-Hsuan’s full UX portfolio

12. A holistic introduction to Cristina Gafitescu

Who is Cristina Gafitescu?

Romania-based Cristina Gafitescu is a junior UX designer with a playful approach to visual design.

What makes Cristina Gafitescu’s UX design portfolio so great?

Cristina’s UX portfolio makes a great first impression as it tells her story in an interesting-to-follow, visually engaging way. 

Her playful page layouts and graphics show Cristina’s panache as an illustrator and designer. They also provide a great backdrop as she offers a holistic introduction to herself. 

Through a post-it note, almost diaristic approach, the reader really gets a feel for what kind of person Cristina is, her education and experience, and what attracted her to UX in the first place. 

That’s not to say this portfolio is totally informal. Cristina also does a great job of showing her processes, identifying problems (with a focus on UX research), solutions, and testing. 

When the temptation may be to opt for oblique, abstract graphics that display your design chops in the coolest terms, save a thought for a more intimate approach. 

Cristina’s portfolio is emotionally honest, charming, and informative. The effect on recruiters—especially those suffering from portfolio fatigue—is likely persuasive. 

View Cristina Gafitescu’s full UX portfolio

13. The spatial awareness of Rucha Moghe

Who is Rucha Moghe?

Rucha Moghe is a UX designer with a background in architecture based in India. 

What makes Rucha Moghe’s UX design portfolio so great?

From start to finish, Rucha’s UX portfolio ticks all the right boxes. It’s visually strong and easy to digest. Her user journey map is smart and in context, and the user flows, wireframes, and usability study are all useful.    

Tehni: A Plant App is an especially great case study and easy to follow. On the whole, Rucha’s portfolio is incredibly strong on user personas. 

As Rucha suggests, her background as an architect provides her portfolio with a great sense of user-centered design principles, spatial awareness, and problem-solving skills transferable to digital spaces. 

No space feels wasted, nothing is jumbled, and the reader never feels lost or confused. This is architectural elegance in portfolio form. 

Reinventing the wheel in your portfolio isn’t necessarily a good idea. Rucha’s portfolio nails the basics: it’s logical with an easy-to-follow narrative that shows how user problems were solved. It’s bold and eye-catching and features great user personas.

View Rucha Moghe’s full UX portfolio  

14. Nguyen Duc Thang’s deep case studies

Who is Nguyen Duc Thang?

Nguyen Duc Thang is a UX designer based in Hanoi, Vietnam. Although just starting in his career, Nguyen Duc Thang knows how to put together a really strong portfolio. 

What makes Nguyen Duc Thang’s UX design portfolio so great?

Much like Rucha Moghe, Nguyen Duc Thang’s UX portfolio gets the basics right despite the difference in experience. 

Nguyen Duc Thang’s branding is particularly strong, with eye-catching graphics consistently holding the content together throughout the document. 

After introducing himself, Nguyen Duc Thang covers his skills and qualifications before launching into extensive case studies. No stone is left unturned in these exhaustive examples, which detail wireframing, prototyping, testing, user personas, visual design, and information architecture. Bravo! 

Don’t scrimp on your case studies. Tell the world how you nailed that project, from top to tail.

View Nguyen Duc Thang’s full UX portfolio

15. Precocious design from Gilbert Christian

Who is Gilbert Christian?

Gilbert Christian is an Indonesian UX design student in the early stages of his career. As Gilbert mentions in his portfolio, he’s open to all manner of part-time, voluntary work, or UX internship programs. 

What makes Gilbert Christian’s UX design portfolio so great?

Despite his relative inexperience, Gilbert’s UX portfolio is extremely easy on the eye, with strong data visualization and imagery leading you from one page to the next.   

Gilbert’s case studies show a maturity beyond his experience, with thorough documentation giving us insight into his work processes. 

Gilbert’s portfolio is stunning and applies the same key UX design principles present in his work. 

If in doubt, build a logical narrative showing how a problem was understood, defined, and solved. 

View Gilbert Christian’s full UX portfolio

16. Valentina Gigli’s bold branding

Who is Valentina Gigli?

Valentina Gigli is a junior UX designer based in Argentina.  

What makes Valentina Gigli’s UX design portfolio so great?

Aside from the bold color scheme and font choice, Valentina keeps things simple with her portfolio. 

After introducing herself, Valentina discusses her “aptitude palette”, before moving on to her design examples. 

Whether you’re a fan of purplish magenta or not, the bold titles and lurid colors certainly make for clear signposting and remain in the mind’s eye for some time after looking away, a key sign of successful branding. 

When it comes to color schemes and fonts, it’s tempting to play it safe. Taking some risks may mean your portfolio pops out from the crowd.

View Valentina Gigli’s full UX portfolio

17. Aleyna Aykanat raises a smile

Who is Aleyna Aykanat?

Akeyna Aykanat is a Turkish UX designer with skills in public speaking, 3D product modeling, and graphic design.

What makes Aleyna Aykanat’s UX design portfolio so great?

Aleyna’s work is in monochrome black and white, with grainy charcoal textures offering depth to each slide. 

The result feels mature and assured—and Aleyna has the content to match it, too. 

After what feels like a serious offering, Aleyna offers something of a UX visual joke at the end of her portfolio, including a fake loading page, before bidding us farewell. 

Overall, it leaves one with the impression of Aleyna as a fun-loving lateral thinker—just the kind of person we’d like on our team. 

Many UX design portfolios are made using guidelines shared amongst tens of thousands of junior designers at bootcamps and other learning establishments. 

These cookie-cutter portfolios can feel a little soulless and may result in recruiters developing a kind of portfolio fatigue. 

As Aleyna shows so elegantly, including a curveball element—in this case, the joke towards the end of her portfolio—shows the portfolio has been assembled with care and craft, not painted by numbers.  

View Aleyna Aykanat’s full UX portfolio

18. Sharon Kravanja’s scrapbook stylings

Who is Sharon Kravanja?

Sharon Kravanja is a Parisian UX designer at the beginning of her career.

What makes Sharon Kravanja’s UX design portfolio so great?

From the outset, Sharon makes no bones about her very junior status as a UX designer. This is reflected in her opening statement and the primitive doodles that annotate and decorate each portfolio page. 

Despite this seemingly youthful approach, Sharon’s visual scrapbook style demonstrates impressive self-branding. Scribbles and sweeps bring cohesion to all the moving parts of the portfolio while playfully communicating Sharon’s self-awareness as an inexperienced but sincere and brave designer. 

Be yourself. A recruiter will sooner remember Sharon’s somewhat youthfully exuberant portfolio over safer designs.

View Sharon Kravanja ’ s full UX portfolio

19. Sophisticated graphics from Anna Hlushko

Who is Anna Hlushko?

Anna Hlushko is a Ukrainian UX designer with a self-professed focus on minimalism. 

What makes Anna Hlushko’s UX design portfolio so great?

Anna Hlushko’s portfolio speaks of a detail-oriented UX designer with serious design chops. 

Modernist typography and dark, grainy hues glue the elements of this portfolio in place. Anna’s graphic design skills are at the higher end of the spectrum, and these pages wouldn’t look out of place in a MoMA brochure.

Beyond the slick exterior, Anna also touches on her approach to tackling stages of work, including research, and details some case studies. 

Play to your strengths. If visual design is your thing, make sure your portfolio pops. This may be the one chance you have to show off your chops. 

View Anna Hlushko’s full UX portfolio

20. Thorough research by Hoàng Kỳ Phong

Who is Hoàng Kỳ Phong?

Hoàng Kỳ Phong is a Hanoi-based UX designer passionate about art and design. 

What makes Hoàng Kỳ Phong’s UX design portfolio so great?

With black and white images projected onto a backdrop of cartridge paper, Hoàng Kỳ Phong’s portfolio has a classic feel. 

Structurally, it is a masterclass in logical layout and digestible design. Extra marks are awarded for detailed market research and survey information. 

Consider the user at every step by demonstrating the process and results.

View Hoàng Kỳ Phong’s UX portfolio

Why do you need a UX design portfolio?

When creating an impressive UX portfolio, it’s important to understand exactly what your portfolio should achieve. What information should your portfolio present? What do you want people to learn about you and your work when they land on your portfolio?

Your UX design portfolio is not just a virtual gallery of all your most beautiful work. It’s a carefully crafted story that offers a behind-the-scenes look at your methods and processes.

How do you tackle different UX design challenges? What’s your approach to solving problems? Are you user-centric?

It should introduce you as a designer and give the viewer an understanding of your work. And, of course, all of these insights should come gift-wrapped in a visually engaging, user-friendly package.

How to build an amazing UX portfolio

Since a portfolio is all about showcasing your work as a designer, it’s obvious that you need to get some experience so that you have work to spotlight in the first place.

But what if you don’t have any industry experience (yet)? Not to worry.

It’s entirely possibly to build a strong portfolio, break into the industry, and succeed without previous UX design experience . One great place to start is by taking a free UX design short course to make sure you’re cut out for this area of the design field.

Next, you can then to enroll in a UX design certification program —preferably one that provides personalized UX mentorship and portfolio reviews.

To see a live portfolio review with a seasoned UX designer, check out this video:

Beyond this, you want to make sure that your portfolio meets these criteria:

• Includes a memorable introduction
• Consists of just the right number of high-quality UX case studies
• Demonstrates reflexivity —shows your ability to reflect and learn
• User-friendly format (practice what you preach)
• Excellent UI design —shows you know what a good, polished final product looks like

To learn more about these five criteria (and how to meet them), read more in this guide: Five Golden Rules to Build a Job-Winning UX Design Portfolio .

Where else can you look for UX design portfolio inspiration?

That just about concludes our selection of awesome UX design portfolios from around the web. We hope this list has given you a feel for some of the most important UX design portfolio best practices and left you feeling suitably inspired.

For more portfolio inspiration, check out websites like Bestfolios , Behance , and Dribbble . For further tips and advice on building your own UX design portfolio, check out these articles:

• 9 Awesome Portfolios From UX Design Bootcamp Graduates
• How I Designed And Built My UX Design Portfolio From Scratch
• 9 Free Websites for Building You UX/UI Portfolio

And finally, if you’re a UX designer looking to specialize, we’ve also written guides to build portfolios for UX writing and UX research . If you spot any further examples of great portfolios while navigating the web, do let us know so we can add them to the list.

Want to keep exploring UX design? Here are a few other articles you might like:

• How to become a UX designer in under one year
• Do you need a degree to become a UX designer?
• 7 best practices to help keep your UX skillset in shape
• How Nikolaos became a UX designer

And if you’re on the hunt for even more UX design inspiration, here are 15 quotes from design masters .

Frequently asked portfolio (FAQ) about UX portfolios

What should be in a UX portfolio?

A UX portfolio should showcase your expertise, understanding, and passion for UX. A portfolio can include elements like case studies, design, personal projects, examples of your process, and should be presented in a visually pleasing way.

How do I start a UX portfolio for beginners?

A beginner’s UX portfolio is a vital tool for entering the industry. Highlight your passion and motivation for the UX design, include your personal approaches, and if you have minimal case studies to present, include personal projects. 

How do I build my UX portfolio?

With the amount of free templates available online, building your UX portfolio has never been easier. However, it’s important to not limit yourself to a standardized approach and showcase your own unique talent. 

First and foremost, choose your projects and case studies carefully. Then present them in a logical narrative that tells a story about your design process. In your descriptions, highlight your motivations and thought processes.

Across your portfolio, focus on showcasing your design skills and problem-solving abilities, and keep your portfolio up-to-date with your latest work. Be sure to customize your portfolio for the audience.

Featured in Awwwards

Sponsored by

Coming soon

The Cursed Library

Sculpting harmony wins site of the month november 2023, longines spirit flyback by immersive garden, vote for site of the month march 2024.

• collectable#collect">
• share#share"> share#link"> share#link"> share#link">
• share#share""> share#link"> share#link"> share#link">

Design System case study from preview#preview" > Keerthi Portfolio

This element was built with...

• design system
• accessibility

Also, you can view more Elements below ...

Portfolio footer

More inspiration, see more related elements from w., lamadone - project portfolio, daniele buffa portfolio, special characters, custom layout, decoded - advertising slideshow projects, scrolling 3d mapping texture - tiger tells..., portfolio of leonid kostetskyi - web designer....

• Sites of the Day
• Sites of the Month
• Collections
• Masterclasses
• Professionals
• Internationals
• Freelancers
• Agencies & Studios
• Awards Honors   New

Skip navigation

World Leaders in Research-Based User Experience

Creating a ux design portfolio case study.

Summary:  A 7-step process to creating a case study for your portfolio: how to describe your design, the UX process that led to this specific user interface, and the business impact of the design.

3 minute video by 2019-11-08 3

• Rachel Krause

Share this article:

• Share this video:

You must have javascript and cookies enabled in order to display videos.

Video Author

Rachel Krause is a Senior User Experience Specialist with Nielsen Norman Group. Her areas of expertise include storytelling, UX in agile, design thinking, scaling design, and UX leadership. She has also planned and conducted research on careers, UX maturity, and intranets for clients and practitioners in numerous industries.

• Share: 

Subscribe to the weekly newsletter to get notified about future articles.

UX Portfolio Updates: A New Year's Resolution

5 minute video

UX Portfolios: What Hiring Managers Look For

4 minute video

UX Portfolios: Preparing for Interviews

2 minute video

UX Portfolios

3 minute video

• 5 Steps to Creating a UX-Design Portfolio
• Portfolios for UX Researchers: Top 10 Recommendations
• Pilot Testing: Getting It Right (Before) the First Time
• Typography Terms Cheat Sheet
• Case Study: Iterative Design and Prototype Testing of the NN/g Homepage

Research Reports

• Intranet Design Annual: 2020
• Intranet Design Annual: 2019
• User Experience Careers

UX Conference Training Course

• UX Basic Training
• Persuasive and Emotional Design
• Omnichannel Journeys and Customer Experience
• Lean UX and Agile
• Personas: Turn User Data Into User-Centered Design