Fujie Design
Visual | UX | Experience
2014-01-26 19.15.24.jpg

Prototyping 101

Prototyping 101

What  I learned from 8 years of industrial design training and why is it important in UX  design

 
I have always been a maker. I prefer to demonstrate my ideas with models, preferably touchable and tangible. I enjoy exploring touches, textile and haptic feedbacks.
 
Please enjoy a quick overview of my explorations and experiments of prototyping in various medium.
 

 

Electronic Prototyping

Tangible Interface for Controller

Playing with one of the best Kickstarter launches - LittleBits, has given me and my teammate a great opportunity to explore the mechanism and programmable parts. Our team wired up a set of LittleBits with simple switches to manipulate the interaction. By fine-tuning the motion in Arduino App on computer, we concluded that this exploration has opened up many opportunities for a category of interaction projects. 

 
 
 

Using motor unit to manipulate motion

Playing and testing with Servo unit. This is a quick demo for using motor unit to mimic rotary toll that could roll up fabrics.

 

Playing and Testing with Servo from Little Bits.(A brand of easy-snap-on electronic parts in a box. Perfect for programming-starters like me) 


 

| Digital Prototyping

Modern design has always been related and pushed forward by new softwares. I have came across many of the great softwares that enable me to do quick prototype for app mockups and interface mockup to get more user insights and conduct observations.

My daily go-to tools are:

Figma - Cloud-based team-focused design tool for UX prototyping. I love how quick and easy I could demonstrate an end-to-end flow and storyboard.

Sketch - The most powerful UX prototyping tool that can plug into almost all other prototyping tool, needless to say there are tens of third-party plugins that empowers the hand-off process between design and development.

Adobe XD - New and fairly young in the competition, Adobe XD remains light-weighted and stable even when handling large files. Being the first to have in-app prototyping and able to record video of interaction, I have made many useful assets in a pinch for a quick presentation when needed. 

Please check out some of the prototypes I made in Adobe XD:

 

 

Paper Prototyping

| From paper to digital via POP app

POP app allows user to take paper mockup as pictures and block out designated areas to be interactive. By linking different pages of mockup together, designer can easily test out the flow, the layout of the interface and very first-stage mistakes and pitfalls of the design

I used POP app for several of my projects to get fast and vast feedbacks. Hosting the flow on the phone allowed me to carry the prototype with me and do quick show-and-tell even during coffee breaks with my colleagues. I got very straightforward feedbacks immediately.

 


Understanding VR UI

Virtual Reality, Augmented Reality and Mixed Reality are fairly new concepts to the audience. Although there are volumes of research paper to read, gaining an actual understanding by mocking up on paper still provides me with impeccable first-hand study experience. 

 

 
vr initial sketch.png
 
 

Analyzing User Research and User Journeys

Mural.ly

Mural.ly allows me transfer traditional sticky notes from paper form into digital form. I also collaborate with my team members via this platform. From data affinitizing, to experience journey mapping, information architecture, I have had so much great outcomes and inspiration from this platform. See how I used Mural.ly in MySCAD redesign project for IA and site structure.