https://github.com/Lindsaykerr1994/alexis-designs

Alexis Designs to be an online commercial website, intending to display and advertise the products created by Alexis Designs, a company that handcrafts clothing, quilts and other small person items using batiks. Batik is a traditional Malaysian and Indonesian fabric.

• UX
• Features
• Technologies Used
• Testing
• Deployment
• Credits

It is the purpose of this website to attracting potential customers to browse upon the products offered by Alexis Designs. Alexis Designs is a company based in Malaysia that handcrafts clothing and personal items such as quilts, coin purses and bottle sleeves. Originally Alexis Designs was only able to advertise their goods by attending weekend markets, sales conventions and through word of mouth. This website will allow them to spread awareness of the company, and hopefully increase sales, through request sent online, or so that potential clients can find out where they can purchase items in person. The owner of Alexis Designs primarily had to objectives:

1. Advertise their products, allowing them to be seen world-wide.
2. Increase sales.

I strove to achieve this objectives by allowing visitors to browse the full selection of products offered by Alexis Designs, and then contact the company if they wish to purchase a product. Visitors are able to find external links to social media platforms, such as Instagram or Facebook, as well as read an updated list on where Alexis Designs will be in person to display products. Unfortunately, at the current time, the visitor is currently unable to purchase items directly from the website. However I hoped to increase sales by directing the user to contact Alexis Designs if they wished to arrange a purchase.

Thirdly, any interested party can learn a brief amount about Alexis, of Alexis Designs, and a brief introduction about the material, Batik.

My wireframes diagrams are available to be reviewed at https://wireframepro.mockflow.com/view/M9276afb72ce0032120d8efb6601f99ee1587715627312 .This has been hosted on an in-browser wireframing program, MockFlow.

Feature 1- Welcoming carousel: On the main page, users are shown a revolving selection of images. These images display a selection of the products that the users are able to purchase. This carousel, and all others were sourced from Bootstrap's components libraries.(See * Libraries for more information.)

Feature 2- Purchasing modals: After browsing the products, users are able to select a product which opens a secondary in-window modal that provides supplementary images of the products, and further information. These modals were sourced from Bootstrap's components libraries.(See * Libraries for more information.)

Feature 3- Products dropdown menu: Upon hovering over the products link in the navigation bar, a dropdown menu will appear that allows user to more quickly arrive at the specifc type of product they wish to view. This will not exclude them from viewing all other products.

Furthermore, the webiste has been designed on a desktop computer, at resolution 1024 x 768, however it has been designed with other devices in mind, providing different layouts and components appropriate to the device being used. The user experience is expected to be consistent for all users regardless of the device that they are using. Additionally, to encourage traffic to the website and to boost sales, the website has been designed to streamline users to their desired destination. To allow easier navigation, a menu will always be visible for the user. To increase ease of use, there are no required browser extensions or downloads.

Features left to implement: Feature 1- Provide a section in which users can purchase products directly from the website. This will require inputting their financial information, and I have no technical capacity to approach this issue yet.

Feature 2- Provide a comment section in which users can leave any comments or ratings about Alexis Designs and its products. This will encourage future visitors of the website as they can see previous feedback and impressions.

Feature 3 -Provide a map service to locate upcoming sales, as found on the Contact Page. This will hopefully encourage any nearby potential clients to visit any sales events Alexis Designs will be attending, increasing foot traffic.

There were several libraries that helped create this website. Most noticably are the components found over several pages, such as the carousels and modal windows.

Bootstrap 4 - The carousels and modal windows were sourced from Bootstrap. I imported the original components, and then modified them as required. Some styles were adjusted in style.css, generally, colouring and sizes. https://getbootstrap.com/ https://getbootstrap.com/docs/4.0/components/carousel/ https://getbootstrap.com/docs/4.0/components/modal/

Font Awesome - The icons used in the social media links were sourced from Font Awesome. https://fontawesome.com/start

Google Fonts - The two fonts used, Monserrat and Gotu are sourced from Google's font library. https://fonts.google.com/

CSS Hover - I used the stylings from this website to decorate links found throught the website, in particular I used 'Underline Reveal' for directory links. https://ianlunn.github.io/Hover/

MockFlow - I used this in-browser program to create diagrams of my project, my wireframes, so that I would be able to get a sense how to construct and develop my project. https://wireframepro.mockflow.com/view/M9276afb72ce0032120d8efb6601f99ee1587715627312

W3Schools - While no code was sourced from this website, I relied on troubleshooting any difficulties I had on this website. Additionally, I used this website to troubleshoot my dropdown menus on the navigation bar. https://www.w3schools.com/css/css_dropdowns.asp

Encycolorpedia - This website was able to further develop a colour palette. https://encycolorpedia.com/646464

Code Institute - I was able to use a README template to write my own, the one you are currently reading. https://github.com/Code-Institute-Solutions/readme-template

Increase traffic to and awareness of Alexis Designs. As this site has not yet gone live, I am unable to verify if any traffic has occured yet, however as this website will be advertise on all social media profiles and business cards, traffic will hopefully rise.

Promote any social media and in-person sales of Alexis Designs. While users will only discover the in-person sales if they visit the Contact page, which is not guaranteed, users are able to visit all related social media accounts through links found in the footer on every page, and on the Contact page. Each link has been checked, and each link will open in another tab or browser so that traffic is not diverted away from this website.

Allow users to contact Alexis Designs. Allow users to arrange purchasing product. I have linked the forms found in the pages: Email & Purchase, to the company's official email address. Upon pushing the project, and attempting to send an email, I received an error code: "405 Not Allowed". I tried to rectify this by changing the action of the forms to "action=mailto:[email protected]". However this did not fix it. However, I have set requirements for each form: Each input requires an input, for example: A valid email in the appropriate input. Unless each input has been filled with an appropriate entry, the form will return an error message.

I will be hosting this website through GitHub, and can be found at https://lindsaykerr1994.github.io/alexis-designs/

All photographs displayed on the website are used with the permission of Rebeccah Wilkinson, who took the photos on behalf of Alexis Kerr, to encourage sales and awareness of the products. The background design was created by Lindsay Kerr, using an edited photo of a batik pattern.

All images used can be found in !Images(images)

The section entitled 'About Batik' used https://en.wikipedia.org/wiki/Batik to cross refence any information. Alexis Kerr was able to provide me a brief synopsis about the fabric, however Wikipedia was used to flesh out this section.

I thank Alexis Kerr for allowing me to use Alexis Designs as the subject of my User-Centric milestone project @ CodeInstitute.

Enjoy!