UI/UX Case Studies – SciFiRiot

Client: SciFiRiot

Client Goals: SciFiRiot is a online video content delivery site dedicated to presenting its users quality sci-fi video content. This project is a quintessential example of a great idea drawn on a napkin that produced an equally great result. The screenshots below depict the concept’s evolution from hand-drawn sketch to final product.

Methodology: User research was performed to identify key personas and use cases to determine layout and design.

Deliverables: Persona profiles based on User Research. Wireframes depicting information architecture. Comps and site design execution.

Before: Site was conceived as a hand drawn sketched wire-frame.

After: A fully-realized and functional website.

Conclusion: Good use case research will result in a great user experience and site regardless of a concept’s origin.


final website
Screenshots:

Use Case #1: User clicks VOD link from YT
– user clicks link to VOD from YT
– user lands on at SciFi Riot with requested video trailer loaded in Vimeo player
– user clicks play and views the trailer
– user clicks “buy” and a new tab opens with video loaded
– user completes the purchase and views the requested video
– user ends the video. Other VOD choices for that particular series are presented below
– user closes the tab. SciFiRiot.com is still present in the parent tab. Other VOD choices are presented via the “playlist section” (module #7) and “recent uploads” list of singular videos (module #2)

Use Case #2: User arrives at SciFiRiot looking for a particular VOD show
– user arrives at scifirtiot.com, the default content being “free”
– user clicks on “premium continent”, VOD playlists of each show load in #7, “recent uploads (or site defined list of ids) load in #2
– user scrolls through playlists to find desired show
– user clicks on playlist and loads show
– user scrolls through episode list in module #2 for desired video
– click on vid, it loads in player

Use Case #3: User is at SciFiRiot and clicks a VOD link from within the description box (module #5)
– desired vid loads in module #3, episode list of the show in #2, playlist of all VOD shows in #7 (all in same browser until user clicks to buy the VOD which opens a new tab by default)

Use Case #4: User is at SciFiRiot and clicks “Premium Content” (or, the link formerly known as “premium content”)
– “best of VOD” vids loads in #2, VOD general trailer (of some highlighted video) loads in #3, playlists of all VOD shows loads in #7

Use Case #5: User finishes watching a VOD video and wants to continue viewing free continent)
– user closes Vimeo tab, scifiriot.com remains open in tab behind it
– user clicks “free content” link to reload freebie environment

Use Case #6: User finishes watching a VOD video and wants to continue viewing more VOD content (of the same show and/or different show)
– if it’s the same show..then more episodes will be displayed in the Vimeo page below

Original Hand-drawn Wireframe: We’ve all heard the stories of great concepts being born on the back side of a napkin. Here’s one of them. To the right is the original hand-drawn wireframe that gave birth to DigiRiot’s website.