Project Details:
Duration: 2 weeks
Team: 2 Designers
My Role: Usability Testing, Competitive Analysis, Information Architecture, Style Guide, Wireframes (Homepage), Prototyping (Homepage)
Tools: Figma, Miro
What is iTokri
iTokri is an online store offering unique products that celebrates the heritage of the Indian subcontinent. The products are made by the locals artists of India living in small villages and towns using traditional techniques, skills and hand-based processes. The website sells a wide variety of handmade clothing, jewelry, accessories, decor and home related products.
Why this project?
I recently came across iTokri while searching for home decor pieces that would depict my Indian culture and heritage. While browsing the home decor collection, I spent endless frustrating hours figuring out the available products.
Three main issues I encountered were:
Overcrowded Homepage with overwhelming amount of visual information
Poor Navigation with confusing pathways making it difficult to move through the site
No Filter Option making it a struggle to find relevant or specific products from the vast product range
Approach
Steps taken in my design process
Validate the pain points by conducting usability test
Understand the existing competition by doing competitive analysis
Defining the main objectives to achieve
Desiging solutions that resolve objectives
1. Validating the pain points
Pain points were validated by doing task based usability test
To make sure that the ineffective design with content overload, poor navigation and no-ability to filter options were really a problem, 8 users were recruited to take the task based usability tests through zoom video calls and were observed while navigating the website
Test Results
Most participants struggled while completing the tasks and even the ones that completed few tasks displayed verbal frustration. We grouped the insights provided by 8 users and did affinity mapping to better organize the findings which confirmed the pains points.
*We used Miro to collaborate better for analyzing the results and work on affinity mapping.
2. Studying the existing competition
Competitive Analysis
We visited the websites of similar companies and compared the usability and the features with iTokri. Comparing iTokri’s website to its competitors made it clear that competitor’s websites were better categorized with easy navigation without overwhelming amount of content. Comparing the differences in features, confirmed that iTokri lacked the “filter feature” which the competitor websites had, making it easier for users to filter the products as per color, size etc
3. Defining the objectives
After validating the pain points and conducting competitive analysis, three main objectives to achieve in our solutions were defined.
4. Designing Solutions
Wireframes
We started by creating low-fidelity wireframes to address all three pain points.
Style Guide
Defining colours and typography (Level AAA Complaint)
Once the low-fidelity wireframes were finalized, we created the style guide to use for designing the high-fidelity mockups. Keeping web accessibility and readability in mind, we chose the colours and fonts that meets AAA WCAG levels, where the requirements are taken further with an even more strict color contrast requirement for text to make the website inclusive and accessible for all.
High-Fidelity Mockups
Solution 1: Visual Cleanup
To reduce the information overload on the homepage, we decided to space out the content and place it in a more organized and cleaner manner. We also focused on reducing the page scroll length and moved the list of Indian Handicrafts as “Crafts of India” in the menu bar so reducing the length doesn’t result in missing out on important information. By designing an carousal banner (refer prototype video) we were able to highlight multiple product collections without increasing the page length.
The breathing room on the new homepage allows colours and essence of the products to shine while not giving an overwhelming or sensory overload feel.
Solution 2: Intuitive Navigation
During the tasks, we observed that it was very difficult for users to navigate through the hamburger menu with + signs, so we decided to change how the menu looked and functioned and created a top horizontal menu which would clearly highlight sub-categories. Not only it enhances the visual appeal, but also it helps user see all the available categories in plain sight, reducing mental effort on their part.
Solution 3: Filter Option
To solve the inability to search products on the basis of certain specifications, we added the filter feature while keeping the existing sort by option. Adding the filter feature would drastically reduce user’s time to find a specific product.
Final Prototype
Key Takeaways
Through user testing, we were able to validate the pain points I came across which helped us not to just act on personal feedback. The competitive analysis helped us understand the existing competition and how their website gave a better user experience. If time permitted, we would have liked to perform A/B testing to find the usability efficacy of new designs.
Disclaimer: This was an unsolicited redesign. I’m not an employee of iTokri, nor I have been compensated in any way. This is only a project/design that I believe would improve their website.