READYTECH

Electronic Shop e-Commerce Website

The Mission: 🎯

This was a part of our final project in my second semester. For this portion, we had to create wireframes and mockups before tackling on coding the actual website itself. We were given the logo and its branding standards. However, we were then left to create everything else-from the website layout to the website content such as product photography and product descriptions.

My goal was to create a website that had a similar feel and look as other tech sites out there. I wanted the visitor to instantly know that they are in a tech website just from how I laid things out. The website should also be easy to navigate around, have clear CTA (call-to-action) buttons, and have majority of the elements that is needed for a great user experience.

Low-Fidelity Wireframes

Challenges Faced: 🤔

I had troubles displaying the feeling 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 all of those websites and how similar they laid some of the elements out.
Along with the logo, the colour scheme was already pre-done and given to us. With that, I had to plan out where each colour would suit best since I’m unable to change them.
At the time, I still had a small knowledge in coding. So, coding the website will be difficult and I had to keep in mind responsiveness too.
I also wanted to implement some features that had not been taught to us. So, I had to think of how to lay my website out with the abilities that I had and then carefully apply the ones that I taught myself.

Medium-Fidelity Wireframes

Outcome: ✅

There were steps to be taken before we moved forward each time. Luckily, I was approved every time. With the approval, I was able to move forward to our last step and hand-code it from scratch by using HTML, CSS (front-end development) and MySQL (back-end development). The responsiveness aspect of the website when it came to resizing the browser was quite “iffy” to tackle; it’s initial viewport width is around 1900px. But it’s still capable to be viewed in mobile mode. I did go further than what was needed 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.