Published on | Prototyping: From UX to Front End — Medium Fredo Tan

How is prototyping for the iPhone X different than for other iPhones?

With the iPhone X coming out very soon, lots of things are changing for UI/UX and interaction designers.

I sat down with Jae-seong Jeong, a top notch UI/UX designer from Korea, to discuss his experiences creating high-fidelity prototypes for the iPhone X. Recently, one of his prototypes for the iPhone X received the most votes on UpLabs in the category iOS Design.

Jae-seong Jeong

Discover Jae-seong’s stunning prototypes here.

First things first, how did you approach prototyping for the iPhone X?
Jae-seong Jeong: At the time that the iPhone X was released, I was already working on this To-Do app concept (first prototype discussed below). First, I was playing around with interactions in After Effects. The thing that bothers me when using a motion tool like this is that I cannot experience what the interactions in my prototype are really like.

Therefore, I wanted to build real prototypes to actually ‘feel’ how the interactions would be. None of the prototyping tools out there supported the iPhone X (yet). I decided to go with ProtoPie and subsequently used custom resolutions and even made a mockup of the iPhone X for my prototypes. Feel free to use my iPhone X mockup!

Out of a wide array of prototyping tools that I have at my disposal, I usually go for the one that I feel most comfortable with. What I find important is that my entire prototyping process is easy and fast. Moreover, I want to share my creations via the cloud with others as I want them to be able to try the interactions themselves anytime anywhere. Also, what I like about the tool I made these prototypes with is the straightforward philosophy of interaction prototyping.

Eventually, I built 3 prototypes for the iPhone X and I will tell a little more about them below.

To-Do app prototype

To-Do app prototype for iPhone X.

Play around with the To-Do app prototype by clicking on the link below.

iPhoneX_Todo_Demo – ProtoPie

Jae-seong Jeong: This prototype was made in After Effects at first, as mentioned before. Hence, it didn’t take me much time to make an actual full hi-fi prototype based on what I made before. It took me 4 hours roughly.

What was the thought behind the To-Do app prototype?
Jae-seong Jeong: I focused merely on the overall flow and its corresponding interactions. What I wanted for this prototype to have is a clear starting point on where the Work category would expand, for example. Furthermore, I paid close attention to how certain interactions overlap and whether each element is aligned with the flow I had in mind.

Calendar app prototype

Calendar app prototype for the iPhone X.

Play around with the Calendar app prototype by clicking on the link below.

iPhoneX_Calendar_Demo – ProtoPie

Jae-seong Jeong: The Calendar app prototype took me longer than I expected, 8 hours. I spent most time thinking and sketching. Once I built the prototype, I had to spent time tweaking and fixing parts as I imagined them differently initially.

What was the thought behind the Calendar app prototype?
Jae-seong Jeong: For me, the Calendar app prototype is an experiment on playing around with all kinds of micro-interactions. For example, when you would select a certain date in the calendar, you are subsequently taken to the events of a certain date in the list of events below it. Or when you would scroll through the list of events, you can see the date mark move from one to another.

City Guides app prototype

City Guides app prototype for the iPhone X.

Play around with the City Guides app prototype by clicking on the link below.

iPhoneX_City_Guides_Demo – ProtoPie

Jae-seong Jeong: Making this prototype made me think more deeply about my purpose for prototyping. I always thought that it was more important to focus on little details. Gradually, I realized that it’s more important to build a prototype that has a clear, natural flow containing easy steps. Details can be added later, I’d say. Eventually, I spent the same amount of time on this prototype as I did on the Calendar app prototype, 8 hours.

What was the thought behind the Calendar app prototype?

Simplicity is the ultimate sophistication. — Leonardo da Vinci

Jae-seong Jeong: That’s what Leonardo da Vinci said. When you would break something down into smaller pieces you would be left with the most essential elements. What I am trying to say is that removing things that are not important and concentrating on the essentials would lead to a simpler and more user-friendly product. I try to incorporate this way of thinking into my designs, prototypes and products.

Prototyping for the iPhone X

iPhone X (Stuff).

How is creating hi-fi interactions for prototypes suitable for the iPhone X different, compared to other iPhones?
Jae-seong Jeong: Unlike the other iPhones, the iPhone X does not have a home button. This did give me some trouble along the way. Instead of a home button, there is this bar at the bottom of the screen. My biggest concern was making sure that the whole design was in line with these new changes in the iPhone X while maintaining smooth interactions. Also, as many designers did, I had my worries about the notch at the top.

Considering that the iPhone X, like the Samsung Galaxy S8, has a pretty long screen, it’s difficult for a user to use the device with solely one hand. Therefore, I made sure in the prototypes we discussed earlier that their content is easily accessible with simple gestures (using one hand).

What did you find the easiest way to create interactions for prototypes for the iPhone X?
Jae-seong Jeong: Conditional statements helped me to create interactions easily. In ProtoPie, I used the Chain trigger to compose many of my conditional statements. It’s very convenient creating interactions using these conditional statements without having to delve into code while still enjoying a lot of freedom in terms of possibilities due to these conditions.

What features should a prototyping tool have when it comes to the iPhone X?
Jae-seong Jeong: Of course, I should be able to select the iPhone X device sizes when building a prototype. Moreover, I wish to see a tool that would incorporate design features such as the ones Sketch and Photoshop have. It would help me create prototypes even easier and faster. Examples of features I would like to see are gradients, drop shadows and font settings.

Lastly, it would be awesome to export some code that I could hand to developers. A feature like this would definitely benefit the communication between designers and developers.

Thanks for reading! 🙂 If you enjoyed this article, hit that clap button 👏 below.

If you’d like to know more about ProtoPie, the tool that Jae-seong Jeong used for his 3 prototypes for the iPhone X, try it for free here!

3 Stunning Hi-fi Prototypes for the iPhone X You Should See was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

3 Stunning Hi-fi Prototypes for the iPhone X You Should See

Cool stuff, every week

More Articles