Portfolio

UI & UX Design / Product Design / Graphic Design

HUNG-CHUN HELEN YEH

01 Product Design - ActorCore

Mind Tree

Flowchart

Low-fidelity Wireframe

Hight-fidelity Wireframe

02 Reallusion Hub

Description

Low/High-fidelity Wireframe

03 Website Design - MarketPlace Renovation

Description

Low-fidelity Wireframe

Hight-fidelity Wireframe

04 UI/UX Design - Cartoon Animator Dark Mode

Introduction

Image Sample

05 UI/UX Design - Interface Enhance

06 Game Design - Final Fantasy XV Pocket Edition

Flowchart

Low-fidelity Wireframe

Hight-fidelity Wireframe

07 Graphic Design - Icon Design

Highlight:

The goal of this project is to create a brand new market and allow get a foot in the door and introduce it to those users who have nothing about this company. More people using the products from this site can bring up the company's exposure and visibility.

Here are a few requirements that need to keep in mind:

• the market is open only open for RL users but the people around the world

• Using the website to introduce users know more about the company, Reallusion, and the products that have

• This website only sells elegant and perfect products and eliminates the poor quality items; also to make this site stands out to the whole 3D animation market

• Users can view animation-motion and 3D avatars in real-time

• The website has to provide the smooth e-commerce users-experience

MarketPlace Content Store ?

RL Users Not RL Users

Problem Research Design & Develop Development Usability Test Test & Release framework Define Current Problem Target Audience Similar Product

ActorCore Define

https://actorcore.reallusion.com/

Brainstorm

• Advertisment

• Rough Product Info

• Usage

• Quick Links

• Introduce RL

• About the website

- Quick Intro

• How to export the products

• How to Import the products

• Funcational Feature

• Product Name

• Quick Short-Cut Cart

• Favorite

• Price

• 360° View

• Promotion Tag

• Search bar

‐ Live Suggestion

• Packs & Items

• Category List

‐ Free ‐ Latest ‐ Promotion

‐ Main List

‐ Quick Search Tags

• Sorting & Filter

• Setting

• Hamburger

• Real-Time Preview Window

• Product Thumbnail

ACTORCORE

• FAQ

• Forum

- Notification

• Feedback

• Product Name

• Quick Short-Cut Cart

• Favorite

• Price

• Animated Motion

• Promotion Tag

‐ Animate Image ‐ Still Image

• Product Name

• Product Price

• Discount Price

• Total Summary

• Payment Options ‐ Visa / MasterCard ‐ Paypal

Point

• Selection Checkbox

• Inventory

- Motion/Actor Page Separate

• Order History

• Personal Account

- Sign in/Sign Up

- Personal Information

• Download Panel

- Allow Users check download history

• Favorite Storage

Home Avatar Motion Tutorial Cart Account Information

‐

RL DA

Shopping Process Start

Place order Order Complete

Buy ?

shop actor section shop motion section browse through the content choose one item keep shopping? register as member?

Sign

RL members new users check out? go to shopping cart

take a look at category list preview the item apply preset motion

Low-fidelity Wireframe

Logo Actor Motion xxxxx xxxxxxxxxxxxxx Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Logo Actor Motion xxxxx Category List Trending xxxxxxx xxxxxxx Latest xxxxxxx xxxxx Theme xxxxxx xxxxx xxxxxx xxxxx Main Category xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxx xxxxxxxx Show All Packs only Items only Sorting $999.99 Add to Cart Logo Actor Motion xxxxx Category List Trending xxxxxxx xxxxxxx Latest xxxxxxx xxxxx Theme xxxxxx xxxxx xxxxxx xxxxx Main Category xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxx xxxxxxxx Show All Packs only Items only Sorting Logo Actor Motion xxxxx Category List Trending xxxxxxx xxxxxxx Latest xxxxxxx xxxxx Theme xxxxxx xxxxx xxxxxx xxxxx Main Category xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxx xxxxxxxx Show All Packs only Items only Sorting Logo Actor Motion xxxxx Category List Trending xxxxxxx xxxxxxx Latest xxxxxxx xxxxx Theme xxxxxx xxxxx xxxxxx xxxxx Main Category xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxx xxxxxxxx Show All Packs only Items only Sorting Logo Actor Motion xxxxx Proceed to Checkout summary Item Name Item Name Item Name Item Name Item Name $999.99 Item Name $999.99 $999.99 $999.99 $999.99 $999.99 $999999.99 Item Name $999.99 Item Name $999.99 Logo Actor Motion xxxxx Actor Motion Download xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx Logo Actor Motion xxxxx Actor Motion Inventory Logo Actor Motion xxxxx Actor Motion Favorite Collection Logo Actor Motion xxxxx Order History $999.99 Logo Actor Motion xxxxx Lorem

Buy Buy Buy xxxxxxx xxxxxxxxx xxxxxxxxx Also Buy? Total: $999.99 Checkout Quanity: 5 $999.99 $999.99 QTY 1 QTY 1

ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis

High-fidelity Wireframe

Mobile Version - Low-fidelity Wireframe

