Master Thesis, RWTH
Read case study (PDF)


UX researcher, UX & UI designer, frontend developer

Project Summary

The idea to build a UI design pattern library was born out of the necessity to integrate such a library into a sketching tool. From my literature review research I then discovered that UI design pattern libraries out there are quite scattered, outdated and not containing the standard pattern information. I was inspired to start a collection of all the UI design patterns with core standard information, up to date design and possibility to download and reuse. My partner in crime Tina, extended the library with UI components and guidelines. For the scope of my thesis alone, I focused only on mobile patterns, but the library could easily be scalable to other platforms.


Design a library of UI design patterns that can be used in rapid prototyping and assist UX designers, developers, and students in their respective processes.


User Needs & Requirements

To understand designers’ workflow during prototyping and developers' workflow when missing a designer in the team, on the beginning of each prototype evaluation we interviewed our participants about their pain points around the process. We identified the following:

  • Compromise on quality of UI design due to time constraint
  • UI design knowledge being scattered among numerous sources such as websites and books
  • Inability of developers to reproduce the same quality of UI design due to lack of UI design knowledge

Kiwi: Context of use

Kiwi: Requirements

Usability Evaluations

We evaluated three versions of the interface. In each version we adopted the Rapid Iterative Testing and Evaluation (RITE) methodology. After every five evaluations, small and quick feedback was incorporated in Kiwi and it was further evaluated in the next iterations. After 3-4 such evaluations, we improved the entire version based on the most critical feedback.

  • For the first and last version we interviewed 21 participants of mixed background: UX designers, developers, and students
  • For the second version we interviewed 15 UX designers
  • All the participants were given a use case to interact with Kiwi to find UI design patterns and guidelines to create a prototype of a mobile application for online shopping

For each version we measured the System Usability Score (SUS) which improved at every version, respectively 72.1, 75.3 and 77.6. At the last version we also measured the general UX via the User Experience Questionnaire (UEQ). The only score below average was dependability, which was a result of the unexpected interactions on the seemingly static images of patterns.

Kiwi: User evaluations

Kiwi: UEQ

UI Design Patterns

I collected all the patterns via various sources such as online pattern libraries, books, and academic pattern collections. I designed the GUI and the blueprint of each pattern in Adobe Illustrator. The GUI represents how a pattern may look visually, while the blueprint is a wireframe with detailed measurements of the respective GUI. Since patterns always work together towards a bigger solution, I also defined pattern relationships that are depicted through:

  • Pattern categories: patterns that belong together semantically
  • Application types: patterns that follow one another in an interactive flow
  • Related patterns: substitute and assistive patterns

Kiwi: UI design patterns

Frontend Development

The final product is delivered as a web library developed in React JS.


Checkout out the final presentation of my thesis here, for an in-depth explanation of the process I followed.

Check out the library here. And don't forget to let me know what you think! :D

The poster below is the poster published in the MobileHCI 2019 conference in Taipei, Taiwan.

Poster accepted in MobileHCI 2019 in Taipei, Taiwan. Designed in Adobe Illustrator.


  • Requirements Specification
  • Moderated Interviews
  • Feedback Analysis
  • Literature Review
  • Prototyping
  • Research
  • Surveys
  • UEQ
  • SUS


  • Visual Studio Code
  • Google Workspace
  • Adobe Illustrator
  • PyCharm
  • Figma
  • React
  • Github
  • Django


  • 108 Mobile UI Design Patterns
  • Pattern Library Database
  • Frontend Interface
  • MeFi Prototypes
  • HiFi Prototypes
A case study on

Displaying UI design pattern relationships in Kiwi

Read case study (PDF)
Next up
All of 'em