top of page

& Other Stories

Navigation system · Classification · IA patterns · Information seeking behavior · Microcopy

stories-image.png

Period: December 2021

dan-gold-aJN-jjFLyCU-unsplash.jpg

About & Other Stories

Stories is a brand under the H&M Group and offer seasonal must-haves and timeless feminine fashion Designed in Paris, Stockholm, and Los Angeles. Each one of the design ateliers has its unique expression that reflects the ever-evolving signature styles of the city where it’s based.

Assignment

The assignment we were given was to analyze the website's information architecture by identifying and assessing in detail the following:

  • Classification schemes

  • IA Patterns

  • Navigation system

  • Microcopy

  • Information seeking behavior

  • Develop an improvement proposal for it based on your analysis.

Classification Schemes

We began by analyzing the classification on the webshop. The main classification scheme used is the ambiguous scheme of topics, which fits well when the priority is to find logical and general categories.

It can also be argued that the site also partly uses a geographical scheme, as the brand divides its products according to where they have been designed; Paris, L.A., or Stockholm, which can also be filtered by.

IA Patterns

When it comes to IA Patterns, & Other Stories have a hierarchical pattern with upper and lower categories, which is also poly-hierarchical as several subcategories can be found in different places, such as socks under both shoes and underwear.

The page is content-driven, where the information is retrieved from a database, and the product pages have a common template/structure for how the data is presented (title, image, price, size, uniform expression). It is possible to search the database but also to filter and sort metadata to expand the navigation and filtering possibilities.

Navigation System

The navigation is mainly centered around the global menu where you get access to all products in the Stories catalog on two levels. It encourages you to explore the range and be exposed to new products throughout the shopping experience.

Micro Copy

  • ​A bigger / fatter Didot-like one for menus and active copy

  • A smaller / thinner Courier-like for longer texts and info

  • A sans-serif Arial-like for shorter info and buttons

  • The larger font is used in the menu, and in the name of individual products, but also for more active copy that will lead the target group to specific campaigns, or to buy more products during the search process.The smaller font is mostly used for narrative copy about the brand and informative text that describes product categories and details for individual garments.

Information Seeking Behaviour

In our opinion, the main information-seeking behaviors supported by the site are a combination of exploration and discovery of new things.
 

The exploratory behavior can, for example, start with a customer entering a specific category to get inspiration, as they know approximately what they are looking for, but not which specific product. The design that supports the behavior is in this case that the customer receives various suggestions for the products, which are divided into thematic groupings.

The discovery of new things takes place when the customer has clicked on a specific item, and then also shows other garments that you can style with, and other garments that other customers have bought. The garments that are recommended to be styled with are usually the other garments that the model in the picture is wearing, so you automatically get an overall impression of the entire outfit. The design that supports the behavior is in this case the smart suggestions that are presented when you click on a specific item.

john-schnobrich-2FPjlAyMQTA-unsplash.jpg

Improvements

  • At present, the entire start page is taken up by an image that links to a focused entry point with a narrower selection of garments (the joy of dressing up). This could be exchanged for linked images across the various studios, so that the customer can directly choose to shop according to these boundaries. We have also added links to these in the global menu on the left, so that customers can always reach the pages regardless of where on the website they are.

  • Improved search.

  • We removed popular pieces from the global menu (as we do not think it belongs there) and moved to the home page in the form of a link.

  • Popular pieces also became a sorting option instead of being in the global menu. We changed the name "best match" in the sorting choices to "popular pieces", partly because we think you want the opportunity to do that sorting under each category, but also because "best match" did not tell us anything. On the start page, the idea is that it will link to a sorting where all the store's products are sorted by popularity.

OtherStories-improvment.png
bottom of page