Web Shop

Web Shop

Wireframes

For my Studio Project class, I had a hard time coming up with an idea for a project to do. After googling ideas for projects to do, I settled on designing and possibly prototyping an app for selling my photography for my photography portfolio website. Then I filled in the project proposal sheet that our instructor gave us and sent it to two different instructors for review. One was my former Design class instructor and the other was my UX instructor.

Some of the feedback that I got was:

  • 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 this feedback, I changed it from an app to a web shop. Then I set out on a longer research journey than anticipated, looking at other photographers websites for inspiration and to see how they have their web shops set up and then doing extensive research on pricing. Researching pricing included seeing what other photographers were charging for their photographs and how much it costs for shipping and handling to different places in Canada using Canada Post.

Shop and check out screens
Components

From there, I started making wireframes and then my designs for each step of the process. I started with your cart, check-out, and confirmation because I had already made similar designs for an assignment. I took what I did for that assignment and made them for a bigger scale. Once I had these designs, I started to make components for them, like the buttons, payment options and mailing information.

After that, I did the designs for the rest of the step: the shop and product page (two different styles). From there, I made the rest of the components that I would need and prototyped them, added the images and sent the project off to my UX instructor for review. With the feedback I got, I added my homepage and changed a link name to make it less confusing. The last things I did were finalize my designs and prototype the rest of the project.

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

Home, cart and item screens

Artwork:

All photographs were taken by me, logo was designed by me and icons were found on svgrepo.