Testing E-Commerce Usability on iOS

At Stylight, I conduct usability tests on our apps at least twice a month. Though the Stylight Android and iOS apps are quite similar in theory, the subtleties of OS specific design conventions and user behaviour garner their own separate research. Recently, I conducted a usability test on our iOS app, with the key objective being to check up on the quality of the search experience in its current state, including search results.

Why?

We hypothesized that the products shown after a search loaded, might not have been the most on-trend products, or of the quality our users expected. As a fashion aggregator, Stylight includes many products from a variety of shops, ranging from Crocs to Louis Vitton. The big challenge has always been knowing which products are cool and should show up at the top of any given search, or in featured product lists. Although Stylight has a dedicated product services team, the “cool factor” of the product ranking is a challenge to measure when looking at data alone. With our ranking system, a high number of clicks on a product can often be attributed to the absurdity of it; a neon orange pair of toeless crocks could attract way more clicks than your more typical trending distressed jeans. Was this the best product ranking we could deliver to our users? What was uncomfortable about it? We set out to find out what our target demographic of German Millennial women wanted to see from a fashion search engine.

Method

For this evaluation I began with a 5 minute orientation task to observe the user’s natural flow within the app. A standard usability test with specific tasks followed, using the speak aloud method. We ended with a post evaluation interview in order to gather overall impressions and reflections from each user.

Findings

Insight: Inaccurate text search

The text search was inaccurate in at least one point per usability test. Users were being shown overalls when looking for a leather bag for example.

Recommendation:

An autofill solution for the text search would help to lead users towards already existing tags and categories. Although the implementation of such a solution may be difficult to do on iOS, the severity of the problem became evident, and priorities shifted within the team.

Insight: Lack of visibility for brands

Brands are extremely important. The brands weren’t visible enough in the iOS product cell designs. Although the shops were very visible to the user, the brands which matter most, were in need of some visual real estate. “When shopping online, the brand is not just a sign of a trend, but is often a signal of product quality.”

Recommendation:

Visually differentiate the brand from the product name.

Take it one step further and experiment with offering up the top 5 brands for any given search. Whether in a slider, in buttons, whatever works best. “Top brands for sunglasses”, “Peter Hahn, Rayban, Michael Kors, Asos, Miu Miu”.

Insight: The refine button was disguised

The refine button was not obvious to participants. If they were stuck in a list of results they weren’t happy with, it wasn’t easy enough to recover from that by specifying their search.

Colour was a problem, as the refine button was the same teal green as the click out buttons and the active navigation state.

The location of the button became yet another problem, as users expressed the desire for a refine feature, by pointing to the top half of the screen.

Recommendation:

The sticky teal button at the bottom should be revamped to a brighter more contrasting colour, in a higher location.

Insight: Too many product categories

The product categories were difficult to navigate. There were too many, some were irrelevant, and participants indicated that they would like them to be sorted and grouped by similarity.

Recommendation:

Cut out the least frequently used categories, A/B test different category orderings (by similarity for example).

Insight: Overwhelming search results for products

There were simply too many products shown. Knowing there were even 400 products seemed daunting to participants, rather than a wide array of options seeming like an asset. “I could scroll for hours before I find something I will buy”. It became evident that participants wanted to know the most popular products within a category first, and that we could use propensity to buy as an additional metric for popularity.

Recommendation:

Show 300+ as user feedback when there are more than 300 products displayed in a results list. Establish and test a new app ranking for products, with an algorithm that calculates popularity using product views as well as clickouts. Give those trending products visual importance.

Post research results: what did we change?

1. After more extensive research, we eliminated the “shopping” section from the navigation, and integrated fashion content and products into one navigation point. After landing in the app, and deciding to browse the newest trending clothing, a user taps the clothing bubble.

Landing in the app: fashion content and products in one navigation point

2. We added a preliminary results screen. After landing in their desired fashion product category, the user is met with a more dynamic results screen.

The most popular products within any given category are pushed to the top for inspiration. We have heard extremely positive affect about this in our appstore reviews and follow up usability tests.

Below the popular products are all the subcategories of the user’s chosen category; groomed and minimized. We can see that this has made it easier for the user to drill down to their desired category sooner, (without getting lost!) during recent usability tests.

Below the subcategory list, users can also find the most popular brands within this category.

3. We implemented autofill for our text search

4. We designed a more visible “Filter” button on a bright purple bar. An upgrade from the sticky teal refine button, this change has drastically increased our number of views on the filter screen. During this process we also killed the “541 results” label, and added a less daunting “300+ items found” as feedback on this new element.

5. We designed a new product details page. We decided to leverage the need for trending product inspiration by launching users from products that may have peaked their interest. If a user opens a pair of Calvin Klein jeans that looks cool, they can now explore more Calvin Klein products, Similar jeans, and more Calvin Klein jeans without leaving the page. We also designed new call to action buttons, with more descriptive copy, to make it easier for users to purchase products. With this change, we saw significantly more clickouts from product detail pages.

A brand new app

Though one single usability test wasn’t enough to evaluate the Stylight search experience, that single intention resulted in a completely revamped app that our users love. After several more usability tests, quantitative studies, and even a remote usability test, here we are.

And it continues…

Let’s try out this comments section: I would love to hear about your E-commerce design battles, what struggles you’re tackling with your product search, and how your team’s user research is unfolding!