top of page

INTEGRATED SOFTWARE SOLUTION

AND GUI STYLE

Responsibility: UI lead designer, individual contributor. Moodboard styling. Define keywords and direction. Design micro-interaction & animations and develop with engineers.

libra musician.png
Screenshot 2020-12-03 at 10.57.38 PM.png
MicrosoftTeams-image (1).png

ScreenXpert Generation one

 

ScreenXpert tutorial

There's a tutorial teaching user how to use the functions

1. Select the tutorial episode. Each tutorial guides the user how to use ScreenXpert app.

2. Animation and words guide every action

Final window.png
Launcher-1.png
Task Grouper.png
Task grouper 1-1(C-part).png
Task viewer-2.png
Intro screen.png

Generation 2 direction

​Style boards 

The inspiration boards have more specific elements that will show up in the resulting product. Before I design GUI, I try to catch the direction, feeling, mood and elements from the style board.

How to define styling?

Know my user first. fro example, my user is professional content-maker. Tend to multitask and work efficiently. Age group around 35. Hence I define the keywords as Precise, Seamless, Thoughtful.

Also, based on the UI trends, I also forecast next years styling in order to be a step ahead.

r.PNG
b.PNG
v.PNG
ds.PNG
Screenshot 2022-05-02 at 7.52.10 PM.png

Screenpad Plus next GUI proposal

Launcher_bom1.png

Card design element, filled icons to increase the visibility. Customisability- dark and bright mode. 

launcher_left1.png

Photoshop Gadget

superimpose.jpg
superimpose3.jpg

 End product

ZenBook-Pro-Duo-OLED-UX582.jpeg
launcher_centre 14‘’.png

System guideline

Design to adapt Windows operation system. Margins, coordinations, fonts. Make sure our OS is compatible upon windows support.

km.PNG

Screenpad Next generation GUI Proposal

asus_zenbook_pro_14-678_678x452.jpeg
sp.jpg
App.png
Taskgroup.png
Artboard 1 copy 2.png
sp quick access.png
bottom of page