Role

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.

Challenge

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.

Approach

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

‍

‍

‍

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.

‍

‍

‍

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

‍