Week 3: Challenge Activity - Reverse Engineer

This weeks challenge activity is to explore an artefact of interest to me. Using one or two of the prototyping methods outlined in this weeks readings, I must create a quick prototypal representation of the artefact.

I have used the homepage of the ASOS app as my inspiration for this weeks challenge. I found that many fashion retailers use many of the same aesthetics for their e-commerce presences. White backgrounds, clear sans serif headers in black and similar grid layouts are very common.

I wanted to look at the home page as this is the top level of the site and whilst seemingly simple in it’s layout and content, I found that it cleverly brought together links based on trends, brands, personal shopping habits. It also cleverly combines moving and static campaign visuals, lifestyle images and cut outs.

I decided to use the paper prototype method for my reverse engineer. I have drawn four screens that show the content and layout of the elements of the Home screen.

Figure 1: Paper Prototype of ASOS Home Screen (Antonio Jackson-Perkins, 2021)

Colour

The colour palette for the entire app is predominantly black and white with the only colour elements coming from imagery and the occasional text box that reflects the colour from that section. With all the imagery on screen, products, campaigns, lifestyle images, using a neutral colour palette makes perfect sense. It keeps the eye focused on product, and allows important information such as brand, product description and price point to stand out.

Layout

The app utilises a grid system, with clear aligned boxes. The user can scroll quite far down which allows each component space to stand out. The static elements are the search bar at the top of the page as well as the bar at the bottom that houses the following buttons (from left to right):

• Home

• Search Categories

• Basket

• Saved Items

• My Account

The most important buttons are featured in the middle, with the search categories and basket buttons placed conveniently for the thumb of the right handed user.

The first graphic under the search bar is the PayPal box, advertising the Pay in 3 option - a shrewd positioning to alert the shopper to the possibilities to spend more by spreading payments.

Directly underneath we see the Sale section. This employs bright, bold colours - an indigo background with yellow text boxes. Underneath is a countdown clock till the sale ends. This is a clever inclusion to promote a sense of urgency.

Below this, and filling the rest of the home page without scrolling is a large box that shows the new campaign video. This is very lifestyle and aspirational. The video is engaging and completely appropriate for the ASOS shopper. This is obviously the most current campaign with the newest collections.

Scrolling further, there are four smaller campaign boxes that focus on specific product categories. They are seasonal and again with vibrant lifestyle imagery. They are grouped into categories such as Denim Shorts and Summer Kicks. and the text is age appropriate with catchy, fun straplines such as ‘A hot-climes classic’ and ‘Freshbrands’. As well as specific product categories, one of the links is to a campaign called Word Up with the strapline ‘(Lo)Go with the Flow’. This collection focuses on cross-brand, cross-product, logo-driven styles.

The next box returns to the full width and includes the graphic interest of the text boxes. This feels that it is perhaps an older campaign. Below this is an almost full screen box advertising the Topman brand, focusing on ASOS as the new home of Topman, a brand that has recently lost its physical presence on the high street. clicking this box takes you directly to the store within a store.

Underneath there are a few more campaign boxes that take the focus away from trend and towards topical activities such as summer holidays and football. What I find really impressive about this app is how relevant and immediate the campaigns are. It is constantly updated with new trends or activity campaigns that are incredibly relevant at that moment in time.

Towards the bottom of the page you will find a scrolling carousel of product suggestions based on my previous shopping habits. This is very convenient and particularly draws your eye to some user relevant, marked down products that you might not necessarily search for and may indeed miss.

In summary, I really admire the design and layout of this page. It’s very easy to navigate, varies the way it directs you to both trend and product-driven campaigns. It also keeps itself topical and relevant in both visuals, graphics and curations.