Jelly / UX-UI / Web design
Process of creating the website for the moment's trendiest bag, Jelly. This project was designed in the UX - UI subject and subsequently coded in the Interactivity subject.
Jelly / UX-UI / Web design
BRIEFING
PROJECT DESCRIPTION
The objective of this practice is to design and develop an attractive and functional website for the promotion of a product. The page must be designed to capture the user's attention, convey relevant information about the product, and motivate the purchase action. The site must have a sales landing page for the product, a detail page, and a contact page at a minimum.
PRODUCT DESCRIPTION
Jelly is a luxury handbag that captures the essence of exclusivity, innovation, and contemporary functionality. Inspired by the ethereal beauty of jellyfish, this accessory combines elegance with modernity, offering much more than just a simple bag.
Its design is inspired by the shapes and transparency of jellyfish, reflecting their elegance and sophistication in every detail. In addition to its impeccable design, Jelly offers exceptional performance. It incorporates a portable battery inside, ensuring you never run out of power for your electronic devices while on the go.
Safety is a priority. Therefore, Jelly features a discreetly embedded GPS, allowing you to track the location of your bag in real-time, providing peace of mind and security at all times.
It is aimed at individuals who value exclusivity, sophistication, and functionality in their accessories. It is ideal for those who seek the perfect balance between style and practicality in their daily lives.
OBJECTIVES TO ACHIEVE WITH THE SITE
The main objective of the website is to incentivize the purchase action of the product through a user experience (UX) and user interface (UI) that are intuitive, attractive, and functional. To achieve this, we will focus on the following specific objectives:
Facilitate User Navigation: Ensure smooth and frictionless navigation, allowing users to quickly find what they are looking for and be naturally guided towards the purchase action.
Attractive and Functional Design: Create an attractive visual aesthetic that reflects the brand's identity and highlights the products, while optimizing the layout of elements to facilitate understanding of the information and emphasize calls to action.
Responsive Optimization: Ensure a consistent and high-quality experience across all devices and screen sizes, optimally adapting the interface to each context to guarantee accessibility and usability on any device.
Relevant and Persuasive Content: Carefully select content to highlight the product's benefits, inspire user confidence, and stimulate their desire to buy. The goal is to present clear and compelling information that facilitates decision-making and creates a rewarding user experience.
MATERIAL COLLECTION
LOGO
ICONOS
TYPOGRAPHY
COLOR PALETTE
IMAGES
REFERENCE ANALYSIS
During the research phase, I conducted a thorough analysis of a wide range of websites, from those that I personally found attractive to those with notable structures and design elements, including the websites of potential competitors. This process involved a detailed review of each site, where I carefully observed the design, structure, functionality, and responsiveness. This approach allowed me to identify elements and features that I considered successful and wanted to incorporate as references in my project, as well as aspects that presented deficiencies and that I preferred to avoid on Jelly's website.
WIREFRAMES
The creation of wireframes through Figma marked the starting point of the design process for my website. These schematic representations provided me with a structured and detailed vision of the content distribution, navigation, and functionality of the site before moving on to more complex design stages.
Directly from Figma, I was able to sketch out the layout of the elements and most of the site's pages clearly, greatly facilitating work in later stages of the project.
The wireframes offered me a solid visual guide upon which to build and refine the user experience, allowing us to anticipate user interaction and efficiently validate design concepts.
Link to the wireframes of the Jelly website
DESIGN
The design phase was characterized by being a prolonged and constantly evolving process, aiming to strike a balance between an attractive design that highlights the product at all times and an intuitive interface accessible to all users.
Firstly, I focused on the most impactful pages of the website, those that motivate the user to make a purchase, such as the landing page and the detailed pages of the design, GPS, and portable battery. For the desktop version, I opted for a five-column structure, where text occupies only two of these columns, continuously alternating between images and text. I paid special attention to the visual aspect throughout; on the landing page, images were complemented with claims and subclaims, as well as call-to-action buttons or the option to explore more about specific aspects of the product by clicking. On pages providing detailed information about specific features, the focus remained on images, but they were accompanied by more informative texts aimed at users interested in getting more details about the product. In the mobile version, I opted for just one column in which I continuously alternate between images and texts.
Secondly, we highlight the product detail page, which offers a complete experience for the user. On one hand, it presents a carousel of product images that allows viewing it from different perspectives, while on the other hand, it provides dropdowns with all the necessary information to facilitate the purchase. This includes exhaustive product details, available payment methods, and shipping and return policies. Additionally, the user is offered the option to add the product to the cart through a button and the ability to select different colors of the bag to meet their preferences. This page was designed with the aim of providing the user with an informative and functional experience that facilitates decision-making.
Thirdly, we have the shopping cart page and the necessary forms to complete the transaction. The cart provides a comprehensive view of the relevant information to process the order, including the quantity of products, the selected color, and the price, complemented with a product image for greater visual clarity. On the other hand, the form pages allow the user to complete contact, shipping, and payment details intuitively, also offering a concise summary of the order in a reduced size or in a dropdown. These pages are designed with the aim of simplifying the purchasing process, providing the user with a smooth and secure experience from product selection to order completion, all pages are accompanied by buttons that allow the user to continue advancing with the purchase process.
Finally, we have all the informative pages intended for the user, such as the privacy policy, cookie handling, payment methods, among others. These pages are characterized by a simple but concise design, aiming to offer the customer a clear and reliable informative experience when interacting with Jelly. The simplicity of the design allows the information to be easily accessible and understood by users, thus fostering transparency and trust in our brand.
PROTOTYPE
In the final stage, prototyping, our goal was to provide interactivity to our website. This step allowed us to accurately understand the navigation of the pages and the functionality of each element, such as buttons and dropdowns.
During this phase, I also conducted user testing with external individuals to assess how they interacted with the website. These tests provided me with valuable insights into user behavior, allowing me to identify areas for improvement and make necessary adjustments to optimize the user experience. Thanks to this process, I was able to ensure that my website offered intuitive navigation and a satisfying experience for our users.
CONCLUSION
The development of web pages has represented a new and enriching experience in my academic journey. It has been an exciting process in which I have acquired significant knowledge in a relatively short period of time.
Throughout the entire process, I have experienced constant evolution and learning. One of the most prominent challenges has been finding the balance between my role as a graphic designer and the need to prioritize user experience in interface design.
This experience has further motivated me to continue advancing and deepening my knowledge in web development. I look forward to further exploring this fascinating field and continuing to grow professionally in this dynamic and promising area.
Comments (0)
This project doesn't have any comments yet.