Web Design and Development Project


3 months (remote)



Adobe XD, Adobe Illustrator, Adobe Photoshop, Visual Studio Code, ShiftEdit, FileZilla



Web Developer, Web Designer (UX/UI), Graphic Designer, Product Photographer, Content Writer

The Mission: 🎯

For this project, I created a fictional eCommerce website for my college final project. I was given the logo and its branding standards (colour palette and fonts). However, I was then tasked to create everything else-from the website layout to content writing to product photography to web development.

My goal was to create a website that had a similar feel and look as other tech websites out there. I wanted the visitor to instantly recognize that they are in a tech commerce website just from how I laid things out.

Low-Fidelity Wireframes

Challenges Faced: 🤔

  • I had troubles displaying the tone of voice I wanted to convey. I looked at various tech websites – such as Best Buy, Visions Canada, The Source, Canadian Tire – to get a sense of what similarities they had. I needed to know which components were most prominent in their websites and get a sense of the lay out of their elements. 
  • Considering the logo and the colour scheme was already given to us, I had to plan out where each colour would suit best since I am unable to change them. I tried using colour theory and design techniques to test them out. 
  • At the time, I still had a small knowledge in back-end web development. So, coding the website became a challenge; I had to keep in mind responsiveness too. 
  • I also wanted to implement some features that had not been taught to us (i.e. removing cookies thus deleting items in the cart/wish page). Due to that, I had to allocate some extra time to research how to do it for a better user experience.

Medium-Fidelity Wireframes

Outcome: ✅

I was able to accomplish everything that was needed and asked of us. When it came to resizing the browser, the responsiveness aspect was quite “iffy” to tackle; the best viewport to view it in is around 1900px. However, it’s still capable to be viewed in mobile mode and gets the job done. I was able to implement my plan to go further by adding a Wishlist feature, and adding a delete button in the Cart and Wishlist page (playing with cookies). 

High-Fidelity Wireframes , Prototype, and Website

> To visit the website, click the link here.
> To view the desktop prototype, click here
> For the mobile prototype, visit the link here.