Four High Fidelity Prototypes You Can’t Miss Out On
How 4 UX designers built their competition-winning hi-fi prototypes
As we always look for ways to engage closely with users and encourage creativity in all kinds of forms, we decided to launch a prototyping competition (“Cloud Competition”) in our home country South Korea. At the same time, we celebrated the fact that we launched our Cloud feature enabling users to easily upload, share and deploy their prototypes. Hence, the name Cloud Competition ;)
It was a great way for designers to demonstrate their prototypes to fellow designers and learn from each other. Simultaneously, it was the ideal opportunity for us to see how the designer’s community in Korea would experience ProtoPie. Furthermore, we tested the waters to see whether we can pull an event like this internationally on a larger scale.
Below, 4 talented designers elaborated on how they built their competition-winning hi-fi prototypes and how ProtoPie adds value to their workflows.
Fluo Soup
What is your train of thought behind this prototype?
Fluo Soup: I wanted to make a prototype that would really embrace fun rather than focusing on UI, to be honest. I used the character DunDun, that I had drawn before. The theme that I wanted to use for this prototyping is expressing emotions. Moreover, I am all about learning new things regarding design. Hence, I always try new things to get achieve better solutions.
For this prototype, I was inspired by the ‘Panda’ prototype by Junhyuk Jang and ‘Payment’ prototype by Claire Shin who is a product designer at ProtoPie. Using triggers like Chain and Range the way they did helped me here. Then I decided what kind of reactions the character DunDun should express when feeding him various kinds of foods.
How did ProtoPie help you when creating this prototype?
Fluo Soup: I am a designer who knows only basic code. It would take me a lot of time to make micro-interactions like distinguish responses based on certain positions. Also, it would take me too much time when I have to compose multiple similar interactions. With ProtoPie, I can just punch in the right values I need and I’d have proper hi-fi interactions as my output. This was a big help for me.
What’s your favorite feature in ProtoPie?
Fluo Soup: Chain and Range. Depending on how you apply them, the possibilities are really endless.
Prototypes that I make for my job are no longer just static designs with varying images. With Protopie, I can build all these hi-fi interactions myself and test them. It’d only take little time to build a interactive prototype. It’s very convenient.
Jae-seong Jeong
What is your train of thought behind this prototype?
Jae-seong Jeong: One word to describe the ‘Books’ prototype would be ‘simplicity’. I focused on what this kind of app would be about which is searching, buying and reading books when creating this prototype. I listed the features I’d need and prioritized these. In prototyping, the most important thing is interactions.
I wanted the interactions to represent the philosophy and branding elements of the app and them to be as natural as possible. An example would be when scrolling through content, I wanted to express ‘infinite’ depth using Z Depth as one could say that knowledge is infinite.
How did ProtoPie help you when creating this prototype?
Jae-seong Jeong: When prototyping, I usually found it difficult to compose advanced interactions involving scrolling. Now, I could build this prototype using the Chain feature as easy as pie.
What’s your favorite feature in ProtoPie?
Jae-seong Jeong: I like the Cloud feature the most. It’s one of my major reasons to use ProtoPie because you can easily share prototypes, deploy them and get feedback instantly.
Hangyo Seo
What is your train of thought behind this prototype?
Hongyo Seo: I wanted to create funny prototype. In this prototype, the user gets to see a warning when the device volume reaches a certain level at which the risks for hearing loss are significant. My intention was to express this idea in a humorous way.
How did ProtoPie help you when creating this prototype?
Hongyo Seo: It’s the best tool out there to help you get started with prototyping. I really learned a lot, in just one day!
What’s your favorite feature in ProtoPie?
Hongyo Seo: It’s really nice to make scroll and paging interactions with containers using ProtoPie. Incredibly easy!
Jiyoung Yoon
What is your train of thought behind this prototype?
Jiyoung Yoon: It was supposed to be a gradual flow between ‘cover view’ and ‘list view’, but my intention was to differentiate in terms of interactions. Due to the concept of seamless switching between the two views, I wondered how dynamic layouts and their associated movements can intuitively explain the content on the screen.
How did ProtoPie help you when creating this prototype?
Jiyoung Yoon: When you just look at a static design and imagine the interaction, you would have a vague feeling like “If I’d do this, then this happens but what happens if I would do something else instead?”. Prototyping using ProtoPie is a great way to build the interactions that one has in mind and see how it works in practice. ProtoPie is very intuitive and has an easy-to-understand interface that allows you to bring your ideas on interactions to life easily.
What’s your favorite feature in ProtoPie?
Jiyoung Yoon: What I really love about ProtoPie, that other prototyping tools do not have, is the intuitive interaction panel combined with a timeline. For each Response, I could alter the timing settings. And I have tried several prototyping tools in the past, but it wasn’t like ProtoPie. Also, what I like are the customization of interactions, e.g. timing adjustments. ProtoPie enables one to do hi-fi prototyping easily and intuitively without having to write any code. For example, you could easily adjust timing differences between layers and interactions the way you like. I believe other ProtoPie users should definitely take fully advantage of the timeline panel as I do!
