Argyle Co. - Jewellery Company

A fictional Jewellery company of my own named Argyle Co.:sparkles: that featured a wide range of finest jewelry from necklaces & pendants, rings, earrings, bracelets to fine watches. It aims to target customers and buyers that are facinated about any kind of jewelry.

Not to mention, the website spotlighted a multiple options bar on the top of the page that allow users to navigate specific categories or items desired without having difficulties scrolling down pages to look for products. As a result, provide users a better and friendly users experience when using the web. Additionally, a shopping cart icon located at the top-right corner of the page that shows a list of items that have been added by the customers and the total amount required to pay.

Last but not least, each and every customers is able to get a total of 10% discount for the first time shopping upon registering an account at Argyle.Co.

Design Process

As mentioned earlier, the website target customers and users that are interested in finding any kind of jewellery. And the website featured a variety of categories of kind of jewellery that allows them to shop with convenient.

Before I came out with the idea of how the website should look like and the layout and color schemes, I gather information and identify how I can allow users to be more convenient in terms of saving time when using the website. Therefore, as a user myself I disvovered when navigating several websites it is challenging to look for things we are finding, resulting dealing with frustration and spending more time experiencing the website. So, I came out with the idea of implementing a multiple options bar for users to navigate those desired items that there are looking for.

Then, I start creating a wireframe for my website that showcases the layout of the website on how it should look like that gives me a clearer idea on how I should start progressing my project.

List of Users stories:

• As a shopaholic on jewellery, I wanted to search for a great amount of jewels, so that I can choose from a variety of choices.

Here is the wireframe for my project:

Link for wireframe

Features

For the features of the website it is ease to make users to understand and navigate easily. Therefore, it is seperated into few different parts. The 'Options bar' which consist of four different options; 'Shop', 'Fine watches', 'Gifts', and 'Collections'. A 'Search Bar'. In addition to that, users are able to find a 'Add to cart' function below each product. Moreover, a 'Login' icon for users to login as a member and a 'Shopping cart' icon for users to view the added items. Lastly a 'Redeem voucher' function to redeem voucher.

Existing Features

• Shop - allows users to choose from different categories to shop from new arrivals, bracelets, necklaces, rings, earrings or just shop all.

• Fine watches - for users to explore fine watches features from men's, women's to all fine watches.

• Gifts - allows users to choose for types of gifts either for 'Him', 'Her' or even for 'Birthdat Gifts'.

• Collections - features collections only available for the current season.

• Search Bar - allows users to search for goods available in the store.

• Login - allows users to either login as a member or register an account.

• Shopping cart - allows users to view the item added and the total amount requires to pay.

• Add to cart - for users to add desired items into shopping cart upon clicking it.

Features Left to Implement

• Redeem voucher - allows users to redeem voucher for reduction for chosen items under terms and conditions.

Technologies Used

1. HTML

• The project uses HTML to structure the web page and the content.

2. CSS

• The project uses CSS to illustrate the layout, fonts, and color of the website.

3. Javascript

• The project uses Javascript programming language to create interactions in web and for the 'redeem voucher' function in the project.

4. README File

• The project uses README File to gives users a detailed description of the project.

5. Adobe XD

• The project uses Adobe XD to build prototype and brief idea of how the layout of the webpage should look like.

Testing

1. Search Bar :

• i. Go to 'Seach Bar' located in the center-top of the page
• ii. Try and search for products that you are looking for and verify if it redirects to the pages related.
• iii. Try to type any irrelevant content inside the box and verify if there's any invalid input message appears.

So far, I'm having trouble aligning the contents in different screen sizes as it may look different from each. Therefore, I'm currently working on 'media queries' and 'flexboxes' to make the content align in its corrrect position on different screen sizes.

Moreover, users using browsers to navigate items in the home page may need to click to the 2nd page for viewing all products as the home page only consist 5-6 products while for phone view it will be showing up to 7-8 which is the desired amount of products I wanted to show at the home page.

Credits

Content

Media

• The video used in this project were obtained from 64FACETS-Youtube.
• The picture used in this project were obtained form pexel,unsplash, and 64facets.

Acknowledgements

• I received inspiration and idea from Tiffany and Co.,Swarovski, and Bvlgari.