UX Tablet Prototyping Box
Many automotive and med-tech manufacturers today design devices that require users to interact with touchscreens. Often, these touchscreens range from just a few inches wide to potentially several feet wide. As a result, there is a significant need for the UX community to have a stable, workable platform to “house” prototyping tablets and other touch sensitive screens while conducting research on early, low-fidelity prototypes.
There are a few solutions out there right now. Expensive and cheap ones. However, for your average UX professional, the expensive options don’t make a lot of sense, financially speaking. And the cheap options are, well, cheap. They tip over. They’re flimsy. They don’t have enough weight. Participants interact with them, and the thing moves around the table.
This picture-rich blog post shows the steps I took to build a solution that worked for our needs. The prototyping box I designed can be made for about $50 – $75, assuming you (your neighbors, father-in-law) already have access to a few woodworking tools. Additionally, it’s a relatively easy and quick build that should take you about 4 – 8 hours to complete, depending on your experience with this type of stuff.
Phase 1: Planning and Cutting
I had some extra lumber laying around from previous projects, so there wasn’t a need to go out and buy a whole bunch of material for this project. However, if this wasn’t available, a half sheet of ⅝” thick plywood (4’ x 4’) would be enough to cover all the surfaces you’d need — I’ll explain later on why the plywood needs to be at least ⅝” thick. Additionally, you’ll need about 8’ – 12’ linear feet of 1×2”s. The straighter, the better. (Figure 2)
I planned my plywood cuts based on the idea that I want this prototype box to fit a few different sized tablets and phones; everything from a small 4.7” smartphone screen to a larger 12” iPad. With this in mind, the dimensions had to be at least 14-½” wide by at least 14-½” tall. This way, I could use the largest tablet size in both portrait and landscape orientations.
You can tell from the dimensions written on the perimeter of this board that the height is 13-⅜”. The top and bottom boards will be placed on top of the sides, creating an overall height of approximately 14-⅝”. (i.e., ⅝” top thickness + ⅝” bottom thickness = 1-¼”).
I planned to design the bottom depth of the prototype box at around 10”. This way, I can potentially add in side-mounted speakers or other electronics down the road (if desired) without worrying about whether the new stuff will interfere with the space needed for the tablet once the box is closed up.
The top depth of the box was designed at 9”, providing the screen surface with a subtle tilt backward. This makes it a little easier for users to press the tablet once it’s sitting inside the box. It also replicates the type of angle that many auto manufacturers build into their vehicle’s infotainment systems too. There’s no hard and fast rule here either. Some angle is better than none. You’ll have to experiment to find the angle you prefer. Looking back on this plan, I would consider making the top depth tilt back slightly more — maybe, ½” more. I like the angle of the finished version, but there’s always room for improvement. (Figure 3)
The sides are cut to the same specifications, whereas the top, bottom, back, and front pieces are cut to their own respective dimensions. When building a semi-framed box like this, focus on getting the outside piece cut first. One reason for this is that you can temporarily clamp or screw two pieces together (e.g., sides) and cut everything at once, giving you the exact same cuts on both pieces. Another reason is that since the interior frame isn’t a completed box, it would be much more challenging to cut the plywood faces down to size once they were attached to anything else.
Similar to the plywood pieces, I cut all the 1×2” down to size as well. These boards sit on the interior of the prototype box, so there needs to be a lip of ⅝” on either side of it, once it’s mounted to the top and bottom plywood pieces. Since the box is 14-⅝” wide, that means these 1×2”s need to be cut to 13-⅜” wide.
For this project, I had some 2×2” laying around as well that I incorporated here without much additional planning. For your project though, you could stick with 1×2”s and be fine; the thicker material doesn’t provide better (or worse) structural integrity.
Each of these four pieces are going into the top and bottom corners of the box. This provides you with something to mount the plywood pieces to as you assemble it. (Figure 4)
- At this point, my materials were as follows:
- 2 sides: 13-⅜” tall, 9” wide (top), 10” wide (bottom)
- bottom: 14-⅝” wide, 10” deep
- top: 14-⅝” wide, 9” deep
- back: 13” tall, 13” wide
- front: 13” tall, 13” wide
- 4 – 1×2”s: 13-⅜” wide
Phase 2: Framing and Assembly
I started the assembly process with the bottom plywood piece and two 1×2”s. In this photo, the surface shown is the underside of the box. It will get flipped over in a bit, so that the 1×2”s sit on the inside of the box. (Figure 5)
*Note: each screw you drive in through a plywood surface will need to have a countersunk hole. A countersunk hole is a hole where the screw head can sit beneath the plywood, so that it doesn’t sit proud of the plywood. If you don’t countersink your screw holes, you will see and feel screw heads, even after you wrap your prototype box in tolex.
As a tip for this part: after getting your 1×2”s exactly where you want them, use a C or F-style clamp to hold the 1×2”s in place while you screw everything down with your 1” screws. This will help you keep your pieces in better alignment during assembly, which in turn, makes later steps easier and keeps your measurements in check. As an alternative to screws, you can also use a brad nailer too. This is the type of tool that cabinet builders use because it allows you to tack things together easily and quickly with a mere squeeze of a trigger. Hold it in place with one hand, tack on a few brad nails with your gun. Simple. I would still go back through afterwards and put in a few screws to make things tight and secure though.
Flip the box back over, and attach the first plywood side of your prototype box with a screw or two into the 1×2”.
It’s a little difficult to tell here, but the back 1×2” is set about ¾” in from the back edge of the box. This allows sufficient space later on when we install a back panel (made out of the same ⅝” plywood). The front 1×2” is only there for structural support, not to attach or come into contact with the front plywood piece in the future. The reason behind this is that I’m installing the tablet from the back of the box to some inside-mounted hardware. If the 1×2” was flat against the front piece, it would interfere with the space needed for the tablet. Of course, you can bypass this issue by building your prototype box larger too; your tablet would sit right in the middle, never coming into contact with the 1×2”s surrounding the interior. (Figure 6)
As I mentioned earlier, the side plywood pieces sit on top of the bottom piece, sandwiched between the top and bottom plywood pieces. Besides making it easier to attach to the 1×2”s, it also provides an aesthetic benefit later on. (Figure 7)
Both sides go up. Each one gets attached to the 1×2”s in the inside with a couple screws into each 1×2”. Don’t attempt to screw through the bottom plywood piece and into the side plywood piece. When the material is this thin, you risk blowing out your screw through the side, or having it splinter off. However, if you plan to use ¾” plywood (especially marine-grade baltic birch), you can usually do this as long as you are careful. Just be sure to drill pilot holes first. (Figure 8)
With the sides up, I went ahead and screwed in the first of the top 1×2”s. Unlike the bottom piece, this one gets mounted so that the front plywood piece can rest right against it for support. Just be sure there is enough room for your largest sized tablet to fit in still. (Figure 9)
In this image, you’ll see a couple red lines. This told me how much of an inside “lip” I would have once the front face was installed. I designed the lip a little deeper than I’d like the final design to be because of the tolex that I’ll install in later steps. The tolex itself will add some thickness to the front face. In addition, wrapping the corners with tolex will add even more.
Now the back 1×2” goes in. Like the bottom piece in the back, this one gets inlaid from the back edge of the box by about ¾” of an inch to accommodate for the back panel that will be installed later. (Figure 10)
With both sides up, the top is ready to be installed too. Don’t worry if your top overhangs slightly on either side. Once you cut your roundover with the router, this is easy to sand out. Of course, if your top is short, you’re better off cutting a new piece. (Figure 11)
Phase 3: Planning and Cutting the front panel
I did a quick test fit on my front panel. It’s hard to tell in the pictures, but it was a little snug. Normally in woodworking, this is a good thing. But for our purposes, we need a small (about ⅛”) gap around each of the four sides. The reason for this is that once the tolex is wrapped around the box and the front panel, it will add additional thickness. If your front panel is tight at this point, then it will be way too tight once the tolex is added.
After a few trial and error cuts to take down some of its width and height, I got the front panel down to a better size.(Figure 12)
Like so. This might seem like a big gap, but for this design, we don’t want a super tight fit. Remember, we’ll be pulling this panel off each time we want to swap out the tablet or phone for a different size. If it’s too snug, we will damage the tolex over time. (Figure 13)
Next, I take my iPad screen dimensions and transfer them onto the front panel I cut out. This takes a little time, because you need to locate the center of your front panel and work outwards to the left and right. Otherwise, if you measure from the left or right edge, there is more “guess and check” going on later. (Figure 14)
As a tip: remember that you want a little extra room outside the screen space. In mine, I planned for about ⅛” on each side of the screen. But a little more wouldn’t hurt either. This allows users to comfortably and easily interact with assets along the perimeter of the tablet screen. If the panel is too narrow, they can’t get there finger into the corners easily, confounding your usability results when you conduct a study. (Figure 15)
I start the cutout for my tablet screen with two holes (forstner bits, not paddle bits — this reduces tearout on the plywood). Drill these holes from the front face of your panel. That way, if your plywood does tearout a little, it’ll be on the side that nobody sees.(Figure 16)
Next, I made two cuts out of each hole. One goes along the right side of the hole, the other goes along the left. Once the main part of your screen is cut out, simply clean up the edges of your holes with the jigsaw to make the corners square. (Figure 17)
Side note: I would strongly suggest rounding over the edges of the screen opening. Sharp edges will make it harder for users to press items in the corners of the screen. It also makes the prototyping box look more “finished”. The tricky part is that you can’t do this in the same way that you will round-over the edges of the box later on. I used a rasp and sandpaper until I got the edge to match the ½” radius round-over pattern.
The reason it won’t work is that the round-over bit uses a bearing to “trace” along the edge or your template. In the case of your screen cutout, you don’t have anything for this bearing to press against, which means you are essentially free-handing the cut. Not only will this lead to a subpar look, it’s also a little dangerous because the ½” round-over bit isn’t designed to take out a lot of material at once. Your router could get away from you if you go too deep – and from experience, having a sharp tool spinning at 22,000 RPMs get out of your hands on accident is a profoundly scary ordeal. (Figure 18)
Phase 4: Routing the Roundover
Here’s a photo of the roundover bit inserted in my (super old and beat up) router. Oh, also, don’t remove your router’s guard like I did! (Figure 19)
Here’s what the roundover looks like on the top edges. One of the reasons why you don’t install screws into this edge is that your router would run over that, causing a lot of sparks and metal and sharp things to go flying around. Not fun. Mounting the side and top plywood pieces to the interior frame avoids this issue. (Figures 20 & 21)
*Note: I didn’t take photos of this next step, but it’s necessary in order to mount the front panel to the prototyping box. You’ll need to install two 1×2”s along the inside edge of the box. They don’t have to be a specific length, or even the same length as one another. You just need something on the inside to give the front panel something to attach to with velcro (which, you’ll see in a later step). These 1×2”s should sit back inside the box to account for your box’s front “lip”. In other words, keep in mind how thick your front panel will be, then plan accordingly.
Phase 5: Test Fitting
Here’s a shot of the front face inserted into the box. It’s starting to look like something now! (Figure 22)
Now you need to figure out how to mount the tablet to the front panel. I toyed with this idea for a few days, until I came across some stretchy velcro straps on Amazon. I installed two picture frame hardware pieces (with small screws) to an area just outside the edges of the tablet itself. Be sure to either a.) file off the saw-tooth edges on the picture frame hardware, or b.) face these edges to the inside. Otherwise, they will tear up your stretchy velcro over time. (Figure 23)
Secure the tablet to the inside of the front panel for a quick test fit. (Figure 24)
Surprisingly, it’s not at all “squishy”, or “bouncy” when you press on the screen. The screen feels like it is firmly in place, just like an infotainment system’s screen in a car. Initially, I was expecting the stretchy velcro to have a little “give” to it. I was glad to find out that if I strapped it together tightly, the iPad was solid and secure. Keep in mind, I have a case on my iPad, so that might help it stick to the front panel better. If your tablet doesn’t have a case like mine, you might have to mess with the tension of the velco a bit more. Maybe not. Keep me posted, though! (Figure 25)
*Note: I don’t have pictures of this next stage, but it’s still very important in order to achieve a smooth, professional look. Before applying the tolex to the prototype box, be sure to fill in any screws, cracks, or voids in the plywood with wood filler. Let it dry for at least 12 hours. Then, sand everything flat. As you sand, keep an eye out for high spots, or chips in the plywood. If they are too big, they will show through after the tolex has been applied. Take care of these imperfections before proceeding to the next steps.
Phase 6: Applying the tolex
Now it’s time to install the tolex around the exterior of the prototype box. If you’re not familiar with tolex, it’s a type of semi-thin, plastic, leather-looking material that’s used in the automotive industry (among other industries) to cover things like dashboards, armrests, etc. I bought a few yards of this material from a musical instrument amplifier refinishing company in Chandler, Arizona. However, you can find tolex in various textures and colors on places like eBay without issue. It usually runs about $5.00 – 10.00 per linear yard. Automotive tolex may be thinner than what I worked with, so plan accordingly. (Figure 26)
Start the tolex process by laying out some thin, disposable plastic painter’s drop cloths around any areas where you’ll work. The spray adhesive you’ll be working with in a moment gets everywhere.
And yes, it has to be spray adhesive. I’ve tried squeeze bottle adhesives, brushed on adhesives, and rolled on adhesives. They don’t work well, evenly, or easily. Spray adhesive is faster, easier to work with, and is re-workable for a few minutes after spraying.
Side note: make sure that the spray adhesive you’re using will bond with both plastic and wood. I used the 3M 77 multipurpose spray adhesive on this project (and others) with good results. Just be sure to store the can in a room-temperature environment afterwards — otherwise, the material in the can will quickly degrade and be unuseable.
Once your area is covered up well, flip the prototype box over, and spray the bottom surface with your adhesive. Be sure to get the edges and corners of the prototype box well too. Line up your first tolex seam about 1” inside the left or right side of the box. You don’t want your final seam to be right on the radius of your corner, otherwise it will eventually come apart from wear and tear. Plus, you’re more likely to see the seam if it’s on the corner (especially if you don’t end up with a crisp, final cut).
After rotating the box and unrolling the tolex simultaneously, spray the next surface on the box with your spray adhesive. Repeat this process until all four sides have been sprayed and rolled out. Be sure to work out any air bubbles or wrinkles as you go. You shouldn’t need to “pull” the tolex to make it tight. The weight of the tolex and smoothing it out with your hand should be more than enough to make it nice and flat. Also, don’t worry about wrapping the inside edges yet. As long as you work somewhat quickly and wrap the four sides within a few minutes, the adhesive will still be “open” (i.e., workable).
Next, carefully cut off the excess tolex along the front and back surfaces. You’ll want to leave enough tolex to wrap around your ½” round-over, and at least ¾” extra to tuck under the inside edges. The reason for this is that you need enough material to staple down in future steps. If your material is too close to the edge, you will see the staples. Ideally, you want your staple line to be behind or hidden by the front panel that you’ll insert later on. (Figure 30)
Begin stapling. I like pull the tolex flat as I staple, moving inch by inch, so that I know it’s flat, smooth, and even. Again, be sure that your staples won’t be visible after the front panel has been inserted into the prototype box.
You may need to spray a little more adhesive on the edges if you didn’t work quick enough. No big deal. Be careful to over spraying adhesive on the tolex you’ve already laid out though. If you do get adhesive on it, use GooGone or some other similar adhesive remover to clean it up.
I prefer to staple up until about 2” from the corner, then move onto the next side, staple up to about 2” from the corner, and so on, until all four sides have been stapled. Afterwards, I focus on getting the corners folded in and stapled. (Figure 31)
The corners will be tricky at first. You’ll need your craftsman’s knife here. Figure out a pattern or look that you are comfortable with. Personally, I prefer to do a single fold in the corners, rather than having it “pucker” with a couple smaller folds. To get the fold correct, you’ll need to cut the tolex in the inside corner. This allows you to fold over one edge and get a nice, finished looking seam.
Be careful with the craftsman’s knife. Cut into the box, not your flesh.(Figure 31)
You can “tighten” your corner seams by using a flathead screwdriver and tucking in the seam as you fold each one in. (Figure 32)
The next step is to paint the front-facing side of the front panel with black spray paint. You could also paint the whole thing (e.g., front and back surfaces) too. The reason for this is that the tolex will not cover the inside edges (i.e., where the tablet shows through) when wrapped around this panel. The roundover prevents it from lining up seam to seam. The black spray paint hides these small gaps quite well. You could also consider tucking in scraps of tolex into these areas too. Many musical instrument amplifier manufacturers do this in corners that are otherwise hard to address. (Figure 33)
Next, glue, wrap, and staple along the front panel’s outer perimeter. Remember, it doesn’t have to be pretty on the back side of the front panel. Nobody will ever see it (unless you write a blog post about it — then a lot of people will see it). Then, cut out your screen opening and staple that back as well. Don’t cut out the opening too close to the edges either — like your perimeters, you need to account for your roundover and stapling the tolex down as well.
*Note: you need to do the same for the back panel too. That’s not shown here, but it’s the same process as the front panel (minus the cutout in the middle). I like to install a “pull” tab on it, so that I can un-velcro it from the prototype box, when needed. (Figure 34)
Phase 7: Final Steps
One of the final steps is wrapping the 1×2”s on the inside of the prototyping box with (non-stretch) velcro. Staple it down securely. From past experience, you need to wrap the velcro around the back edge of the 1×2”, not just the front of it. Otherwise, it will come up over time. I like to use the soft, “loop” side of the velcro for this part.
Then, staple down velcro strips (i.e., “hook side”) to the back of the front panel in the spots where it will meet up with the other velcro strips you installed a moment ago. The goal is to have the front panel (i.e., with the tablet) velcro to the inside mounts. This way, it won’t move around as users interact with your prototypes. (Figure 35)
There you have it. Your prototype box is now complete and ready for testing. If you install additional velcro on the back-side of your front panel (i.e., on all four sides), you can also rotate your prototype screen from landscape (shown above) to portrait. Additionally, you could make a couple different sized front panels to accommodate for different sized tablets. If you plan to do this — and I highly suggest you do! — remember to purchase additional plywood and tolex as well.
As a final note: consider adding in some rubber “feet” to the bottom of your prototype. You can find rubber feet on Amazon and eBay. They simply screw in, or adhere to the prototype box’s bottom four corners. You can also add a handle to the top of the box as well to make it easier to carry around. (Figure 36)