Back to projects
20 de out. de 2022
3 min read

Caaso Eletroniks

Website for a fictional electronics store focused on usability and user experience, including prototyping and usability testing.

Cover

🛠️ How it was developed

The project followed fundamental steps of Design Thinking, going through:

  • Market research
  • Creating personas
  • Low, medium, and high-fidelity prototyping
  • Usability testing
  • Final website development

The frontend was built with React and Typescript, using Material UI as the component library. The publication was done for free with GitHub Pages.


🚀 Chosen technologies

  • React: Popular at the time, with excellent community support.
  • Material UI: Based on Material Design, which has a strong focus on usability and modern aesthetics.
  • Typescript: Added to ensure higher quality and maintainability of the code.

📚 What I learned

  • My first deployment using GitHub Pages.
  • Practical understanding of responsiveness and accessible design.
  • Application of real usability and UX concepts, going from theory to practice.

🧠 Development experience

This was the first project where I followed the steps proposed by Design Thinking from end to end. From gathering ideas and benchmarking with sites in the same niche, to creating wireframes and developing the final product.

All coding was done in React, and we managed to deliver a visually satisfying and functional result from a UX/UI perspective. On the other hand, the code had some challenges, especially with libraries that didn’t offer full support for certain features. One example was the implementation of a form with input masking, which required alternative solutions due to the limitations of the chosen library.

Despite these difficulties, nothing seriously compromised the development. On the contrary, it was a great opportunity to learn in practice and deal with real technical limitations.

This project marked me as a developer and was fundamental to reinforce my interest in creating user-focused solutions.


🔮 Next steps

  • Create a simulated backend to transform the project into a more complete e-commerce.
  • Map alternative flows and error handling.
  • Include more usability and accessibility tests.
  • Add new features and interactivity.

This project was essential to consolidate practical knowledge in UX and modern frontend.

🚧 Comments section under construction 🚧