Phoenix Market

Project Overview


The objective for this project was to choose a topic and develop a website with no framework and any use of plug-ins. I decided to design a electronic retail website that showcased a wide variety of electronic products from desktops, cameras, microphones, hardware products and other components etc. The website consists of 7 pages which include home page, about page, contact page, a shop drop down menu that consists of 6 categories (only 3 are in active currently) and a product display page with information and details along with features that are listed. 



First and foremost, For the global navigation, I decided to break it apart into 2 sections. The top section for the logo, search bar, account sign in and shopping cart for any purchases that are being made. For the bottom global navigation I display the 4 main sections including, home page, about us page, shop drop down menu which showcases 8 different categories that Phoenix Market offers, and finally a contact page for contact information. Right below I decided to have a jumbotron image slider that showcases different categories, best selling products, sale items etc. which can also be navigated using the arrows on both sides or 5 circle stamps on the bottom. Right below the slider, I have 3 CTA sections that is basically the highlights of the website that most users would want to look into when they first view which is separated into sections that include, what is Phoenix Market (about page), Trending Products (Shop Page that filters to top trending products), and on clearance items (Shop Page that filters to top clearance items). Finally at the end I made a 4 sectioned window that showcases the 4 main categories that majority of the users would look for which include desktops, monitors, laptops and cameras which can be viewed when hovered over image.  


For the about page, I have a header image that is labeled with “About Us” in the middle along with a small description of the company below. I tried to focus more on the textual content rather than visual, by having less images and having a large area for any text in the page. Overall, the page is simple layout that discusses everything that a typical user would want to know about Phoenix Market. 


Under the shop drop down menu, there are 8 different categories which of the 3 are only in active at the moment and they all have the same layout and design which include Laptops, Desktops, and Monitors. For each of these pages I designed a section where it displays the 8 featured catalogs that where each image represents its catalogue and can be hovered which reveals its own page. Right below I made a small filter section where users can order the products in a specific order they prefer such as top trending, most expensive / cheap, high / low rating etc. As mentioned, I have the products listed right below in the order of the filter which displays the featured image, product title name, description and rating. 


Now for the product page, I went for a straight forward concept where the featured image can be changed clicking one of the small gallery of images below with a nice and tidy drop shadow behind. On the right side where it shows its features, title name, ratings and description etc. is more in depth than the section in the category page and users can learn more about the product over on this page. 


For the contact page, I designed a simple contact form with blank sections where users enter their first & last name, email address and a message section for any concerns or feedback they want to submit. I also have a small contact information on the top that includes, phone number, company email address and street address for any user who want to reach out.  

Scroll to top