SLIC — Designing Around Content Constraints
SLIC Sports, 2017 | UI/UX & Interaction Design | Duration : 6 weeks
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.
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 >
