Project Duration: 5 Weeks
Tools Used: Figma, FigJam, Slack, ViteReact, Tailwindcss
About The Project
'Shoes & Stitches' is a collaborative e-commerce project
GET START
Project's Overview
"Shoes & Stitches" is a responsive e-commerce web application developed as a group project, focusing on providing a realistic online shopping experience for clothing and shoes. It was built using React, Vite, and React Router, and emphasizes a clean design and functional shopping cart implementation.
The project followed an agile methodology with a focus on teamwork and code quality. The site is published on Netlify.
Our plan
My Role
As a UI/UX designer and frontend developers, I make sure that our designs are all funtions are well received by users.
Primarily responsible for wireframing (Lo-fi and Hi-fi) and contributing to the overall design aesthetic.
Contributed to the front-end development of the site. Specifically took ownership of the 'About Us' page.
Participated actively in code reviews, Git collaboration, and agile planning/retrospectives.
Project Goals
The project aimed to create a fully functional webshop that includes:
- 👉 Product Listing Page
- 👉 Detailed Product Pages
- 👉 Shopping Cart Functionality (add, remove, change quantities)
- 👉 Order Confirmation (fake payment flow)
- 👉 Responsive Design across desktop, tablet, and mobile devices.
- 👉 Clean and maintainable code.
- 👉 Adherence to Agile principles through GitHub Projects, regular meetings, and code reviews.
Learning Objectives:
- 👉 Apply Agile methodologies in a team setting.
- 👉 Gain proficiency in React, Vite, and React Router.
- 👉 Improve design skills through wireframing and collaborative design discussions.
- 👉 Enhance Git and GitHub collaboration skills.
Design Process
During the early stages of the "Shoes & Stitches" project, I immersed myself in the design process, sketching out both lo-fi and hi-fi wireframes to bring our vision to life.
As the team navigated technical constraints and evolving requirements, I continually refined these designs, ensuring that our clean and modern aesthetic was not only visually appealing but also feasible from a development perspective.
This iterative process allowed our ideas to evolve naturally, merging creative ambition with practical application.
- Inspiration & Ideation:
- The team decided to create a website for a fashion brand named 'Shoes & Stitches'.
- Drew inspiration from clean, simple designs of existing fashion brand websites.
- Wireframing & Mockups:
- Started with Lo-fi wireframes to establish the basic structure and layout.
- Progressed to Hi-fi wireframes, refining the design details.
- Design System:
- Established a design system with the 'Poppins' font.
- Used a primary color scheme of black and white for a clean, high-contrast look.
- Used additional colors sparingly for notifications (e.g., error and approval messages).
- Iteration:
- Initially designed the product page one way, but had to revise it to a simpler version to better align with our coding capabilities.
Development Process
My journey continued as I took ownership of the "About Us" page, a core component of our responsive e-commerce site. Working with React, I transformed our design concepts into a dynamic, interactive page, using Vite and React Router to enhance performance and streamline navigation.
This role not only sharpened my component development skills but also deepened my understanding of building user-centric features that resonate with visitors.
- Code Structure:
- Established a basic React code structure with pages and components, which was shared on GitHub.
- Tasks were divided based on individual skills. I was responsible for the 'About Us' page.
- Agile Workflow:
- Used GitHub Projects for task management and progress tracking.
- Conducted regular team meetings for updates and problem-solving.
- Implemented pull requests and code reviews to ensure code quality.
- Technology Stack:
- React: For building the user interface.
- Vite: As a build tool for fast development.
- react-router-dom: For handling routing and navigation.
- Git/GitHub: For version control and collaboration.
- Netlify: For deploying and hosting the application.
Code examples
Challenges & Solutions
Collaboration was at the heart of our project. I actively engaged in code reviews and Git collaboration, where every line of code was scrutinized and improved through collective insight.
Participating in agile meetings, from daily stand-ups to sprint retrospectives, I learned the art of balancing individual contributions with the broader team goals. These interactions were instrumental in fostering a culture of open communication and continuous improvement.
Challenges
Design Complexity vs. Coding Capabilities:
- We had to adjust the design due to coding complexity. For example, we initially designed the product page one way (Product Page 1) but had to revise it to a simpler version (Product Page 2) to better align with our coding capabilities.
Learning Git:
- As a group, we supported each other, especially with using Git. I learned a lot about working with Git and Git commands thanks to the guidance of my team members.
Solutions
Solution 1:
- Through iterative design and open communication, we simplified the design while maintaining the core functionality and aesthetic.
Solution 2:
- Leveraged team expertise to improve Git skills and effectively collaborate on the project.
Outcomes & Results
One of the most rewarding aspects of the project was learning to tackle the challenge of aligning high design standards with the realities of coding limitations.
I found creative solutions that allowed us to maintain our visual aspirations without compromising on functionality. This delicate balance was achieved through constant both the design and development to a seamless online shopping experience.
- Functional Webshop
- The team successfully developed a functional webshop with product listings, detailed product pages, a shopping cart, and an order confirmation process.
- Responsive Design
- The application is responsive and works well on mobile and desktop devices.
- Positive Feedback
- Received positive feedback on the design and purchase flow from the Orders manager.
- ✨ Nice design!
- 'It really feels like a realistic webshop! The purchase flow is very good and you even manage to get me to look at more products than I was originally interested in.'
Lessons Learned & Reflection
The agile framework we followed provided a structured yet flexible approach to managing tasks and adapting to change. This experience not only honed my skills in task management and communication but also underscored the importance of iterative development.
I emerged from the project with a richer understanding of agile practices, ready to embrace new challenges with confidence.
- Agile Benefits:
- The agile working methodology proved to be very effective for our project, promoting quick decisions and flexibility.
- Teamwork Importance:
- This project emphasized the importance of teamwork, adaptability, and continuous learning to achieve successful results.
- Skill Development:
- I especially improved my wireframing and Git skills through collaboration.
- Areas for Improvement:
- Coding Skills: However, our coding skills could have been stronger; with more advanced skills, we could have tackled a more complex design.
- Code Consistency: The Orders manager noticed mixed export methods and used both arrow functions and regular function declarations
- Acknowledge the feedback and state how I would address it in future projects, like establishing stricter coding guidelines.
Overall
"Shoes & Stitches" was more than just a collaborative project; it was a comprehensive learning journey. I deepened my expertise in React, Vite, and Git, while also gaining invaluable insights into agile development practices.
The experience has left me with a profound appreciation for the balance between creative design and technical execution, a lesson that will undoubtedly shape my future projects.