Overview
Website E-commerce IT Product
Xable is an online store that sells a wide range of IT essentials, including notebooks, netbooks, ultrabooks, and their accessories.
Problem & Brief
Xable is an online store that offers a wide range of IT needs, including Notebooks, Netbooks, Ultrabooks, and various accessories. Our client wishes to build an e-commerce website with comprehensive transaction features. For design references, the client is looking at competitors like els.id, jakartanotebook, and klik indomaret, focusing on transaction models, appearance, and user-friendliness. The client envisions a website with a blue-themed modern design. Although Xable's logo is orange, the design must still be in harmony with the blue theme of the website. This challenge presents an opportunity for UI/UX Designers to find the right solution.
Research & Analysis
To create an optimal user experience on the e-commerce platform Xable, a thorough analysis of UI/UX design was conducted by reviewing competitors such as els.id, jakartanotebook.com, and klikindomaret.com. Each competitor provided valuable insights into design principles that enhance user engagement and satisfaction.
els.id employs a simple navigation system and a consistent orange color scheme that aligns with their brand identity. The simplicity of the design allows users to quickly find products and complete purchases with minimal friction. Meanwhile, jakartanotebook.com excels in providing comprehensive product filters and a user-friendly interface that caters to IT enthusiasts seeking detailed information. Effective use of white space and clear visual hierarchy ensures a clean and organized layout, making the product search process easier.
klikindomaret.com takes a different approach with its colorful and cheerful design, focusing on accessibility and usability.
From this analysis, it is clear that Xable should prioritize intuitive navigation, clear and comprehensive product filter options, and a seamless checkout process. The use of a blue color palette should be carefully paired with the orange logo to maintain brand consistency while creating a modern and appealing aesthetic. Additionally, integrating features such as product promotions, user reviews, and real-time customer service will further enhance the user experience, making Xable a competitive player in the online IT product market.
User Flow & Site Map
User flow illustrates the user's journey from the beginning to the end of the purchasing process. Every step, from adding products to the cart to completing the payment, is designed to be easy for users to follow. Additionally, this flow includes handling scenarios where users fail to log in or encounter issues during payment.
Sitemap I created was developed based on the client's brief, followed by further exploration of the existing data to determine the structure of the pages and sub-pages to ensure a tidy layout. From this, the primary, secondary, and tertiary navigation can be clearly seen.
Here is an overview of the user flow and sitemap that have been created:
Additionally, the user flow and sitemap my team and I also need to finalize the features that will be used for the Xable E-commerce website. This decision is crucial as it will impact both user experience and the development process. Below are the key points summarized from discussions with the Project Manager, Frontend Developer, Backend Developer, and myself as the UI/UX Designer. Once these features are finalized, the next step is to create the visual design.
UI Design System
Before creating the homepage design mockup, the first step is to develop a style guideline. This involves determining the colors, fonts, button types, product card variants and their sizes, as well as the grid layout to be used. The last style element I decided on was the status label, as this needs to be discussed further with the PM.
First, I'll start with colors. I chose blue as the primary color based on the client's request, and orange as the secondary color to match the logo. I plan to experiment with this color combination in the design later.
Second, for fonts, I selected three types: Work Sans for headings because it is a unique and bold sans-serif font, Roboto for body text because it is a common font that is easy to read, and Inter for button text due to its boldness and readability, which can strongly influence user actions.
Third, the button variations include primary, secondary, tertiary, and quaternary. These variations are optional and can be used for CTAs, product buttons, or during the checkout process.
UI Design
Mockup Homepage
I created two alternative design mockups as a comparison for the client, which can be seen below:
First Alternative: This design has a cleaner theme for a more comfortable viewing experience, with the main focus on the landscape promo banner, category banner, and product portrait banner. Blue accents are used as supporting elements on buttons, icons, and prices.
Second Alternative: Here, I emphasized the blue accents more. For the product category, I chose food because the client wanted to see if the design would also work for non-IT products. In this second alternative, I also added illustrations to the product banner and CTA.
Final: After being reviewed by the client, they decided to combine both alternatives based on the preferred references. For the header, the client preferred the second alternative, while for the banner, they liked the first alternative more. Additionally, elements such as the promo banner, product brand logo, service icons, and CTA section were taken from a combination of both alternatives. From the second alternative, the client only chose the product section with some minor improvements. As for the footer, I kept it the same in both alternatives, as it was already considered the best in terms of appearance and content needs.
Inner Page Design
After the homepage mockup was completed and approved by the client, the next step is to work on the internal pages of the Xable website, as outlined in the sitemap. Here, I will highlight a few key points, such as the creation of the product pages, which include the product & filter page, product category page, and finally, the product detail page.
Product filter: There are several filters, including category, price, brand, and shipping, aimed at making it easier for users to find the products they are looking for. For the shipping and brand filters, I used checkboxes so that users can select more than one option.
Category page: I used a 3-grid style, providing the main category as the title and sub-categories as the list below it, where I display three sub-category product lists. If users want to see all sub-categories, they need to click the CTA button first.
Product detail page: I created a CTA card style located in the right sidebar. As users scroll down, the CTA card will follow the screen, making it easier for users to add products to the cart or purchase products while reading the specifications. The product content has been adjusted according to the product information that needs to be displayed, as shown below:
The next step is the checkout stage, where the user has added products to the cart for purchase. However, before proceeding, the user must log in or register first. After that, the user will choose a shipping service, make the payment, and finally wait for payment confirmation. These steps have been adjusted according to the user flow that has been created, and then implemented in a design that is more dynamic, easy to understand, and visually appealing
Usability Test
Prototype
After All page website completed, I create a prototype to test and review the final design, which is then reported and presented to the client. This is then shared and presented to the client. Here’s a preview of the prototype for you:
Problem Solve
Review Problem Design
After all the designs were approved and some feedback from the client was successfully addressed, additional feedback emerged during the development phase by the Front-End (FE) team. This feedback was related to the product filters, where every time a filter was clicked (for example, when the shipping checkbox was clicked, the page would reload, and when the brand checkbox was clicked, the page would reload again). This issue could cause the page to load slowly, impacting page speed and SEO.
To address this problem, my team worked on a solution by adding submit and reset buttons below the filters. These CTAs are useful for users who want to select more than one filter; once the selections are made, users can click submit to display the desired results. This solution also helps reduce page load time to prevent slow loading.
After all issues are resolved and the development phase begins, I continue to monitor and review the progress of the Front-End (FE) team to ensure that the website aligns with the design in Figma. We also frequently discuss any feedback or issues that arise to find solutions together. As a team, we are committed to delivering the best results that meet the client's expectations and needs
