Site Spotlight: How Gap can improve their user experience

Site spotlight, User experience, User journey, Web design, Web development

This week’s Site Spotlight is influenced by an email from Gap that caught our attention. The subject line boldly claims “A better Baby Gift Shop (trust us!)” and the inner body contains the compelling phrase “fun to shop!”.

Site Spotlight: How Gap can improve their user experience - Email

In Gap’s 2013 annual report their global president, Steve Sunnucks, stated that “everything we do is focused on delivering the best Gap experience”.

This sounds like a challenge to us! So, let’s explore Gap’s baby gift shop and consequent user experience to see if their user journey is as “fun to shop” as they claim.

Landing page

Site Spotlight: How Gap can improve their user experience - Email banner

Clicking on the link in the email takes the user through to the corresponding landing page. The page is fine on a mobile and all elements are in proportion. However, when viewing on a desktop the combination of large text, excessive white space at the top of the page, and large category boxes makes the page longer than necessary.

This is particularly noticeable when viewing on a laptop screen as the user can’t see any call to action buttons without first scrolling down to see the category boxes. Gap would be better positioning their menu in-line with their search box, whilst reducing the size of their top banner to move the key content as much above the fold as possible.

Site Spotlight: How Gap can improve their user experience - Email banner - landing page

Most worryingly though the landing page is made up entirely of images with no HTML text. This makes it unreadable for users with screen readers and can negatively effect how search engines rank the site. The images don’t have alt tags either which leaves the user without a description should the image fail to load.

We’ve seen this before when we explored the Forever 21 user experience. We predicted that this year companies will invest heavily in their online user experience. So, let’s hope that we start to see popular e-commerce sites avoiding accessibility barriers and start to focus on their users.

It’s also a shame that Gap hasn’t used adaptive design to create a truly useful user experience. The “Shop by size” category at the bottom of the page, for example, hides a very useful tool. On the landing page it is presented as a category box which takes the user to the baby boy section by default unless they specifically choose baby girl.

Site Spotlight: How Gap can improve their user experience - Size chart landing page

At the top of the resulting page though is a much more detailed size chart where individual ages can be selected and the clothes are filtered accordingly. It would be useful for users on a desktop at least to have access to the more detailed size chart on the landing page. This would get users to the relevant products quicker and streamline the user journey to the checkout.

Site Spotlight: How Gap can improve their user experience - Detailed size chart landing page

Gifts Categories

Gifts by stage

Clicking on this category box takes the user to a page full of clothes that have been seperated into 4 distinct stages. The user can click on the stages at the top of the page and they are moved down to that particular section.

Site Spotlight: How Gap can improve their user experience - gifts by stage

Gifts by stage would be particularly useful for users who aren’t sure on the exact age of a baby but know what stage they might be at. An additional filter is available to users who wish to filter the clothes by size. The clothes can’t be sorted by useful variables though such as price or best selling, although as there aren’t too many items per stage this isn’t too problematic on a desktop.

Site Spotlight: How Gap can improve their user experience - gifts by stage narrow results

At the bottom of the page is a misleading link claiming to “Narrow results”. However, clicking on it only takes the user back to the banner at the top of the page to select a different stage. This is the same action as the “Back to top” button below it. We noticed this confusing functionality at the bottom of all category pages and it leaves us wondering whether filters were going to be added to narrow the results that eventually got abandoned when the number of clothes didn’t warrant the development time.

Top gift picks

The banner at the top of this page includes a drop-down menu to navigate the gift shop, but it breaks away from its container. The arrow next to “Explore our gift shop” suggests that this is a call to action taking users to the gift shop landing page. This means that users are unlikely to hover over it to see the drop-down options. Perhaps the arrow could point downwards to imply there is hidden content, or better yet remove the hover functionality completely and replace with individual navigational buttons on the banner in a similar manner to the Gifts by Stage section.

Site Spotlight: How Gap can improve their user experience - Top gift picks navigation

The clothes in this category are not able to be filtered or sorted. It looks as though Gap intended the items to be filtered by size, but a category error prevents the user from doing so.

Site Spotlight: How Gap can improve their user experience - Top gift picks filters

The name of the category isn’t fitting with the content it contains. It isn’t clear what makes the items top picks – they aren’t best-sellers as many are sale items. It seems as though Gap has just placed any clothes here that didn’t fit elsewhere and used the umbrella top picks. It would be better to focus on a specific function that would help users find a gift more efficiently.

The banner at the top claims the clothes are gifts for special occasions so perhaps this could be the specific function Gap choose to focus on. It would be helpful then for the clothes to be categorised as such to help users. Sections titled “Birthday gifts” and “Summer party”, for example, would help users find suitable clothes quickly, visualise the event and convince them to purchase.

Another alternative would be for “top gift picks” to be renamed “most popular gifts” or “top gift picks as chosen by you”. The content within would change depending on what users are buying. This would really help those who aren’t sure where to start with their gift search. They can be easily convinced to buy an item because others are doing so, and thus it must be a good gift.

Gift set ideas

Again, Gap has tripped up with their top banner. Here a functionless “Explore our gift shop” button has been included in the image with the fully-functional drop-down placed over it but slightly to the right. This suggests that the drop-down functionality was added at a later date and the original plan was for the entire banner to click through to the gift shop landing page.

Site Spotlight: How Gap can improve their user experience - Gift set ideas banner

Gap could have easily avoided simple errors like just by looking through the site. It’s detrimental to the user experience, confusing to users and presents functionality that doesn’t work.

