18.2.12

Topshop: Now that's more like it!


Topshop app

In early 2012, Topshop re-released their mobile application, and this time it is something worth writing about. If you have read my earlier post reviewing the first version of the Topshop app, you will have noticed my distaste for its design and lack of capabilities. However, a year later, It looks like Topshop have listened...

The app begins with a long scrollable homepage, dissimilar to its other high street competitors who opt for a simple one-page layout. The page is labelled 'We love' and encompasses all of the latest news from the brand. Topshop have decided to create a page that excites the user, offering them cut out, colourful sections relating to blogs, social media, the latest shows and collections. From the home page, the user can not only shop but learn about the brand's recent endeavours. It looks fun and exciting and really portrays the brand as such. 

Topshop app

As an example, one element on the Topshop app homepage in February 2012 was a video feature by Nick Knight, displayed boldly as the main element on the page, adding to the professionalism and fashionable lifestyle persona the brand strives to achieve. 

Topshop appTopshop app

Another feature, an edit of the latest essential items chosen by Topshop's creative editor is displayed on the home page, leading the consumer to a list of products that they can shop. Yes, I said shop... the Topshop app is now transactional!!

Topshop app

The app also integrates their blog, as a list of reports for the user; comprising of courier font and basic imagery. The design is left very plain and simple and concurrent with the Topshop black and white signature colours. Yet, although it does match the brand, I do find myself wishing for a splash of colour...

Topshop appTopshop app


 A drop down tab in the top right corner allows the reader to share, tweet and email each article to their friends, accompanied by cute, matching symbols. The drop down tab for sharing is something that I haven't seen before on a fashion app and is a clean way to hide away the sharing buttons. All good so far!


Topshop app

Alongside the blog, Topshop have also integrated their Tumblr site. Topshop, as far as I know, is the first high street retailer to move their social media teams towards Tumblr, the micro-blogging website.The Topshop tumblr is a collection of inspirational and aspirational images of the core Topshop customer wearing what I assume are Topshop products. It follows a similar ilk to websites such as Lookbook, whereby people are photographed in their street styles in their every day situations. It adds a new dimension to the brand, and emphasises their cool, fashionable edge. Allowing the app user to browse through such inspirational imagery definitely cant hurt the retailers sales.

Topshop app

 So, moving from the fun stuff to the actual products, the app follows the generic standard. Black and white lists of categories, leading to the next category. Nice and simple.

Topshop app

Clicking through to the final category in your selection, the products are displayed one by one in horizontal bars. Each consists of a front product image, a small description and the product price and allows the user to vertically scroll down for more products. For a refined search, the developers have integrated a 'Refine' button, allowing the user to sort the products regarding their sizes, colours, and price. It creates an experience that mirrors that of the website, leaving no reason for the consumer to only shop online.  


Furthermore, the app has integrated a customisation feature. By choosing the 'full screen' arrows, pictured in the top right corner of the images above, the user is able to customise the interface to suit how they want to shop. By choosing to shop in the full screen mode, the user views each product in full screen, scrolling horizontally to the next product. Each page also includes the description and price, in the same way as the list screen. The only app that I have seen integrate this feature so far has been ASOS, showing how customisation within mobile apps is becoming a crucial tool for building brand equity and purchase intentions.


Moving to the individual product pages, the user can view multiple views of the product, add it to their bag, check if the product is in their nearest store and share the product with friends in the same way that they are able to share the blog pages. The features are ample for purchasing and again mirror the style of the Topshop website's product viewing, creating channel consistency. 


By choosing the information icon, the retailer has added information about the product including a description, price, colour and fabric description. The user can also utilise the size guide, conveniently located on the page. Again, it is enough information for purchasing, and by hiding it away, the product pages are left uncluttered, clean and simple. 


The user chooses their size that rises from the relevant tab, and can then add the product to their shopping bag. An innovative feature at this stage is the ability to save your dress size, so that the app will remember your sizes on your next usage. Lovely. 


So that is it for product purchasing, now for the extra features... 

One feature that the app comprises of is a scan tool, whereby the user can utilise the app in store to scan the items bar code. This feature is helpful for those consumers who are shopping in store and find an item that they love but not in their size. The customer can scan the item as a quick route to finding the product online. It creates a connection between the traditional and mobile store and encourages online purchasing for those consumers who cant find an item in store. 

Topshop app

The fourth tool on the lower toolbar on the app is the 'Notebook' area. This follows the same idea as a saved bag or favourites section, whereby the user is able to add products to a saved space for later searches. When the user finds a product that they like, they can utilise the drop down tab to find the 'Add to notebook' tool. It seems quite obvious to note, but by naming this section 'Notebook' it creates another friendly and personal connection with the user, making them feel like it is their notebook filled with all of their favourite items. Many of the tools on this app have been designed to create such a consumer relationship and they have definitely succeeded.  

Topshop appTopshop app

The bag section is again consistent with the rest of the app. Clear and simple, listing all of the items in the basket, allowing the user to add more or remove and displays a clear total price.

Topshop app

As with every other retail app, the user can search for their nearest store by choosing the pin icon on the 'We love' page. It includes a map, address and phone number for each store. Standard.

Topshop app


Finally, I was wondering where the service information was kept, until I stumbled upon it hidden away behind the cog icon on the 'We Love' page. Here the user can read any information regarding help topics, settings, sizes and contact information. It is clearly categorised and helpful in its labelling. Perfect.

Topshop app


When I downloaded the new version of this app, I was so delighted. Not only was the app finally transactional, but it was something that the brand could be proud of. It portrays an exciting, high fashion and unique fashion brand and create a simple product purchasing experience. It is everything that the Topshop customer desires and everything that they could ever need. A big congrats to Red Ant, the Topshop app developers who have done a brilliant job in bringing Topshops vision to life. The Topshop marketing team should be giving you a big pat on the back.

All screenshots taken from the Topshop App, February 2012


Popular Posts