UX researcher, UX & UI designer, frontend developer
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.
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:
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 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.
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:
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.