Designing the Admin Panel for Snob.ru Media Team
Snob.ru is a long-standing editorial platform known for its high-quality journalism and distinct brand identity. As the platform scaled, the internal tools struggled to keep up with modern content workflows. The goal was to redesign and rebuild the media admin panel, from article editing to media management, using Bootstrap components to save time, without compromising the Snob.ru brand style or usability.
2022
The Challenge
- Speed up development with Bootstrap while maintaining a branded experience.
- Provide a smooth article editing experience for journalists and authors.
- Enable photo editors to efficiently manage thousands of images and associate them with articles.
- Ensure fast and intuitive navigation through over 100,000 articles.
- Make the tool usable on both desktop and mobile for editors on the move.
- Add analytics to help editorial leads track performance.
Discovery & Research
I began by interviewing editors, photo editors, and content managers to understand their pain points. Common themes included:
- Repetitive manual tasks (e.g., adding captions to images one by one)
- Difficulty searching media without clear filters
- Overwhelming UI when managing large volumes of content
- No mobile-friendly workflows
I also audited existing internal tools and identified where the experience broke down or deviated from the brand tone.
————————
Key Features
Article Editor
- Rich text editor with clean UI for distraction-free writing
- SEO fields (meta title, description, keywords) are made visible but non-intrusive
- Ability to insert images via drag-and-drop
- Mobile-friendly for quick edits on the go
Media Library
- Bulk upload with caption + source input for each image
- Filters to find images missing captions or sources
- One-click “Set as cover” action
- Seamless drag-and-drop of images into articles
- Separate views for editors and photo editors, tailored to their needs
Article Search
- Blazingly fast typeahead search
- Filter by status (draft, published), author, tag, and publish date
- Pagination and lazy loading for performance at scale
Analytics Dashboard
- Easy toggling between timeframes and sections
- Used to inform editorial decisions and performance reviews
Collaboration
- Editors validated the writing flow and search UX
- Photo editors helped shape the filtering logic for untagged media
- Developers collaborated to adapt Bootstrap components to our design vision while keeping the codebase clean and maintainable
Outcome & Impact
- 🚀 Reduced time to publish articles and attach images
- 📱 Empowered editors to work from the field via mobile
- 🧭 Improved discoverability of content within the CMS
- 📊 Enabled editorial leads to track performance effortlessly
