Screenshot of Diverse UI

Diverse UI

Diverse user images for user interface design.

Visit diverseui.com

Problem

Designers were spending hours refreshing the photos filled in by Sketch content generator plugins or clicking through Google image search results and other UI sites to find images that represent real sets of users. Real sets of users, in this perspective, are diverse sets of users — ones from varying age, racial, and gender groups.

We see that in the real world. We expect that of our users. Yet, somehow, all the sources for filling in content only want to supply us with 25–35 year old white dudes — which is great if you're in the game of creating products exclusively for 25–35 year old white dudes, but if you're not, it's really really bad.

Team

This was a two person team, consistening of myself and a software engineer.

My Role

I led ideation, design, and front-end development.

User experience, especially when used in combination with Craft for Sketch, was highly prioritized. Filtering and resize options are easily accesible on the left, but most screen real estate is given to the image grid.

Screenshot of diverseui.com
Screenshot of diverseui.com showing the photo submission flow

The submit process requires collecting multiple fields, including the image, e-mail address, and permissions for use. I alleviated some of the friction by making each interaction minimal and playful.

Results

The site was posted on Product Hunt within days of launch, and we had some incredible feedback. We became the number one design tool and remained there for weeks. More validating though, was the verbal response from figures in the design industry.

Screenshot of Product Hunt TweetScreenshot of Stephen Olmstead TweetScreenshot of Jenny Shen Tweet
Screenshot of diverseui.com showing the new download buttons

We listened to user feedback to plan future features. So far we’ve added a download button to allow users to download anywhere from a small selection to full set of photos, and we’ve built an api.

For more reading on what drove the decision to build Diverse UI - check out the article I wrote for uxdesign.cc.

Screenshot of Diverse UI Blog Post