Brief:
Redesign the Apptui download process to account for the product’s new required components without significantly reducing the site’s conversion rate.
Context:
Initially, Apptui was made up of three components: 1) a desktop app for Mac and PC, 2) a browser extension/add-on for all major browsers and 3) an HTML5 mobile web app.
Early versions of the install process had users download a single installer that would automatically install the extension and desktop app “behind the scenes”. However, change’s to Chrome’s policy about external extensions and a growing concern about how technically “delicate” this process was in other browsers forced the team to rethink our approach.
Apptui had also just released native apps for iOS and Android to replace it’s existing HTML5 mobile web app.
The goal, then, became to redesign the Apptui download and installation process to account for all three components of the Apptui system: 1) a desktop app installed via a downloadable installer, 2) a browser extension/add-on and 3) a mobile app.
Sketching:
Desktop
I began the redesign by quickly sketching out a few rough variations on the office whiteboard and presenting them to the team for feedback.
Though quite rough at this stage, the concepts for the desktop download page diverged around 4 main ideas:
1) An “All-In-One” download page that contained links to all of the parts of the Apptui system for each of the supported browsers and platforms.
2) An “Inline” download page that broke the desktop download process into 2 steps and only exposed users to a single step at a time.
3) The “2 Step” download page that let users download the extension and installer on the website and then later encouraged them to get the mobile app on the first screen of the desktop application.
4) The “1 Step” download page that let users download the installer on the website and then encouraged them to get the browser extension and mobile app on the intro screens of the desktop application.
Mobile
On mobile, since users couldn’t download anything other than the mobile apps themselves, I simplified the design and added app store download badges directly on the homepage.
To account for situations where users might have initiated the download process on their mobile devices (say, by searching for “Apptui” in the App Store after hearing about it from a friend), I added a brief warning screen to the front of the app that let users know they also had to install something on their computer to get things up and running.
Wireframing:
At this point, I began to create detailed wireframes for the strongest concepts from the sketching phase. I also experimented with slight variations on each concept – exploring different layouts, alternative download orders and the idea of “smart” file serving for each browser/operating system combination.
As a team, we decided that we would develop a version of the “All-In-One” download page with “smart” file serving. This meant that the download page would only show links to the files that were relevant to the browser and operating system that the visitor was using.
We decided to go this route because of the simplicity of the concept. It required minimal changes to the product itself, wasn’t overwhelmingly difficult to develop and integrate into our existing website and kept the download experience lightweight and straightforward for users (we hoped).
More importantly though, because the 3 part download process was new for us – and likely for our users as well – we weren’t 100% sure what to expect. We wanted to keep our UX and development efforts “lean” so that we could establish a baseline conversion rate for the new download process that we could try to improve upon in future iterations.
Development:
I worked with our copywriter and visual designer to come up with words and imagery that were on brand, easy to understand and aesthetically appealing. I was also responsible for developing the new download page and making changes elsewhere on the site to support the new download process and homepage design .
Usability Testing:
Since Apptui’s installation process was somewhat different than the standard desktop application install procedure, l wanted to make sure that our users would be able to complete it successfully. I created a pre-screener and recruited 5 participants for a usability test of the new download process in addition to some other new features.
All 5 of the testers were able to complete the 3 step download process. This was enough confirmation for the team to feel comfortable beginning to test the design in the wild with real traffic.
Result:
Fortunately, the new download process performed almost as well as the previous single step download. The conversion rate for the 3 part process stayed very close to the conversion rate for the old design, even during large spikes of “fresh” traffic.
As a team, we considered this project a success. We expected the conversion rate to fall somewhat when we made the transition to a multi-step download process and were thrilled to have minimized the negative impact of this change.
Continued Experimentation:
Having now established a baseline download conversion rate for the page, the team continues to split-test alternative approaches, including many of the alternative concepts outlined above. So far, though, the original concept has outperformed all of the variations we’ve tried by a margin of 5-10%.
