placeholder

Conscious Culture

An online shop for sustainably sourced clothing.

Website Design and Development

Overview

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.

Brand Identity

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.

Rapid Prototyping

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.

sketches

Sketched wireframes to generate quick ideas.

wireframes

Medium fidelity wireframes to show additional details.

Building The Pages

The major component of the project was building out the responsive website. Working off my wireframes, I started by building simple page templates using HTML and CSS, iterating and improving my design as I worked. At this stage I used placeholders and sample content before adding in the real images and text. Adding in the Javascript was the final step, which was used to create collapsable dropdown and hamburger menus.

Device Testing & Auditing

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.

placeholder placeholder

Final website (mobile and desktop views).

Reflection

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.

View Another Project