Aristotle

Role: Lead Product Designer

Scope: End-to-End Product Design, Design System, UI/UX, Prototyping and Brand Identity.

Tech Stack: Nextjs, Contentful, Vercel, Cloudinary, NewsAPI, Figma.

Introduction

Aristotle is a media and technology platform providing trusted news across business, startups, technology and culture. Its mission “Knowledge is power, stay in the know” set the tone for a design language that is authoritative yet accessible. As the lead product designer, my aim was to unify product and brand, building a lean, scalable platform that invites deep exploration.

Laying the Foundation

Brand – Designed a modern logomark, paired with a blend of modern and serif typography to balance clarity and editorial weight. A clear color palette and voice guidelines ensured consistency across all touchpoints.

Design System – Built an atomic component library in Figma, including buttons, tags, cards and page templates. This system, complete with light and dark modes and motion guidelines, streamlined handoff and future iterations.

Explored three card types for the platform’s homefeed, each balancing image, title, tag, and date differently. Card 1 (Chosen): Text-first layout with tag and title above the image. Card 2: Image-led design with content stacked below. Card 3: Balanced layout with image on top, followed by metadata. Why Card 1: Prioritizes headline scanning – essential for news browsing. Optimized for mobile and dense feeds. Supports skimmability and editorial hierarchy. Less image-dependent, making it versatile for varied content types. This layout drives quick information access while maintaining clarity and consistency across the feed.

Card Design / Loading Skeleton and Newsfeed - Homepage

Crafting the Experience

Home & Feed – Designed a single‑column feed with clear category tags, reading time, headlines and feature images. A right‑rail topic list and prominent dates/authorship fostered trust and easy scanning.

Explore & Discovery – Created a colorful grid of category chips showing post counts, a timeline of “Happenings” to tell news stories chronologically, and a “Places” section for regional filters (India, Bangalore, US, Europe, World).

Topic Page – Each topic has its own page, with a chronological asymmetric feed with a button to switch between different topics.

Design System – The design system for Aristotle served as a foundation for scalability, consistency, and efficiency, combining visual guidelines with elements of platform architecture and data integration.

Implementation & Collaboration

• Leveraged Next.js and Vercel for fast, server‑rendered pages with incremental static regeneration.

• Integrated Contentful with NewsAPI for dynamic content ingestion and built a custom pipeline to merge curated news with in‑house posts.

• Used Cloudinary to optimize images and responsive media delivery.

• Prototyped and tested in Figma, running rapid user tests and iterating quickly in two‑week sprints.

Outcomes & Lessons

• Expanded into dozens of categories, with articles across AI, startups, technology and business.

• Users spent roughly 20 % more time on the explore pages than on the home feed, validating the design’s focus on discovery.

• The design system cut design‑dev handoff time by around 40 %, enabling faster iteration.

• Establishing a strong mission and clear visual identity boosted brand recognition and social engagement.

Most important learning during this project is my improved technical ability, system design and owning the entire product lifecycle. Balancing design with development using Next.js, headless CMS and APIs integrations strengthened my ability to deliver responsive, high-performance products.