VitaVids

Vitanur · Web · 2023–24 · Case study

VitaVids is a Vitanur web app where a business browses promotional video templates and orders one made for its own company. I designed the flow from browsing to download: the catalogue, the video page, the order and the states after it.

The VitaVids board: eleven dark desktop screens in two rows, covering the video catalogue, the video page, modals and download states.

01Overview

Buying a video for a specific business

Every order is tied to a business, so the business switcher sits at the top of every screen, not in settings. One account can hold several businesses, each with its own industry, and the selected one is always visible.

That choice drives the rest of the flow: when a template does not match the selected business's industry, the app asks before the order goes through.

02What I designed

Browse, check, order, download

  • CatalogueA masonry grid of video templates

    Search, All / Landscape / Portrait tabs and a filter button; each card shows category, title, price and a save heart.

  • BusinessA switcher in the top bar

    Lists the account's businesses with their industry, plus Add Business.

  • Video pagePlayer, details and two tiers

    Description and Transcript tabs under the player; Standard and Premium options with prices beside it.

  • OrderAn industry check and a confirmation

    A warning when the template doesn't fit the business, then "Order received" with a note that a notification will follow.

  • AfterReady and in-progress states

    Owned tiers read "In Library"; the button becomes "Available in 1 day" or "Download video" with a format picker.

03Screens

The flow, step by step

VitaVids catalogue: a sidebar with Browse and My Videos, a business selector set to Xəzər Kafe, and a masonry grid of video cards with prices
BrowseTemplates in a masonry grid that fits both landscape and portrait videos.
The business dropdown open over the catalogue, listing two businesses with a checkmark on the selected one and an Add Business button
Business switcherSwitch or add a business without leaving the page.
Video page with a portrait video player, tags, title 'Restaurant Promotion video for Social Media', and Standard and Premium options with a Get this video button
Video pagePick a tier and order from the panel on the right.
Video page while playing, with player controls and the Transcript tab showing timestamped lines with the current phrase highlighted
TranscriptTimestamped lines follow playback, with the current words highlighted.
'Are you sure?' modal warning that the template is not meant for the selected industry, with a list of businesses to choose from and Continue
Industry checkA mismatch is caught before ordering, with the business list right there.
'Order received' modal with a green check and a note that a notification will arrive when the video is ready
Order receivedSets the expectation that the video comes later.
Video page where Standard shows 'In Library' and the main button reads 'Available in 1 day'
In progressThe order button turns into a status.
Video page with a white Download video button and an MP4 format dropdown
DownloadOnce ready, download with a choice of format.
  • Confirm whether VitaVids shipped and what your role was beyond these screens.
  • Videos seem to be made per order ("Available in 1 day"); confirm how ordering actually works before describing it further.
  • Descriptions in the designs are placeholder copy; the page doesn't describe it.
  • Not used: Desktop - 55/56 (catalogue with no business selected) and Desktop - 61 (a "Select Business" modal), close to the screens shown.