In the article how we test our mobile website, we concluded that testing on actual mobile devices is the best way. When we started testing on mobile devices, we put them in a cupboard with USB-hubs to charge the phones and tablets. Not all could be charged at the same time, some devices were not returned, etc. Not very practical right? To solve this, we built a device lab. In this article you will read how we came up with the design and construction
Controlling the devices in an easy manner
The most tedious part of testing a lot of devices at once without having to type all the URLs manually or navigating them simultaneously (scroll, click, etc). This was the first thing we wanted to tackle. We are using now the software from Ghostlab. Unfortunately, not everything worked as intended. This is partly due to the fact that Ghostlab’s rewriting proxy does not properly find all the urls it needs to rewrite, and on the other hand, our system can be quite complex with cross domain requests. Other software like BrowserSync, Adobe Edge Inspect is good, but when you have devices with operating systems that are not supported by Adobe, you cannot test it. Ghostlab offers a browser only solution, and it’s very affordable.
Setting up the device lab’s own network
As we don’t want to update operating systems randomly and keeping the devices clean, we created a dedicated network for the device lab. The wireless access point supports both 2.4Ghz and 5GHz. We created firewall rules allowing only our own web- and services network by default for all clients, with only the laptop with unrestricted access. The laptop with the Ghostlab software acts as a proxy so devices can access pages via that. For individual testing, the devices can access our websites without using the proxy. We allowed a couple of external hosts to accept and send data to, and to ensure loading of third party libraries like jQuery.
Keeping all devices available, powered up and secure
To ensure all devices always available and accessible, we keep them attached to a wall. The challenge is that we still want to pick them up and rotate them without detaching them too easily. Our project manager made a suggestion to use a device display system. Together we’ve chosen to use the InVue store systems. They supply an alarm and plenty of power. The display unit is securely stuck to the device lab while still being able to hold and rotate them. We also use them in our physical stores, they look great and are easy to manage when you want to change devices.
Choosing the right devices
The way we chose our devices was basically looking at the top twenty devices in Google Analytics. That list is giving a lot of insights of which physical screen size, viewport resolution, dpi, operating systems and browsers are being used. From that list we picked the devices that have overlapping user experience and each of the device is representing a big part of our users. Of course, this does not cover the load. This will only guarantee it will cover our supported systems. To ensure our shop is still working as intended, we added a couple of mobiles “exotic” devices like Blackberry Z3 and some that behave a bit different like an iPhone 6 plus that has a difference in viewport in landscape mode.
Putting it all together
Initially, we created a 3d sketch with an online design tool. We sent that sketch to our interior architect who calculated the size and weight and developed a technical drawing which we sent to our interior builder.
The cupboards helped in raising the wall to a user friendly height, weight being distributed better, and have some extra space to keep accessories like cables, sim-cards, etc. The wall provides a spot to have a 13-inch laptop to control all devices. The wall has 32 holes where the devices can be mounted on. Inside there are power strips which provide fused power outlets for all devices.
To get the best design for your device lab, preparation is important, keeping your own use case in mind. Think of the physical length of your users, your working environment (secure or not?) and how to secure the devices to an accessible place to have them charged and available. We are always looking for ways to improve the use of the device lab resulting often in software and network changes. To set up some devices, it’s needed to have sim-cards of all varieties readily available, because not all can be set up without them (like iPhones). In the end, It is a lot of work, but will make your testing life a lot easier to ensure a better customer experience