Tubio Constanza
UX Designer
Applied UX methodology
We started with the idea of developing an e-commerce site specializing in the sale of art supplies for creating miniatures. In collaboration with the client, we outlined a rough set of screens based on a list of essential functionalities. 🎨🛍️
As a psychology student, UX designer, and visual artist, this project represents a direct link to my interests. The sale and promotion of this type of art served as a source of inspiration. 🤓✨
Proceso de diseño
1
Conception and Research
In this initial stage, the project idea is generated and thorough research is conducted. Objectives are identified, the competition is studied, and essential functionalities are defined. The research may include market and trend analysis, as well as understanding user needs and behaviors.
2
Ideation and Conceptualization
Ideas are translated into visual and structural concepts. Sketches, mind maps, and wireframes are created to define the information architecture and user interface. The goal is to establish a solid foundation for the final design, considering usability, user experience, and visual consistency.
3
Iteration and Testing
This phase involves continuous improvement based on feedback obtained through testing and analysis. Usability tests are conducted, and specific challenges and problems are identified and addressed. Iterations may include adjustments to the design, functionality, and user experience to achieve an optimized and effective final product.
Research and Discovery
Competitive Analysis:
In the initial phase, we carried out a thorough analysis of Mercadolibre.com.ar with the following objectives:
-
Map the essential functionalities for an eCommerce site.
-
Establish a design structure (layout).
-
Define key sections.
-
Landing page / Home with product display for registered and unregistered users.
-
Modal for registration/account creation.
-
Banner/Carousel of news or offers, upcoming products.
-
Product gallery, categories, and a search bar with Advanced Search filters.
-
Footer with menu, location, social media links, and logo.
-
Specific pages such as the product page with details, images, availability, low stock indicator, options like "Add to Cart" and "Mark as Favorite", price, and a Pre-Order button.
-
Notifications for products that are back in stock.
-
Order tracking with statuses such as Purchased, in transit, in customs, and delivered.
-
Frequently Asked Questions and Messaging & Help section.
-
Checkout page (Payment Process) with summary and Order Confirmation modal.
-
Order History page, User Profile, and Policies (Terms and Conditions, Privacy Policy).
-
Contact Page.
Ideation and Conceptualization
I created sketches and mind maps to define the sections of the eCommerce site, from the homepage to specific details.
Sketches and Mind Map (Hand-drawn and with Whimsical)
Wireframes in Figma (High Fidelity)
I used the Material Design component library downloaded in Figma UI KIT.
The result was detailed wireframes for the MVP, including:
-
HomePage.
-
Cart.
-
Shipping.
-
Payments.
-
Summary.
-
Account.
-
Orders.
-
Purchased Product.
-
Order tracking.
-
Product search.
-
Product details.
-
Favorites and empty Favorites list.
-
Error 404.
-
Frequently asked questions.
-
Notifications.
-
Registration modal.
-
Login modal.
Challenges and Solutionssolutions🚀
During this phase, some challenges arose. Some components were not present in the Material Design UI Kit for web applications, etc. Most Figma components were designed for use on mobile devices. The solution was to create them and integrate them into the design system.
🆓 You can access these components for free at the following link: https://material.io/blog/material-3-figma-design-kit)
Cards in Material Design UI KIT
Final result
Result
User Testing (Maze):
After completing the prototype, I defined a list of tasks for usability testing in the Maze tool. The tasks ranged from login to the return process. The sample consisted of 6 people for the first and second tests.
Results and Feedback:
Tasks completed by expected path in primit was a test.
66.7%
The average success rate for usability tasks was 66.7%. Problems were identified on screens related to the purchase process, especially on the "My Cart" screen. There was a lack of consistency between the buttons and confusion on the final screen of the purchase process due to the use of card formatting for information that should be informational only and not interactive.
Tasks completed by expected path second test.
83.3%
The iterations included adjustments to the "My Cart" screen, optimizing space, adding a switch/toggle for the coupon field, and improving cart visibility. These improvements led to an 83.3% success rate in subsequent tests.
The average success rate for tasks in usability testing was 66.7% for the first group. That is, the percentage of tasks completed via the expected path. 📊 This group, made up of six people up to 35 years old, are proficient in technology and work in or are related to it. I conducted an initial usability test with tasks such as: register, log in, search for a product, and purchase a product, among others. Most results were 80% or higher, except for the purchase process, which was 66.7%. The task stated: "Purchase products from the cart. Go to the cart and purchase the products. You must go through the entire purchase process."
Iteration🔄
I conducted another usability test after modifying the elements of the My Cart screen.
This time the focus was on identifying patterns of problems that users were having in the purchase process. I ran the usability test of only that process in Maze. I found that some users had trouble finding the cart. Therefore, I added a badge to the My Cart icon 🛒🏷️
Section: My cart (First test)
Section: My cart (Second test)