Menu Lorem ipsum Lorem ipsum Latest Free Category_xxx Category_xxx Category_xxx Category_xxx Category_xxx Category_xxx Search Search Inventory All Pack Item All Pack Item All Pack Item $000.00 Shopping Cart $000.00 $000.00 $000.00 $000.00 Shopping Cart $000.00 $000.00 $000.00 Shopping Cart $000.00 Inventory Inventory Download Account Download History 2020/00/00 2020/00/00 Order History 2020/00/00 2020/00/00 2020/00/00

High-fidelity

Mobile Version -

Wireframe

REALLUSION - HUB

Reallusion Hub is an application from Reallusion Inc. which can help users organize and always keep products in one place.

Colour Guideline

Purpose

• Old Style

• Users have to scroll down from the panel if a product locates at the very bottom of the page

• Related plug-in applications spread all over the place

Highlight

• Tone down the visual style, and fresh new layout design

• Try to minimize products to one page

• Re-Organize related plug-in applications

Original Old Version

New Version

REALLUSION - HUB

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Installation xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Trial xxxxxxxxxx Install 1.0 xxxxxxxxxx Install V 1.0 View Download Update Ac orCo Content S o e Mar etplace Setting P oducts CATRGORIES Learn Suppo COMMUN TY RESOURCE LINKS P oducts xxxxxxxxx Install 1.0 App o ry xxxxxxxx xxxxxxx xxxxxxx ull English xxxxxxxx xxxxxxxxxxx Full English rial English 1.5GB Trial Unreal Live Link Install 1.0 Omniverse Connector Install V 1.0 MetaHuman Live Link Install 1.0

Update ActorCo e Con ent t re Marketplac e ting P oduct CATRGORIES Learn Support COMMUNITY RESOURCE LINKS Products Download List All Products have downloaded Download & Install 2 Version 5.0 Download & Install Update ActorCore Content Store Marketplace Setting Products CATRGORIES Learn Support COMMUNITY RESOURCE LINKS Products App to try All Purchased Installed xxxxxxxxxxxxxxxxxxxxx... V 1.0 Trial 200MB Rokoko Installed V 1.0 Perception Neuton Installed V 1.0 Motion Live Pipeline Plugin IC 7 IC 7 Headshot V 1.0 Trial 200MB IC 8 IC LeapMotion V 1.0 Trial 200MB IC LIVE FACE Install V 1.0 IC 7 Trial V.5.0 V.4.0 Try Cartoon Animator Trial English | 1.5GB V. 4.2 V. 3.0 Install Character Creator Full | English Trial V. 8.0 V. 7.9 Full English Open iClone 99+ Version 5.0 *Click the products above to switch Download & Install Update ActorCo e Con ent S o e Mark tplace S tting P oduct CATRGORIES Learn Support COMMUNITY RESOURCE LINK Setting General

Low- Design High- Design

Download Browse Version 5.0 Download & Install Update ActorCo e Con ent S o e Mark tplace S tting P oduct CATRGORIES Learn Support COMMUNITY RESOURCE LINKS Products Main Update Update All SkinGen Premium Plug-in 850/999 MB V 1.1 Plug-in Pause Motion LIVE Plug-in Download Completed V 1.1 Plug-in IC 7 Pause Headsho Plug-in 55/999 MB V 1.1 Plug-in CC 8 Pause SkinGen Premium Cartoon Animator 4 700/999 MB Pause V 1.1 Pipeline English Car oon Animator 3 Waiting or update... V 1.1 Pipeline English Pause 2 Version 5.0

MARKETPLACE Website Reform

https://marketplace.reallusion.com/

Purpose

Increase website visibility and usability, imporve search bar and tag function from current website.

Problem from Original Design:

- Users have trouble finding items

▪ lost in website

- Main Page contents too many information

- Re-organize filter function

Home Popular Items Search Model type: 2D/3D Top Selling Filter Options Item Display Top banner Search action Related Tag/Live Suggestion Filter Function and Index Content Structure

MARKETPLACE Website Reform - Low-fidelity

Search bar Style Options

xxxxxxxx xxxxxxxx xxxxxxxx Search 2D 3D MORE POPULAR RECOMMENDED PUBLISHING XXXXXXXXXXXXXXXX DEVELOPER MORE tag# tag# tag# tag# xxxxxxxx xxxxxxx xxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxx VIEW 50 100 1 2 ...999 xxxxxxx xxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx 2 selects 2 selects xxxxxxxxx xxxxxxxxx Style 1 Style 2 Character Creator Iclone 3D 2D Character Creator All Iclone Iclone xxxxxx Iclone Cartoon Animator Character Creator 1 2 3 xxxxxxx 2D 3D xxxxxxx

Wireframe

MARKETPLACE Website Reform - High-fidelity Wireframe

