Vita Admin

Vitanur · Web · 2023–24 · Case study

Vita Admin is the internal panel Vitanur's team uses to run its public website: page content, news, incoming requests, courses and staff access. I designed it end to end, as a dark desktop tool built from the same design system I maintained for Vitanur's products.

Vita Admin's Main Page editor: a sidebar with grouped navigation, and on the right collapsible Statistics, Publications and Our Ecosystem blocks made of editable cards.

01Overview

One panel behind every page of the website

The website has many moving parts: home page numbers and press logos, careers playlists and open positions, a blog with drafts and schedules, a knowledge hub of courses, and several forms that send in requests. Each one needed a place to be edited without a developer.

The panel keeps all of it in one sidebar and repeats a small set of patterns: filterable tables for lists, card forms for page blocks, a full-width editor for long content, and a side drawer for people and permissions.

02What I designed

A few patterns, used everywhere

  • Page contentCard-based editors for site pages

    Main Page, About us, Communities and Careers are split into collapsible blocks; each item is a card with edit and delete.

  • NewsPosts, drafts, scheduled and published

    One table per state, and a rich-text editor with Save as Draft, Schedule and Publish.

  • RequestsInboxes for every website form

    Talk to us, email, newsletter, workbook and careers submissions, filtered by team, service, size and date.

  • Knowledge HubCourses, modules and comments

    Courses nest modules and submodules, link related courses and tools, and comments can be answered or removed.

  • AccessUsers, roles and permissions

    An employee table and a drawer that groups user info, roles, permission toggles and password.

03Screens

From sign-in to course editing

Dark sign-in card titled 'Welcome to Vitanur' with username and password fields and a blue Log in button
Sign inA single card on a dark background.
Permissions table of employees with name, email, phone, role and team tags, filters for role and sub-account, and an Add Employee button
TeamEmployees with role and team tags, filters and pagination.
Add Employee drawer over the blurred table, with collapsible User info, User roles and User permissions sections and a grid of toggles
Add employeeInfo, roles and permissions in one drawer, with search and Select all.
News and Articles posts table with author, heading, date posted, views and actions, and sub-navigation for drafts, scheduled and published
PostsEach publishing state gets its own list in the sidebar.
New Post editor with heading and category fields, a formatting toolbar, and sample headings, image, lists, code block and quote
Post editorA formatting toolbar and every block type a post can use.
Workbook Submissions table filtered by team and service chips, with company, company size, service tag and request date columns
RequestsForm submissions, filtered by team, service, company size and date.
Course editor with course info and cover upload, nested modules with submodules, and a Related Courses and Tools section
Course editorModules nest submodules; related courses and tools sit at the end.
Comments Control page with category chips, course and module filters, and comment cards with Delete comment and Reply
CommentsEach comment shows where it was left, with reply and delete.
Careers Playlists editor with three cards, each with a cover image, playlist name, team tag and a Spotify link
Careers playlistsA small block of the careers page, edited the same way as the rest.
  • The logo in the screens reads "VitAdmin"; confirm the product name to use (Vita Admin vs VitAdmin).
  • Confirm whether the panel shipped and whether you designed it alone. Desktop - 2 also shows a product picker (VitaMail), so the panel may sit inside a wider Vitanur account.
  • Several fields still hold placeholder text; the page only describes structure, not copy.
  • The Figma section has 64 frames (Analytics, Push Notifications and Marketing Integrations appear in the sidebar but were not among the frames used).