Arihant Polymer Extrusions
Duration
August 2023 to November 2023
Problem
Users have trouble while navigating through the website instead of focusing on the products that they are considering to buy.
Goal
Users of the website must be able to easily navigate through the website and view products without any room for error.
Arihant Polymer Extrusions is a industry leading company engaged in development and manufacturing of various uPVC extruded products like customized profiles, radomes, winding cores, pipes, conduits and the parent company of Fenova Window & Door Systems. The existing website markets their products.
This redesign will help customers to easily navigate through the products and have a seamless experience.
My Roles
Wireframes
I drafted wireframes for the Landing page, Our Products page and Specific Product pages. I chose these pages as they had the most number of issues (identified during usability testing).
These wireframes went through a few rounds of design iterations during the User Interface phase of the project.
High Fidelity Prototype
I moved beyond the wireframes by replacing placeholder elements with realistic imagery, and refined visual design. I carefully considered typography, color schemes, and micro-interactions to simulate a seamless, near-final product experience. I also incorporated user feedback and usability testing into the iterations to ensure the prototypes not only looked great but also functioned intuitively, providing a preview of the final user experience.
Existing Website
The screen recording of the existing website shows the pain points of the users. Some of which are listed here after:
1. Participant could not find a search bar to find product
2. Participant could not differentiate between text and CTA buttons
3. Participant did not realize drop down text leads to more information
4. Participant had to click specifically on “More Details” to go to the product page (The title and image of each product on the existing “Our Products” page are clickable but redirect to the same page)
5. Participant could not go back to the previous product page within 1-2 clicks.
Heuristic Evaluation
I used Jakob Nielsen's 10 principles of Heuristic Evaluation to evaluate the Arihant website, identifying both positive aspects and areas for improvement. Following are some of the Key Findings:
1. Navigation
Users might get confused due to the lack of hover interactions for the current page in the navigation bar.
2. Search
The website lacks a search bar, making it difficult to find specific information.
3. Products Page
Users need to click through multiple pages to compare products, and there are no quick links for this.
4. Error Handling
Confusing error messages appear when trying to access unavailable products.
5. Accessibility
The website lacks features for experienced users, accessibility options for visually impaired users, and customization options.
6. Contact Page
Clicking on email addresses takes users directly to their email app, which can be disruptive and lacks user confirmation.
The website scored well on some principles like Match between system and the real world (Heuristic #2) and Consistency and standards (#4) but had critical issues with User control and freedom (#3), Error prevention (#5), Help users recognize, diagnose, and recover from errors (#5), and Help and documentation (#10).
The severity of issues was rated using Jeff Sauro's scale; Minor, Moderate, and Critical.
Some positive aspects were also noted, like the use of familiar design elements and easy-to-understand language.
I came up with recommendations based on the evaluation. Following are some of the recommendations for the redesign:
Recommendation 1
Implement clear navigation highlighting and user confirmation for email links.
Recommendation 2
Add quick links for product comparisons and consider accessibility features.
Recommendation 3
Improve error messages and provide alternative ways to access unavailable products.
Recommendation 4
Implement a search bar for easier navigation.
User Research Methods
I drafted a Survey Form to get a review of the user experience of the existing website with the help of Google Forms.
I received 11 responses and derived the user needs from this data. To view the form and analysis, click on "View Survey Form" and "View User Research Analysis".
I came up with 3 typologies of users; Potential Customer, Existing Customer and Internet Surfer for my Persona creation.
Usability Testing
I formulated a document which consists of a Test Plan, Consent Form, Pre-Test Questionnaire, Script, Scenarios and Tasks, Post-Test Questionnaire and an Observation Sheet. To view the document, please click on "View Write Up".
With the information that I collected from the tests, the following is the highlighted data about the 5 participants that underwent the tests.
60% participants
Experienced difficulty of the Products page
100% participants
Faced an issue with navigation
100% participants
Found product specifications within 12 sec
100% participants
Found website informative
According to the data, I based each task performance under 3 categories; Blocker Issue, Major Issue and Minor issue. The pages that consisted of either of the 3 issue types were identified to be Landing page, Our Products page and Specific Product pages. Listed below are some of the Issues of each page.
1. Landing Page
Major Issue
Participant could not find a search bar to find product
Major Issue
Participant could not differentiate between text and CTA buttons
Minor Issue
Participant did not realize drop down text leads to more information
Solution
Include a search CTA on the navigation bar and on all pages
Solution
Resize the CTA buttons to provide differentiation. Also provide a color contrast
Solution
Convert the data formulation from a drop down list to a carousel for better visibility (Look at “Advantage Arihant” for reference)
2. Our Products Page
Blocker Issue
Participant had to click specifically on “More Details” to go to the product page (The title and image of each product on the existing “Our Products” page are clickable but redirect to the same page)
Solution
Make the CTA button as the only clickable button along with better layouting
3. Specific Product Page
Blocker Issue
Participant could not go back to the previous product page within 1-2 clicks.
Solution
Make a section to view the other products which is just one click away, rather than having to go back to the “Our Products” page to find the other products.