An online shop for sustainably sourced clothing.
Website Design and Development
Role: Sketching, Wireframing, UX/UI, Front-end Development
Created independently for a third year website design and development course, the purpose of this project was to create a fully responsive, multi-page website for a company. The company I created is a sustainably sourced clothing brand called Conscious Culture, whose vision is to create simple, modern, and unique clothing items for both men and women. Users of the website are able to purchase products, write reviews, and locate information about the company's sustainable processes.
The first step of this project was to create the company branding components. This included ideating the company's vision, goals, and expectations. The brand identity was created by producing a logo, as well as fleshing out a unique visual style through a styleguide for elements such as fonts, colours, and imagery that would be used throughout the website. For the colour palette, I chose neutrals and green to represent the sustainability sourced products. I also chose clean, round, sans-serif fonts to portray modernity.
The next step was to create possible user flows on the website. I first sketched to generate quick ideas, and then went in to create medium fidelity wireframes in illustrator. The last part of the prototyping stage was bringing the wireframes into Adobe XD where I added basic interaction to help demonstrate the user flow. Throughout the rapid prototyping process, multiple device sizes were considered at each stage.
Sketched wireframes to generate quick ideas.
Medium fidelity wireframes to show additional details.
The last stage of this project was testing the website on multiple device sizes to ensure the responsiveness was smooth. After debugging any issues from the device testing, I conducted a content audit as well. Through the content audit I received useful feedback from my peers where I was able to fix small issues such as font boldness to increase legibility and hierarchy.
Final website (mobile and desktop views).
Completing this project solo pushed me to work quickly while vastly improving my front-end web development skills. Working with the feedback provided through the website auditing process allowed me to create a successful and intuitive user experience. In the future I hope to move beyond the coding techniques taught in the course in order to create more intricate features and micro-interactions that enhance the overall user-experience of the website.