The clothes are presented in rows of matching items which indicate they are a set. This isn’t clear though. It would be better to really enforce the idea of a set and make them into bundles. The bundles would be illustrated with images showing all the items together, and even better, perhaps include some lifestyle imagery of babies wearing the clothes as a set to help make a sale. When a set is clicked the user should be taken to one page where they can select sizes and add all of the items to their bag. Instead, they have to click on each item separately.

Site Spotlight: How Gap can improve their user experience - Gift set ideas sets

To their credit, Gap has included quick view functionality when a user hovers over a product. This allows the user to remain on the page and enables a pop-up where the product can be added to their bag.

However, if users didn’t filter by size and instead were to use the quick view functionality on each set, they could potentially get to the last product only to find out it isn’t in stock in the correct size. They then have the frustrating action of removing all the other items from their bag, or most likely, just abandoning the site altogether.

Site Spotlight: How Gap can improve their user experience - Gift set ideas sets quick view

Users are able to filter the clothes by style and size, but the HTML on one of the styles runs outside of the menu background when it should have pushed down to a new line.

Site Spotlight: How Gap can improve their user experience - Gift set ideas filter

It would be helpful for users to be able to find entire gift sets by size. Filtering gift sets by 0-3 months, for example, only returns one item under “Gift sets for her”. We wouldn’t really call this a gift set.

Site Spotlight: How Gap can improve their user experience - Gift set ideas filter results

Gifts by gender

Gap has three separate buttons which take the user to the relevant section on a new landing page. The top banner also features the same three buttons and the drop-down menu that is featured consistently on the other pages. As seems to be the trend with Gap though, they don’t have any alt tags on their pages so this functionality is unavailable if images are disabled, fail to load, or for users with screen readers.

Site Spotlight: How Gap can improve their user experience - Gifts by gender top banner

The section for users to buy gender-neutral gifts is particularly useful for those who are unsure of the gender. It would be nice to have a little more colours available though instead of a sea of grey, white and the occassional yellow.

Site Spotlight: How Gap can improve their user experience - Gifts by gender gender neutral clothes

Users are able to filter clothes by style and size, although like the other pages, are unable to sort the items.

Gap could also have included some of the gift sets outlined in their other category rather than assuming their users will browse the whole site.

Gifts by size

This category is by far the largest and seems to feature all of Gap’s baby clothes. The top banner is designed differently from the other categories and lacks the navigation we’ve seen featured on the others. We’ve already mentioned that it’s a shame this wasn’t included as adaptive content for desktop users on the gift shop landing page.

Site Spotlight: How Gap can improve their user experience - Gifts by size top banner

There’s also a handy size chart which allows users to switch between cm/kgs and inches/lbs. This is a great tool and can really help to push conversion rates, but is hard to miss with its small call to action button. Gap would be better making it larger, perhaps matching the width of the banner above, and emphasising how it can help. It also takes users to a new page which breaks the user flow so would be better suited in a pop-up.

Site Spotlight: How Gap can improve their user experience - Gifts by size size chart

User can filter by gender and size from the top banner, or by style and size from the left hand side. A user can select a size from the top banner and then filter by style from the left, but not the other way around for some reason. If they decide to filter first by style and then size on the left there are presented with some odd options. If “bodysuit” is selected, for example, no bodysuit option is available under sizes and instead they can select the size under “tops”.

Site Spotlight: How Gap can improve their user experience - Gifts by size bodysuit

If a user were to select size first on the left hand size they could reasonably assume bodysuits would appear if they had decided to only select the sizes for “One pieces”. However, this only displays rompers. To prevent such a confusing user experience Gap should ensure that the styles correspond to the sizing options available rather than relying on users guessing.

Site Spotlight: How Gap can improve their user experience - Gifts by size rompers

A gift shop user experience?

A 2012 Consumer Search report found that 65% of respondents would turn to friends, family, and social media for gift-giving ideas, whilst 64% also said they turn to companies to help provide inspiration.

There’s clearly a market for Gap to capitalise on and convert to sales but to do so they should really embrace the concept of a gift shop.

Perhaps they could offer users a gift finder tool on the landing page. This would essentially filter all the baby products by a series of variables defined by drop-downs or checkboxes.

They could also split their products into more helpful categories. If a user is buying a baby gift it is reasonable to assume it’s for a particular reason, such as a special occassion or for a new-born arrival. Gap would likely see a higher level of engagement if they catered specifically to the searches users would want.

Furthermore, a feed of popular items could run at the bottom of the landing page to act as inspiration for users who just want to casually browse but don’t know which category to click on.

In conclusion…

We’re not sure how Gap determined their baby gift shop “fun to shop” because it certainly isn’t easy or efficient to do so. Overall, their shop suffers from a lack of understanding of their users’ needs. It very much feels like their baby clothes have just been categorised into 4 main sections and then labelled as a gift shop. User testing would be beneficial to determine how their users are interacting with the site and what they would look for in a gift shop.

Other elements of micro UX could have been added across the gift shop to make the overall user experience a little more joyful. For example, elegant scrolling could have been utilised when a user clicks on a link at the top and is repositioned down the page.

The gift shop is further let down by a lack of testing for category errors or broken HTML items. There are inconsistent filters available across the pages, with some offering sizes and others nothing at all. None of the items can be sorted either. The top banners also lack consistent design, with the navigation disappearing or moving position across the sections.

A little more care should have been taken to fix these before launch and certainly checked after the live date. For a company that claims their gift shop is “fun to shop” they should have at least tested it themselves to make sure this is the case.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>