If you are new to UI/UX design and want a medium to show off your works, to get noticed by recruiters. You need to upload on Behance.

So in this article, I will show you step-by-step process of creating a Figma UI/UX case study that you can upload to Behance.

Step One - Dimensions

This is very crucial, in fact it is the whole reason that I wrote this article. I went crazy trying to find the dimensions to use to create my case-study.

• Artboard: Draw a Desktop frame in Figma with a width of 1400px and keep increasing the height as you go.

• Thumbnail: Draw a small frame with a width of 1080px and a height of 845px

Step Two - Details

The way you arrange your work is also important. What goes in place and where they are placed is important.

1. A Project overview - This is a very brief description of the project. what are you trying to achieve by carrying out this case study. Example: “Uber is a digital gateway designed to let Nigerians access a ride-hailing service quickly and easily”.

2. Details - Here you talk about things such as

   • role: UI/UX designer, User Research, Wireframes, User Flow

   • timeline: 3 weeks (21st of March - 11th of April).

   • tools used: Miro, Figma, Adobe Photoshop, Sketch

3. Problem Statement - This is the section where you outline the problems that you are trying to solve. What personal problems have you identified from your user research. Here are some examples.

   • “Navigation Issues: No GPS; getting lost or misdirected was common.”

   • “Poor Rural Access: Remote areas had almost no public transport or taxi coverage.”

   • “Inconsistent Pricing: No standard fare; drivers often overcharged, especially outsiders.”

4. Solution Ideation - This is where you write out the possible solutions that your app can provide to the issues listed above.

   • “GPS Navigation: Track driver location, estimated arrival, and live route updates.”

   • “Expanded Service Coverage: Partner with local drivers and bike owners to operate in remote areas.”

   • “Fare Transparency: See fare estimates upfront before confirming a ride.”

5. User Personas - This is where you present potential users of your app; it contains things such as

   • user background (a small yet detailed information about the user),

   • user story (a backstory as to what maybe the user was trying to achieve)

   • user pains (what are pain points has that individual experienced)

   • user needs (what are the things he hopes to achieve after using the app)

   • Post-test interview: Ask participants about their overall satisfaction, any difficulties they encountered, and suggestions for improvement.

6. User Flow - This section entails how users would navigate through your mobile app. from entry till service is rendered. (Also information architecture).

7. Lo-Fidelity Wireframes - These are a small mock-up yet detailed, of how the mobile app should look like. Usually without colors and images.

8. Typography & Colors - You tell us what fonts, icons and colors you are using throughout your project.

9. Hi-Fidelity - Finally!! the crux of the project, where you get to present your mobile app.

10. Thanks and Well-wishes

References:

How to make figma design and post to dribbble

Design case study for Behance using Figma UI / UX design

FOLLOW ME 💖