CASE STUDY:
RE-DESIGNED ZARA's WEBSITE
Brief:
Re-designing Zara's website to improve the workflow and apply visual principles to make the navigation, interaction, and efficiency of the website better.
Goals and Objectives:
-
To make the experience on the website more user-friendly and optimized for the customers, and provide them with seamless and quick browsing.
-
To decrease the Cognitive Load on the user while searching and checkout process.
Timeline: 4 months
Role: UX Designer (User Research, Interaction Design, Visual Design)
Tools: Paper-pen for low-fidelity prototypes and Figma for high-fidelity prototypes
Design Process
Research Plan
Research Outcomes
Survey Results:
-
Too much Scrolling:
With the editorial style of display of products, the user has to scroll a lot in order to view the desired product or have a comparative view of all the products.
-
No track of budget:
The cart does not have a budget calculator; hence the user is not aware of the total amount they have spent on the website while adding the products.
-
Accessibility feature goes unnoticed:
There is an accessibility feature present on the website, but its presence is at the corner and goes unnoticed by the users in most cases.
-
Navigation is hectic:
The navigation between shipping, payment, and summary does not work and the user has to navigate through the default back and the front option of the browser which is not intuitive.
-
Too many fields to populate for registration:
There are no quick register options present on the registration page (Google, Facebook). Due to this the user will have to spend a good amount of time and populate a lot of fields to just become a member of the brand website.
-
Optimized Payment Page:
The payment page can be made more optimized currently, it has two pages and again users must navigate back and forth in case they wish to change their payment method.
-
Quick customization options and hyperlinks on the Summary page:
On the Summary page, there is no quantity customization or product delete option. This makes it difficult for the user as if they change their mind to discard a product or add another piece of product (For instance, need to buy the same product for a friend as well). They'll have to navigate all the way back to the cart page to customize it.
Also, with the title of the product not being present on the summary page, the user has to unnecessarily guess the vague keywords and browse for them.
Understanding the product
1. Zara was established in Spain in 1975 by Amancio Ortega, the strategy behind his brand was to sell quality products at a reasonable price.
2. The store went international and was established in Portugal and New York City. Gradually, the stores were established all over North America.
3. Many brands were acquired such as Pull and Bear, Beshka, Massimo Dutti which was named under Inditex company; Zara is the largest contributor of this company.
4. The biggest advantage they have is in-house designing which allows them to deliver clothes in less than 2 weeks whereas it takes months for other brands to deliver.
5. It is one of the Fast Fashion companies and supports eco-friendly methods; they claim that their clothes are free of toxins.
The Improvement Plan
1. Minimize the aesthetics and workflow of the pages. (less scrolling, optimize payment page, smart cart, quick registration options and customization options on Summary page)
2. Make the features present on the pages more interactive, in order to make users be on the same page as the website. (Budget calculator, micro-interaction for accessibility feature, interactive navigation)
Proposed Workflow
Sketch And Wireframes
Challenges while implementation:
-
When I made the first set of wireframes, there was still a lot of scope for improvement on the website. I had a discussion with my professors in order to understand the approach I should undertake while implementing the second prototype. The first prototype was very much like the original website hence, it was difficult to differentiate it.
-
Gestalt principles, layout changes, typography, and interaction design were included in the second prototype.
-
I made sure to re-iterate my pages in order to keep in check if I can improve any further, with each iteration there was some scope of improvement due to which I had to keep re-changing my prototypes.
-
As it is my first project, I am sure there must be still good scope to improve more, I am open to critique feedback and will be more than glad to learn it and implement it on my website.
Ps. Always open to learning new things, that's how we grow :)
Registration/Login Page:
Visual Design and Proposed Solutions(Re-design)
Website Header:
Header:
Current:
Current:
Proposed Header:
Key Takeaways:
1. It supports the principle of symmetry, where the logo is present in the middle and the options are present equally spaced at both sides of it. It also puts greater emphasis on the Zara logo as it is present in the center.
2. Sale link is present in a different colour - red, in order to catch the user’s attention to it. Red has the longest wavelength and catches attention easily.
3. Iconography (search and cart) is used to make it easier to locate and intuitive.
Registration/Login Page:
Current:
Proposed Design:
KEY TAKEAWAYS:
1. Challenge for the user: On the current website, the user must populate a lot of fields to be a member of Zara, it does not support quick login options like Facebook and Gmail which is supported by most of the websites these days to make it more efficient and reduce the load on the user.
2. In the proposed re-design, quick login options are available along with the option of “Create an account”, in case the user does not wish to link and provide details in the traditional manner.
Product Catalogue:
Product Catalogue:
Current:
Current:
Proposed Design:
Proposed Design:
KEY TAKEAWAYS:
1. It supports the Principle of Similarity as all the images are placed at equidistant whitespaces and follow the same pattern of shape, size, and placement.
2. Filter feature: On the current site, it is difficult to locate it as it is present in small at right, it has been placed in the left with all the options available in it, it’ll be constantly located in order to always provide users with options.
3. Smart Cart feature: On the current website, the user needs to navigate to the next page(checkout) to get the total cost estimation and then navigate back to customize it, through the smart cart feature, the user gets the update of the total cost and they can customize it easily through quantity customizer and delete buttons.
4. On the original site, we don’t have the “Add to Cart” option on products, the user has to navigate to the product description page to add it.
5. The products are present close enough to provide users with a concise view of them, it reduces their scrolling and allows them to do a comparative analysis of the products.
6. A micro-interaction is added for the accessibility tool, as it supports one of the most important features where the user can customize the site as per their requirement, they can change the font size, zoom level, background colors, etc. Right now, it goes unnoticed on the website but this feature, it will catch the user’s attention.
Product Description:
Current:
Current:
Proposed Design:
Proposed Design:
KEY TAKEAWAYS:
1. Images with all the important angles at one place, the user has no need to scroll to view them.
2. The user also has a like and share option from the description page itself.
3. The position of the Cart and accessibility button remains at the same location to provide consistency.
4. The current website does not support the “Quick Buy” feature, through this feature users can quickly buy a product, the page will directly navigate to the shipping page which reduces a lot of users’ time on the website.
Payment:
Current:
Proposed Design:
KEY TAKEAWAYS:
1. There are 2 pages dedicated to payment, in the re-design the payment method can be selected, and can the details of the method can be populated on the same page.
2. Challenges:
-
On the current site, the user has to keep navigating between both the payment pages in case they want to change their payment method, the proposed design resolves it by combining it on one page.
-
The products are also not displayed, which creates a gap between the user and the interface’s transparency.
-
On the original site, it does not give a concise view of the products, hence, in re-design, it has been added on second half where all the products can be viewed easily along with total cost.
4. Current site does not support navigation between shipping, payment and summary, in the proposed re-design the links will be working and should support seamless navigation between these three pages.
Summary Page:
Current:
Current:
Proposed Design:
Proposed Design:
KEY TAKEAWAYS:
1. On the current site, the user must scroll to get all the details related to the purchase, in re-design, it is made more simplistic and the details can be clearly identified as it is present in a different colour to highlight it.
2. The details of the products can also be found on the right-hand side, with the “Authorize Payment” button, user can finalize their purchase.
3. Challenge on current site: If the user changes their mind to buy another product, delete a product or add another same product, they must navigate all the way back to the product catalog and search for the product; it will be difficult again as the title of the product is not present on the summary page, so they will have to keep searching for it.
4. In the proposed workflow, the titles and images will be hyperlinks to their respective product description pages and the user can navigate to it by simply clicking on it and customizing it.
Re-design Outcomes:
1. With the features such as a smart cart, quick login, quick buy options; it reduces a lot of users’ time for checkout and makes the website more optimized and efficient.
2. The concise view of products proposed workflow which has seamless navigation between pages and connection between pages with the help of title and images reduces the cognitive workload on the user.
3. The reduced number of pages and less length of web pages will also help reduce the load time of the website.
4. The summary of products in the cart on each page and total amount display also helps the user to track their spending on website; it is more transparent interface for users.