2018

The Open Source Adventure – Adele

Since 2012 I'm the full–time CEO of a growing startup – UXPin (over 50 employees, profitable). Despite that, I've never stopped being a designer, coder, and a product person. To relax and contribute to UXPin and the overall design and engineering community, I take on side projects.

In 2017, after talking to a bunch of friends working on Design Systems, I decided to devote my weekends to the creation of an open source repository of design systems analyses.

For two subsequent weekends in January 2018, I designed and coded (React.js and Node.js) the repository.

The popularity of this project exceeded my most optimistic expectations.

read this story

Context

Design systems are growing in popularity, but still, very few people can claim that they have built multiple complex design systems in their career. That leads to designers and engineers having a strong need to check how other people in the industry solved specific problems. When we kicked off work on our design system at UXPin, I'd have to constantly visit repositories of systems like IBM Carbon or Shopify Polaris to check how they approached, e.g. icons or colors in their systems. Every visit like that is time–consuming and distracting.

I decided to solve this problem by creating an open source platform where members of the community could share their analyses of design systems. Every system can be described with metadata spanning dozens of categories and covering everything from the depth of used technologies to the structure of the documentation.

Exploration

After documenting my hypotheses and sketching initial interface concepts, I talked to several friends in the industry, trying to understand whether I'm thinking about the problem in the right way. My initial idea has been confirmed, but it became clear that the entire project has to be open sourced, so anybody can contribute right from GitHub and, as a result, the relevant tooling has to be built to create an easy maintenance process.

While I felt comfortable with building the web part of the project, I felt that I might struggle with the tooling part. It seemed that the tooling (generators of file format, file builders etc.) has to be built in Node.js and at that time, I had a very rudimentary ability to use Node. I decided to treat it as an excellent opportunity to become a better programmer!

Adele Prototype created in UXPin
The early prototype of Adele created in UXPin

The Process

Before investing time into coding, I prototyped the entire experience in UXPin. I invited 10 friends to test the prototype. After correcting multiple small errors, I've concluded the study and moved to coding.

I have chosen React.js to build the website. I felt comfortable with this library (we use it across UXPin), and I felt that the popularity of React.js will make the community contributions to Adele easier. For CSS, I've decided to use Styled Components. New at the time, styled components provided an easy way to dynamically manipulate styling within encapsulated components.

The biggest challenge turned out to be completely unexpected. For accessibility and semantics reason, I've decided to use the HTML table element as the foundation of Adele table. Unfortunately, with all the features that I've planned, the HTML table struggled with performance. I had to deploy multiple hacks to make it work reasonably well while supporting full keyboard use (again, for accessibility reasons).

Adele homepage
Adele website now contains detailed analyses of over 80 design systems.

Results

  • In the first 12 months after the launch of the project, Adele has been visited by over 120,000 people.
  • Adele has 586 stars on Github and 73 people forked the repository.
  • Today Adele stores 86 analyses of design systems
  • Adele is maintained by a community of over 50 contributors.
Combination of research and vision, empowered by strong conviction, lead to the best results.

Lessons Learned

  1. Technical analysis is an important part of any project. I made a wrong decision about the HTML Table, because I didn't spend enough time analyzing the issue.
  2. Open source projects are highly rewarding.
  3. Taking care of the accessibility of the UI should be treated as a critical part of every project.

Tools

  • UXPin (prototyping)
  • Sketch (visual design)
  • React.js
  • Node.js
  • Styled Components
  • Jest, Enzyme
  • Google Analytics

More Projects?

Ready for more of stories? Choose the next project below.
2009

Conversion Optimization

In 2009 I was trusted with the optimization of critical elements of the Nokaut.pl product page. Together with the engineering team, we've worked out a series of hypotheses based on factors affecting human attention (contrast, color, movement, pattern...) and we've performed a series of multivariable split tests. The result? 24% increase in the conversion rate.

read this story
2010

Paper Prototyping Redesigned

The story of the notepad that changed my life

read this story
2011

Homepage for 2.5M People

In 2011 I led the process of the redesign of Nokaut.pl Homepage. At that time, Nokaut.pl was attracting 2.5 million users a month and the owner of Nokaut.pl – Grupa Nokaut was preparing their IPO. An intense project!

read this story
2011

Mobile App for 3 Platforms

Web products of Grupa Nokaut had been dominant (2.5 million unique visitors per month in 2011), but the company didn't have much success on the mobile market. Our mobile offering, at the time, was limited to a dated mobile version of the core service built for old cell phones. This service was highly popular couple of years earlier, but with the growing popularity of smart phones users expected "richer" experiences.

In 2010 Grupa Nokaut asked me to lead the process of designing and building a mobile app for 3 platforms: iOS, Android and Windows Mobile.

read this story
2015

The New Design Editor

In 2015 UXPin was an established design tool serving over two thousand companies. We've just raised our Series A (led by True Ventures and Jeff Veen – former VP of Design at Adobe).

We knew that this is not enough. We knew that we have to do even more to realize our mission and help the design tools industry move forward. Soon, we've started a design process that changed the entire industry.

read this story
2011

eCommerce Video Portal

I worked in the Grupa Nokaut R&D Group for over two years. We were tasked with coming up with new product ideas that addressed the most critical strategic problems of the business. One of the projects that we realized in 2011 was Nokaut.tv – an eCommerce Video Portal that quickly attracted over 100,000 viewers. I had the pleasure to lead design and product development process.

read this story
2019

Designing for yourself is tough

I've spent way over a decade designing all sorts of products, but hardly ever – brand identities. Nevertheless, I have a deep affection for the very special connection between art and storytelling always present in great brand design.

When I decided to build my personal website, I knew that this is a great opportunity to define my brand – my story, aesthetics and message with a holistic design process.

I quickly became my own most demanding client and yet... I thoroughly enjoyed the process of designing Treder Design brand.

read this story