top of page
Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started
User Centered Website Design Project
Project Type
User Centered Design
Began
November 2024
Ended
December 2024
Role
Project Designer, Site Manager
As part of a three-person team in an Iterative Design course, I helped develop a fictional luxury pet product storefront, targeting an upscale user base. The project involved creating drawn wireframes of the site layout, building the web page from the ground up in Wix, and designing branding elements in Canva.
Over a month-long timeline, I led much of the project management, from organizing wireframes, suggesting design improvements during development, and assisting with designing multiple pages per our wireframes. I also overcame notable technical challenges like formatting problems with limitations in editing capabilities on Wix and coordination gaps within the team as we were only available to communication via text message. This project expanded my skills in web design, digital tools like Wix and Canva, time management skills, visual formatting, and large-scale wireframing. While I feel the website is nowhere near perfect, and due to the lack of responsiveness from my team, not as finalized as I would like, and many aspects of accessibility and design need additional improvement, however, it was still very valuable to me as a learning experience and continuation of improving my visual design skills, serving as a showcase of my ability to continue work even in less than optimal team conditions, and trying to make the most out of a concept when given minimal direction.
The slideshow below highlights stages of the project, with a link to view the full housing page and final site.
Paper Prototype Homepage
This a sample of the paper prototype we came up with for our home page. As a whole, compared to our final project, the layout remained similar, with a change to the button design and layouts in some order, and the contact form footer being fully modeled out.
Paper Prototype Homepage 2
This is another sample of the original paper model for the shop page on the site. This page drastically changed during development, gaining a full side bar dedicated to precise filtering of items as well as a more individualized layout per item so that the bloat per object wasn't as drastic.
Website Logo
This was the logo that we as a team drew out and developed on Canva. This logo, compared to the original version on paper remained unchanged, as we were confident in its simplicity and message.
Home Page Layout Menu
This is the first and most prominent section in our homepage, designed to attract attention to the shop, and give a much more populated feel to the website as a whole. This home page contained both a scrolling "ad" bar and a feature products section as seen here. The idea in relation to our user was that given they were of much higher financial status, they would appreciate being shown products off the bat as well as directed to potential sales, as that is a universal attraction.
Site Account Management Page
This is the main page for the account management and customization settings. This was an area that was requested by many of our users as a way to personalize the "shopping experience". All aspects are customizable from username to profile photo to even "about me" This was meant to serve as a type of social hub as well as a shop, in the idea that our user would likely also be looking for a forum of like minded people, as the "market" for this product would be far more unique and niche. I find that the contrast in this section could use significant improvement but given restraints at the time it was unable to be refined past this level.
Wesbite User Profile
This is a more in depth look at the actual user profile once edited. Once again this was meant to serve as a means to socialize and act almost like a social media or blogging platform on the side on top of the shop. Once again as well the contrast here could use some improvements but it served its purpose as a rough draft.
Website Shop Page
This is an example of the shop page, which as noted with the wireframe earlier on, received changes in the form of a filter bar and additional searching options within the site. This is an example of some filters applied, hence the larger range of items taking up the page. It is normally far more condensed and I find we could have probably had the spacing on items move down one more line so that it was more of a card format rather than a long line of images, but the product functions as intended regardless.
Website Product Page
This is what the individual product pages looked like, when clicked on. It would allow for a standard shop format, in which amount, size, and color could be selected for the clothing. This page was primarily created using Wix's built in shop program.
image_2025-05-20_153647087
Once all aspects were selected, with the help of Wix's shop program, it would display a pullout bar of all your items in your cart when added to cart. This page was dynamic, and was able to display price adjustments based on the quantity of items selected. This would also allow a change to either view ones cart or head right to checkout, serving as ease of access to the user.
Website About Page
This about section was created by my suggestion as a way to make the site feel more lived in and also provide a bit of solidification on the user experience and how our site was meant to cater to our specific user, that being "rich pet owners". This served solely as a way to make the site simply feel more fleshed out as an idea and provide some additional UX copy to it.
Paper Prototype Homepage
This a sample of the paper prototype we came up with for our home page. As a whole, compared to our final project, the layout remained similar, with a change to the button design and layouts in some order, and the contact form footer being fully modeled out.
Paper Prototype Homepage 2
This is another sample of the original paper model for the shop page on the site. This page drastically changed during development, gaining a full side bar dedicated to precise filtering of items as well as a more individualized layout per item so that the bloat per object wasn't as drastic.
Website Logo
This was the logo that we as a team drew out and developed on Canva. This logo, compared to the original version on paper remained unchanged, as we were confident in its simplicity and message.
Home Page Layout Menu
This is the first and most prominent section in our homepage, designed to attract attention to the shop, and give a much more populated feel to the website as a whole. This home page contained both a scrolling "ad" bar and a feature products section as seen here. The idea in relation to our user was that given they were of much higher financial status, they would appreciate being shown products off the bat as well as directed to potential sales, as that is a universal attraction.
Site Account Management Page
This is the main page for the account management and customization settings. This was an area that was requested by many of our users as a way to personalize the "shopping experience". All aspects are customizable from username to profile photo to even "about me" This was meant to serve as a type of social hub as well as a shop, in the idea that our user would likely also be looking for a forum of like minded people, as the "market" for this product would be far more unique and niche. I find that the contrast in this section could use significant improvement but given restraints at the time it was unable to be refined past this level.
Wesbite User Profile
This is a more in depth look at the actual user profile once edited. Once again this was meant to serve as a means to socialize and act almost like a social media or blogging platform on the side on top of the shop. Once again as well the contrast here could use some improvements but it served its purpose as a rough draft.
Website Shop Page
This is an example of the shop page, which as noted with the wireframe earlier on, received changes in the form of a filter bar and additional searching options within the site. This is an example of some filters applied, hence the larger range of items taking up the page. It is normally far more condensed and I find we could have probably had the spacing on items move down one more line so that it was more of a card format rather than a long line of images, but the product functions as intended regardless.
Website Product Page
This is what the individual product pages looked like, when clicked on. It would allow for a standard shop format, in which amount, size, and color could be selected for the clothing. This page was primarily created using Wix's built in shop program.
image_2025-05-20_153647087
Once all aspects were selected, with the help of Wix's shop program, it would display a pullout bar of all your items in your cart when added to cart. This page was dynamic, and was able to display price adjustments based on the quantity of items selected. This would also allow a change to either view ones cart or head right to checkout, serving as ease of access to the user.
Website About Page
This about section was created by my suggestion as a way to make the site feel more lived in and also provide a bit of solidification on the user experience and how our site was meant to cater to our specific user, that being "rich pet owners". This served solely as a way to make the site simply feel more fleshed out as an idea and provide some additional UX copy to it.
Paper Prototype Homepage
This a sample of the paper prototype we came up with for our home page. As a whole, compared to our final project, the layout remained similar, with a change to the button design and layouts in some order, and the contact form footer being fully modeled out.
Paper Prototype Homepage 2
This is another sample of the original paper model for the shop page on the site. This page drastically changed during development, gaining a full side bar dedicated to precise filtering of items as well as a more individualized layout per item so that the bloat per object wasn't as drastic.
Website Logo
This was the logo that we as a team drew out and developed on Canva. This logo, compared to the original version on paper remained unchanged, as we were confident in its simplicity and message.
Home Page Layout Menu
This is the first and most prominent section in our homepage, designed to attract attention to the shop, and give a much more populated feel to the website as a whole. This home page contained both a scrolling "ad" bar and a feature products section as seen here. The idea in relation to our user was that given they were of much higher financial status, they would appreciate being shown products off the bat as well as directed to potential sales, as that is a universal attraction.
Site Account Management Page
This is the main page for the account management and customization settings. This was an area that was requested by many of our users as a way to personalize the "shopping experience". All aspects are customizable from username to profile photo to even "about me" This was meant to serve as a type of social hub as well as a shop, in the idea that our user would likely also be looking for a forum of like minded people, as the "market" for this product would be far more unique and niche. I find that the contrast in this section could use significant improvement but given restraints at the time it was unable to be refined past this level.
Wesbite User Profile
This is a more in depth look at the actual user profile once edited. Once again this was meant to serve as a means to socialize and act almost like a social media or blogging platform on the side on top of the shop. Once again as well the contrast here could use some improvements but it served its purpose as a rough draft.
Website Shop Page
This is an example of the shop page, which as noted with the wireframe earlier on, received changes in the form of a filter bar and additional searching options within the site. This is an example of some filters applied, hence the larger range of items taking up the page. It is normally far more condensed and I find we could have probably had the spacing on items move down one more line so that it was more of a card format rather than a long line of images, but the product functions as intended regardless.
Website Product Page
This is what the individual product pages looked like, when clicked on. It would allow for a standard shop format, in which amount, size, and color could be selected for the clothing. This page was primarily created using Wix's built in shop program.
image_2025-05-20_153647087
Once all aspects were selected, with the help of Wix's shop program, it would display a pullout bar of all your items in your cart when added to cart. This page was dynamic, and was able to display price adjustments based on the quantity of items selected. This would also allow a change to either view ones cart or head right to checkout, serving as ease of access to the user.
Website About Page
This about section was created by my suggestion as a way to make the site feel more lived in and also provide a bit of solidification on the user experience and how our site was meant to cater to our specific user, that being "rich pet owners". This served solely as a way to make the site simply feel more fleshed out as an idea and provide some additional UX copy to it.
bottom of page