portfolio.
com/case-study
Portfolio
The most comprehensive
Case Study
Guide
With tips and sample content!
Matt Przegietka Read more
This guide
contains
a collection
of “sections”
you could
include in your
case studies.
Sections are
divided into
four groups.
Context
Project Overview
Problem Statement
Research
Design Process
Ideation
User Flow
Wireframing
Prototyping
Visual Design
Validation
User Testing
Iterations and Refinements
Results
Final Design
Impact
Lessons Learned
Next Steps
For each
section you get
suggestions on
what could be
included,
some tips
and example
content.
Important!!!
These are only
suggestions!
You don’t need
to include
everything
mentioned
here.
Include only
the things that
make sense for
your project!
Let’s go!
Better save it for later, too :)
Before design started
Context
S E C T I O N S
Project Overview
Problem Statement
Research
S E C T I O N
Project
Overview
Project Overview
About this section
This section sets the stage for your entire case study.
It provides context and helps readers quickly understand the
scope and significance of your project.
Consider to include
Product name and brief descriptio
Project duration (start and end dates
Team composition (roles and names
Total hours spent on the projec
Budget (if applicable
Tools and technologies use
Key stakeholder
Primary goals and objective
High-level results or outcomes
Project Overview
Tips
Use bullet points for easy scanning of key information
Include a compelling visual (e.g., before/after
comparison or key metric improvement)
Keep it short for quick readability
Add a brief quote from a key stakeholder or user
Project Overview
Example content
Project Streamline: A 4-month redesign of XYZ Corp's e-
commerce platform. Our cross-functional team of 8 (2 UX
designers, 1 UI designer, 2 developers, 1 product manager, 1
data analyst, 1 marketing specialist) dedicated 2,560 hours to
this $300,000 project.
Using Figma for design and React for development, we
aimed to increase conversion rates by 25% and reduce cart
abandonment by 30%.
The project resulted in a 40% increase in sales and a 35%
decrease in cart abandonment within the first quarter post-
launch.
S E C T I O N
Problem
Statement
Problem Statement
About this section
A clear problem statement justifies the need for your design
work. It helps readers understand the challenges you faced
and the potential impact of solving them.
Consider to include
Detailed description of the proble
Root causes identifie
Impact on users and the busines
Market analysis showing the problem's prevalenc
Relevant user demographic
Quantitative data illustrating the problem's magnitud
Qualitative insights from user feedback or support ticket
Business goals tied to solving this problem
Problem Statement
Tips
Use data to quantify the problem if possible
Explain the impact of solving this problem
Use analogies to make complex problems more
relatable
Include a visualization of the problem (e.g., chart
showing abandonment rates)
Tie the problem to broader industry trends or challenges
Problem Statement
Example content
XYZ Corp's e-commerce platform was experiencing a 65%
cart abandonment rate, translating to an estimated $2M
annual revenue loss.
Analysis revealed that 70% of abandonments occurred
during the checkout process, with users citing a
'complicated and time-consuming' experience.
The problem disproportionately affected mobile users (80%
of our traffic) and was particularly acute for first-time
customers.
Solving this issue was projected to increase revenue by 30%
and improve customer retention by 25%.
S E C T I O N
Research
Research
About this section
This section demonstrates your data-driven approach and
shows how you gained insights to inform your design
decisions. It adds credibility to your process and outcomes.
Consider to include
Detailed description of research methodologies use
Sample sizes and demographics for each research metho
Key findings from each research phas
User personas develope
Journey map
Competitive analysis result
Market trends identifie
Technology constraints and opportunitie
Synthesis of research finding
How research insights translated into design requirements
Research
Tips
Use a mix of qualitative and quantitative research
methods
Present findings visually (e.g., charts, user personas)
Include a brief description of any unique or innovative
research methods you used
Consider adding a timeline of your research process
Use data to quantify the problem if possible
Research
Example content
Our research phase included
20 in-depth user interviews (10 frequent users, 10 abandoned cart users
Analysis of 10,000 survey response
Heatmap and session recording analysis of 100,000 user session
Competitive analysis of 5 leading e-commerce platform
Review of 1,000 customer support tickets
Key findings
80% of users found our payment options limited compared to
competitor
Mobile users spent 40% more time on checkout than desktop user
First-time users were 3x more likely to abandon carts than returning
customer
70% of users expressed frustration with form field error
Competitors offering guest checkout had 20% higher conversion rates
These insights led us to prioritize mobile optimization, expanding payment
options, implementing guest checkout, and improving form validation in our
redesign.
Heart of your case study
Design
Process
S E C T I O N S
Ideation
User Flow
Wireframing
Prototyping
Visual Design
S E C T I O N
Ideation
Ideation
About this section
The ideation phase demonstrates your creative problem-
solving skills and ability to generate innovative solutions.
It shows how you translate research insights into potential
design directions and how you collaborate with your team to
explore various possibilities.
Consider to include
Ideation techniques used (e.g., brainstorming, mind
mapping, crazy eights
Participants involved in ideation (roles and expertise
Number of ideas generate
Criteria for evaluating and selecting idea
How you incorporated research insights into ideatio
Any constraints or parameters set for ideatio
Sketches, photos, or digital records from ideation sessions
Ideation
Tips
Mention specific ideation techniques used (e.g.,
brainstorming, mind mapping)
Include sketches or photos from ideation sessions
Include examples of ideas that didn't make the cut and
explain why
Show how you combined different ideas to create novel
solutions
Describe any frameworks or methodologies (e.g., Design
Thinking) that guided your ideation
Ideation
Example content
Our ideation phase consisted of
A 2-day design sprint with all 8 team member
3 rounds of crazy eights exercises, generating 192 rough
concept
An async Miro board where team members contributed
ideas over a wee
A 4-hour workshop with key stakeholders to review and build
upon initial concepts
We used dot voting to narrow down to the top 5 concepts, which
we then evaluated against our research insights and project
goals.
The winning concept, 'SingleSwipe Checkout,' emerged as the
frontrunner for its potential to dramatically simplify the mobile
checkout experience.
S E C T I O N
User Flow
User Flow
About this section
User flows illustrate your understanding of the user's journey
and decision-making process. They showcase your ability to
simplify complex processes and create intuitive paths for
users to accomplish their goals.
Consider to include
Detailed user flow diagrams for primary user journey
Before and after user flows to highlight improvement
Decision points and their implication
Error states and recovery path
How the flow addresses user pain points identified in
researc
Rationale behind major changes in the flow
User Flow
Tips
Use flow diagrams to visualize the user journey
Highlight critical decision points in the flow
Use color coding to highlight different user paths or
decision points
Include annotations explaining the rationale behind key
flow decisions
Consider showing how the flow evolved over time with
multiple iterations
User Flow
Example content
We mapped out the entire user journey from product discovery to
post-purchase. The checkout process, our primary focus, was
reduced from 7 steps to 3
Cart review (with edit capabilities
Shipping and payment info (with smart defaults and guest
checkout option
Order confirmation
Key improvements
Implemented a slide-out cart accessible from any pag
Integrated a 'buy now' button for single-item purchase
Added progress indicators to provide context within the flo
Designed a persistent floating 'help' button linked to live chat
A/B testing of the new flow against the old showed a 45%
reduction in time-to-purchase and a 30% decrease in cart
abandonment rate.
S E C T I O N
Wireframing
Wireframing
About this section
This phase demonstrates your ability to translate abstract
ideas into concrete layouts, prioritize content, and create a
solid foundation for the user interface. It also shows your
iterative process and how you incorporate feedback at an
early stage.
Consider to include
Low, medium, and high-fidelity wireframe
Annotations explaining key elements and their function
Rationale behind layout decision
How wireframes evolved based on feedbac
Responsive design consideration
Information architecture decision
Content strategy reflected in wireframe
Accessibility considerations at the wireframe stage
Wireframing
Tips
Present before-and-after wireframes to show evolution
Explain key layout decisions
Show progression from low to high fidelity wireframes
Include notes on how wireframes address specific user
needs or pain points
Consider adding a section on how you gathered and
incorporated feedback on wireframes
Wireframing
Example content
I created wireframes for 12 key screens, focusing on the 3 core
checkout steps. Starting with low-fidelity sketches, we iterated
through mid-fidelity grayscale wireframes to high-fidelity mockups.
Key decisions
Moved the price breakdown to a collapsible section, reducing
visual clutte
Implemented a sticky header with cart summary for easy
referenc
Designed expandable sections for shipping options and
payment methods to simplify the visual layou
Created a simplified mobile view with a single-column layout
and larger touch targets
I conducted 3 rounds of internal reviews and 2 rounds of user
testing on the wireframes, iterating based on feedback. The final
wireframes achieved a 90% task completion rate in usability tests,
compared to 60% for the original design.
S E C T I O N
Prototyping
Prototyping
About this section
This phase showcases your ability to create realistic
simulations of the final product, test interactions, and gather
valuable feedback before development. It demonstrates
your technical skills and your commitment to validating
design decisions through hands-on user interaction.
Consider to include
Prototyping tools used and wh
How prototypes were used (e.g., user testing, stakeholder
presentations
Iterations of prototypes and what prompted change
Any technical constraints considered in prototypin
Collaboration between design and development during
prototypin
Links to interactive prototypes (if available)
Prototyping
Tips
Mention the tools used (e.g., Figma, Adobe XD)
Provide a link to an interactive prototype if available
Explain how prototyping helped you uncover and solve
design challenges
Include any interesting technical challenges you faced in
prototyping and how you overcame them
Consider adding a brief video showcasing key
interactions in your prototype
Prototyping
Example content
I used Figma for our prototyping process, creating three main
prototypes
Low-fidelity clickable prototype for initial user flow validatio
Mid-fidelity prototype with basic interactions for internal review
High-fidelity prototype with micro-interactions and real data for
final user testing and stakeholder approval
Key features of our final prototype
Fully responsive design simulating both mobile and desktop
experience
Real-time form validation with inline error message
Animated transitions between checkout step
Integration with sample product data to create realistic scenarios
I conducted 5 rounds of user testing with iterative improvements
between each round. The prototype was also used in two
stakeholder presentations, where I demonstrated the full user
journey from product selection to order confirmation.
S E C T I O N
Visual
Design
Visual Design
About this section
It demonstrates your ability to create visually appealing interfaces
that reinforce the product's brand, improve usability, and evoke the
right emotional response from users. It showcases your skills in
color theory, typography, iconography, and creating cohesive
design systems that ensure consistency across the product.
Consider to include
Color palette with accessibility consideration
Typography choices and hierarch
Icon design and usag
Design system or UI kit develope
Visual design principles followe
How the visual design supports brandin
Responsive design consideration
Examples of key UI components (e.g., buttons, forms, cards)
Visual Design
Tips
Include your color palette and typography choices
Show examples of key UI components (e.g., buttons,
forms)
Explain how your visual design choices support the
overall user experience and business goals
Include before/after comparisons to highlight the impact
of your visual design changes
Consider adding a section on how you ensured
consistency across different parts of the product
Visual Design
Example content
Our visual design phase focused on creating a clean, trustworthy, and
easy-to-use interface
Color Palette: We refined the brand's existing colors, ensuring all color
combinations met WCAG AAA standards. We introduced a softer blue
(#3B82F6) as the primary action color to inspire trust and calmness
during checkout
Typography: Adopted Inter for its excellent readability on screens. We
established a clear typographic hierarchy with 6 text styles for
consistent information display
Icons: Designed a custom icon set of 30 icons, focusing on universally
recognizable symbols to aid quick comprehension
UI Components: Created a comprehensive UI kit with 50+ reusable
components, ensuring consistency across the platform
Responsive Design: Developed adaptive layouts for mobile, tablet, and
desktop, with special attention to touch targets on mobile devices.
We conducted an A/B test of our new visual design against the old,
resulting in a 28% increase in user-reported ease of use and a 15%
decrease in time spent on the checkout page.
Does it work?
Validation
S E C T I O N S
User Testing
Iterations and Refinements
S E C T I O N
User
Testing
User Testing
About this section
This section validates your design decisions and
demonstrates your commitment to user-centered design.
It shows how you iterate based on real user feedback.
Consider to include
Testing methodologies used (e.g., A/B testing, usability
studies, beta testing
Participant demographics and how they were selecte
Tasks or scenarios given to user
Metrics used to measure success (e.g., time-on-task, error
rates, satisfaction scores
Tools used for testing and analysi
Key findings from each round of testin
How findings were incorporated into design iteration
Unexpected insights or user behaviors observed
User Testing
Tips
Describe your testing methodology (e.g., A/B testing,
usability studies)
Include quotes or video clips from user testing sessions
Use a mix of quantitative and qualitative data to tell a
compelling story
Include both positive and negative feedback to show
objectivity
Use visualizations (e.g., charts, heatmaps) to present
testing data
Consider adding a section on how you prioritized which
feedback to act on
User Testing
Example content
Our user testing strategy included
5 rounds of moderated usability testing (8 participants each
round
An unmoderated usability study with 100 participants using
UserTesting.co
A/B testing of key features with 10,000 live user
2-week beta testing period with 500 loyal customers
Key metrics
Task completion rat
Time-on-tas
Error rat
System Usability Scale (SUS) scor
Net Promoter Score (NPS)
User Testing
Findings and Actions
Round 1: Users struggled with form field validation. Action:
Implemented real-time validation with clear error messages
Round 2: 30% of users missed the guest checkout option.
Action: Increased visibility and explanation of guest checkout
Round 3: Users wanted order summary always visible. Action:
Added a sticky order summary on desktop and collapsible
summary on mobile.
A/B testing revealed that the new design reduced average
checkout time from 4 minutes to 90 seconds. Beta testing
resulted in a 40% increase in our NPS score.
Quote from user testing:
'This new checkout is so fast, I almost forgot I was spending
money!' - Sarah, 28, frequent online shopper.
S E C T I O N
Iterations
and
Refinements
Iterations and Refinements
About this section
This section showcases your ability to take feedback and
improve your designs. It demonstrates your flexibility and
commitment to creating the best possible solution.
Consider to include
Major design iterations and the rationale behind eac
Before-and-after comparisons of key screens or flow
How user feedback influenced each iteratio
Challenges encountered during iterations and how they
were overcom
Stakeholder feedback and how it was incorporate
Performance improvements across iteration
Timeline of iteration
Any features or ideas that were discarded and why
Iterations and Refinements
Tips
Use before-and-after comparisons to illustrate changes
Explain the rationale behind major design pivots
Use a timeline to show the progression of your design
Include mini case studies of specific features that
underwent significant iteration
Consider adding reflections on what you learned during
each iteration
Iterations and Refinements
Example content
Our design went through 3 major iterations:
Iteration 1: Focus on simplifying the checkout flo
Reduced steps from 7 to
Introduced a progress indicato
Result: 15% reduction in cart abandonment
Iteration 2: Improving mobile experienc
Redesigned for a single-column layout on mobil
Increased touch target size
Implemented collapsible sections for order summary and
payment option
Result: 25% increase in mobile conversions
Iterations and Refinements
Iteration 3: Enhancing trust and security perceptio
Added security badges and explanation
Improved error messaging and form validatio
Introduced a persistent chat support optio
Result: 20% increase in first-time customer conversions
We also explored a radical single-page checkout design, but
user testing showed it overwhelmed users with too much
information at once. We ultimately discarded this approach in
favor of our final 3-step process.
Almost done
Results
S E C T I O N S
Final Design
Impact
Lessons Learned
Next Steps
S E C T I O N
Final
Design
Final Design
About this section
This is where you showcase the fruits of your labor. It's the
payoff for the reader and demonstrates the value you've
created through your design process.
Consider to include
High-quality screenshots or mockups of key screen
Interactive prototype (if possible
Walkthrough of the main user flo
Explanation of key features and how they solve the initial
proble
Design system or style guid
Responsive design examples (mobile, tablet, desktop
Accessibility feature
Performance optimization
How the final design meets project goals and user needs
Final Design
Tips
Use high-quality screenshots or mockups
Highlight how the final design addresses the initial
problem statement
Create a narrative that walks the reader through the
main user journey
Include callouts that tie specific design elements back to
user needs or business goals
Consider adding a section on how the final design
pushes boundaries or innovates in your industry
Final Design
Example content
Our final design, 'SwiftCheck,' revolutionizes the checkout
experience
One-page overview with collapsible sections for shipping,
payment, and order summar
Real-time form validation with inline error message
Guest checkout option prominently displaye
'Express checkout' with digital wallet integratio
Persistent chat support butto
Mobile-first design with large, easy-to-tap buttons and input
Clear security indicators and trust signals throughout
The new design reduces the average checkout time by 60%
while increasing the sense of security and trust. It directly
addresses the cart abandonment issues identified at the project
outset by simplifying the process and providing constant
support and reassurance to users.
Final Design
[Include high-quality screenshots or an embedded interactive
prototype here]
Our responsive design ensures a seamless experience across
devices: [Include screenshots showing the design on mobile,
tablet, and desktop]
Accessibility features include
High contrast mod
Screen reader compatibilit
Keyboard navigation support
Performance optimizations resulted in a 40% reduction in page
load time, crucial for our mobile users with varying network
conditions.
S E C T I O N
Impact
Impact
About this section
This section proves the value of your work. It ties your design
decisions to concrete business outcomes and user
satisfaction.
Consider to include
Before-and-after comparisons of key metric
Business impact (e.g., revenue increase, cost savings
User satisfaction score
Adoption rates of new feature
Performance improvements (e.g., load times, conversion
rates
Customer feedback and testimonial
Impact on customer support (e.g., reduction in support
tickets
Awards or recognition received
Impact
Tips
Use before-and-after comparisons of key metrics
Use data visualization to make your results more
impactful
Include both short-term results and projected long-term
impact
Consider adding a section on unexpected positive
outcomes
Impact
Example content
Three months post-launch, 'SwiftCheck' has exceeded all
expectations
Cart abandonment rates decreased by 35% (goal: 30%
Mobile conversion rate increased by 50
Average checkout time reduced from 4 minutes to 80 second
Customer satisfaction score improved from 3.2 to 4.8 out of
70% of users now opt for guest checkout, up from 20
Support tickets related to checkout issues down by 60
Overall revenue increased by 25% compared to the same period
last year
User Testimonial: 'The new checkout is so fast and easy, I actually
enjoy shopping here now!' - Mark S., repeat customer
The project has been featured in UX Booth and received an
Honorable Mention on Awwwards for e-commerce design.
[Include a data visualization showing key metric improvements]
S E C T I O N
Lessons
Learned
Lessons Learned
About this section
This section demonstrates your ability to reflect and grow. It
shows that you're thoughtful about your process and always
looking to improve.
Consider to include
Unexpected challenges and how they were overcom
What worked well in the proces
What could have been improve
Insights gained about users or the problem spac
Team dynamics and collaboration insight
Time management and project planning lesson
Technical limitations encountered and how they were
addresse
Skills or knowledge gained during the projec
How this project will inform future work
Lessons Learned
Tips
Be honest about mistakes or missteps - it adds
credibility
Include both personal and team learnings
Consider adding a section on how these lessons will
inform your future work
Lessons Learned
Example content
Key lessons from the 'SwiftCheck' project
Underestimated the complexity of integrating multiple payment
gateways, leading to a 2-week delay. In future, I'll involve engineering
teams earlier in the payment feature design process
The cross-functional 'war room' approach, where all team members
worked in the same space for key phases, dramatically improved
communication and problem-solving speed
Regular user testing (every 2 weeks) allowed me to catch and fix
issues early, saving time and resources in the long run
I initially focused too much on desktop, underestimating mobile usage.
Future projects will be mobile-first from day one
The design system we created midway through the project
significantly sped up our workflow. I'll start with a basic design system
in future projects
Learned the importance of designing for edge cases early. Several
late-stage issues could have been avoided with more comprehensive
initial user flow mapping.
These insights have already informed my approach to the upcoming
account management redesign project.
S E C T I O N
Next Steps
Next Steps
About this section
This section shows that design is an ongoing process.
It demonstrates your strategic thinking and ability to plan for
the future.
Consider to include
Short-term improvements and bug fixe
Mid-term feature enhancement
Long-term strategic visio
Prioritized list of potential new feature
Plans for expanding to new user segments or market
Technical debt to be addresse
Further research or testing planne
How future plans tie to business goals or user need
Potential challenges or risks in future developmen
Timeline for upcoming releases or updates
Next Steps
Tips
Tie future plans back to current user needs and business
goals
Include a mix of low-hanging fruit and ambitious long-
term goals
Consider adding a section on potential risks or
challenges in future development
Next Steps
Example content
Based on the success of 'SwiftCheck' and ongoing user
feedback, our roadmap includes:
Short-term (Next 3 months)
Implement minor UI tweaks based on heatmap analysi
Add support for 3 new payment method
Optimize page load times, aiming for a 20% improvement
Mid-term (3-6 months)
Develop a 'one-click reorder' feature for returning customer
Create a mobile app based on the success of our responsive
web desig
Implement an A/B testing framework for ongoing
optimization
Next Steps
Long-term (6-12 months)
Expand to international markets, adding multi-currency
support and localizatio
Integrate AI-powered product recommendations in the
checkout proces
Develop a loyalty program to increase customer retention
These plans aim to further reduce friction, increase conversion
rates by an additional 15%, and expand our user base by 30%
over the next year.
Potential challenges include technical complexity in international
expansion and ensuring GDPR compliance for the AI
recommendation system.
Creating a
comprehensive case
study not only
showcases your work
but also demonstrates
your strategic thinking,
problem-solving skills,
and ability to drive
real-world impact
through design.
Remember these key
points as you craft your
case study:
TIP #1
Tell a story:
Guide your reader
through your design
journey, complete with
challenges, victories,
and lessons learned.
TIP #2
Show, don't just tell:
Use visuals extensively
to illustrate your points
and make your case
study engaging.
TIP #3
Be specific:
Use concrete examples,
data points, and user
quotes to add credibility
to your narrative.
TIP #4
Highlight your process:
Show your approach
to problem-solving,
not just the final
outcome.
TIP #5
Demonstrate impact:
Tie your design decisions
to business outcomes
and user satisfaction.
TIP #6
Be honest:
Discuss challenges and
how you overcame them.
It adds authenticity to
your case study.
TIP #7
Keep it scannable:
Use headers, bullet
points, and visual breaks
to make your case study
easy to navigate.
Found
Comment
this Like
useful?
Repost
Save for later
Follow Matt Przegietka