xxxxxxxx xxxxxxxx xxxxxxxx actor horror medieval Historical Male body lizard kinds bones animal SHOW LESS iClone (3) iClone v7.90 above (3) iClone v7.90 above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 above (3) iClone v7.90 above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 above (3) iClone v7.90 above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 above (3) iClone v7.90 above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 above (3) iClone v7.90 above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 above (3) iClone v7.90 above (3) iClone v7.90 or above (3) iClone v7.90 or above (3) iClone v7.90 or above VIEW 50 100 4 ...999 GO SORT BY Miscellaneous Price Date Published Product Included Author Compatibility Generation Genre Category Product CLEAR VIEW 50 100 ...999 GO 9999 ITEMS, 999 PAGES iClone DEVELOPER MORE namenamename namenamename namenamename namenamename namenamename 3D 3D 3D 3D 3D namenamename namenamename namenamename namenamename namenamename 2D 2D 2D 2D 2D xxxxxx xxxxxx xxxxxx MORE RECOMMENDED PUBLISHING XXXXXXXXXXXXXXXX Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nibh purus, porttitor vel lobortis vitae, pellentesque eget enim. Phasellus dictum sollicitudin BECOME A PLUG-IN DEVELOPER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nibh purus, porttitor vel lobortis vitae, pellentesque eget enim. Phasellus dictum sollicitudin BECOME A CONTENT VENDOR JOIN NOW JOIN NOW tag# tag# family pack business tag# POPULAR WEEKLY DEAL

Result - Overall optimized

Website Reform - Website

MARKETPLACE

Software Interface Enhance - Cartoon Animator

https://www.reallusion.com/cartoon-animator/

Why Dark Mode?

Originally, Cartoon Animator only has a light colour theme for so many years, but there are always suggestions called from users that why not have a dark theme colour for the software. The team gather together and decided that Cartoon Animator has to have two colour themes, light and dark mode for users who prefer for use.

Reference Software:

3D software: Unity, Maya, Blender

2D software: Adobe Illustrator, Photoshop

Define Problem Research Design & Develop

Test & Release

Users’ suggestion Similar Product

Colour Guide Library Usability Test

STAGE MODE File Edit Create Animation Control Render View Window Plugins Help Cartoon Animator Opacity: 100 X 000 W 000 H 000 R 000 000 000 0000

Dark Mode

Style Guide Display

Tree View Tree View Tree View Default Hover Pressed Selected Tree View Tree View Tree View Tree View Default Hover Pressed Tree View Select Disable Colour Guideline Tab Button Background: # 333333 Layout outline: # 4c4c4c Button outline: # b2b2b2 Default Font: # d5d5d5 Hover Font: # d5d5d5 Select Font: # e8380d Hover: # 282828 Pressed: # 1e1e1e Select: # e8380d Default: # 333333 Disable: # 444444 Tree View Theme Primary Text/Icon secondary Disable Hover Select Pressed #e8380d #333333 #b2b2b2 #4c4c4c #444444 #282828 #e8380d #1e1e1e Additional Note Link # cc3e52 # 629ccc Current Frame: Collect Clip Transform Flip Visible Link Opacity Motion Face 000 Lorem ipsum dolor Motion Transform Root_X Root_X 70 75 80 85 90 95 100 105 110 115 120 125 130 135 140 145 150 155 160 165 170 Sprite Root_X

Interface Design Enhance

Purpose: Design a user-friendly interface environment for 2D and 3D character creation and animation software developer tools

Mainpulate ohne Hierarchie (Shift) Head Turn Animation Setup Sprite Hold Shift-Key to Move Selected Element. Part Select Motion Bone Left Hand Left Hand Left Hand Left Hand Preivew Default RichtenSiedenWinkeldesBewegungsk Show Motion Bone Scale Ratio Please select a bone to key frame motion. You may use Ctrl or Cmd) + mouse click to lock bone. Constraint Control by Lock Keep End Effector Rotate Stretch Bone Use Initial Pose Reversal Set Current Key Reset Full Body Select Part Keying Unit Image View Tree View 2D Motion Key Editor Please select a bone to key frame motion. You may use Ctrl or Cmd) + mouse click to lock bone. Constraint Control by Lock Keep End Effector Rotate Stretch Bone Use Initial Pose Reversal Set Current Key Reset Full Body Select Part Keying Unit Image View Tree View

Final Fantasy XV Pocket Edition

https://finalfantasyxv.square-enix-games.com/en/pocket-edition-hd

Final Fantasy XV Pocket Edition is a mobile game developed by Square Enix and released on IOS, Android, and Windows devices.

Three highlights for this mobile version:

• 2D hand-drawing style (non-realistic)

• Friendship is the main theme that has to keep in mind

• Characters development as the story goes on

Purpose

• The mobile version is the condensed version of the original game

• The gameplay level has to fit with light users

• Users can also enjoy the complete storyline and game experience as they play FFXV

Character System Battle System Dialogue System

• Start/Title Menu

• Save Point/Slots

• Chapter Purchase

• Main Story

UI System

• Game - HUD

• Battle - HUD

• Failure/Game Over

• Mission

• Dialogue

Cinema System Save System Camping System

Game Flow

gameplay flow New Game Title Load Game Play Game Battle Receive Quest Defeat Enemy Earn Ability Point Fail - Dead Back to Title Open Menu Character Status Equip Accessory Equip Weapon Unlock Ability Select Slot Use Potion Buy Items Sell Items Show Item Location Show Quest Info Ascension - Ability Tree Quest Map Item Shop Option