Web Shop

Shop page wireframes
Shop page design
Catagory page wireframes
Individual image page design
Check out payment page design
Cart page design
Components used on pages

For my Studio Project, I initially struggled to come up with an idea. After researching project ideas online, I decided to design and potentially prototype an app for selling my photography. Once I settled on the idea, I filled out the project proposal sheet provided by our instructor and submitted it for review to two different instructors—my former Design class instructor and my UX instructor.

Some of the feedback I received included:

  • Focusing on beautiful photography, sounds like it would be visually impactful
  • Not sure creating an app for buying my photography would be best for connecting with customers; instead, make it a responsive website
  • Think about page patterns that can be used over and over again and show examples
  • Prototype it for more impact when presenting

With the feedback I received, I decided to shift the project from an app to a web shop. This change led me to a longer research journey than I initially anticipated. I explored other photographers’ websites for inspiration, looking at how they structured their web shops, and conducted extensive research on pricing. This included seeing what other photographers were charging for their photos and determining the shipping and handling costs for various locations in Canada through Canada Post.

Once I had a clearer idea of the layout and pricing, I began creating wireframes and designing each step of the process. I started with the cart, checkout, and confirmation pages, as I had already worked on similar designs for a previous project. I expanded on these designs for a larger scale, creating the necessary components such as buttons, payment options, and mailing information.

Next, I worked on the design for the shop and product pages, each with a unique style. From there, I created the additional components needed for these pages, prototyped them, added images, and sent the project to my UX instructor for review. Based on the feedback, I added a homepage and adjusted a link name to make it less confusing. Finally, I refined my designs and prototyped the remaining parts of the project.

Click the link provided to view the actual site: photography.ivyleuschen.ink