SLIC — Designing Around Content Constraints

SLIC Sports, 2017 | UI/UX & Interaction Design | Duration : 6 weeks

🐦 @hunterrice20

Overview

Sports Lifestyle in Culture (SLIC) is a platform that gives athletes and superstars a voice to communicate directly with their fans. Founded by former NBA All-Star, Baron Davis, SLIC creates original content that showcases the lifestyle of athletes, entertainers, and artists.

Baron contracted me for a quick 6 week sprint to bring his idea to life with hi-fidelity mockups and an interactive prototype.

Challenge

What would Netflix look like with only five shows? Or Instagram with only five posts?

The zero data state is a common obstacle in UI design, so it’s one of the first issues I like to address. My challenge on this assignment was to determine the best format to house the initial five SLIC-original television shorts, without allowing the application to feel bare. Here’s a peek into my thought process.

Zero Data

Nobody wants to be an app’s lone user. Providing the illusion of a larger community gives comfort to early adopters, so it was my job to make a fledgling product feel bigger than it actually was.

One’s natural attempt to solve the issue seen in the Netflix mockup above, might be to simply scale up thumbnails 300%! Theres no doubt it might help a bit, but it doesn’t solve the second issue we have here.

When content creation is centralized (non user-generated), there’s an added challenge: circulation of content. Stagnation is the quickest path to diminished retention.

With this project, I was determined to explore new creative solutions to make sure the application didn’t feel limited.

Brainstorms

After the first few brainstorming sessions, I began on personas, user stories, and lo-fi sketches. The post-its that remained at the top of my whiteboard read “Seemingly Infinite” and “Content Circulation”.

Once our constraints and product direction were more clearly defined, I dug into how I could utilize the concept of short form episodes to separate and stretch SLIC’s content as far as possible. I came up with the idea of individual channels for each creator, or show, and expanded the app’s real estate by displaying each on their own branded page.

To tackle content flow, each page would release new episodes weekly which would keep the product fresh, as new content was filmed.

To tie the two together, I wireframed an infinite channel carousel that made content seemingly endless.

Notes & wires from early SLIC TV meetings.

Wireframes

I brought my chicken scratch and lo-fi wires to life using Sketch. I began designing in grayscale because it simplifies the most complex element of visual design, while allowing me to focus on spacing and element layouts.

Our goal from the start with visual design was to construct a unique feel that would outstep the boundaries other media content apps had set. I gave each page, or channel, its own personality by exploring a variety of gradients, textures, and depth.

Interaction Design

I prototyped SLIC’s interactions using Principle. If you care at all about technical details, don’t go, as I will walk you through the main channel transition.

I used several drivers to construct this transition. I began by setting a drag animation to the channel carousel. Next, I tied the opacity of the headers, menu icon, and backgrounds to horizontal swipe gesture. I set this driver along Center X and completed the transition 50% through the gesture.

I wanted the animation of the episode cards to feel a bit more natural — take notice that upon release of the drag, the initial cards fly off the screen creating a pretty cool shuffle effect. For this, my technique was duplicating the card groups (make sure the names are identical), and placing them about 50px off screen in the opposite direction. Thanks to Principle’s awesome auto-animations, the result came out pretty cool.

Lastly, I added a small touch to the channel carousel, by implementing a slight scale effect to emphasize the channel change (watch as the center circle contracts and expands). I did this by setting the scale to .8 at the midpoint, and then 1.0 on either end of the Center X gesture.

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >

--

--

--

Product Designer focusing on visual elegance and simplicity.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to auto-animate a compass interface

Reddit: The Internet’s User-Driven Information Architecture

5 Easy UI interactions in Principle that will make your design stand out

Il senso cromatico dell’abitare

Simple things I learned from the very simple Toca Pet Doctor

The Five Pillars of a Great UX Project

My Design Journey So Far

UX Learning Today

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hunter Rice

Hunter Rice

Product Designer focusing on visual elegance and simplicity.

More from Medium

UNDERSTANDING TYPOGRAPHY IN DESIGN

My First Step Toward UX Design

Best blogs for a UI, UX and creative Frontend people 2022.

Portfolio Design