Overview

Tugan.ai is a platform that allows user to change content format from one to another seamlessly and accurately empowered by AI. I designed UI screens for Tugan.ai’s dashboard, generative AI screens and more, with dark/light theme & mobile responsive included.

Job type: Web platform design

Delivery: 2 months

Figma link: Figma

Process

Visual research & direction

To kickstart, I communicate with the clients regularly to understand their briefs. The requirements are:

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

Deliver 2 responsive breakpoints: PC & mobile.

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

After understanding the requirements clearly, I get started by collecting visual inspiration that fits the requirements from Pinterest. Later on, I delivered a visual direction strategy to the client so that we were on the same page regarding style:

Tugan.AI's Visual Direction

Delivering design & Iterate

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:

First version of Tugan.AI dashboard, which was rejected

Eventually, I was able to crafted the style that matched my clients' expectation. It still looked good, in a simpler and leaner way.

Tugna.AI approved vdasshboard version

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.

I repeated that process throughout 5+ modules of the whole platform. Both PC and mobile responsive, light and dark theme. See the final design below besides the Dashboard: