Unleashing Design Superpowers: The Ultimate Guide to Design Systems and Jaw-Dropping Case Studies for UI/UX Newbies

The Lady In UX
Bootcamp
Published in
6 min readJun 3, 2023

Welcome to the world of UI/UX design, where design systems and captivating case studies hold the key to unlocking your success. As a beginner, it’s natural to feel overwhelmed when trying to understand design systems or struggling to create impactful case studies for your portfolio. But fear not! In this comprehensive guide, we will demystify design systems and provide you with foolproof steps to craft compelling case studies. By the end of this article, you’ll be equipped with the knowledge and tools to confidently navigate these areas, even if you’re a complete newbie in UI/UX design.

Decoding Design Systems

Imagine you have a box of colourful building blocks. Each block has a specific purpose, and when you put them together, you create something amazing. That’s what a design system is — a collection of reusable design components, guidelines, and documentation that help you build cohesive and consistent user experiences. This is useful especially if you are more than one working on a design project .

For example, let’s imagine you’re designing a mobile app. In your design system, you would define a set of typography (don’t) styles, such as headings, body text, and buttons, to maintain visual consistency throughout the app.

You would also establish a colour palette with primary and secondary colours, ensuring that your app’s UI elements harmonize and evoke the desired emotions.

Additionally, you might create a library of icons that represent common actions or concepts in your app, making it easy to maintain a cohesive visual language.

Finally, you would document these elements in a style guide, providing instructions on how to use them effectively.

To establish your design system, start by conducting research and analysis to understand user needs and business goals.

For example, if you were designing a website for a fitness app, you might conduct user interviews and surveys to understand their motivations, pain points, and preferences. Then, create reusable components and patterns based on your research findings.

For instance, you might design a set of UI components for displaying workout routines, tracking progress, and scheduling activities. Iterate and refine these components based on user feedback to ensure they meet user expectations. Collaboration and iteration with your team are essential to ensure a cohesive approach.

Click here for an example of a Comprehensive Design system created by me https://www.figma.com/community/file/1244840462829723213, do not forget to like it when you open it.

Crafting Compelling Case Studies that Wow Employers and Clients

Now, let’s dive into the power of case studies in boosting your portfolio. Case studies are like storytelling tools that allow you to display your design process and problem-solving abilities. They help potential employers or clients understand your skills and experience.

A compelling case study consists of several key components. For instance, let’s say you worked on redesigning a food delivery app. Begin with an introduction that provides an overview of the project, Proceed to the research and discovery phase and ideation and prototyping process.

1. Introduction

The introduction serves as the foundation of the case study, offering a concise yet informative overview of the project. It includes essential details about the client or company, project background, goals, and challenges.

a. Client or Company Background: Briefly talk about the company or client here. Talk about what the company do.

b. Project Background: Briefly explain the project background in this section. I.e. Talk about the project tasks and deliverables.

c. Project Goals: Here you state the primary objective of the project which could be, to revamp the existing food delivery app, addressing the identified usability issues comprehensively.

d. Project Challenges: You could also state the challenges you encounter during the project. These challenges might include time constraints, limited resources, and the need to balance modern design elements while maintaining the familiarity of the existing app.

By providing this detailed introduction, the case study gains more depth and context, setting the stage for a detailed exploration of the project’s execution and outcomes.

2. Research and Discovery

Proceed to the research and discovery phase, an essential step in the project, where you delve into a comprehensive exploration of user needs. During this phase, you will employ a variety of methods and techniques to gain a thorough understanding of your target audience. By doing so, you will be able to extract valuable insights that will inform the subsequent stages of the project.

To initiate this process, it is crucial to outline the methods used to uncover user needs accurately. One approach you can adopt is conducting user interviews, which involves engaging with individuals from your target demographic to gain firsthand knowledge of their preferences, challenges, and expectations. Through structured or semi-structured interviews, you can delve deep into their thoughts, opinions, and experiences regarding the product or service under consideration.

Furthermore, surveys can be an effective tool in your research arsenal. By designing and distributing questionnaires to a broader pool of users, you can collect quantitative data that provides insights into the overall sentiments and trends within your user base. The surveys can cover a wide range of topics, such as user satisfaction, ease of use, and specific pain points related to the customization of orders or tracking deliveries.

In addition to interviews and surveys, it is also crucial to observe user behaviours directly. By immersing yourself in their interactions with the existing system or similar products, you can gain a deeper understanding of their pain points and challenges. This can be accomplished through various means, such as conducting usability tests, where users are asked to perform specific tasks while being observed and providing feedback. Observational techniques allow you to identify areas where users face difficulties when customizing orders or tracking deliveries, enabling you to address those pain points effectively.

By combining these research methods, you will be able to compile a comprehensive report summarizing the insights gained during the research and discovery phase. This report will serve as a valuable foundation for the subsequent stages of the project, guiding the development of solutions that address the identified user needs and enhance the overall user experience.

3. Ideation and Prototyping

Next, share the ideation and prototyping process, highlighting the creative journey from concept to tangible design.

For instance, you could display sketches and low-fidelity wireframes that illustrate your initial ideas and how they evolved into more refined solutions of high-fidelity designs.

Then discuss how you incorporated user feedback and iterated on your designs to ensure they met user expectations.

To make your case study captivating, focus on creating a compelling story. Imagine you received feedback from users who struggled with the app’s checkout process. You could share how you conducted usability tests to identify the pain points and implemented design changes that streamlined the checkout flow, resulting in a significant increase in successful orders and positive user feedback.

Incorporate visuals such as high-fidelity mock-ups or interactive prototypes to demonstrate the final design. Use screenshots or images to display different screens and features. Explain design decisions and how they align with user needs and project goals. For instance, you could discuss how you chose to incorporate a simplified navigation structure and intuitive icons to improve the overall user experience.

Don’t forget to reflect on the project’s impact and learnings. Discuss the outcomes, lessons learned, and personal growth or professional development you experienced throughout the project. Share metrics or success stories that demonstrate the positive impact of your design decisions. For example, you could highlight how the app’s conversion rates increased by 20% after implementing your redesigned checkout flow.

Here is an example of a case study to guide you better: https://www.behance.net/gallery/157793617/Dateen-App

Congratulations! You’ve reached the end of this dummy-friendly guide to design systems and case studies. By understanding the fundamentals of design systems and mastering the art of crafting compelling case studies, you’re now armed with the knowledge and skills to display your design prowess.

Remember, practice and continuous learning will be your allies as you embark on your UI/UX design journey. So, go ahead, create your own design system, and transform your portfolio with captivating case studies. The world is waiting to be impressed by your design wizardry. Happy designing!

--

--

The Lady In UX
Bootcamp

I am a UX Designer with 2 years + experience in Design and Product. I've contributed to early-stage start-ups and shipping of products to the at least MVP stage