Overview The Amazon Appstore FOS5 redesign was an enormous undertaking. I was tasked with not only completely overhauling the entire experience based on a new platform design language, but also integrating dozens of new features throughout the experience.
RoleLead UX Designer
Layout / IA
User Researcher Year 2014 - 2016
Brainstorm Kickoff I kicked this project off by facilitating a “Think Big” brainstorm. We had a room full of designers, developers, managers and our director. From the session we generated over 100 unique ideas. Over the next week, the project manager and I painstakingly prioritized these ideas and were able to narrow down the list to the top 25 ideas we felt would have the most customer and business impact. These features were reviewed and approved through leadership, and this helped us define our product roadmap for the year. Due to the enormity of the project I broke it down into manageable chunks and sorted them by priority and I began working down the list.
I dove immediately into wireframes to determine which tile layout would be most effective considering that the navigation method was changing from a tap to a swipe to go from tab to tab. Due to this we lost the scrolling tiles.
I also wanted to rethink more core elements of the gateway such as the billboard carousel at the top of the screen. The goal was to expose more apps at a glance, where prior to this only one app was seen. This new carousel method was ultimately adopted as the official component function for the carousel with both the Games and Music stores adopting the component.
Gateway App Layout The Kindle platform design team provided a great HIG that detailed different style layouts for the different stores, however, I felt that Appstore could improve upon the layout by adding a tile that allowed for 4 apps to be displayed in a single row of tiles, instead of just 3, which was the current max. Additionally I designed a row style called mini-billboards where we would display popular categories of apps. I created my own design guide for the 4 tile layout and the mini billboards and presented it to the platform. See above for an overview of the variations that I designed for our row layout for each tablet size.
Detail Page Sticky Header I proposed many new design elements for the App detail page, however the most significant was the collapsing header or the “sticky header”. Prior to this, when scrolling the page, the ability to purchase/download the app was lost. Working with my prototyping team, we created a proof on concept for scrolling the screen and having the header collapse and stick to the top of the screen, thus helping the user maintain key information on the screen at all times and allowing the user to purchase without having to scroll back to the top of the page.
Apps Library Revamp
Previous to the redesign, Apps were launched from the Apps Library since there wasn’t a concept of a Apps grid on the device home screen. Since the updated devices were finally getting an Apps grid, the Apps Library was no longer needed to launch apps, so I proposed that we modified the purpose of the library and instead made it an app management area, where apps could still be launched, but the focus would be on the ability to uninstall or update apps, manage subscriptions, and sort or filter apps that you own.
There was a lot of pushback on this approach due to the fear that customers would still want the Library to be a launcher, it still was a Library after-all. Ultimatly I was able to convince leadership that we would be wasting an opportuntiy to provide a much more robust management mechanisim to our customers, and that our customers would be using the Home screen Apps grid to launch apps once the change was in place. This assumption was also validated through user testing. Needless to say, the change was agreed upon and implemented.
Detail Page Optimization The previous detail page had a very glaring problem - IT WAS SO LONG! Customer abandoment was significant the further a user scrolled down the page. So I proposed a design that would decrease the length of the page by 50%, and give the ability to access less relevant information through tabs that appeared above the fold. I wont lie it was a hard sell to the platform team since this wasn’t aligned with the patterns they had set forth. Also, their design philosophy at the time was that we show EVERYTHING on the page and let the user scroll. Ultimately, the decision had to be escalated, but through A/B testing, we found that customers where happier with the shorter page, and didnt have any issue with finding the tabbed information. I was given VP approval to move forward with the design choice.
"Content Forward" Search Results Appstore’s previous search was a very underwhelming experience. When someone would search, the results were just a big list of Apps. I really felt that we could do much better. Apps had so much rich content and many times you would have customers “pogo sticking” back and forth between search results and the detail page just to see the screenshots, or check the star rating. I figured, why not just bring that information forward so that the customer could make a much quicker purchase decision based on key information they cared about (Price, Screenshots, and Star Rating). This allowed us to provide a richer more visually engaging experience. This was by far one of my favorite features to design for FireOS5 and I even got a hug from my SVP during the unveiling of the feature because he loved it so much.
Enhanced Search Suggestions For those customers that know what they want, we were still forcing them to navigate to the detail page to make there purchase. Rather than do this I designed a more detailed search suggestion list that included the ability to download the app right within the suggestion area. Additionally we would expose direct links to categories that matched the search query. I cant take all the credit though, a similar feature was implemented for Appstore on our Android devices, which I used as inspiration for this feature.
User Research Of course, a fair amount of research went into validating these designs and although we had a recruitment agency take care of participants, myself and other designers did everything else - writing the tests, creating the screener, prepping the prototypes, getting observers, moderating, gathering and analyzing the data, acting on the results. My testing method of choice is the R.I.T.E Method (Rapid Iteration, testing, and evaluation).
Redlines I owned generating all redlines and asset creation for varying sizes of devices and pixel densities. Tools such as “Sketch Measure” made this much easier, but still, a very time consuming task. However, it pays off big time when developers have all they need to knock out a feature design without an exorbitant amount oversight from UX.