Overview
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:

Tugan.AI quick convert screen

Tugan.AI's project page

Tugan.AI's main conversion screen

Tugan.AI's usage dashboard settings

A light theme example
Check out the website here: tugan.ai
Check out the Figma file here: Figma file
0 likes · 16 views · Dec 14, 2024
I designed web for Tugan.AI - an AI platform allows users to input videos & articles and then converts to their preferred format.