Browsing for Fashion on the Mobile Web

Problem

The aim of this project was to understand how we browse for fashion on the mobile web and explore the use of ‘stories’ to provide a more immersive experience.

 Process

This project followed the design thinking method. It’s defined yet flexible framework enables discovery, innovation and experimentation.

Research

Literature

Browsing is something we do everyday, often without even thinking about it. To gain a better understanding and grounding for the project I conducted a literature review. In her article, 'What is Browsing - Really?' Marcia J Bates draws upon behavioural research to define the mechanics.

Browsing is the activity of engaging in a series of glimpses, each of which may or may not lead to closer examination of a (physical or represented) object, which examination may or may not lead to (physical and/or conceptual) acquisition of the object. (Bates 2007)

From a cognitive standpoint, Birger Hjørland argues that browsing is a king of orientating strategy (Hjørland 2011) used to help us define our goals. If we imagine visiting a shop for the first time, we might have a good look round to find out what they sell. Conversely, we may not need to browse when buying something specific in a store we've been to before. He calls these users Non-Committed (browsers) and Committed respectively.

Key insights

• Browsing is a way-finding exercise we use to define what it is we actually want to buy.

• Users can be split into two groups:

  • Committed - They already have knowledge about fashion and/or the website they’re visiting and will generally take the fastest route to buying what they want.

  • Non-Committed - These users have less of an idea about what they want and will browse to define a possible purchase.

• For a good browsing experience, users must be able to catch a glimpse of alternative products to help define a goal.

User Interviews, Observations and Survey

User interviews, observations and a survey were used to gain a deeper understanding of how we browse for fashion on mobiles.

Speed and convenience were the top reasons for people choosing to shop on their phones, while bad design and a limited view contributed to a bad experience.

Under observation, participants were asked to visit a fashion store they have used before and buy a blue suit for a wedding. In this scenario, they used the menu to quickly navigate to the correct category page and selected a suit that caught their eye, they would then view that suit in more detail before heading back to the category page to find something else. This process continued until they found something they would actually buy.

In the second task, users were asked to visit a new store and pick anything they wanted. The method for doing this was broadly similar however, they clicked on banners rather than the menu to help them define what it was they needed to look for. 

Customer Experience Map

A customer experience map was drawn up for the two types of user, committed and non-committed. What this shows is that often a customer may land on a site at a category page rather than the homepage, missing out on the offers and inspiration shown there. A way of including this should therefore be included throughout the site.

Personas

Personas are a way of synthesising the information learned about users to guide subsequent design. Two were created for this project, the first being a very fashion conscious social media user (committed) with the second being less informed about current trends (un-committed).

Any designs would have to serve the needs of both users by providing an easy way to view product and a more immersive experience.

Object Orientated UX (OOUX)

OOUX advocated designing for objects before interactions (Sophia Voychehovski Prater 2014) and is method used to identify what objects and associated meta-data are needed on a site. In this project it helped me work out what was needed on a category page, product page, a view (an initial scan) and a glimpse (something that catches the eye). 

Solution

The proposed design aims to combat banner blindness and users missing out on offers by using a product-first approach and including stories like those used on social media for communicating offers and inspiration. Category pages are merged with product pages so that customers can focus on what matters to them, the look and price.

Product First

Like Netflix, this idea replaces banners and carousels with product, giving a user a good view of what the store holds from the start of their journey. Thumbnails are placed so there is always the chance of a glimpse of something else that may catch the eye. This was tested as a paper prototype and while the concept was well received, users found it to be somewhat uninspiring.

Stories

To add life to the homepage, stories like those used on social media communicate offers and provide inspiration in an immersive experience. Unlike banners and carousels, their small size allows for them to be placed across the site so the customer will see them whichever page they land on. 

In testing, all users clicked and viewed the stories in the prototype.

Merging the Category and Product Pages

One of the issues brought up by users was that of small images. To combat this, the traditional category page is merged with the product page. Only the most important information would be shown leaving the rest of the screen dedicated to photography. Each image can be ‘flipped’ over to reveal more detailed descriptions and selection options. 

This feature was well received by participants after a bit of coaching which indicated that the buttons used needed to be clearer.

Conclusion

This project has shown that the use of stories together with a product first approach is one way of improving the browsing experience when shopping on a mobile phone without hampering the speed and convenience users have come to appreciate.