large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2s1Jq5T">medium bookmark / Raindrop.io</a> |  </p>
<h3>Hello EO</h3>
<div>
<p>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.</p>
<p>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.</p>
</div>
<div>
<img src="http://ift.tt/2sTVrND" alt="eo_history.jpg"></div>
</p>
<h3>Where we were</h3>
<div>
<p>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.  </p>
</div>
<div>
<h3>App aptitude</h3>
<div>
<p>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. </p>
</div>
</div>
<div>
<div>
	<img src="http://ift.tt/2spjy35" alt="eo_feedback.jpg"></div>
</p>
<h3>Know thy customer</h3>
<div>
<p>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.
</p>
</div>
</div>
<div>
<div>
<p>1</p>
<h3>Act like a remote</h3>
<p>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. </p>
</div>
<div>
<p>2</p>
<h3>Give me status</h3>
<p>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. </p>
</div>
<div>
<p>3</p>
<h3>Tell me what’s up</h3>
<p>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. </p>
</div>
<div>
<p>4</p>
<h3>Set it and forget it</h3>
<p>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. </p>
</div>
<div>
<p>5</p>
<h3>Clean up our act</h3>
<p>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. </p>
</div>
</div>
<div>
<h3>Designing design</h3>
<div>
<p>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. </p>
</p></div>
<div>
		<img src="http://ift.tt/2sTTPU3" alt="process.jpg"></div>
</div>
<div>
<h3>A new way to display</h3>
<div>
<p>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.  </p>
</p></div>
</div>
<div>
<h3>Home is where the art is</h3>
<div>
<p>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. </p>
</p></div>
<p>A display on display</p>
</div>
<div>
<h3>Remote, controlled.</h3>
<div>
<p>
		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 </p>
</div>
<p>Brightness. Display Selector. Settings. All at your fingertips.</p>
</div>
<div>
<h3>Delivering on discovery</h3>
<div>
<p>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.
		</p>
</p></div>
<p>Browse, Channels, and Search. Oh my.</p>
</div>
<div>
<h3>All your art in one place</h3>
<div>
<p>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. </p>
</p></div>
<p>It&#8217;s all about Me</p>
</div>
<div>
<div>
<h3>From art to artwork</h3>
<p>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. </p>
</p></div>
<p>Artwork detail page showing off favorite, display, and add to playlist actions.</p>
</div>
<div>
<h3>Up up and away</h3>
<div>
<p>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.
		</p>
</p></div>
</div>
<div>
<h3>Subscribe and delight</h3>
<div>
<p>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. </p>
</p></div>
<p>Users can look at the art, but can&#8217;t touch it.</p>
</div>
<div>
<h3>First class first impressions</h3>
<div>
<p>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.
		</p>
<div>
			<img src="http://ift.tt/2spwFkC" alt="tour.jpg"></div>
<p>
		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. </p>
<div>
			<img src="http://ift.tt/2sTExP8" alt="wifipassword.jpg"></div>
<p>
		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. </p>
<div>
			<img src="http://ift.tt/2soYrOq" alt="iphoneqr.png"><img src="http://ift.tt/2sTTOPZ" alt="qrcode.jpg"></div>
<p>
		We replaced a 6 digit pairing code with a scannable QR code, preventing you from punching in the wrong digits.
		</p>
<div>
			<img src="http://ift.tt/2spwDt0" alt="sleepwake.jpg"></div>
<p>
		Many of our customers didn’t know about our sleep and wake scheduling feature, so we helped them set their clocks.
		</p>
</p></div>
</p></div>
<div><a href="http://ift.tt/2s1Jq5T">http://ift.tt/2s1Jq5T</a></div>


Redesigning a Remote

Redesigning a Remote

Hello EO

Top Stories