ChuChu is a responsive website built for online shoppers who would like to view the menu and purchase churros.
ChuChu contains a description of the company, how to contact, the product or service offers, the ability to purchase the product or service online, including the list of products, a detailed view of a product, a complete purchase process (selecting a product, inputting payment information, and receiving purchase confirmation).
The goal was to create a simple user interactive website which allows online shoppers to easily purchase churros, explore our store location and company's mission.
My goal for this project was to design and code chuchu's website look visually appealing, consistent, and responsive in every device size such as our mobile, tablet, laptop, and desktop.
Skills: Wireframing, UX + UI design, Html and Css.
Wireframe of Home page UI layout, fonts, illustrations, icons, and colour palettes
I was able to visualize and experiment on our website design layout by wireframing with different typographics, colour palettes and icons created by myself on Figma.
This link will lead you to my Git Repository where all my processes are shown in detail.
ChuChu's GitI was in charge of ChuChu's home and store location page. I have showcased images of Churros, Company History, and Review Section in home page and ChuChu's store location, contact us and footer section using Visual Studio Code.
I have stylized Home page by implementing colour palettes and icons created by Figma, container and basic buttons by Visual Studio Code.
I had to be extra cautious while developing ChuChu's home page since it would be the first page that would appear when a user clicks our website link. I made sure to design and code as if the browser size will change by making it responsive to any device size such as our mobile phone, tablet, laptop, and desktop. Coding ChuChu's Location page was also important as it will navigate and inform users' about our store location, where, and how to contact us.
To be consistent and organized, I have divided each html and css codes using comment blocks with a specific naming convention. I have divided each section by recording the start and end as a comment. During this process, I was able to learn the importance of organizing and structuring contents.
I have first showcased churros with images to advertise the product to our clients. I have then created a company history section to explain ChuChu's background, mission, and value. Lastly, I have designed and developed a review section which would attract and build a reliable experience with the users.
I have first embedded a Google map to allow users' to easily search our store location. After, I have created a contact us section to allow users access contact details without any obstruction. To visually attract users, I have implemented the icons created by myself and controlled colours after.
Testing responsiveness for Home and Location page in mobile to desktop screen size.
This project allowed me to gain more insights in web development, explore possible ways of structuring layouts, and how to compose colours effectively.
This was a large-scale project in a short time frame. It allowed me think more deeply in both company and customers' perspective and develop a simple, user friendly website with strong branding.
