Smartphone Paper Prototyping Frame

We UX Designers conduct a usability testing after creating a lo-fi interface design to test if a user can understand and navigate the screens. Then, we iterate the design over and over again until it fulfills user’s needs. I have conducted the usability testing with paper prototypes because it is fast and easy to sketch our design on papers. However, testing the prototypes on a rectangular paper lack in collecting user’s experience in using the prototypes because people usually hold their smartphones on their hand to navigate mobile apps, not flat papers on a table.

So I decided to make a smartphone paper prototyping frame using a laser-cutting machine. I have seen several paper frames in old iPhone versions.

But Apple enlarged the screen size by eliminating the button and coverig all the front surface as a screen. So the prototyping tools, such as Sketch and Figma, have added iPhone XS screen sizes. But the new screens cannot fit into the old prototyping frames. So I decided to create an iPhone XS prototyping frame and began to sketch my idea.

First, I sketched how iPhone X frame would look like and think of how to connect one surface to another by observing other laser-cut projects in the Makerspace.

After observing the projects, I got the idea of connecting two surfaces by putting the tip of one surface to the hole of the other surface. So I sketched the idea with the smartphone frame. For the surface on the side, I added a hole where paper prototypes go in.

But I was not sure if this would work in my project because I had to use chipboard to laser cut, not a wood which is much firm and thicker than chipboard. To test if it works, I found the exact size of iPhone XS in inches to test out with a paper.

Although the paper was thinner than chipboard, I did not want to test with something that is thicker than chipboard because I wanted to test if connecting the surfaces with the tip and the hole using the paper is firm enough. As expected, putting all 8 tips into 8 holes was very irritating. As I put one tip into one hole, it came out right away when I tried to put the other tip into other hole.

I found that putting a hole on the left and right surfaces would not work because people usually hold the left and right sides of the smartphone. Putting the paper on the side surfaces would disturb the people during the usability testing. So I decided to put the hole on the top and bottom surfaces.

Also, the side surface was took weak even though I did not make a hole. The grip of holding the frame was uncomfortable. So I searched other way of connecting one surface to other.

While browsing different idea, I found cardboards stacked on top of each other and thought, ‘why not to stack the chipboards like a wall on the left and right sides’. This would make the frame to be firm and have better grip. This time, I moved forward to design the frame on a design tool, Rhino.

Because it was my first time using Rhino, I assumed that it will take a long time getting used to it. However, it was much easier than SolidWorks, other 3D design tool.

The first round rectangle on the left is the bottom surface with my name on it. The next round rectangle is the top surface with four holes on the side. The next 6 long rectangles are going to be used to stack on top of each other. And the 4 small rectangles are going to be put inside the holes to hold all the surfaces.

During the first two trials of laser cut, the surfaces were not cut through the chipboard although I did put the thickness of the chipboard on the software setting. So on the third trial, I put the bigger measurement of the chipboard on the setting. After assembling all the parts, I added two more long rectangles to increase the grip on the side.

I also changed the design of the small rectangles by adding the sharp tips on the corners to make sure to hold all parts tightly without falling apart.

During the critique session, I was very surprised to see similar smartphone frames that has stacked chipboards on the side of the frame. But they were all designed for old iPhone. But I agreed that they have a stronger grip because they have smaller screen size with the same phone size.

For the feedbacks from my classmates, many people liked how it is designed for iPhone XS, which has the screen size of what we have to create. And it is also intuitive to learn where to put the paper prototype because of the empty bottom and top surface. Besides the good comment, they provided great recommendation as well. Although it has good grip, they wanted the frame to be thicker that it has similar height to the actual phone. And they wanted to try putting in an actual mobile interface design to test out if using the frame increases the effectiveness of a usability testing.

As a takeaway, I learned how the material of a laser cut really affects the final product. Because the chipboard is much thinner and weaker than a wood, I had to rethink of other way of putting all the parts together and still had some limitation of creating a firm design. If I had to cut the chipboard with a knife, it would have taken me so long time to cut and have unclean edges. I was very surprised how laser-cutting machine cuts the design fast and clean! So for next time, I want to use different material to laser cut and improve my smartphone paper prototype frame.

Related posts:

And Maryam Nawaz Too Arrested By NAB

The National Accountability Bureau (NAB) on Thursday arrested PML-N vice-president Maryam Nawaz in connection with the Chaudhry Sugar Mills case from Kot Lakhpat jail where she had come to visit her… Read more

Implement NSNotificationCenter using Swift!

NSNotificationCenter: A notification dispatch mechanism that enables the broadcast of information to registered observers. NSNotification broadcasts information to the observers when they are… Read more

Statement from Chairman John Stanton on Seattle Mariners workplace culture

Today the Seattle Times published a story about the Seattle Mariners workplace environment. We do not believe it accurately reflects the values and culture of our organization. I want to be very… Read more