pixivFANBOX.

Redesigning a platform for creators to pursue their creative activities with fans.

Project overview.

Angine is a project that started in Spring 2020 as a course project to create a marketable product. The project began as I was trying to build a comfortable home studio when I realized all the hardship and frustration in setting up my audio system. In the end, I designed a virtual audio mixer that assists individuals in setting up, managing, and saving their audio system when handling multiple audio devices and tasks.

Timeline.

Fall 2020.

Skills.

UI/UX Design, Web Design, Motion Design.

Software.

Adobe XD, Illustrator, After Effects, Figma.

Contribution.

Personal Project.

Design challenge.

How can we design an exciting platform and create a unique community?

Reduce structure complexity and create a smooth user flow.

The site structure is simplified to only go two layers deep in the navigation, which will require less demand on the user when navigating. By classifying all the pages down to two states, menu items, and inner page allows the users to be clear on where and what they are currently doing. The menu items were reorganized and repositioned to be shown on the left-hand side for the user to access at all times. The sidebar design also provides users with a visual queue of where they are at.

Creating a new hierarchy of showing all the possible options.

While the original fan card management requires users to go into a separate page, the new design allows users to manage all their plans on the same page freely. The changing plan process has also been cut down to only two-step: select plan and pay. To view the card in full size, simply click on the card, and it will display the card design in full size with the name and start date.

Provide more editing options and a streamlined process.

The new text editor now allows creators to expand from the original product and add more creativity to their posts. The new text editor has additional options such as italics, highlighting, list, etc. Moreover, inspired by Notion, users can now quickly drag and drop different lines to make the editing process smoother. Additionally, the post detail and options side panels were also patched up, and an auto-save feature was added to streamline the experience.

Merging similar information and reducing the steps.

The new payment system merges the pledge information with the dashboard that was initially separated but showcased similar information. Requesting payment is also simplified down to only one page, which prevents the user from going back and forth between pages.

Understand the time of use and provide the options.

Responsive design.

Reorganized structure.

Project research.

Understanding the frustrations and confusion with the current users.

Wesley

Current supporter.

It’s quite confusing and hard to find and open up the fan cards since I need them sometimes to show them to the illustrator at the events.

富士やま

Manga artist.

I feel like there’s not a lot of option with the text editor, there’s only Header, Bold, and Hyperlink. The pledges page can be a little bit confusing for me. I don’t get the difference between processing and non-processing.

Takeaways.

01.

The system feels like a labyrinth.

02.

Hardship in managing payments.

03.

Lack of customization.

Current issue.

Confusing navigation.

On the original site, the creator’s menu is placed in a different location from the user’s menu, creating confusion amongst the user. Moreover, they have their categorization within each menu, which adds unnecessary complexity to the system.

Lifeless interface.

While the platform targets the Japanese anime culture, which is lighthearted, energetic, and full of life, the original website design is dull and rigid. Everything is kept to its most basic form, which may result from trying to emphasize the work rather than the interface. However, I believe the site should provide a more exciting visual system to elevate users’ experiences.

Usability testing & iterative design.

Design system.

Documentation of all the design parameters.

Color.

Typography.

Layout.

UI elements.

Iconography.

Responsive.

Airbnb

Redesigning the corporate identity of Airbnb.

#BrandDesign