Why Build an Apple Store Demo App
In November Apple reached out to us about putting our Wynd product into their physical Apple Stores.
By March of 2019, we had the first batch of Wynd portable air purifiers in Apple stores across North America. Apple then asked us to make a demo app to help educate consumers on how our portable air purifier works and help sell more units.
Researching how to build an Apple Store Demo app
I was the sole designer and product manager at Wynd so I lead the user research to help answer some initial questions I had.
- What do unfamiliar people think the Wynd Plus is when they see it?
- How have other companies made their Apple store demo?
- After using the product and app what are people’s take away thoughts?
The first step was to see what people thought our product was when we give it to them with no context. I set the product in front of random people at coffee shops and asked them to tell us what they thought it was and if they could interact with it as they would with anything new. The number one initial reaction was that the product is a Bluetooth speaker. Once they turned it on and felt the airflow they realized it’s a fan. I found they did not realize it was an air purifier initially.
On top of seeing people’s initial impressions of what they thought the product did, I found the product itself had some usability issues for unfamiliar users. To control the fan speed there is a turnable ring on the top that can be twisted to increase and decrease the product’s speed which only 2 of the 5 tested users were able to find.
Once I introduced the app into the test, users instantly understood this was an air purifier. The tested users found the air quality sensor on the bottom of the device and that they can read the air quality along with controlling the purification rate thanks to some help from the app.
Based on this initial test I found that we will need to have some type of explanation/overview of what the product is.
To research what other companies were doing, I went to several Apple stores in the Bay Area and played around with the 3rd party devices on display there. Some of the interesting takeaways were the use of video and animation to let people know what the product did.
In every app I tested, I found onboarding was somewhat long and full of explanation. There were two ways I saw companies doing their onboarding. The first was to have upfront onboarding that was a bit long. The other method was to push the user into the main app and use coach marks to explain what the product was and how to use it.
I felt during my testing that the coach marks were a bit frustrating since they showed me what I could do, but wouldn’t let me do much until I had skipped through the tutorial.
The Upright 2 product had my favorite Demo App and set up thanks to it’s easy to understand animations showing where to put the product and where to use it. They also had a great explainer video at the beginning of the demo that used words to call out specific features and how to set up the product.
The Apple Store demo does not just include the app, it is actually your own little space in the Apple Store that you can do whatever you like with (as long as Apple approves it). Some companies, like Upright and La Roche-Posay My Skin Track UV sensor, have smaller products and mounted them on a stand. I considered something like this, but remember whatever stand or custom solution you go with will need to be replicated in every one of the hundreds of Apple Stores your products are in. After the Apple team told me about that part I scrapped any custom stands since scaling that on such short notice would be tough.
The takeaways from my initial research were
- We need to demonstrate Wynd Plus is a portable air purifier upfront…not a speaker
- We should show the features upfront before entering the main app and put heavy emphasis on understandability
- Onboarding is the most important real estate to sell the product
The Problem
How can we increase sales of Wynd portable air purifiers at Apple stores?
Based on the research this larger problem can be broken up into two subproblems to specifically focus on for the demo app.
- We must convey what this product is from afar
- Demonstrate why it’s uniquely useful
Who are we designing for?
Based on our own sales data we know our customers typically have a difficult relationship with air. That could be thanks to allergies, COPD, asthma, parents with young children or they just have poor air quality where they live. On top of our customers who need air purification, we have customers who just like to get the latest gadgets.
In physical Apple stores, however, we know there are many different types of people perusing the store, from kids to gadget lovers, to people looking for gifts.
I made 3 personas when designing this app based on our own sales data, observations of the Apple store users, and what the Apple team informed us were some of the reasons people buy 3rd party devices at their physical stores.
Initial feature set
Based on my initial user experience and customer research, the Apple sales manager, marketing lead, and I brainstormed a few solutions and settled on 3 initial features for the demo app.
- Onboarding that walks the user through three different real-life uses of the Wynd Plus
- Showing off the smart features of the Wynd Plus such as remote control and filter life count down
- Showing the user their air quality over time and explaining how air quality scale works
For the real-life use case, when the user taps on a scenario in the app, the purifier and sensor increase speed and change color like they would in that scenario. For instance, if the user presses the “sleepless nights” button in the app, the purifier goes to medium and the sensor color goes to yellow. By having the purifier react to the app we can draw the connection for the user to see how the app works with the purifier and understand what the purifier will do in each situation.
Purifier control consists of changing the purifier’s fan speed and letting you know when you’ll need to replace the filter next. When you tap into the purifier control it goes into a more detailed view with explanations of the different features. For instance night mode, auto mode, and how to replace the filter.
For the sensor, it’s similar to the purifier except its function is to display air quality to the user. In the device card’s detail view I explain the air quality more so the user has context for what the AQI air quality scale means and the colors associated with it.
By paring down the post onboarding features, we could focus our efforts on optimizing the onboarding experience for clarity and selling without expending too much development time on the main app (we had to contract out development due to internal resource constraints).
The first design and Apple approval
Our app has to meet Apple’s retail department’s requirements before we can start development. Starting in March we went back and forth on several different iterations.
If you’re reading this to figure out how to make a demo app for the Apple store, their demo app guidelines doc is a bit sparse on firm requirements, but these were the ones I found them to care the most about:
- Autoplay video of your product in Portrait mode required
- 3-second hold on a legal screen after the user taps on the video to enter the main app
- Apple wants to have the status bar on all the screens. Small things, but better to find out before the end of the project.
- If you’re a sensor product, all sensor readings must be faked and say for demo purposes only (even our filter life level needed to be faked).
- Apple employee menu is shown (originally they requested the menu be accessed by double-tapping the top right area, but then they requested we put a settings icon to make it clear)
- Your demo app needs to be the same aesthetic as the post-purchase app the customers will use. If you are planning main app design updates, make sure the demo app design coincides with the future release. Also, be sure to tell Apple about any aesthetic discrepancy as early as possible.
On top of these requirements, Apple provides you with an iPhone that your app will run on. Thankfully it is the same model in every store which means you don’t have to worry about sizing and scaling for different screen sizes. Apple employees will also check in on your device if, like ours, it needs to be charged every 8 hours, they will make sure the device gets charged and remains operational while the store is open.
After going through all the requirements and the back and forth, we got the go-ahead to start final design and development on April 30th, aiming for a June 21st final app delivery and June 6 initial app delivery(only 8 weeks to design, develop, and test a final app!).
Iteration
Once we got final approval from Apple, we started on the final high fidelity design.
I sketched out what the animations should look like and then contracted out the animation to a competent animator while I worked on refining the UI and testing it with users.
For this testing, I primarily conducted hallway usability testing to keep things moving quickly. Based on these low-cost tests I found users didn’t know they were supposed to tap on the autoplaying video the enter the app. I also found that the scenarios did not explain what the product was, only where it could be placed. That meant new users saw how the product could be used…but not what it actually is or does.
By this point, we were in mid-May, and the developer had already begun on the finished designs for controlling the devices while I worked to create an onboarding experience that sells.
By end of May, we had the animations in the app, I made a portrait version of our Kickstarter video, and now we could just focus on the best way to design an engaging onboarding experience. Unfortunately, this is when a new stakeholder saw the app and decided we should add all the features we planned to have in our upcoming app. I went ahead and refined that design while the developer began to develop those new features as well. As a result of this last-minute change, we spent 3 weeks making those post onboarding updates.
The new features added were
- Air quality graph
- Air quality world map
- Home screen
As a result, come June 18 we had 3 days before delivery and still needed to make an onboarding experience that sells. The developer and I took a trip to the Apple store to gain more insights now that we had been immersed in this project for 3 months. We saw that people would touch the product first, watch the video for a few seconds, and then engage with the app. Seeing this, I learned Premiere so I could create a more engaging version of our silent Kickstarter video to help draw people to the device and help educate them on it before they entered our onboarding.
I then sketched out what our onboarding would look like and recombobulated the existing animation assets to work for this updated onboarding flow. Two all-nighters and 2 large McDonald cold coffees later, the developer and I had implemented a new onboarding that forces the user to walk through the product features and then see (or skip through) the user scenarios.
The result
We delivered the product to Apple on June 21st and it went live in Apple stores across North America on July 16th, 2019. It resulted in a 500% increase in product sales. A European and Asian version is coming to Apple stores across those regions soon.
Lessons learned
Doing this project was an incredible privilege. Being able to go to the Apple store today and see our product there feels incredibly satisfying. If I were to do another project like this working with Apple, I’d focus on being a bit more proactive about the follow-up. Because they’re very busy, we often did not get feedback about our designs during the Apple approval phase until 1 or 2 weeks after we sent the design. These delays delayed the whole project by about 2 months and put a lot more pressure on the development team.
The Apple team was great and helped us ensure we complied with their rigorous requirements. One thing we missed in those requirements was letting the Apple team know that we were working on an aesthetic and UX update to our main app that would be launched in August. That meant there would be about a 4 week period where the visual design of the Apple Store demo app and the consumer app would be different. Apple’s team was understandably unhappy about this discrepancy, but being a small startup that’s incredibly resource-constrained we can only make one version of the demo app. Luckily Apple’s team agreed to the logic of building the app with the new design so we’d only have to build it once instead of making the app twice — once with the old design and once with the new design. But, in the future, definitely better to get that out the way at the beginning rather than 3 weeks from app delivery.
Another takeaway was on the motion graphics side, this was my first project working with an animator, and I didn’t appreciate how much longer animating people takes. I talked with three different animators for our project and needed a two week turn around for all 6 of our animations. Three of those animations needed people. When the animators saw the sketches they said at least 3 weeks, so we scrapped people in the scenarios and went with rooms for a simpler animation.
Finally, and probably our biggest mistake was not finding all the possible internal stakeholders. Unfortunately, the project was nearly derailed because we didn’t properly keep one internal stakeholder up to date, especially about our emphasis on onboarding vs. features. He was unpleasantly surprised by the few features we had past onboarding. In the end, thanks to the flexibility of the contract developer, we were able to get that done, but the mid-process change doubled the project’s cost and meant we couldn’t run a final round of usability testing on the updated onboarding flow.
