Version 4.0 of the eBay app introduces a modernized, universal interface across iOS and Android, phones and tablets. We architected a new homescreen with three distinct channels that caters to different aspects of the eBay experience: managing activity, shopping, and selling.
I was handpicked to join a small team to drive this redesign. While crafting the end-to-end experience with the team, I primarily focused on designing the homescreen and browse flows, as well as creating the style guide in the process.
Previous versions of the eBay app looked and behaved differently between platforms, as several independent teams developed them with varying timelines. Our charter was to create a single universal app that works across all platforms, with consistent navigation and UI patterns.
eBay's native apps, Summer 2015
In previous versions of the eBay app, searching was the primary way of getting to content. I designed a "Shop" channel that becomes the simplified browse destination, surfacing interesting products in a curated fashion. This channel gives a taste of the best inventory to new users and also provides inspiration for new shopping missions to all users.
As a starting point, we gathered some of the top categories that users tend to shop by, such as Fashion, Electronics, Motors, etc. These are familiar to new and old users.
I believe that creating a smooth and intuitive way to navigate categories is a key element in the Shop channel. I went for a image-based approach that encourages browsing and also differentiates this page from the clean interface in other parts of the app.
Early exploration with a carousel pattern that extends to subpages
Prototyping played an important part in the iteration process. I started off using Invision and MarvelApp to share flows and later moved on to Pixate to demonstrate more complex interactions. (The prototype above was replicated in Principle to show the full interaction.)
Iteration with a drop down pattern that extends to subpages
The final navigation model follows a similar approach as the prototype above, but in a condensed presentation. We ultimately deviated from using visuals on the navigation in order to put more focus on the actual content and avoid any image maintenance issues.
Browse path for categories
We pulled three main types of content to populate the category pages: Deals, Sales & Events, and Collections. Each content type has its own value proposition that I've tried to highlight by the visual presentation.
Since the amount of content varies, I designed a progressive browse flow. On the homescreen level, each content type sits on a "card" that shows a snippet as well as a "See More" button to drill further. The cards can be rearranged to cater to a category or to a user's preference over time.
Browse path for Sales & Events
During the redesign process, I also created a style guide that streamlines communication between designers and developers. This guide covers colors, type hierarchy, and a start to UI components. Some examples are shown below.