MoPOP - Information Architecture Study
UX Designer on Team
About P{roject
MoPOP (Museum of Pop Culture) is a Seattle based museum. They have a gift shop in the front where they offer an assortment of pop culture items such as apparel, toys, vinyl, etc. Their online shop has most of the same items, including a few not seen in the shop. I was tasked with redesigning the shop.MoPOP.com for a certain persona, especially focusing on the site navigation (information architecture) and UI Design. My deliverables would be an updated IA and a redesign of the IxD in form of a clickable prototype. 2 Week Concept Project
How I accomplished my tasks
These processes
Using these tools
Project overview
PROBLEM STATEMENT & HYPOTHESIS
The current shop.mopop.com website has too many categories, leading to confusing site navigation, and has too many filter options, making finding the correct item difficult. I believe that by better sorting categories and removing unnecessary steps for the planful buyer we will achieve a less complex and easier site to navigate.
Research Methods
Persona
The persona I was tasked with redesigning for was a planful buyer persona. A planful buyer has a set of characteristics
Competitive Research
Competitive Research was a main point of research. Looking at what was successful for similar businesses was a great way to figure out what features would be useful in the redesign. I looked at 4 different online stores. The Space Needle Gift Shop and Chihuly Gift Shop were chosen for proximity similarity, SubPop Shop and Hot Topic were chosen for similar items sold. I made a list of features employed by all the sites, and ranked how well these features were implemented on the sites.
Page Blocking
To start, I blocked out some current pages of the website. Along with MoPOPs, I also blocked out Hot Topic’s main page. Through competitive analysis, Hot Topic had the most features that made for a successful experience. From this, I had had a good idea of how I wanted to start laying out pages.
Information Architecture
IA Goals
In order to figure out what screens would be needed, I started our User Flow. My first iteration of the user flow was having a teacher make a wishlist and ends with having the wishlist fulfilled. That basically stayed the same, although our definition of “wishlist” fulfilled went from a 1 item to 1 item donation system to having a funding goal based off of a wishlist idea (this will be expanded on later). Also, the steps in between greatly changed.
Site Map and Navigation
I started by doing a site map of the current website. This gave me a good look at all subcategories they currently had, as well as what they are labeling some of their products as. This was the first step I took in reorganizing and making clearer categories. Some of the main problems with the current website were too many categories, confusing subcategories, and having a mix of category drop down menus with subcategories, while having categories with no subcategories.
Card Sorting
Offline and OnlineI listed out all the categories and subcategories onto post-its and did an open card sort to give me a better idea of how to group the categories that would be less confusing to the user. I tested four testers in an open card sort. From there, I moved my results to Trello to try a closed card sort. I had 4 testers do my closed card sort. From these tests I made my decisions of how to update their current sitemap. One of the biggest changes was getting the main top categories down to four from eight.
Updated Navigation
Using the user flow as a guideline, I started to sketch out screens that we would need for a user to complete their task. This was done on whiteboard so I could quickly get my ideas out, and change easily. It also allowed for my team members to add their insights, such as navigation schema. As a team, we also did a design studio to come with an idea for the bulletin board feature. Some of the key features I sketched out was how different elements would look in list items and how the token system would work.
© Nick Brosas Design 2025
I don't really know what to put in a footer for a portfolio
MoPOP - Information Architecture Study
UX Designer on Team
About P{roject
MoPOP (Museum of Pop Culture) is a Seattle based museum. They have a gift shop in the front where they offer an assortment of pop culture items such as apparel, toys, vinyl, etc. Their online shop has most of the same items, including a few not seen in the shop. I was tasked with redesigning the shop.MoPOP.com for a certain persona, especially focusing on the site navigation (information architecture) and UI Design. My deliverables would be an updated IA and a redesign of the IxD in form of a clickable prototype. 2 Week Concept Project
How I accomplished my tasks
These processes
Using these tools
Project overview
PROBLEM STATEMENT & HYPOTHESIS
The current shop.mopop.com website has too many categories, leading to confusing site navigation, and has too many filter options, making finding the correct item difficult. I believe that by better sorting categories and removing unnecessary steps for the planful buyer we will achieve a less complex and easier site to navigate.
Research Methods
Persona
The persona I was tasked with redesigning for was a planful buyer persona. A planful buyer has a set of characteristics
Competitive Research
Competitive Research was a main point of research. Looking at what was successful for similar businesses was a great way to figure out what features would be useful in the redesign. I looked at 4 different online stores. The Space Needle Gift Shop and Chihuly Gift Shop were chosen for proximity similarity, SubPop Shop and Hot Topic were chosen for similar items sold. I made a list of features employed by all the sites, and ranked how well these features were implemented on the sites.
Page Blocking
To start, I blocked out some current pages of the website. Along with MoPOPs, I also blocked out Hot Topic’s main page. Through competitive analysis, Hot Topic had the most features that made for a successful experience. From this, I had had a good idea of how I wanted to start laying out pages.
Information Architecture
IA Goals
In order to figure out what screens would be needed, I started our User Flow. My first iteration of the user flow was having a teacher make a wishlist and ends with having the wishlist fulfilled. That basically stayed the same, although our definition of “wishlist” fulfilled went from a 1 item to 1 item donation system to having a funding goal based off of a wishlist idea (this will be expanded on later). Also, the steps in between greatly changed.
Site Map and Navigation
I started by doing a site map of the current website. This gave me a good look at all subcategories they currently had, as well as what they are labeling some of their products as. This was the first step I took in reorganizing and making clearer categories. Some of the main problems with the current website were too many categories, confusing subcategories, and having a mix of category drop down menus with subcategories, while having categories with no subcategories.
Card Sorting
Offline and OnlineI listed out all the categories and subcategories onto post-its and did an open card sort to give me a better idea of how to group the categories that would be less confusing to the user. I tested four testers in an open card sort. From there, I moved my results to Trello to try a closed card sort. I had 4 testers do my closed card sort. From these tests I made my decisions of how to update their current sitemap. One of the biggest changes was getting the main top categories down to four from eight.
Updated Navigation
Using the user flow as a guideline, I started to sketch out screens that we would need for a user to complete their task. This was done on whiteboard so I could quickly get my ideas out, and change easily. It also allowed for my team members to add their insights, such as navigation schema. As a team, we also did a design studio to come with an idea for the bulletin board feature. Some of the key features I sketched out was how different elements would look in list items and how the token system would work.
© Nick Brosas Design 2025
I don't really know what to put in a footer for a portfolio
MoPOP - Information Architecture Study
UX Designer on Team
About P{roject
MoPOP (Museum of Pop Culture) is a Seattle based museum. They have a gift shop in the front where they offer an assortment of pop culture items such as apparel, toys, vinyl, etc. Their online shop has most of the same items, including a few not seen in the shop. I was tasked with redesigning the shop.MoPOP.com for a certain persona, especially focusing on the site navigation (information architecture) and UI Design. My deliverables would be an updated IA and a redesign of the IxD in form of a clickable prototype. 2 Week Concept Project
How I accomplished my tasks
These processes
Using these tools
Project overview
PROBLEM STATEMENT & HYPOTHESIS
The current shop.mopop.com website has too many categories, leading to confusing site navigation, and has too many filter options, making finding the correct item difficult. I believe that by better sorting categories and removing unnecessary steps for the planful buyer we will achieve a less complex and easier site to navigate.
Research Methods
Persona
The persona I was tasked with redesigning for was a planful buyer persona. A planful buyer has a set of characteristics
Competitive Research
Competitive Research was a main point of research. Looking at what was successful for similar businesses was a great way to figure out what features would be useful in the redesign. I looked at 4 different online stores. The Space Needle Gift Shop and Chihuly Gift Shop were chosen for proximity similarity, SubPop Shop and Hot Topic were chosen for similar items sold. I made a list of features employed by all the sites, and ranked how well these features were implemented on the sites.
Page Blocking
To start, I blocked out some current pages of the website. Along with MoPOPs, I also blocked out Hot Topic’s main page. Through competitive analysis, Hot Topic had the most features that made for a successful experience. From this, I had had a good idea of how I wanted to start laying out pages.
Information Architecture
IA Goals
There was a lot of emphasis on the IA of the redesign. One of the major pain points of the current website was bad navigation, especially the amount of categories, and how they labeled their search filters. In order to create a better experience, the IA needed a lot of work.
Site Map and Navigation
I started by doing a site map of the current website. This gave me a good look at all subcategories they currently had, as well as what they are labeling some of their products as. This was the first step I took in reorganizing and making clearer categories. Some of the main problems with the current website were too many categories, confusing subcategories, and having a mix of category drop down menus with subcategories, while having categories with no subcategories.
Card Sorting
Offline and OnlineI listed out all the categories and subcategories onto post-its and did an open card sort to give me a better idea of how to group the categories that would be less confusing to the user. I tested four testers in an open card sort. From there, I moved my results to Trello to try a closed card sort. I had 4 testers do my closed card sort. From these tests I made my decisions of how to update their current sitemap. One of the biggest changes was getting the main top categories down to four from eight.
Updated Navigation
Using the user flow as a guideline, I started to sketch out screens that we would need for a user to complete their task. This was done on whiteboard so I could quickly get my ideas out, and change easily. It also allowed for my team members to add their insights, such as navigation schema. As a team, we also did a design studio to come with an idea for the bulletin board feature. Some of the key features I sketched out was how different elements would look in list items and how the token system would work.
© Nick Brosas Design 2025
I don't really know what to put in a footer for a portfolio