Noble Wear.
About
NobleWear is a dynamic fashion e-commerce platform built to provide a seamless shopping experience, combining both front-end and back-end technologies for optimal performance. With Node.js, Express.js, Prisma, and MySQL powering the back end, NobleWear features robust server-side operations, a comprehensive database system, and secure payment gateways.
Through innovative use of Docker for containerization, Midtrans for payment processing, and JWTAuth for securing endpoints, NobleWear not only delivers an intuitive user experience but also ensures the security and scalability of the platform.
This project is part of the Final Project for Software Engineer Course at Universitas Gadjah Mada.
UI / UX Designer
May 2023
Archive
Team
Ramzy Izza W. (Designer)
Antonius Teddy (Dev)
Fariz Muhammad (Dev)
Putu Arva (Researcher)
Peter Johan (Researcher)
12
Total Web-Pages
Challenge
The main challenge in designing NobleWear was to create a smooth and engaging user experience across both mobile and desktop platforms. Users expect fast, intuitive navigation, especially in e-commerce, where seamless product browsing, easy-to-use filters, and a quick checkout process are essential.
Balancing performance with design aesthetics was key, as we needed to ensure both an attractive interface and functionality that allowed users to browse and purchase with ease, regardless of device. Additionally, ensuring consistency between mobile and desktop while addressing responsiveness and scalability posed another layer of complexity.
Responsibillity
As the UI/UX Designer, I was responsible for overseeing the entire design process, from initial research to final implementation.
My role involved creating wireframes and high-fidelity prototypes in Figma for both mobile and desktop, ensuring that the user interface was not only visually appealing but also functional and responsive.
I also conducted a small usability testing with few close relatives, gathering user feedback to iterate on the designs and make improvements. My end-to-end responsibility included creating the user journey, organizing information architecture, and ensuring the design aligned with the user’s needs.
Background of Study
This project was part of my Software Engineering coursework at Universitas Gadjah Mada, where I focused on implementing UI/UX best practices within an e-commerce environment. The aim was to demonstrate the critical role of design in improving user satisfaction and increasing conversion rates for online platforms. The project also gave me the opportunity to showcase my ability to lead the design process from start to finish, delivering a user-focused, high-performance web application.
Process
User Research & Analysis: I began by gathering insights from potential users through surveys and quick interviews to view relatives in order to understand their needs, pain points, and expectations when shopping online. I also analyzed the current e-commerce main player (Tokopedia, Shopee, Blibli, etc) to identify trends and UI/UX strategies that could improve user flow, product discovery, and checkout efficiency.
Wireframing & Prototyping: Using Figma, I created wireframes to establish the structure and layout of the platform. These wireframes were then turned into high-fidelity prototypes, focusing on easy navigation, clean design elements, and responsive behavior across devices. The prototypes allowed for testing key interactions like product browsing and adding items to the cart.
Mobile & Desktop Optimization: With a significant portion of users relying on mobile for shopping, I optimized the design for mobile use, ensuring that key actions like searching, filtering, and purchasing were simple and fast. The Next.js framework allowed us to implement these designs seamlessly across devices without sacrificing speed or performance.
Usability Testing: After developing the prototypes, I conducted usability testing to validate the design and identify any friction points in the user journey. Feedback led to improvements in button placements, navigation clarity, and overall responsiveness. This testing phase was crucial in refining the interface and ensuring an intuitive experience.
Information Architecture & Design Consistency: I restructured the information architecture to prioritize ease of use, with logical product categories, clear navigation paths, and minimal friction between browsing and checkout. The visual consistency between mobile and desktop designs ensured a cohesive user experience.
Key Takeaways
Designing for e-commerce requires a deep understanding of user behavior and expectations. Through research and iterative testing, I was able to create a user experience that catered to both mobile and desktop users, focusing on simplicity, speed, and ease of use. This project reinforced the importance of aligning visual design with functional needs, ensuring users can navigate and complete purchases effortlessly. The success of NobleWear lies in its ability to provide a visually engaging yet practical user interface that enhances both the shopping experience and business outcomes.