Torob

UI/UX Design Intern
Project Overview
Torob is a search engine for online shops in Iran. When I joined Torob as a design Intern, Torob was a newly established company still operating like a startup. Therefore, I had to attend to different aspects of the UI/UX design of Torob by researching the best practices and patterns in the e-commerce domain, testing with users, finding their pain points, and redesigning the flows. I came across the Baymard Institute and its reports, which was a primary source for my research at Torob.
My Contributions
  • Improved product categorization through card-sorting.
  • Enhanced the navigation and interfaces of Torob's website and mobile application.
  • Identifying the pain points of the users.
My Role
UI/UX Designer
Jun 2016 — Sep 2016
My Responsibilities
Research, UX Design, UI Design, Categories Redesign, Wireframing, Prototyping, Tree-Testing, Users Logging & Analysis, Heuristic Evaluation
Tools & Resources
Adobe Illustrator, Invision, Google Analytics, Baymard Institute
Background

Most of the widely known e-commerce websites and services (e.g. Amazon, eBay, etc.) are not available in Iran, therefore a different e-commerce ecosystem including numerous online shops has emerged over the years. Torob, being a search enginge for e-commerce, provided a chance for people to search across different websites for a product they are looking for. Torob mainly helps users in two ways:

  • Searching across different platforms for different models/types/sizes/etc. of a searched item
  • Checking for and providing the best price for a specific searched item(s) across different online shops

After the user chooses the product they want to purchase, they are redirected to the shop's website and complete their purchase there.

I followed a process of UX research in line with the methods advised by the NN/g. This process consists of iterative phases of Discover, Explore, Test, and Listen.
In Discover, I looked into studies around search engines and e-commerce websites and the metrics that make an e-commerce website more successful than the rest. I discovered the Baymard Insitute as one of the main data sources and used their guidelines and benchmarks to create metrics for measuring the usability of the prototypes. Then I created prototypes following the research I conducted, tested it with small user groups, conducted cognitive walkthroughs, and iteratively applied the feedback of the stakeholders and users to the prototypes. Finally, when the designs were implemented and delivered, I monitored user loggings on google analytics to further analyze the user behaviour and find out about their pain points. These pain points became the topic of my research for the later iterations.
Process
This is a diagram showing the steps of the User Research Method by NN/g. In Discover, I did field studies, stakeholder interviews, hunting data sources, determining metrics. Then in Explore, I did Design Review, card sorting, walkthroughs, prototyping. In Test & Listen, I analyzed user loggings, conducted usability testings and tree testings.

NNgroup's UX Research cheet sheet iterates over phases of Discover, Explore, Test, and Listen.

The main resource located was the Baymard institute's website which provides reports, benchmarks, and metrics on how to measure and enhance the usability of e-commerce websites. Even though their analysis is mainly based on American e-commerce websites, most of the patterns found were still applicable to the Iranian e-commerce ecosystem.
Discover
Card sorting and Tree-Testing were identified by research as key activities to investigate the intuitiveness of the product categories on e-commerce websites. I used a combination of these methods in testing sessions with potential users. I asked each participant to tell me where they would expect to find a specific item in question (tree-testing), then asked them to use the website and locate the item. This activity helped to uncover the mental models of the users and their expectations of where things are on the website. Another task was to ask the users to put a set of items in different levels of heirarchy of the system (card-sorting). I used the data drived from this study to recategorize part of the Torob's categories.
Explore
Using Google Analytics, I logged the user behaviour and identified where they tend to bounce off the website. This helped to identify the pages that had the hardest experience for the users. I conducted cognitive walkrthoughs on the pages identified and suggested a redesign for such pages. Some of which can be seen here:
Test & Listen

Lo-fi mock-ups of Torob's Android application, showing the search flow in the application and the overall structure of the related pages.

There were many challenges when it came to applying the design guidelines in a language other than English. These challenges were intensified when that language was a right to left (rtl) language. One of the main challenges was the ordering of elements in the deisgn. For instance, should ordering of the elements in a bottom navigation change when the language is rtl?
On the one hand, it seems like changing the order of everything to right-to-left would be a safe option (which was what developers did 6 years ago), since the texts and the elements in a page are right aligned when the language is rtl. On the other hand, people are used to using for-egnlish-designed applications like twitter, instagram, etc. which had a specific order of the elements, e.g. normally presenting the home option on the left and the profile option on the right. What if this affects their experience of working with applications that have a bottom navigation and thus affects their mental models and expectations? What if the order of elements should be according to which hand the users use to hold their phone and what needs to be exactly under their thumb? The way people hold their phone is not changed in a different language.
Challenges

I tried to discuss the challanges that comes with designing in a different language with the communities, but the true answer definitely lies in more usability testing with the users.

Hi-fi mock-ups of the Torob's alternative navigation bars for the desktop browser view. Persian is a rtl language and so the design should change accordingly.