1. The main goal for this project was to focus on the information architecture (IA) of the design in order to ease navigation, define visual hierarchies and make the overall design user friendly.

2. The design goal was to create an efficient and minimalist design that includes different item categories such as women, men, kids, seasonal, gift, sale, etc., and allows users to have a quick and pleasant experience when shopping for a specific item.

‍

A main problem for this project was to design a solution to organize, categorize, and present complex and simple information in a quick and efficient way without overwhelming the user.
The process of iteration was highly present when figuring out the information architecture in order to deliver the right information to users without creating any sort of confusion.

PERSONAS

Upon identifying the problem, I began outlining user needs and business goals. It was important to keep in mind that new and casual users may want to browse different categories since they're beginning to explore the interface. However, experienced master users might already know what the interface does, which is why it was important to include features that would provoke their interest in buying recommended, featured or sale items.

‍

SCOPE & DIRECTION

I started out by writing down the main content and functions of the shopping app in order to start defining the project scope. For the main content, I knew I had to include different categories in which different subcategories were going to be contained, in order to facilitate navigation to all users. For example, my main categories were:

- Women, Men, Kids, Seasonal, Gifts, Sale

For each of these categories there were subcategories in which items were strategically placed based on thorough research, user interviews, and personal experience with online shopping. For example, the main category of "Women" also contained the following subcategories:

- Tops, Bottoms, Accessories

‍

SITE STRUCTURE

To define the site structure, I created a flowchart to visualize the hierarchy and entry points to all categories. For the "Home" screen, there was a big opportunity to include featured products as a way to incite experienced master users to explore what is currently on trending based on previous activity.

‍

WIREFRAMING

After defining the hierarchy and the categories in the shopping app, I began wireframing the screens.

One of the ways in which I decided to visualize the main categories in the shopping app was with the use of a bento box. This allows user to see the categories without receiving too much information on one screen while reducing the time it takes to make a decision and increases findability.

FINAL PROTOTYPE

I applied UI to the wireframes in Adobe XD, and then conducted a final round of user testing in order to finalize the high-fidelity prototype.

Some of the feedback that I got was focused on the item page that included further description of the item, which caused some confusion.

In order to solve this, I had to iterate with the placement and visual hierarchy of information to avoid confusion. This is why I decided to include the item image placed at the top and centered, followed by the item name and the price (both on the same level). I decided to include an arrow to expland the product details if user desires, and to avoid overcrowding the information.

For the final high-fidelity prototype, I wanted to keep it simple and aesthetic, which is why a minimalist design was essential to fulfill this goal.

MY TAKEAWAYS

As an avid online shopper, this project's challenge was very exciting to tackle. It was a fun way to explore principles of Information Architecture by simplifying complex information into simple and user friendly flows in order to improve navigation and site efficiency.

Given more time, I would have conducted more user testing and worked more on the overall branding of the design.

‍