TUGAN.AI

TUGAN.AI

I designed web for an AI platform allowing users to input videos & articles and then convert to their preferred format

I designed web for an AI platform allowing users to input videos & articles and then convert to their preferred format

nov 2023

nov 2023

WEB DESIGN

WEB DESIGN

tugan.ai

tugan.ai

Project overview

Project overview

TUGAN.AI is an AI-powered platform which helps users convert existing videos, articles, etc. into their preferred content format. They have been featured on Product Hunt and have a running platform already, but the usability and visual aspect of it needs improvement. That's when I jumped in to help re-design the whole platform (all modules) and also designed new features for their upcoming launch.

TUGAN.AI is an AI-powered platform which helps users convert existing videos, articles, etc. into their preferred content format. They have been featured on Product Hunt and have a running platform already, but the usability and visual aspect of it needs improvement. That's when I jumped in to help re-design the whole platform (all modules) and also designed new features for their upcoming launch.

Design process

Design process

DEFINE

OBJECTIVES

DEFINE

OBJECTIVES

Understand the problems client is facing, their requirements and final goals of this project.

Understand the problems client is facing, their requirements and final goals of this project.

IDEATE

VISUAL DIRECTION

IDEATE

VISUAL DIRECTION

Research on styles and create a moodboard & a visual direction that fit brand values & clients’ requirements.

Research on styles and create a moodboard & a visual direction that fit brand values & clients’ requirements.

DELIVER

UI DESIGNS

DELIVER

UI DESIGNS

Deliver UI designs based on approved visual direction, both PC and mobile responsively. Update based on clients feedback.

Deliver UI designs based on approved visual direction, both PC and mobile responsively. Update based on clients feedback.

1. Define objectives

1. Define objectives

Context

Context

• Current platform is functional, but the visual aspect is poorly displayed and the platform is not easy to navigate and use for users.

• Current platform is functional, but the visual aspect is poorly displayed and the platform is not easy to navigate and use for users.

• The current version lacks some key features that need to be added in.

• The current version lacks some key features that need to be added in.

Requirements

Requirements

• Leverage visual aspects of the whole platform in a consistent while keeping it lean, simple & easy to use for users.

• Leverage visual aspects of the whole platform in a consistent while keeping it lean, simple & easy to use for users.

• Deliver 2 responsive breakpoints: PC & mobile.

• Deliver 2 responsive breakpoints: PC & mobile.

• Deliver 2 themes: Dark & Light (Primary is Dark)

• Deliver 2 themes: Dark & Light (Primary is Dark)

2. Ideate visual direction

2. Ideate visual direction

Visual research & visual direction

Visual research & visual direction

As for the rush timeline of delivery, I collected inspirations right from client and did a little research on how other AI platforms' styles tend to be. I could see similarities in the way AI platforms use futuristic & universal pattern to promote the functionality of their tools. As direct competitors of Tugan.AI are not quite keeping up with this style, it would be a huge bonus if Tugan.AI can deliver that feel for users.

I then conducted a visual direction and presented it to the clients. They were happy and didn't request any changes. The visual direction phase seemed to be a success:

3. Deliver designs

3. Deliver designs

Normally, when I successfully presented the visual direction and geot clients approved, I will have a more easy time delivering UI design. But this case is different. I designed a quick draft following the visual direction, but the output was not what they expected. It's too complicated and visual highlights are everywhere:

💡

Visual direction is always beautifully presented, so clients may have an easy time approve it. To help clients better assess the visual direction, we can go further and make a very simple draft of that direction with client product's content.

But I still think that I was lucky because I delivered the first draft quickly instead of only delivering after completing the whole module. That still saved lots of time. Eventually, I was able to crafted the style that matched my clients' expectation. It still looked good, in a simpler and leaner way.

After being able to get on the same page with clients about the style, I could deliver the other modules more and more quickly. The process was getting more and more seamless.

Delivering quickly also helped me iterate the design better from clients feedback. Axel was a very detail-oriented man, he would went into every tiny details of my output and had questions for it.

Delivering quickly also helped me iterate the design better from clients feedback. Axel was a very detail-oriented man, he would went into eveyr tiny details of my output and had questions

I repeated that process throughout 5+ modules of the whole platform, with the final delivery in early December. Both PC and mobile responsive, light and dark theme. See the final design below! (Swipe right for light theme and mobile responsive):

Delivering quickly also helped me iterate the design better from clients feedback. Axel was a very detail-oriented man, he would went into eveyr tiny details of my output and had questions

Dashboard

Dashboard

Tools list

Tools list

Quick convert

Quick convert

Projects

Projects

Main generation tool

Main generation tool

Setting/Plan

Setting/Plan

OTHER PROJECTS

OTHER PROJECTS

SNAPVID.AI

SNAPVID.AI

I designed web pages for an AI-powered platform allowing video editors to produce content efficiently.

I designed web pages for an AI-powered platform allowing video editors to produce content efficiently.

VUCAR

VUCAR

I designed a set of website pages for a Vietnamese used cars marketplace for both buyers and sellers.

I designed a set of website pages for a Vietnamese used cars marketplace for both buyers and sellers.

FTUSEATs

FTUSEATs

I designed a mobile app that helps students of Foreign Trade University book places for meetings and other activities.

I designed a mobile app that helps students of Foreign Trade University book places for meetings and other activities.

VIET HISTORY

VIET HISTORY

I designed a mobile app that helps Vietnamese enthusiasts learn & explore Vietnam history in a better way.

I designed a mobile app that helps Vietnamese enthusiasts learn & explore Vietnam history in a better way.

James

or send inquiry to transontung4010@gmail.com

or send inquiry to transontung4010@gmail.com