A case study examining how this fashion retailer's website could be improved for e-commerce and accessibility.
In this case study, the retailer I focused on is Anthropologie. Though a successful and well-known retailer, in their website we find considerable room for improvement: their UI needs to be better streamlined in order to achieve the brief's goals of creating “a fun and engaging space” and making their sales journey “clean and robust…from start to finish”.
I attempted to resolve these issues through rigorous user research (both qualitative and quantitative), culminating in a responsive and streamlined design that allows Anthropologie customers to complete the journey from search page to purchase with minimal hassle and gives them confidence in recommending the brand to their friends and family.
The design prototypes, presented in both desktop and mobile format, focuses on the following pages:
· The Homepage
· Search Results (Using the term ‘Sweater’)
· Shopping Basket
In order to create a design that adheres to the client’s requested changes, I will attempt to streamline and simplify the overall UI of Anthropologie’s website while adhering to the overall design aesthetic of the brand.
To create an increase in sales, I will modify the layout of the homepage and product pages with a focus on accessibility as well as clarity (e.g. making design elements larger and more balanced around the page).
To reduce calls for the contact centre, I will attempt to anticipate potential user enquiries and address them by re-prioritising the relevant elements of the website’s design so that they are more centralised and easy to find.
To encourage referrals to friends and family members, I will include suggestive elements to the new designs that either provide incentivefor referrals or make the ability to share content more obvious in general.
To hone in on Anthropologie’s specific design problems, my first step was to conduct thorough competitor analysis, comparing the brand’s webpage against the following rivals.
· White Stuff (High Street Clothing Brand)
· John Lewis (High Street Clothing & Home Furnishing Brand)
· IKEA (Furniture and Home Furnishing Retailer)
In pursuing this analysis I looked into finer details such as the information chosen by each website to include in the hovering banner at the top of their page, or whether or not they integrated information about their returns policy into their checkout page.
Anthropologie’s home-page is minimalistic and simple to use but does not adhere to good practice with regards to UI design fundamentals.
The initial checkout page uses tiny, barely readable text and does not justify the ‘order summary’ as a distinctive element of the design, preventing the user’s eye from being drawn to additional content (e.g. offers). Furthermore, payment methods apart from Paypal are not evident, and alternative models such as Klarna and Clearpay are scattered around the page rather than grouped together.
The layout of a single product page is similarly unfocused – where other brands use mostly equally-sized product pictures, Anthropologie sticks to the older design layout favoured by eBay and Amazon, with one large image surrounded by clickable thumbnails. Additionally, the hierarchy for elements of the page are confusing – for instance, while the checkout button is wisely made a priority, the ‘add to wishlist’ function seems to be an afterthought, not even afforded its own distinct button.
My primary research method was to create a test questionnaire drawing on the problems found through my competitor analysis, as well as the ‘Red Routes’ of each page (those most highly used and/or prioritised by typical users). Though working with a limited sample size, I was able to confirm or further refine the conclusions I had come to through my Competitor Research.
While the responses helped in refining my intentions in terms of how to improve on Anthropologie’s existing user interfaces, I found on reflection that the line of questioning may not have been specific enough – in most cases I favoured the respondents’ own personal experience of the site in general rather than of the specific elements to which I was trying to make an improvement.
Additionally, late into the designing phase of the project it became apparent to me that the hierarchy of different elements on Anthropologie’s website is vital to refining their user experience. Therefore,when taking on similar projects in future I will be sure to involve a ‘Card Sorting’ exercise into the research phase, so as to gain better user insight.
After reviewing my data and drawing conclusions, I experimented with Invision Freehand, using a variation of the classic “Crazy 8s” - rather than eight designs in eight minutes I went for nine, creating three different sketch versions of each screen and picking the most workable sketch from each group.
Due to time constraints, I performed this exercise alone, rather than in a collaborative group, as would be more usual. For the same reasons, the ‘Crazy 8’ session and some light mind-mapping were the only Ideation exercise I performed for this case study. As a result, the designs may need further refinement.
As discussed above, I was only able to complete the low-fidelity stage of wireframing before moving on to the final tweaking of Anthropologie’s existing homepage, shopping cart and product page UI.
My consistent focus across all pages is to reduce clutter in the top menu – unlike most competitors, Anthropologie places their logo in the centre of the page rather than the left, does not prioritise the search bar, and employs a cluster of disorganised elements in the topmost banner. During the wireframing phase I experimented with different ways of addressing this, re-prioritising the different elements of the menu and reducing the amount of space taken up.
With the homepage, I attempted to make the initial large banner image both more eye-catching and informative. I also created a smaller scrolling menu in the negative space between the bottom of the banner and the large image on the left, providing the user with an impression of Anthropologie’s offerings outside of clothing (my questionnaire respondents skewed more heavily toward purchasing homewares than clothing).
In the individual item listing, I increased the size of preview images and got rid of thumbnails altogether in order to give users abetter immediate sense of an item’s style. At the side-menu I increased the size of all buttons and typefaces to create better accessibility, added a ‘share’ button in order to improve on referrals and reduce customer service enquiries, and reorganised the hierarchy of certain elements – such as giving 'Add To Wishlist’ a button of its own, grouped together with the ‘Add to Basket’ button, since these are related actions.
At the shopping basket, I experimented with adding a ‘StepGuide’ to the transaction journey – the intention being to give customers are assuring visual and make the purchasing process seem smoother. As with the item listing, I made sure to increase image, typeface and button sizes and re-prioritise certain elements over others.
My work adheres to the following design guidelines:
To reduce potential user pain points, I reduced the clutter of the top menu, reducing it from two menus to one, with the less necessary information re-organised into a rolling red banner at the top of the page. Similarly, where possible I re-sorted certain sets of options into collapsible menus (at the checkout page,for instance).
Reformatting information into easily-digested ‘chunks’ can help users to make decisions with better clarity. I applied this in places such as the homepage, taking the three floating ‘call-to-action’ buttons from the original design and clustering them together in a neat columnon the right, so as to take advantage of the natural movement of the users’ eye from left-to-right; or in the product page, where I placed thin dividers between different tiers of information (e.g. availability, colour)
The ultimate test of whether I failed or succeeded in this would only be determined by user testing, but I am confident my changes made a difference. On the homepage, I made sure that columns advertising product lines were the same size (the prior design made one column larger than the other, contrasting with the brand’s competitors.
My work on Anthropologie’s website is built on the principle of creating an analogous experience to visiting the physical shop itself. On the home-page, I made sure that the 'Hero Section' would resemble a shop display window, using a natural, tree-bark texture to imitate the hardwood panelling found in Anthropologie’s shop décor; when reformatting the ‘Order Summary’ section of the checkout page, I tried to structure it similarly to a printed receipt.
Some examples of this can be seen in the Order Page. I made sure that both the 'Order Summary’ section and the ‘Wish List’ were made more distinctive from the rest of the page; I also modified the ‘Order Summary’ so that a preview of information about delivery options was clearly viewable, which elicited a positive response in my initial one-off user test.
To adhere to this law I borrowed cues from Anthropologie’s competitors to help the brand seem more familiar to a wider audience. I made attempts to subtly increase the range of diversity in the brand’s models and immediately advertised product range; increased the size of typefaces and banners; added‘Share’ buttons; and overall attempted to make the site design simpler and more direct.
While working with Anthropologie’s chosen font family (Roboto), I alsoc hose to incorporate Goudy Old Style and Calisto MT for front page headings,typefaces which I feel are consistent with the brand logo and overall aesthetics.
I also used bolding and font sizing to help certain elements stand out andbecome more immediately used by customers: in the top menu I increased the size of the ‘New’ and ‘Sale’ tabs and added buttons; in the Checkout page I added more bolding and different font sizes to imply a better hierarchy between design elements.
When introducing new colours to the mix I thoroughly tested the colour contrastbefore applying them to make sure they would remain usable by colour-blindusers. In general I increased the touch target sizes of buttons and otherinteraction designs across the pages. If given more time, I would also havemodified the form fields and variation states for Call To Action buttons (mostof which have poor variation states in the existing design).
In future case studies, I will attempt to spend more time in the research phase, building a wider sample size and gleaning a more diverse range of answers so as to make my design as inclusive as possible.
For similar reasons, I look forward in future cases to being able to give a client’s website a full top-to-bottom audit and redesign on the lines of accessibility, a field in which more brands than Anthropologie alone are lacking.
I am pleased to report that working on this project helped me build on my knowledge of how professional designs are structured within Figma – especially using Frames to keep elements separate and organised, and presenting element interactions in presentation mode.
In a more professional setting I would attempt to further refine my design by recording data through user trials, web analytics and recording mouse maps/heat maps, hoping to find which areas of the new designs are being best responded-to and whether or not this leads to better sales/fewer calls. In this case, I cannot with full certainty state whether or not my hypothesis was justified.
