The Problem

With almost 200 subcategories, and limited filtering options, iqliving.com can be difficult for customers to navigate, particularly when they are unfamiliar with the products.    

The Solution

To make the website more easy to navigate by offering better navigation options, with more clear and easy to understand categories, while also bringing it close in line with the friendly, local feeling of the store itself. 

Research Insights

My research consisted of on-the-street and phone interviews, as well as competitve and contextual analysis for iQLiving and its competitors, such as Williams-Sonoma and Kitchen Stuff Plus.

User Research Insights: 

- iQLiving has a wide, but well-curated, selection of  items

- Prices are competitive with those of similar stores 

- Staff are friendly and knowledgeable

- Customers like to support local

-Prefer the tactile experience of buying in person

Competitive and Contextual Analysis: 

- No filtering available for search results, unlike competitors

- Too many categories and subcategories to search through

-Items don't always fall into obvious categories (i.e. pantry items are categorized under "Office")

Through my research, I was able to identify two main user groups I was building for. The first was cooking enthusiasts; Home cooks, budding chefs and foodies looking for the best quality items at a great price. The second was gift-buyers; customers who might not neccessarily have the knowledge about what kitchen or home items would be best for the person they were buying for.

Further Research, User-Flows and Sitemap

As mentioned above, iQLiving has over 200 subcategories that are very difficult to navigate for someone who might not know what they're looking for. To try and get an idea of what categories and subcategories customers might commonly identify, I set up an open card-sorting excersise with 8 users.  

I chose a subset of 30 items that seemed to be either placed in the wrong category, or could be placed in multiple categories.  Patterns in categories emerged (Knives, Appliances, Preparation, Serving, Storage/Organization, Clean-Up), following the "story" of preparing a meal.  I also observed that most of the participants ended up with one single item that didn’t seem to fit any of their categories, leading them to either reorganize their categories, or just give the item a category of its own. 

Using the card-sort results, I created a sitemap and user-flows.

This was my first interation of a user flow for product discovery, based on the current website. 

And this was the second iteration, adding filtering to search results and category/subcategory pages. 

Low-Fidelity Wireframes

Using my sitemap and user-flows, I got to work on creating low-fidelity wireframes for the main page, category and sub-category pages, product information page, cart preview and checkout pages.

In my first iteration, I narrowed the links in the navigation down to 7, and compressed some of the subcategories before going into my initial hi-fi's and prototyping for quick usability testing.   

After my initial usability testing, I discovered that most users navigated immediately to the search bar to look for a particular item. They also commented that the amount of categories and subcategories, as well as the amount of shipping options, was still difficult to read through. 

I revised my wireframes to prioritze the search bar, condensed the subcategories further in the navigation menu, and added a filtering system to the subcategory page. 

High-Fidelity Mockups & Usability Testing

When I was happy with my wireframes, I started working on the apperance of the site. Currently, the website has a simple black and white theme. I didn't feel it captured the down-to-earth, local feeling of the store, so I changed the colour to match the greyish-blue facade of the store, as well as using their wordmark, which also doesn't feature in the current website. 

I brought my screens into InVision, and created a clickable prototype to perform usability testing. 

Final Screens

After user testing and a few more iterations to my designs, these are what I arrived on for my final screens. 

Final Thoughts

This was my first major project at Bitmaker GA, and it represents my starting point as a UX/UI Designer. In the 2 weeks that I had to complete the project, I went from knowing almost nothing about the design process to being able to build a design from research to clickable prototype. I know that I will carry what I learned from this project with me for the rest of my career. Were I to go back and revisit this project, I would explore bringing even more of the friendly, local feeling of the store that it's customers love to the website. Additions may include video on item description pages featuring the store staff explaining different product's benefits, and allowing to use the store's points system on the website, rather than just in store.