About this project
Finetux is looking to overhaul the UX for its current e-commerce platform. The redesigning exercise aims to create an attractive, optimized, and user-friendly website that visually educates customers about products and services and entices them to buy.
The 6D Design Process
The Agile UX design process consists of 6 building blocks (or stages), namely: Discover, Define, Design, Develop, Deploy, and Drive.
We employ these in our design cycle to ensure an intuitive and pleasurable experience for users — this helps us right from understanding the context to conducting accessibility and usability tests.
Competitor Analysis
We compared the Finetux website with that of Buy4lesstuxedo, Cheaptux, Altonlane, and Dobell in terms of homepage quality, navigation, site organization, content quality, overall performance, and general usability, etc. Our findings helped us evaluate the pluses and minuses of the website and formulate a strategy for the way ahead. Here is a list of what needs to improve in the current website inferred from the competitor analysis conducted.
Summary
The overall appeal of the homepage can be improved by proper content positioning and highlighting top-selling items.
Product category in filters lacks consistency disrupting the navigation structure to some extent.
Links are not easily distinguishable thus, creating confusion.
Readability is compromised due to inconsistent font size, style, line spacing, and alignment.
Overall UI of the website lacks aesthetic appeal.
Text hierarchy needs to be more systematic throughout.
Primary User Research - Survey
We wanted to understand user behaviours, opinions, needs, their attitude in general towards coats, tuxedos, etc through Shopping websites. We sent out a survey across different communities and summarized the takeaways.
Summary
43% of users buy Tuxedo Offline, 33% of users don’t buy & 23% of users buy Tuxedo Online.
47% of the shopping users who buy Tuxedo are between 25 to 35 years of age.
40% of the users search for or buy tuxedos for Wedding Occasion.
63% of users find the experience of buying a tuxedo online was not applicable for them & 10% of users find the experience very good.
37% of users look for a wide variety of tuxedos, especially when shopping online.
23% of users find a lot of difficulty in size issues when buying a Tuxedo
Behaviour Analysis - Usage & Demography
It’s important to measure how users are interacting with the website, what keywords do they look for on the site, and how they perform and the time taken to perform the task. We analysed multiple Google Analytics reports, which were showcasing the overall website data for FineTuxedos and provided holistic insights about its prevailing audience.
Summary
46% users use a desktop, 48% users use mobile & 6% users use tablets to access finetuxedos site as per the user's contribution.
Google Chrome’s the most popular browser and Apple Safari’s the runner-up.
28.75% of the shopping users for FineTuxedo are between 25 to 34 years of age.
The first interaction of users is ‘collection/types’ on the website.
44.98% - 48.10% users search for Men’s Apparel/Accessories/Formal Wear/Suits & Business Attire on clothing website.
Total 40.2% males & 59.8% females browse to the FineTuxedo website.
White Pique Backless Vest - White Backless Vest for Tails is the one to make the Highest product revenue.
Cummerbund Extender - Black is one of the most selling product on the website.
79.3% of the users reach the website via Organic Search and then comes the Direct Search, Referral, Social & others.
Categories & Sub-Categories Identification - Taxonomy
We did a systematic taxonomy identification to properly classify and arrange the products in categories and their subcategories. This helps the user get a clear idea of the product choices they have and lets them select from a wide range of options.
Heuristics Analysis
The purpose of doing this analysis was to identify usability issues with the existing UI of Finetuxedos.com. This was an independent evaluation where the user interface walkthrough helped us find all the grey areas that needed work. Below is the summary of all the identified issues that allowed us to enhance the overall usability and user experience of the website.
Summary
No indication of active links. The user has no sense of their current status or whereabouts on the site.
No active indicator is shown upon making selections in the filter section.
Improper user control and freedom. The ‘product remove’ icon does not remove products from the cart upon a single click.
Visual elements are not consistent; there are fourteen different button styles used.
Error prevention mechanism is flawed. Users are sent to the next page without filling in the required sign-up details.
There are no asterisks or indicators used to emphasize the required fields.
Defective Search option; the user lands on the search page by just clicking on the search icon, without entering anything in the text box.
Multiple pages having clickable links leading to the same page confuses the user.
Input fields do not restrict the user from entering inaccurate information leading to errors.
User Personas & Target Audience Definition
Based on our user research and surveys, we were able to define four distinct types of user personas. People falling under the defined personas will serve as the target audience for the website.
Information Architecture
We think building a well-structured information architecture is crucial to a user-friendly design. We redesigned the existing information architecture of the website into a new one with better information organization and effortless navigation flows. This ensures that users are only focusing on their tasks and not on finding their way around the website.
Tree Testing
We conducted a tree test to evaluate the ease of finding content on the website by asking participants to do certain tasks. 65% of the total users completed the tasks successfully with ease and 57% by taking the intended path.
User Stories
User Journey
We like to better understand a user by visually representing their journey across the solution in different scenarios like making a purchase, registering themselves, adding a product to the wishlist, etc. User journeys help us understand user behavior, mental states, and an overall relationship with the product during their interactions.
User Testing Phase 2
In phase two of user testing for both web and mobile, we wanted to closely examine user response to the prototypes and extract useful insights. We laid out four tasks for users to perform on the website and the mobile app. We used Loop11 for this exercise and the tasks ranged from searching for a product and adding it to the cart to checking the order status. The result of this exercise helped us identify and focus on the areas of improvement so that we can make the final product perfect.
We were able to garner important information on how convenient each task was for the users. The user experiences and feedback were different for the web and mobile in terms of ease of use. You can go through the text cards below to learn about the key areas that needed change.
Brand color
Hi-Fi Designs
After running two extensive user testings, we were able to create two high-fidelity designs one each for web and mobile. These designs were realistic, detailed, and interactive.
Invision Prototyping
