top of page

About the Project

In the following project, I have attempted to re-design the Home page, navigation bar, and product page, along with the payment and check-out pages of the Ajio desktop website. The changes have been accompanied by secondary research and explanations, to better justify the point.

​

Duration of the project 

3 - 4 days

Understanding the User and Brand

Person Creation

Persona creation of 1 potential user has been done on the bases of secondary research to better understand the pain points

Brand Study

USP of Ajio

​

By looking at the present desktop website of Ajio we can see that serving discounted trends from popular brands is their USP. Thus it must be made sure to highlight this USP even on the re-designed home page of the website.

Logo of Ajio

Brand Colors

Problem Areas and New Designs

I. Navigation bar

Problems of the current navbar

Explanation

  • Point 1 - The present navigation bar of Ajio has two 2 parts. Though the bottom part which includes the main categories and search bar can be considered the primary part, the small top section where sigh in and account options are available can be called the secondary part. The division of the navigation bar into two sections seems unnecessary and unorganized especially when all the elements can be easily included in one navbar itself.

 

  • Point 2 - The second issue in the navigation bar can be the use of all caps to mention the main categories of the products. According to research done in 2017, it was found that all caps can be difficult to comprehend by human barons making them a faulty means of creating emphasis in UX design.

​

  • Point 3 - Ajio right now uses hover and expand menus for its main categories. According to an article by UX Collection in 2020, hover and expand menus are inaccessible for the visually impaired and keyboard uses and can not be responsive. And thus hover and menus must be prevented from being used on navbars.

​

  • Point 4 - The present navigation bar uses white-on-blue icons for the bag and closet but both of these icons are slightly uncommon for e-commerce websites and are not accompanied by labels. This can easily confuse the users and make them question the real purpose of the icons.

​

  • Point 5 - Though having an emphasises search bar is beneficial for e-commerce websites as 43% of the users interact with it, it is also important to keep in mind that this emphasis remains similar to the aesthetic of the website. The light yellow search bar here does emphasise the search bar, but it doesn't go with the overall bold and vibrant vibe of Ajio.

​

  • Point 6 - The current navigation bar of Ajio has the same background colours as the website itself and thus fails to stand out.

New navbar and changes made

Changes

  • Change 1 - The two-part navigation bar was replaced with a single navigation bar which included all the product categories, search bar, wishlist, account details, and cart in one place.

 

  • Change 2 - The icons used in the navigation bar were replaced with more universal icons that were accompanied by labels to make sure the purpose of the icons is clear.

 

  • Change 3 - The search bar has been made with a white on grey background, thus highlighting it from the remaining navigation bar without breaking consistency as seen in the original website.

 

  • Change 4 - The hover and expand the menu for the product categories in the previous navigation bar has been replaced with a click and expand the menu. Along with this, each category has been accompanied by a bottom arrow highlighting the uses that the categories aren’t just heading, but drop-down menus.

 

  • Change 5 - The background of the navbar has also been changed to a light grey to make it stand out from the rest of the website and slightly emphasise it by following the rules of containment.

II. Home page

Problems with the current home page

Explanation

  • Point 1 - The current home page of Ajio is cluttered and visually dense with an absence of hierarchy through colour and text size. Each separate section is accompanied by different background colours and font sizes fighting for the user's attention. The information on the website also does not follow a uniform flow and at first, glance only seems to be focusing on discounts and doesn’t follow a specific flow, thus resulting in a “holo effect” thus increasing the chances of the users missing information.

​

  • Point 2 - The website also has a three-dot icon, stuck to the right corner of the screen which is supposed to style assistance and a help bot. But due to the use of uncommon icons, the absence of an explanatory label, and colour which tends to camouflage with the background colour home page the icon gets ignored and goes unused by the customer.

​

  • Point 3 - Apart from this, the USP bar of Ajio that informs the users about their exchange policy, security and product quality is placed at the bottom of the website. According to an article by Steward in The Creative Momentum, it has been shown how having a USP bar on the top of the website rather than the footer can help increase the credibility of the website for the users.

New home page and changes made

Changes

  • Change 1 - The main aim for making the new home page was to arrange the content in a sequence of high to low customer preferences with the USP of Ajio being highlighted at the top of the website, and more customer interaction-based content being highlighted on the footer of the website. We started with the USP bar at the top of the home page to ensure credibility for the users the reasons for which have been discussed in the previous section.

​

  • Change 2 - Followed by a hero image discussing an upcoming sale and the slider highlighting the recent trends. Both, sales and recent trends are the USP of Ajio and placing on the top of the webpage immediately informs the users about it.

​

  • Change 3 - The next part is taken up by daily offers and top brand deals, both dealing with branded discounts and trends, further communicating the core of the brand.

​

  • Change 4 - The next section allows users to shop through popular categories and brands. This can be beneficial for users who find themselves getting intimidated and confused by all the multiple categories under the large drop-down menus of the navbar categories.

