After being introduced to the UX world during my master's degree at RWTH, I knew I needed to pursue this path. That lead me to write a master's thesis with UXdesignfocus.
Together with my partner in crime, Tina, another RWTH student, we built kiwi, a UI design pattern library. It was inspired byChristopher Alexander, the father of the pattern language. Why a UI design pattern library? One word: academia.
My main goal was to collect, design, and connect UI design patterns scattered around on the vast internet. For the scope of my thesis alone, I focused only on mobile patterns.
Tina extended the library with UI components and guidelines.
Mobile screens of an e-commerce application in the kiwi library
On wearing multiple hats
Whoever has ever written a master's thesis knows the drill. As many other glorious soldiers, I wore several hats over that one year, from academic researcher to UX designer, UX researcher, UI designer, web developer, life-choices-questioner, and so it goes. 🥲
For the greater good
We targeted product designers, developers, and design students with the aspiration to assist them in their workflows.
The pain points around workflows
To guide our design decisions, we first sought to identify the pain points of our target groups in their workflow. We discovered that:
Designers have to compromise on the quality of the UI design due to time constraints
Design students feel overwhelmed by the scattered UI design knowledge among numerous sources such as websites and books
Developers feel unable to reproduce the same quality of the UI design due to lack of such knowledge
Visualise complex relations
For the purpose of this portfolio, I will focus only on one particular case study during the design of kiwi. As we navigate complex systems, it is observed that patterns work best not in isolation, but when they are used together with other fellow patterns. That's how they create an experience based on validated best practices.
Hence, when creating kiwi, one of the biggest challenges was to visualise these relations between the 108 UI patterns which I had collected and designed. Based on the academic research, I defined 6 different relations that patterns could have with one another.
UI pattern relations: sequential, sub-ordinate, super-ordinate, neighbouring, similar, and competitor.
So far so good. Now, let’s move on to the design iterations of visualising pattern relations.
Iterations, iterations, iterations ...
We iterated the design through user evaluations with usability testing, qualitative interviews, SUS, and UEQ. Let's have a look at the iterations below.
The first attempt at visualising the relations looked like this, a flat schema with labeled arrows that connect pattern names with one another. The arrows are labeled to the scientific relations defined before.
The first design: The UI pattern relations of Product Page pattern in a flat schema
We evaluated this first design with 10 potential users from our target group. The main lesson that we learned was that the users couldn't understand pattern relations through the scientific labels only, they were missing a sense of hierarchy.
Alright, let's have a look at another try... Still a flat schema, but organised in a hierarchy and the arrow labels are simplified to a more common language. E.g. from "this pattern is a sub-ordinate of this other pattern" to "this pattern contains this other pattern".
Iteration 1: The UI pattern relations of Product Page pattern in a hierarchical schema
The next 5 potential users who evaluated this design weren’t happy with the amount of information they had to parse. Even though the language was simpler, it was still a lot of complex layout.
We had to change strategy, so we circled back to the idea that patterns work best together ... that’s what we had to show!
UI pattern relations grouped semantically
By now it was clear to us that the best way to show how patterns are connected with each other is to visualise how this works in practice through an interactive prototype. We called this an application type.
The final result: The UI pattern relations of Product Page pattern in an interactive application prototype
Another way how patterns are related are when they belong in the same category, e.g. shopping patterns, navigation patterns. We also made this clear through the information architecture on the website.
All UI design patterns related to online shopping
Another touch point of showing relatedness was in the pattern pages themselves.
UI design patterns that are often used together with the Product Page pattern
The new idea went through 5 small iterations evaluated with 5-6 potential users each. Above are shown the final designs after another evaluation with 7 more participants. Check out the iterations in this figma prototype.
No one wants to read
In the design world, there is always the debate whether users read or not. Considering that context is king, given the use cases of our target groups, i.e. rapid prototyping, learning UX design, or implementing good design, depicting pattern relations through text and name dropping (as we initially started) wasn’t the solution.
Where kiwi is today
You can find kiwi at designwithkiwi.com. I don’t suppose anyone uses the website for practical purposes, and upon reflection, adding the pattern designs & relations in the Figma community could have been the solution all along.
The academic success
Our work on kiwi was published in the MobileHCI’19 conference in Taipei and the paper is referenced on the ongoing study of UI design patterns.
UI design pattern-driven rapid prototyping for agile development of mobile applications
What did I learn?
The three main takeaways for me from this challenge were:
Question yourself during the iterations if you are on the right path