Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
An artist at heart, I was drawn to Electric Objects, a NYC-based startup creating a connected art display for your home. In the fall of 2016, I joined EO as their first dedicated product designer.
EO sells a display and a subscription service: Art Club serves subscribers artwork from emerging artists and museums in formats like stills, gifs, video— even generative web art. As we prepared for the upcoming holiday season in anticipation of our third generation display, we also iterated on our software for a completely reconsidered art experience.
Customers control their display through our Android app or web app, but 85% of them use iOS. Originally designed as a social network, customers were limited to uploading images and following other users. Over time, we introduced new features like Art Club and Playlists, a way to queue up artwork for your display.
Our app broke down into 5 experiences—Art Club: browse art, genres, artists, and more; Upload: import your own images, take a photo, add them to the community, or keep them private; Community: browse through uploads by popular or newly added; My Profile: access your uploads, favorites, and display history as well as display settings. The app performed its job; it looked and felt like a social app.
We dove into our customer feedback— compiled, organized, and presented findings to the rest of the team. Users found the app difficult to use. The icons confused them. They said our UI was “inconvenient.” Users had difficulty controlling their display; they couldn’t find display controls, like brightness, sleep, and wake. Others wanted to know what art was playing and wanted to learn more about it. Some just wanted to upload images, like family photos, and didn’t want their photos to be broadcast to social network. They clamored for search and new ways to discover art. They wanted a lot. And we needed to deliver.
1
Problem: The app was really a remote! A remote should act like a remote. And a premium piece of hardware deserves a premium piece of software. Controls like brightness, sleeping, waking, and scheduling had been hidden under the My Profile tab, which functioned as a social profile rather than a place to control your display. Solution: We needed to promote controls to the front seat.
2
Problem: Because EO is an ambient display, it doesn’t portray connection status. All status needed to be communicated in the app. Is my display connected? Is there a problem? We had failed at providing a reflection of the display and it’s status. Solution: We needed to give the user direct access to this information.
3
Problem: A friend visits your home and asks about the art on display. Open the app and you’re lost. What’s the title? Who’s the artist? Solution: We needed a way to present your current artwork, allowing you to learn about the art.
4
Problem: Some customers came from a holiday gift guide, under the impression that our display only played classic art. Users wanted a way to play specific genres or moods. Solution: We needed to create a guided art experience for our users.
5
Problem: Our visual branding is strong, so strong that it started to weigh the art down. Solution: We needed a new design language that respected the art and elevated it, like a white space gallery. One that made the app feel easier to use, and fun.
Our app redesign team consisted of three team members: Luke led the way, directing the design process, Rob tackled iOS development, and I hammered through research, user experience design, interaction design, visual design, and prototyping. We worked in 5-day sprints, setting design goals on Mondays and presenting designs on Fridays. Our workflow relied upon sketching, prototyping, and user testing. We employed a range of tools like whiteboards, notebooks, Illustrator, Sketch, and Flinto. But the star of the show was Framer which let us easily experiment with realistic designs, share prototypes with the rest of the team, and test with our users.
Redesigning EO’s remote was an exercise in hierarchy. Everything defers to Home, a view responsible for containing Now Playing and Display Controls. Home acts as a launcher for three separate experiences: Browse, Upload, and Me.
Now Playing is the centerpiece of Home: a new feature that renders a reflection of your display status and current artwork. Tapping on the display reveals more information about the art: the title, the artist, the description—and controls: next and previous, or like and dislike. Scrolling exposes the display’s queue and the display’s history.
A display on display
Home provides quick and easy access to controls like display settings, brightness, sleep and wake, as well as the ability to switch between multiple displays— actions once buried behind multiple taps in My Profile
Brightness. Display Selector. Settings. All at your fingertips.
One of the biggest additions to Browse is the Channel feature, allowing you to play a radio station of shuffled artworks. You can like or dislike artwork to improve recommendations. Search finally made it’s way into the Browse experience, allowing you to pinpoint your favorite art. We opened the collection layout to expose rich visuals that once hid behind banners.
Browse, Channels, and Search. Oh my.
Me functions as a folder for all of your stuff: your uploads, your likes, your playlists, your history. Before, this tab acted like a social profile, but now helps you quickly access your art.
It’s all about Me
The artwork detail page sits at the center of the app’s flow; it’s the atomic unit of the app. We cleaned up the visual design and retained familiar actions like zoom, favorite, and add to playlist. We redesigned the display action to make the experience of displaying artwork feel more confident and delightful.
Artwork detail page showing off favorite, display, and add to playlist actions.
Uploading to your display is nothing new, but we found room for improvement. We sped up the upload experience by creating low resolution assets to blur into the display as the high resolution versions fade in, much like how Instagram loads images over slower connections.
How much of an experience do non-subscribers get? Can you display the art for a limited amount of time? What about a watermark? We decided to give non-subscribers a taste, but once they hit the display button, we prompt them to start their trial. Without Art Club, you still get access to community and uploads, but really miss out on all the fun.
Users can look at the art, but can’t touch it.
Onboarding will make or break your product. At EO, designing our onboarding flow with care was essential because without it, the you can’t use your display. Onboarding challenged design because of tight technical constraints—but we managed to find harmony in the initial, fragile relationship between the phone and the display.
We introduced a tour at the beginning of the flow, explaining the EO product. Many non-EO customers downloaded the app without context. The guests could get a taste of the artwork in Browse without having to set up a device.
We added a progress bar and step indicator, helping you understand where you are in the onboarding process. We also included a reveal password button to help you from entering the wrong WiFi password— the most frequent problem during onboarding.
We replaced a 6 digit pairing code with a scannable QR code, preventing you from punching in the wrong digits.
Many of our customers didn’t know about our sleep and wake scheduling feature, so we helped them set their clocks.
AI-driven updates, curated by humans and hand-edited for the Prototypr community