Project Overview:

In this User Experience project, I demonstrate work pertaining to information architecture and content strategy. I was tasked with redesigning a website for a popular NYC Halloween store, New York Costumes. I was also assigned a persona for which to design for. The main purpose of this project was to apply various UX methods to allow users to navigate the e-commerce site with ease and enjoyment. 


Organizing Content:

Card Sorting:

To understand how users categorized content, I used a deck of 100 cards with each card representing a unique item you might find at a Halloween store. I conducted an open card sort with five potential users, and I asked them open-ended questions to better determine their organization methods. After receiving clarity around main navigation categories, I conducted closed card sorts with two more potential users to test if my determined categories were intuitive with users. Please forgive me, reader, for the poor quality and lack of quantity of photo documentation within this process. 

 

Site Map:

After three card sorts, I created a first draft of a site map on Omnigraffle. To test my initial categories, I elicited feedback from peers. I received positive feedback on how the children's section was categorized by age groups (a parent in this informal review found that convenient). Some suggested that I figure out a way to separate accessories with adult costumes, because it might make sense for Halloween accessories to be a main category on its own. 

 

After digesting the feedback on the first draft of my site map, I continued to gather information from users through card sorting. This final draft shows a separation between "Adult Costumes" and "Accessories", which was also found to be a more intuitive grouping as found through closed card sorts. Also, you'll notice that instead of "Male" and "Female" subcategories, the terms "Masculine" and "Feminine" are used instead. Users found these terms to be more inviting and welcoming to them.

 

 


Wireframes:

Desktop:

Thankful that I sought and received feedback throughout the entire process, I was able to create detailed wireframes in a relatively short period of time. The thinking around content organization and preferred feedback had already been done in the earlier design phases. Now, I just had to put my Sketch skills to practice, and I was able to churn out a variety of page templates. Below represents a user's journey from the Landing Page to the Checkout Page.

Landing Page

Category Page

 

Adult costumes with filtered results

Children's costumes with filtered results

 

Product Detail page

Checkout Page

 

Mobile:

Although the emphasis of the project was for a desktop redesign, I also played around with crafting wireframes for mobile. I chose to emphasis discoverability by making the search and filter features prominent. I also used a list format (as opposed to grid format) to prioritize categories that users desired the most.