Dive into the anime world

AniRed

Overview

As a fellow Otaku (Anime fan), I think it is only fair that a social dedicated only to anime exist. Basically this is meant to be a world separate from the real one. A place where the only things that matter are Anime trends, reading scans, publishing scans, discussions or fight threads (Gojo vs Kakashi type fight lol)

My role

Sole UX/UI designer

Tools

Figma, Photoshop, Whiteboard and markers, Stickynotes.

DESIGN PROCESS

DEFINE

My first step was providing answers to the 5 W questions.

What?

A social media platform and Manga platform for anime lovers.

WHEN?

Users get into the application at any time they feel like reading scans or picking up on trends.

WHO?

This will be a great application aimed for all Otakus/Weebs or simply put, Anime lovers.

WHERE?

The application will be available everywhere given that Anime fans are almost everywhere on the planet

WHY?

Imagine a place like X (formerly known as Twitter) but only for anime. The goal is to bring the anime community together, read anime and promote aspiring anime artist or voice actors etc…

EMPATHIZE

In this step I conducted a competitor analysis to determine what other people may have done, how they did it and what makes my solution a better one. From there, I created proto-personas and User Stories in order to better understand what users will expect form this application.

I carried out a competitor by first, sorting out the goals I wanted to attain and determining if these various applications had already attained said goals. Equally I looked to see if they had any functionalities which I could modify or implement in my design.

Competitor Analysis

Anime.Fans - Social Network

    • App Store

    • Play Store

    • Create posts

    • Direct messaging

    • Group messages

    • Likes

    • Comments

    • Shares

    • Repost

    • Regular Accounts

AniRed

    • App Store

    • Play Store

    • Create posts

    • Create thread

    • Post Manga

    • Direct messages

    • Group chats

    • Chatrooms

    • Engage with Creators

      • See Account types to know who creators are.

  • Content impressions

    • Likes

    • Comments

    • Shares

    • Repost

    Manga impressions

    • Likes

    • Comments

    • Shares

    • Regular accounts

      • For the regular day to day users

    • Creator accounts

      • For users who are also artist and want to post their anime stories for others to read

Animega - Social Network

    • Android Apk downlods

    • Create posts

    • Create thread

    • Direct messages

    • Group chats

    • Chatrooms

  • Content impressions

    • Likes

    • Comments

    • Shares

    • Regular accounts

Proto-Personas

User Stories

IDEATE

With the help of the competitor analysis and user stories I was able to determine the essential features the app would need to make it successful and useful. I equally came up with a Site Map to map out these features and see what kind of screens would be necessary for the app.

Essential features 

  • Be able to read manga posted by various creators.

  • Be able to upload posts or threads about anything anime related.

  • Be able to get a creator account and post anime stories.

  • Be able to interact with other anime users in rooms or in private chats.

  • Be able to interact with manga creators.

  • Be able to see latest news or post on anime content that interest each use.

Site-Map

DESIGN

I used Photoshop for the logo design. This was a very challenging one because my goal was to come up with a design that looked very professional in the eye and also communicated what the app is about. 

While deciding on the logo design I also started designing mid-fidelity wireframes. I started with mid-fidelity designs because I already had a clear image of how I wanted my design to look like. 

Wireframes

Bellow are mid-fidelity prototypes of pages which will be main pages and frequently used. Moving from Mid-fidelity to high-fidelity I made a few noticeable changes like at the main navigation bar.

Mid-Fidelity

Design Styles

I made various design styles in order to organize my work and make it easy and faster for me to design the high-fidelity wireframes. 

Icons

Color palette

Prototype

I proudly present a design crafted with meticulous attention to detail, utilizing Figma as my primary tool.

To enhance the user experience in this prototype, I integrated AI-generated anime images.

I dedicated myself to creating an intuitive and user-friendly design, ensuring a seamless and enjoyable interaction for all users.

Mock-Ups

HOME

LIBRARY

MY SHELF

MESSAGING

PROFILE

Get in touch with me.

if you enjoyed this project and want to drop your insights or want us to work together on something. Feel free to contact me.