Douglas App - Detail Page

Apr 2018 – Aug 2020 • Redesigning the Detail Page

The Brief

The Douglas app displayed a mobile web view as their product detail page. The goal of the hybrid app at the time was to make it completely native, so I was assigned to not only recreate the detail page with our existing app style guide, but also to improve it to the needs of our app users. I worked closely with our PO Tanja Harder. Later on in the projects, several usability tests were conducted, where we had additional support by 2 UX Managers that created the testing plan & an external company that conducted the tests in their lab.

 

Problem 🔥

The product detail page was a web view, which was not optimized for small screens, lacked an app-like feel and utilized a different style guide.

Solution 💡

Redesign & rebuild the product detail page natively to optimize it for mobile devices, increase speed and create a coherent experience though out the app.

The Process

A table displaying the design process in 4 steps and the executed tasks

Gathering Problems

Sketch of a desktop

Desktop First

Many elements suggest that the view was not designed mobile first. It has very small touch targets and utilizes UI elements that are not ideal for small screens.

Sketch of a screen with alot of content

A Lot of Content

The page is very long, as it displays a large amount of various information at once. This makes it hard for the users to keep orientation.

Sketch of a save & buy button

Missing CTA in Viewport

The previous product detail page lacked CTA’s above the fold, which in addition, were not in the viewport majority of the time

Creating Various Versions

As most content that needed to be displayed was already defined, it was all about trying out different versions.

Various wireframes & alternative drafts of the product detail page

Testing Various Versions

Two rounds of usability tests were conducted, where we tested several versions of the product detail page. We tested in a lab, with 16 participants in total. The testers were female, in the age range of our personas, and both iOS & Android users. The first iteration gave us direction on what to improve, and the second one gave us security, that we were on the right track.

Two women testing the app in a usabilty lab

CTA Above the Fold

One of the most impactful changes was to display the add-to-cart & wishlist button above the fold, to enable a higher conversion rate. The price is also a lot closer to the CTA than it was before.

The product detail page before & after, showing contents above the fold
 

Replacing Dropdowns with Modals

As the initial product detail page was designed for the web, it utilized dropdown menu’s. To make the most out of the little space a phone has, I used a full screen modal. In addition, the list also displays the prices, as they vary depending on color.

Displaying the color selection of the detail page before, with a small dropdown and after with a fullscreen modal
 

Optimized Actions

Instead of displaying all possible actions in one spot, the new design spreads them out. In addition, ‘checking store availability’ and ‘reserving a product in the store’ were combined to one action, as it essentially does the same thing. The new design also introduced the Beauty Mirror, an augmented reality tool that enables users to virtually try on make-up products.

Before & after of the detail page, displaying different ways of organizing actions
 

Shorter Page, Better Overview

Previously, the product detail page displayed everything on one page, which made it harder to get an overview. By utilizing lists, the length of the page was greatly reduced, this enables the user to choose themselves which information is relevant to them.

The before of the detail page being 3 times as long as the after, fitting in the viewport of an iPhone X
 

Creating Delight

After a suggestion from one of our developers, Elise Herro, we decided to include a little micro interaction when adding a product to the wishlist. It’s important to create small, delightful moments for the user, as that really makes a product. The dev-team had other great ideas as well, that really elevated the detail page.

 
The product detail page displaying a heart animation when saving a product
 
 

Optimizing for Tablets

As the Douglas App is also available on tablets, it was optimized for them too.

The tablet view of the detail page being siped

Takeaways

  • Use realistic input in prototypes, testers can get hung up on things like e.g. base price

  • Usability testings can help immensely to mitigate discussions that are often based on opinions

  • The developers can have great ideas that help give the app character