In response to the growing demand for visual appealing and user-friendly online experience, this UX study case focuses on the redesign and creation of an e-commerce website for a small company specialized in the wood industry machinery and tools. The client recognized the need to enhance their digital presence to a wider audience and simplify the online purchasing process for their customers. The purpose of this UX case study is to modernize the existing website, ensuring it not only showcases the diverse range of tools and machinery but also prioritizes intuitive navigation and clear product information.

The existing website faced several issues related to the navigation system, leading to poor user engagement. The lack of a responsive design across different devices lead to a bad user experience, this experience can impact accessibility and potentially resulting in missed sales opportunities. Another problem is the lack of a filtering system, making it challenging for users to quickly find the machines they were looking for. These issues contribute to a poor online experience for the target audience. All these issues became the focal point of the redesign and creation of the e-commerce platform, with the aim of enhancing user satisfaction, improving conversion rates and establish a more user-friendly and efficient e-commerce platform for the company.

The primary goal is to re-design the website, enhancing the overall user experience and create an intuitive interface easy to be used by any person. This project aims to optimize the navigation flow, ensuring that users can easily find information about the company’s diverse range of wood machinery products. The incorporation of a user-friendly e-commerce platform is another crucial objective, simplifying the purchasing process. Additionally, the re-design will prioritize responsive design principles to ensure accessibility across different devices, making a better experience for users whether they are browsing on desktops, tablets or mobile phones.

My User-Centered Design Process is based in four steps: Discover, Define, Ideate and Prototype and I have adjusted it for this project, the re-design and creation of an e-commerce website for Silva e Coimbra, LDA.
The initial stage involves Discovery, where I gather essential information from the client. During this phase, my focus is on comprehending the user base, understanding their motivations for using similar websites, and analyzing the competitors. Moving on to the second stage, Define, the problem is articulated using the insights gathered in the preceding phase. In the Ideation phase, I formulate and explore various solutions to the defined problem. Finally, in the Prototyping stage, I create visual representations of the potential final product.

In this project, the user research aims to identify the challenges, requirements, and expectations that users encounter when navigating websites dedicated to wood machinery and tools. The primary goal is to ensure that the design aligns with the specific needs and anticipated preferences of the target audience. Using diverse research methods, I tried to understand customer behaviors, preferences, and pain points. My approach integrated information provided by the client and a thorough analysis of competitors, enabling the creation of a persona for the project. The findings from the user research phase served to ensure that the re-design and the creation of the e-commerce website would not only be visually appealing, but also functional to the needs of its users.

In a UX case study, the persona phase can be an important component that involves the creation of detailed and fictional user profiles to represent the target audience for a product or service. This stage help to improve the design process by developing a deep understanding of the user's needs, behaviors, and goals. Making a relatable representation of the end-users, personas can guide the decisions throughout the design process, ensuring that the final product aligns with the specific needs and preferences of the target audience.

For this project, with the information gathered from the client, I was able to create a persona that meets most of the company’s customers. It helped to find the pain points and main goals for the project.

During this phase of the project, I intend to conduct a comprehensive analysis of competitors and similar-companies websites. This involves identifying best practices, areas for improvement, and problems to avoid when re-designing and creating the e-commerce website.

To facilitate the identification of positive and negative aspects, I used a color-coded system, using green for what I think being a good practice, orange for aspects with room for improvement, and red for practices to avoid during the project.

This approach allows me to not only find inspiration from competitors' websites, but also critically analyze what will contribute positively or negatively to the project.

In this stage, I reunited all available information from the preceding steps, conducting a thorough analysis and structuring it into relevant categories.

The card sorting process facilitated a clear comprehension of the project’s main objectives, identified areas for improvement, and highlighted key challenges uncovered during the research.

This visual representation helps the project by delineating essential focal points and establishing priorities for the next phases of the case study.

A User Journey Map shows a hypothetical journey of how a user interacts with a digital product. This outlines various points and experiences a user undergoes from the initial awareness of the product to the final interaction.

This journey starts when the user has the intention to search for wood machinery/ tools and ends when the user gets the confirmation of his purchase.

Using a User Journey Map in the UX Process helps to recognize the user's interactions, showing any pain points or challenges they may find along the way while buying or searching for wood tools.

A flow diagram is an important tool during the UX process, it allows to visually map out the user journey and interactions within a product. The flow diagram shows the sequence of steps a user takes to accomplish a specific task.

The information gathered during the preceding steps helped me to formulate the project flow. This visual representation helps to identify potential pain points, areas for improvement for a better user experience

For this project, the flow diagram shows the process from the moment the user visits the website and the last part is the order confirmation. During the process, the flow diagram shows different paths to do different tasks.

This step plays a crucial role in visualizing the screens and their interactions. By aligning with user flow, initiating the process of manually sketching the screens and establishing the flow, this will help the project to be more manageable.

Sketching serves as a rapid iteration method, enabling me to explore different design possibilities. I incorporate annotations within the sketches to emphasize specific aspects. Using distinct colors to highlight call-to-action buttons.

After this step, I can start designing the wireframes for what would be the final product, but at the same time allowing me to change anything if needed.

The wireframes are a crucial step, enabling the visualization of the different pages of the interface, mapping out the structure and functionality of the product we are designing.

Each wireframe defines the place of essential elements such as navigation bars, buttons, and content sections.

By creating these wireframes, we give some structure to the work done before during the user flow and sketching phases. This provides a clear understanding of the product, facilitating adjustments as necessary.

This was the last step of the project, making the previous wireframes more visually appealing. This level of prototype not only better reflects the brand essence but also facilitates through testing.

I opted for simplicity in line with the client's preference, ensuring easy accessibility for users of different levels of web browsing experience.

The prototype was designed in Figma and this is the final version.