A3 Design - Web Catalog Case Study
Developing a Full-Stack application with EJS, CSS and Node.js to provide a greater user experience.
Marcelle Louise
●
13 min read
Brief
A3 Design is a Home Décor concept store located in Recife, Brazil that sells wallpapers, floor covering, boiserie and curtains. Because the original online sales experience on mobile was limited, there was a need to develop a new solution that could provide a better user experience and improve sales performance.
Problem Statement
At the moment, if a customer wants to buy their goods online, they can do so by texting the company on WhatsApp and wait for a reply, which can take up to 2 days. This process is exhaustive for both the customer and for the company. By introducing a new way to have the products available online, the company will have greater chances of closing deals and reducing sales time.
Project Goals
The purpose of this application is to allow users to view a catalog of the available products and securely be directed to WhatsApp, where they can receive an invoice to purchase the chosen items. By completing this project, we can expect it to improve the entire customer experience and boost sales.
''According to survey results, over 72% of the interviewed customers have hired an architect or designer to manage their projects. They might help customers choose a product or choose for them, so providing a greater user experience to this audience will be the biggest goal of this project.''
My Contributions
User Research was performed to find out relevant details about this company's audience and user needs. Wireframes and Prototypes were created to facilitate feedback before the project was implemented. After conducting user research, the findings revealed that customers were experiencing difficulties, such as communicating with the company and viewing their products from WhatsApp photos.
Personas
Since the architects are the most important connection between the company and the customers, it was essential to improve their online experience. To gather as much data as possible about them, a survey was created with Google Forms. The survey findings resulted in the persona called Andrea.
Wireframe
Once we defined the flow and which screens were needed, I proceeded with creating the wireframe to explore the experience in detail on a screen-by-screen level. The Home, Products, and Product details pages were created to present the provisional layout.
Prototype
After the user research and wireframe were complete, I proceeded with designing the final UI for desktop, tablet, and mobile. Following a user-driven design approach, it was important to provide both the wireframe and high-fidelity prototypes. The design created follows project goals and requirements, while UI elements were selected considering user research findings.
Development
Choosing the right technologies and tools certainly made a great impact on the development of this application. The front end was the first part completed, using HTML, CSS, and JavaScript. However, after starting the back end, a few changes had to be implemented so that the application could run with the Node.js server and MongoDB database connection. For example, all web pages were first developed in HTML format, but due to the server being integrated into the code, this format was changed to EJS.