Over a seven week period, I tasked myself with creating a website prototype in hopes of 1. bettering my UX (User Experience) skills, and 2. creating content that the internet needs to see. In this case, this content came in the form of sustainable fashion, a sector of the “lifestyle” world that desperately needs more mainstream attention.
Below is a summarized account of my process along with links to any corresponding blogs that I wrote along the way.
The Sustainable FashHub Project Proposal
Corresponding blog: Project Proposals – Will you marry my website?
My venture started with a project proposal, which ended up being as helpful to me as it will be for potential stakeholders of the website. Writing out a problem statement, solution, and a list of artifacts gave me a solid foundation for the development of the Sustainable FashHub. The write-up clarifies high-level questions about the website like, “Is there a need for the Sustainable FashHub?” and “What will the creation process of the Sustainable FashHub be?”
An excerpt of my proposal can be seen below. Click the image to see the full version.
User Research
Corresponding blog: But First, User Research
Moving on, I entered the user research portion of my website creation. This was a crucial part of my process since it really helped to solidify what my potential users wanted to see on the Sustainable FashHub. After creating a short survey, I took my questions to family, friends, and social media for responses. From my response I was able to nail down a target audience as well as target content.
Furthermore, I took my findings and translated the into a persona, empathy map, and journey map. All pictured and linked below.
Information Architecture
Corresponding blog: Turning Research Into Architecture
Knowing what my users wanted to read helped me to move into information architecture easily. I created a site map which highlighted the action items they were interested in such as where they can shop for sustainable clothing and what they can do to upcycle their current clothing.
Website Wireframes
Corresponding blog: Wireframing the FashHub
Once the basis of what the content for the Sustainable FashHub would be, I was able to move on to wireframes. This allowed me to focus on the functionality of each page. What should each page offer to the user? For the home page, I wanted to make sure audiences were able to access an array of content. For this reason, the page highlights content from all different sectors of the website. I followed the same motto for each wireframes page.
My full set of wireframes can be seen by clicking the image below.
Mood Board
Corresponding blog: Wireframing the FashHub
As I began to think forward for my website, I decided to put together a mood board to reference for my future medium and high-res prototypes. I used Pinterest as my source to collect a variety of images that portrayed colors, textures, and fonts that I wanted to see incorporated into the Sustainable FashHub.
Medium Resolution Prototype With User Testing
Corresponding blog: Nearing the Finish Line – Prototyping and Testing
After a few weeks of prep, it was time for me to move my project into InVision. But first, I returned to PhotoShop to upgrade my wireframes a bit. I referred to my mood board to update the branding of my files.
Once that process was complete I uploaded to InVision and brought some of the Sustainable FashHub’s functionality to life. I completed the process of these medium-res prototypes by doing a couple rounds of user research. The results came in the form of small design changes along with an architectural update, eliminating my “Fast Facts” nav link and moving it’s contents under “The Cause.”
By clicking the image below you will be brought to my full medium-res prototype.
High Resolution Prototype
Corresponding blog:
Having gotten some good feedback after completing user testing, I had a good place to start for my high-resolution prototype. It was back to PhotoShop to update those changes, but also to add all of my final touches. These touches included a handful of blog images and inputing copy for blog title, the About page, etc. Then it was back to InVision to add back in all of my functionality.
By clicking the image below you will be brought to my full high-res prototype.
Samantha Mantiglia 