UI/UX Design: Figma Skills and Your First Case Study

A UI/UX case study is a short write-up that shows how you solved a design problem: what the problem was, who it affected, what you tried, and why your final screens look the way they do. For beginners, the case study matters more than polished screens, because it proves you can think like a designer. This guide walks you through the Figma skills you need first and a simple structure for your first case study, even if you have never had a client.

If you want guided practice with feedback from an instructor, our UI/UX designing course in Faisalabad is one option. But you can start on the basics below today, on your own.

Why a case study matters more than pretty screens

Many beginners fill their portfolio with attractive app screens copied from Dribbble shots or YouTube tutorials. The problem is that anyone reviewing your work, whether a software house in Faisalabad, a remote team or a freelance client, cannot tell whether you designed those screens or followed a tutorial step by step.

A case study answers the questions reviewers actually care about:

  • Can you understand a user’s problem before jumping into colours and fonts?
  • Can you organise information so people find what they need quickly?
  • Can you explain your decisions in clear, simple language?
  • Can you take feedback and improve a design?

One honest, well-explained case study usually says more about you than ten disconnected screens.

Figma skills to learn before your first case study

You do not need to master every Figma feature. Focus on the skills you will use in almost every project.

SkillWhat it meansWhy it matters for a case study
Frames and basic shapesSetting up mobile or desktop screens and placing elementsEvery wireframe and final screen starts here
Auto LayoutElements that resize and space themselves automaticallyMakes buttons, cards and lists consistent and easy to edit
Components and variantsReusable buttons, inputs and cards with different statesShows you understand design systems, not just one-off screens
Text and colour stylesSaved fonts, sizes and colours used across the fileKeeps your design consistent and readable
Grids and spacingColumns and a spacing scale (for example 4 or 8 point)Screens look organised and professional
PrototypingLinking screens so clicks and taps move between themLets you test the flow with real people

A practical way to learn these is to rebuild two or three screens from an app you use daily, such as a food delivery or ride-hailing app, purely as practice. Do not put these copies in your portfolio as your own work; use them only to learn the tools.

Choosing a beginner-friendly case study topic

Your first case study should be small enough to finish in two to four weeks. Pick a problem you can observe and talk to real people about. Some local ideas that work well:

  • A booking flow for a Faisalabad salon or clinic that currently takes appointments only by phone or WhatsApp.
  • An order screen for a small home bakery or clothing seller who sells through Instagram and loses track of orders.
  • A timetable or assignment tracker for university students at institutions such as Government College University Faisalabad (GCUF) or The University of Faisalabad (TUF).
  • A redesign of one confusing screen in a public website or app, explaining clearly that it is an unofficial concept.

Avoid huge topics like “redesign a whole banking app”. You will run out of time and the case study will stay unfinished.

A simple structure for your first UI/UX case study

Follow these steps in order. Each one becomes a section of your case study.

  1. Problem statement. Write two or three sentences: who has the problem, what the problem is, and why it matters. Example: “Customers of a small bakery order through Instagram messages. Orders get lost and customers do not know when their cake will be ready.”
  2. Your role and timeline. Be honest: “Personal practice project, 3 weeks, solo.” Reviewers respect honesty far more than inflated claims.
  3. Research. Talk to three to five real people who face the problem. Ask open questions, such as “Tell me about the last time you ordered a cake.” Note what frustrates them. Also look at two or three existing apps that solve a similar problem.
  4. Key findings. Summarise what you learned in three to five short points. These findings should drive your design decisions.
  5. User flow. Draw the steps a user takes from start to finish, for example: open app, choose cake, pick date, confirm order, receive confirmation.
  6. Wireframes. Make simple grey boxes in Figma first. Focus on layout and order of information, not colour.
  7. Visual design. Apply your text styles, colours and components. Keep it clean and readable.
  8. Prototype and testing. Link your screens and ask two or three people to complete a task while you watch quietly. Note where they hesitate.
  9. Changes after testing. Show one or two “before and after” improvements. This is often the most convincing part of a case study.
  10. Reflection. Write what you would do next with more time, and what you learned.

Presenting your case study

How you present the work affects whether people read it. Keep these points in mind:

  • Lead with the outcome. Put one strong final screen and a one-line summary at the top.
  • Use short paragraphs and headings. Reviewers skim. Make each section easy to scan.
  • Show process images. Include photos of sketches, the user flow, wireframes and final screens.
  • Explain every major decision. “I moved the date picker earlier because three of the five people I spoke to said delivery date was their first concern.”
  • Do not invent results. If it was a practice project, do not claim it increased sales or conversions. Say what you tested and what you observed.

You can host your case study on Behance, a simple Notion page, or a portfolio website. Share the Figma prototype link as well so reviewers can click through it. If you are also building a broader design portfolio, our guide on graphic design portfolio pieces clients ask for explains how to keep a portfolio focused.

Checklist before you publish

  • Problem statement is clear in two or three sentences
  • Your role, timeline and project type (practice, concept or real client) are stated honestly
  • At least three real people were spoken to, and findings are summarised
  • User flow and wireframes are included
  • Final screens use consistent text styles, colours and spacing
  • Prototype link works and opens without a login request
  • At least one change made after testing is shown
  • Case study can be skimmed in under five minutes

Common beginner mistakes

  • Starting with colours. Colour and fonts come after the flow and layout are settled.
  • Skipping real users. Interviewing yourself is not research. Even three short conversations help.
  • Writing too much. A case study is not a thesis. Cut anything that does not explain a decision.
  • Never finishing. A finished small project is better than an unfinished big one.

When you start applying for internships or junior roles, add your case study link near the top of your CV. Our post on writing an IT CV with no experience explains how to present projects in place of work history.

How CYBEX can help

CYBEX School of IT Professionals has been teaching practical IT skills in Faisalabad since 2017. We are PSDA-registered and NAVTTC-accredited, and our classes take place at P23 Chanab Market, Susan Road, Faisalabad.

In our UI/UX designing course, you learn in a classroom with an instructor who can review your wireframes and screens as you work. Feedback like this is often what beginners miss when they learn only from videos. Ask us on WhatsApp what the current course outline covers. For the current fee and class timings, message us on WhatsApp at 0302 7833985.

Common questions

Do I need to know coding to learn UI/UX design?
No. UI/UX design focuses on research, layout and user flows, and Figma does not require coding. A basic understanding of how websites and apps are built can help you talk to developers, but it is not required to start.

Is the free version of Figma enough for a beginner?
For learning and your first few portfolio projects, the free plan is usually enough. Check Figma’s current plan details, as limits can change over time.

Can I make a case study without a real client?
Yes. Most beginners start with personal or concept projects. The key is to be honest about it and still talk to real users about the problem you chose.

How many case studies should a beginner portfolio have?
Two or three well-explained case studies are a good target. Quality and clear thinking matter more than the number of projects.

Start your first case study

Pick one small local problem this week, talk to three people about it, and sketch the flow on paper before opening Figma. If you want structured classes and instructor feedback on your work, see the UI/UX designing course at CYBEX or message us on WhatsApp to ask about the course and current fee.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top