aNI sORTING ui

UX/UI Design Intern | Internship Task

Ani is a social media app for anime fans to share posts, engage with communities, and connect over shared interests. As a UX/UI intern, I was tasked with researching and implementing optimal ways to sort posts in the feed to improve usability and engagement.

Market Research

Instagram

Default: Prioritizes user interaction (likes, comments, DMs).

Latest/Earliest: Helps users browse followers chronologically.

TikTok

Relevance: Ranks posts by search relevance.

Likes/Popularity: Surfaces most popular content.

Date Posted: Allows narrowing by past 24 hours, week, month.

Unwatched: Ensures fresh discovery.

Twitter/X

Top: Algorithmic mix (interest, location, virality).

Latest: Chronological browsing.

Key Insights

What Works

Relevance sorting shows the most useful results.

Popularity highlights trending content.

Chronological sorting is simple and predictable.

Filters like “Unwatched” keep feeds fresh.

What doesn’t

Engagement-heavy sorting hides new or niche posts.

Algorithmic feeds feel random and is easy to miss things.

Too many filters can overwhelm users.

Alphabetical/location sorting doesn’t add much value for anime content.

I narrowed Ani’s sorting options to five key categories because they balance usability, clarity, and relevance to the anime community.

  • Relevance (Default): Surfaces posts most related to the search term using keywords.

  • Most Popular: Highlights trending content through likes, comments, and shares.

  • Recent: Keeps users up to date with chronological posts.

  • Seen: Helps users easily revisit content they’ve already found.

  • Unseen: Prioritizes fresh content to encourage discovery.

By focusing on these five, Ani keeps sorting intuitive yet powerful, covering the most important user needs without overwhelming them with unnecessary choices.

User flow

Low Fidelity wireframes

Final Designs

The final design carefully aligns with Ani’s branding through consistent use of colors, imagery, and typography. The signature red establishes visual hierarchy, drawing attention to the selected option with both a red highlight and a checkmark.

To refine the user experience, the design explores two modal styles—a centered pop-up and a bottom sheet—to evaluate which interaction feels more natural and less intrusive.

Additionally, each sorting option is paired with a distinct icon, improving scanability and user engagement. These icons were chosen not only for clarity but also to stay consistent with Ani’s established iconography style.

Next Steps

If I were to continue iterating on this task, I would explore additional post discovery techniques beyond sorting. For example, surfacing popular search terms directly beneath the search bar could guide users toward trending or relevant content with less effort. Introducing these discovery features would enhance the overall user experience by making navigation more intuitive and helping users quickly find exactly what they’re looking for.

Previous
Previous

Safe Bites

Next
Next

Figma Talk