​

  • Change 5 - The next section talks about styles inspired by celebrities. This is something new Ajio has been experimenting with and thus placing this section in the middle of the website will offer it the right amount of traction by curious customers who decide to explore.

​

  • Change 6 - And last but not least we end with customer interaction being incorporated into the website through social media to better communicate the personality of the brand and also gain more relevant traction on the social media platforms of Ajio.

​

  • Change 7 - Apart from this, the three-dot icon for the assistant bot has been replaced with a more friendly and common wave icon. It has also been accompanied by a label. In this situation, the users can conveniently chat with the assistant boy by clicking on the icon on the right corner of the screen. The colour of the icon has also been changed to navy blue to make it stand out from the webpage background.

​

  • Change 8 - Separation or containment between each section on the home page has been created by white and light grey colours, replacing the vibrant teals, orange, and yellow colours used in the older website which were making it visually heavy.

III. Product page

Problems with the current home page

Explanation

  • Point 1 - A few problems can be spotted on the product page. If we start from the top we can see that the title of the page is followed by a product page description. This generalised description for a product category seems unnecessary and will be mostly ignored by the customers, thus taking up unnecessary space on the webpage.

 

  • Point 2 - The webpage has two filters under different titles even though the content under both the headings can easily be placed under one resulting in more efficient use of space.

 

  • Point 3 - The “quick view” button is available for every product when a user hovers over it but as discussed earlier, using hiver to showcase an important menu can be inaccessible for users who are visually impaired or are using a keyboard to navigate the website, thus raising accessibility issues.

 

  • Point 4 - A user can not directly add a product to the cart or their wishlist from the product page itself. This results in an increased number of clicks to complete a task and can hamper the user's experience.

 

  • Point 5 - The content on each section in the various categories in the filter can also be arranged in a more space-conscious format to make it look neater and more organized.

New product page and changes made

Changes

  • Change 1 - Removing the product page description under the heading to make space more space for products.

​

  • Change 2 - Adding a quick view button and replacing hover due to admissibility issues. Providing users with “add to bag” and “add to wishlist” options from the product page itself, thus reducing the number of clicks to compleat a task that has been believed to be beneficial for the user experience.

​

  • Change 3 - Each row has four images at one time, this was done mainly because according to researchers it has been found that four products per row are the optimum number which will not overwhelm the customers and improve sales.

​

  • Change 4 - The two filter headings have been combined in one and every single filter category has been presented as a drop-down menu with a bottom arrow. This has been done mainly to ensure consistency throughout the website with the navbar also following a drop-down menu system with a bottom arrow.

​

  • Change 5 - The content under each filter category has also been rearranged and alined in a more organized fashion to ensure better space cultivation than in the previous website.

IV. Checkout and payments pages

Problems with the current home page

Explanation

  • Point 1 - Lack of visual hierarchy and lack of emphasis on important elements like the price of the products, image of the products etc.

​

  • Point 2 - The space utilization to complete the payment and checkout process has been poorly done. This can be said as the users have to scroll down in almost all the involved pages even though the web pages even though webpage has enough space to accommodate all the elements in one screen without scrolling.

​

  • Point 3 - The pages also appear visually imbalanced with the progress bar not aligned to the centre and the other elements arranged at unequal intervals.

​

  • Point 4 - It requires users to create an account to proceed further for the checkout and payment and doesn’t offer a guest option. This, according to researchers is one of the most common reasons why customers drop off from the checkout process.

​

  • Point 5 - The order summary in Ajio is only limited to the value and price of the product and doesn’t mention the name, quantity, or image of the product. This hampers the transparency of the checkout process and can make the process of trusting a brand difficult for the customers.

​

  • Point 6 - The return policies and trust scales are placed at the footer of the web pages making them hardly visible by the users and thus defying their purpose.

​

  • Point 7 - An article by UX collective in 2015, discussed how users tend to switch between their physical card and a digital screen while filling in their card details for payment. Keeping that in mind we can see how the sequence of asking the car details here does not follow the same format as seen in physical credit or debit cards.

​

  • Point 8 - The absence of microcopy information the users about where exactly they can find their security code can confuse the users and reduce their checkout speed.

 

  • Point 9 - One of the most striking pain points of Ajio's checkout and payment process is the absence of a confirmation page. This can drastically decrease the trust of the customer on the website and their chances of returning.

New product page and changes made

Changes

  • Change 1 - Creation of visual hierarchy by size to highlight the important elements like the product name, price and subtotal.

​​

  • Change 2 - Provide users with a side-by-side summary page with the product details and the price of the product on each webpage.

​

  • Change 3 - Making sure that all the forms required for filling in the delivery and payment option can be fully visible with minimum scrolling, thus ensuring quicker and easier checkout and payment.

​

  • Change 4 - Addition information about the return policies and trust scales/badges at the bottom of the product summer, visible to the customers even without scrolling.

​

  • Change 5 - Adding a confirmation page at the end of the process and allowing users to make any final edits before proceeding.

bottom of page