1. HPL 3DP Center Website
Year: 2020
Team: Jiwon Jun, Andrew Fitzhugh
My Role: Design Lead, Brainstorming, Wireframing, User Interface design, Interactive Prototyping, User Testing
![]()
HP’s Multi Jet Fusion 3D printer is a production-ready industrial manufacturing solution. Its powder-based printing technology allows customers to produce a lot of 3D-printed parts at high speed.
Nesting is one of the tasks that need to proceed before each batch of printing. A printer engineer needs to prepare and nest digital 3D models to fit them into a printer bed size. Although some
software provides a feature to support the process, it still requires the engineer to manually rearrange 3D models to achieve better print quality.
Team: Jiwon Jun, Andrew Fitzhugh
My Role: Design Lead, Brainstorming, Wireframing, User Interface design, Interactive Prototyping, User Testing
![](https://freight.cargo.site/t/original/i/0782f010cc5f4a624e4a7594d18dbe6d9b6b648c4a2389bd7cb688abe92080e3/HP-3D-5200-printer-series-2.jpeg)
![](https://freight.cargo.site/t/original/i/0d341ccb8cbfc9e8e2d2d8e52d8abfc20cb36106907e706c73310523e25320a2/hp-3D-cover.jpeg)
![](https://freight.cargo.site/t/original/i/56ece0805572050fb9bc4c9f7b28498a229fb79ea470f717a26f5cb64f0d6d06/hpl_thumb2.jpg)
[Diagrams]
![](https://freight.cargo.site/t/original/i/1a27006887e52510cd390bf7f53766339aa3b02d9f1141d3d1e1d0094f6f2a02/Slide1.jpg)
Investigating 3D-printing workflows from start to end
![](https://freight.cargo.site/t/original/i/679bdc2c40e80299d7f4eea3eba04e7bc5efcbf54fcd3c4ae452f90e962d4d62/hpl_06.png)
Redesigning the workflow based on users’ pain points
[Sketches]
![](https://freight.cargo.site/t/original/i/551bd05dfa69deb0423ff3e9d1c550d35bd68693381109a51b77cc94b62bd1de/ui-sketches.png)
[Wireframes]
![](https://freight.cargo.site/t/original/i/51d38ab8c0df5a801d4ae22480b006199d757e722ec82ad04be293296049d4af/web_1.jpg)
1. Dashboard
o Allowing a user to see all the status information of printers at a glance
o Providing details of the printer status with the expansion panel
o Providing a list of automatically nested builds and buttos for details
![](https://freight.cargo.site/t/original/i/a20baafcfd117aaa7c65aae1549e633bd505850b44bf9328451712f692e85d36/web_2.jpg)
2. Auto-Packed Build Selection
o Allowing a user to compare production info of nested builds with different settings
o Providing an access to the detail page
o Allowing a user to select one of the builds to print
![](https://freight.cargo.site/t/original/i/f341871f65058a0d565803cdebc6d8ed27d306b7da941d981cb999e21a42e831/web_4.jpg)
o Helping a user confirm estimated
production info of selected build
o Providing a list of the 3D models included to the build
o Allowing a user to proceed with printing by committing to the build
o Providing a list of the 3D models included to the build
o Allowing a user to proceed with printing by committing to the build
![](https://freight.cargo.site/t/original/i/6eef6f3af24101d8a726c99b3322a664fcc5fd1bbf5681cdbd3f44b9b27ae314/web_3.jpg)
4. Auto-packed Build Selection Confirmation
o Confirming a user’s build selection before printing
o Highlighting the information of the selected build
[Interactive Prototype]
Interactive prototype used for virtual user testings
2. C-Games
Company: Amoeba Design (2012)
Client: LG U+
My Role: Market research, UI strategy & design, wireframes, and user flows
Client: LG U+
My Role: Market research, UI strategy & design, wireframes, and user flows
![](https://freight.cargo.site/t/original/i/d95d53ee2b6e76b6f103ae3bc409407aececff4434b6118f8fed0d621acee3ea/cgames2_o_n.jpg)
[Information Architecture]
![](https://freight.cargo.site/t/original/i/40c4cf70eee7585cfade3fb94f0de46d56e61b9dfeb8d65a797acbc15694520b/C_flowchart_o.png)
System structure & flow
The service on each platform has almost identical information hierarchies. A flow of the contents is analogously designed to provide a seamless experience to users who use the service switching platforms.
[Wireframes]
![](https://freight.cargo.site/t/original/i/2c98e5128f1b8452aeb4cb9064de19e306f46309b685c79aa311780c778edc9e/carge_wire_full_o.jpg)
UI wireframes of main screens
Smart Phone: To provide a user with a screen view focusing on contents, menus are hidden outside of the home screen. A user can call the menu by tapping C-games logo button or by swiping the screen from left to right.
PC: Items are displayed on three columns, and a list of game items is expanded as default for users to browse them at a glance. A user can check a brief information of each game title with a context pop-up.
TV: The number of supplementary buttons are minimized considering a restrictive key controlling on TV. A user can perform a specific job quickly with function buttons on a remote controller.
![](https://freight.cargo.site/t/original/i/d0dbcbd2d79255b3581cac35ab288d85570c3d905a4a46bdc35536adb467b520/c_wire_my1_o.jpg)
![](https://freight.cargo.site/t/original/i/a5da4f3083034c7db19d170ef7dee5453fd70dd0b2a6eb684c7b45f00fc33aa1/c_wire_game1_o.jpg)
UI wireframes for mobile screen
![](https://freight.cargo.site/t/original/i/55c350b772a5a87b5fa6ebfd43e3659e8d8d567e28b6f60a3f7048312fc358bb/c_wire_tv2.jpg)
UI wireframe for TV screen
[Final Products]
The final product was produced in collaboration with development and GUI teams, and it was launched on each platform successfully.
Mobile
![](https://freight.cargo.site/t/original/i/2475e5fb5c9e1b00bc6921f648e19db7bffaa863e9fd487c50f70294c2167a2c/c_w2.jpg)
![](https://freight.cargo.site/t/original/i/5a174d140fd6ed0706859c5d7375662c52f11bcea0b348d2b5c48ec6fdbff6f2/c_w3.jpg)
![](https://freight.cargo.site/t/original/i/2c85e766a7e678ea79ddfbfc4749125fe1b069de69a0f43eb26a044aab705b01/c_w.jpg)
Web
![](https://freight.cargo.site/t/original/i/aca75986088dadb462db4b68babc4a04515f082ac0c8396ebab7272c28648467/c_tv_o.jpg)
TV
3. Smart Appliance
Company: Amoeba Design (2012)
Client: LG Electronics
My Role: brainstorming, designing wireframes and user flows based on the result of the usability test
Client: LG Electronics
My Role: brainstorming, designing wireframes and user flows based on the result of the usability test
The project entailed upgrading the previous version of a user interface of LG electronics’ smart appliance applications. The primary goal was to make a prototype application for the next model, and my team was responsible for improving the UI based on a usability test. I participated in the whole process and designed wireframes of the applications.
![](https://freight.cargo.site/t/original/i/c5e35a91c125c1e1f62360003d8c9b3de4e50cc75bb7ef70d6ebeaaf0dd7fb4e/smart_o.jpeg)
1. Usability Test
Recruited Users: married women between the ages of 30’s and 50’s who have a refrigerator, laundry machine, and oven.
[Hardware application for the smart refrigerator]
![](https://freight.cargo.site/t/original/i/037c12cf5eafdbd895dbcd6080eb54ddd0e9b7ca0330eaff11f260aade8742d1/s_u_r_x_o.jpeg)
1-1. Food Manager: the process of adding new food item to application was too complicated.
1-2. Food Manager: summary of expired food items was needed.
1-3. Recipe: the user wanted to check cooking ingredient that were not saved in the Food Manager.
[Hardware application for the smart washing machine]
![](https://freight.cargo.site/t/original/i/072fe239037cd691ee64b042ba7b5ae6cb250c234b69df45bde0aacc78753df6/s_u_w_d_o.jpeg)
2-1. Home: washing time information was required for laundry course selection.
2-2. Course settings: the user wanted to see all the laundry options at a glance.
2-3. Course settings: the user wanted to check the time required for the completion of the selected course as well as the time for waiting.
2-4. Washing screen: an intuitive way of adjusting reservation time was needed.
2. Wireframe Examples
[Hardware application for the smart refrigerator]
![](https://freight.cargo.site/t/original/i/a380616f4813ff73d768b18302e1bfef205978dfeaccf867eb51a2de1002ce0d/s_wire_food_re_o.jpeg)
![](https://freight.cargo.site/t/original/i/12b032d704224940541615dfbdd700048b3a76ec42d6840aca0cd661dfcb9660/S_wire_food2_o.jpeg)
2. Recipe: for quick check of cooking ingredients to buy, we decided to show the contents of the recipe and filtered ingredient list at once.
[Hardware application for smart washing machine]
![](https://freight.cargo.site/t/original/i/e45cad5f6ed51a5e2aebd5b6541dbaf967493d74c7386c06aef88cd8a0042353/s_wire_s_re_o.jpeg)
![](https://freight.cargo.site/t/original/i/7c5e15af0ad8478ccd610d8b75f2d6ccf0cb6339cab6299d5d3c497544081b08/s_wire_s2_o.jpeg)
2. Home: we displayed the washing time information on the title of the laundry course according to the findings from the test.
3. Washing: originally, a user couldn't modify the reserved washing time after the washing started. However, by providing a handle on the status bar, we intended to allow a user to change the time setting more arbitrarily.
3. User Flow Examples
![](https://freight.cargo.site/t/original/i/3a9ae877297eadbaa7918108797a68ef9e2cfa60e6b68d6f7f1380c0fa04c960/s_flow_re600_o.jpeg)
![](https://freight.cargo.site/t/original/i/b09e2cb951604527a1d4a0ba4c8c8e8a3b25f0b4e275ea35fc4f54f36b4769df/smart_flow2_o.jpeg)
![](https://freight.cargo.site/t/original/i/acbd6b1b1ffcc57727d5d814385ef2837ac6a57927c06d32d85c0c0c764b5756/smart_flow_o.jpeg)