placeholder

Conscious Culture

An online shop for sustainably sourced clothing.

Overview

Role: Sketching, Wireframing, UX/UI, Front-end Development

Created 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.

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 wireframes

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

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.

View Another Project