Sonnenaufgang is a prestigious family run Sofa designer based in Munich that has been trading since 1884. Sonnenaufgang has evolved over the last 100 years as one of the most famous Sofa specialists with a wide range of material, colours, design and sizes of Sofas. This website has been created to revolutionise the business by providing customers with the option to shop online instead of instore. Helping reach a wider variety of customers. Such demands have become necessary during the recent Covid-19 Pandemic and this website enables Sonnenaufgang to compete with the larger intercontinental franchises.
- Project Description
- UX
- Features
- Technologies Used
- Testing
- Deployment
- Credits
- Acknowledgements
Sonnenaufgang are a family run Sofa specialists and designers based in the heart of Munich. This website enables Sonnenaufgang to adapt to the increase in popularity and demand of online shopping and to continue competing with other franchises. Furthermore, the website enables Sonnenaufgang to be more accessible to a wider variety of customers throughout Europe. The website provides a range of options and information on the Sofas available and provides the customer with the option of purchasing items online rather than going to the store. The website also contains information on Sonnenaufgang and gives an insight into the company itself. The contact page is the final page of the website where the user can ask any further question in relation to one of the items displayed.
Project Aim:
The main aim of this website is to showcase the Sofas available from Sonnenaufgang and to attract potential customers from all over Europe. This website enables the customer to browse and purchase the Sofa of their choice without ever having to enter the shop. Making it safer for the customer during the Covid-19 pandemic while increasing the exposure of the Sonnenaufgang brand.
Who this website is for?
This website is aimed at potential customers throughout Europe but mainly based in Germany currently looking to purchase a Sofa.
What it is that they want to achieve?
The user visits the website in order to obtain the following:
- To obtain information about the Sofas available.
This can range from size, material, design, colour, shape and price of the sofa. Also, what offers are included such as Guarantees.
- To learn about Sonnenaufgang.
Investigating if the designer is an experienced reputable company and learn about the services offered before going any further.
- To purchase an item without having to go in to the store.
Once the user has decided on a sofa to their liking, the option is available to add this sofa to the shopping cart ready for purchasing.
- To request further information
To get in touch with an advisor to answer any queries they may have.
How your project is the best way to help them achieve these things?
-
Sonnenaufgang’s website contains a sofas page available in both English and German providing the user with key information on the types of sofas instore. This is the interactive part of the website where six photos (one of each sofa) are displayed and the information of that sofa is available below the image. The purpose of this page is to allow the user to quickly view all the options available and obtain the key information necessary without having to scroll through pages and pages of items. Also enabling a possible comparison between items to help further aid their choice.
-
The website also contains a section in the footer of each page named “About us” enabling the user to learn all about Sonnenaufgang. Thus, clarifying any queries, the user may have. In this section the user can learn why Sonnenaufgang is unique. The aim of this section is to provide the user with an overview of Sonnenaufgang to put the user at ease by describing the specialities and experience on offer.
-
The website has an entire page dedicated to helping the user with their decision on the type of Sofa that suits them. The page contains six pictures with information below and a button with the option of adding the corresponding sofa to a shopping cart. This page is where the user selects the sofa of their choice by adding the sofa to the shopping cart and completing the purchase.
-
A contact us page enables the user to put in their name, email address and write a message where further information can be requested. Furthermore, the provider’s contact details such as a contact address and telephone number are provided if the user has any further inquiries.
Below are the links to the website wireframes. All wireframes were created using Balsamiq.
-
index.html: both on Desktop & Mobile (https://github.com/ElJefe111944/MS2/blob/master/assets/images/wireframes/index.html-wireframe.pdf).
-
sofas.html: both on Desktop & Mobile (https://github.com/ElJefe111944/MS2/blob/master/assets/images/wireframes/sofa.html-wireframe.pdf).
-
reviews.html: both on Desktop & Mobile (https://github.com/ElJefe111944/MS2/blob/master/assets/images/wireframes/reviews.html-wireframe.pdf).
-
contact-us: both on Desktop & Mobile (https://github.com/ElJefe111944/MS2/blob/master/assets/images/wireframes/contact-us.html-wireframe.pdf).
As mentioned in the previous section, this website contains several features which are aimed at enhancing the user’s experience.
Existing Features
-
Navigation dropdown – Situated at the top-right of each page of the website the navigation menu represented as a burger icon allows the user to access the pages most relevant to their needs with ease as well as providing an overview of the content available to the user on the other pages of the website. All the user has to do is to click on the links displayed in the navigation dropdown to browse the page of interest on the website.
-
Image Modal/Fluid image pop up – Situated in the centre of the landing is a row of images. The three images provide the user with an insight into the different sofas available. When the user hovers over one of the images the image zooms in enabling the user to see the couch in more detail. The user can also click on one of the three images activating the image modal. The image modal provides a full screen view of the sofa of interest as well as information for the user to read.
-
Landing page – The landing or home page welcomes the user to the website and provides a small pitch and introduction about the sofa designers Sonnenaufgang and the sofas for sale.
-
Our sofas page – The sofas page enables the user to find out more about each of the six sofas on offer as each image is accompanied by the name, information on the type of sofa and price. This not only allows the user to obtain all the information necessary in a short space of time but also provides a comparison between sofas helping them make their decision. The text presented below each image is clear, concise and not too long to avoid overwhelming the user with information. At the bottom of each image there is a button called add to cart allowing the user to select the sofa they would like to purchase.
-
Shopping Cart – At the top right of all the pages on the site is the shopping cart icon. The user can access this at any point while browsing through the site and can update the shopping cart by adding or removing items. When an item has been added to the cart a number at the top of the shopping cart icon is updated to inform the user of how many items have been selected for purchasing. The user is also given a summary of the items selected such as item number, items name and the price when accessing the cart.
-
About us section – The about us section is situated in the footer of each page and enables the user to learn about Sonnenaufgang. This is done by a small paragraph of text giving the user a brief summary of the background into the designers such as when they started and who runs the them.
-
The reviews page – An automatic slider runs through 4 slides over a background image at the centre of the page with a quote, the name of the person who made the review and their picture. This provides the user with an insight into the kind of feedback Sonnenaufgang has received from their existing customers. Reviews are now a central part of online shopping and this page allows the user to gage customer satisfaction for the designers without ever entering one of the stores.
-
The Contact Us page - The final page of the website allows the user to request further information beyond what has been provided on the site. This is done by having the user complete the input section with their names. email address and a text box where they can write their queries or questions. There is an input validation for each field so the details are entered correctly and a message confirming that the request has been sent.
-
Footer – At the bottom of each page of the website, the footer consists of social media icon links, the address of the store and a brief summary of Sonnenaufgang. Here the user can access the sofa designers Sonnenaufgang’s other social media accounts just by clicking on the different icons available. Furthermore, there are links provided at the left-hand side of the footer to all the other pages of the site instead of making the user scroll up to the top of the page.
Below is a list of languages, frameworks, Integrated Development Environment, Software Development Platforms and other tools used to construct the website in this project.
Languages:
-
HTML5 (https://en.wikipedia.org/wiki/HTML5)
The project uses HTML (Hyper Text Mark-up Language) as this is the standard mark-up language for structuring and presenting the content on webpages.
-
CSS3 (https://en.wikipedia.org/wiki/Cascading_Style_Sheets)
The project uses CSS (Cascading Style Sheets) as this describes how the HTML elements should be displayed on the webpages.
-
JavaScipt (https://en.wikipedia.org/wiki/JavaScript)
JavaScript was used in this project to create and control the dynamic parts of the website such as the Modal, Shopping cart, contact forms, Nav links, reviews and the preloader.
Frameworks:
-
Bootstrap 4 (https://getbootstrap.com/)
The project uses the Bootstrap 4 framework for faster and easier web development. Bootstrap 4 also allows us to create a responsive website with ease.
Integrated Development Environment:
-
GitPod (https://www.gitpod.io/)
The website for this project was created using the online IDE Gitpod.
Software Development Platform:
-
GitHub (https://github.com/)
This project was saved in GitHub as a repository using GitHub’s hosting services.
Other Tools:
-
Bennettfeely (https://bennettfeely.com/clippy/)
The CSS Clip-path maker was used in this project to make the CSS animation for the opening and closing of the nav bar links.
-
Smooth (https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections)
The SVG Generator was used in this project to make wavy HTML elements creating wavy transitions between sections as seen at the bottom of each page of the site. Thus, separating the main content section from the footer.
-
Icons8 (https://icons8.com/preloaders/)
The Preloader Gif library was used in this project to select a Gif to be activated while the main content is being loaded.
-
Font Awsome (https://fontawesome.com/)
The vast library of icons available from font awesome are used throughout this project to compliment texts and links making the design clearer and more concise.
-
Pixlr (https://pixlr.com/x/)
The photos used in this project have been edited using the online photo editor PIXLR.
-
Google Fonts (https://fonts.google.com/)
The online library of licensed fonts was used in this project.
-
Balsamiq (https://balsamiq.com/)
The industry standard wireframing tool was used at the start of this project to design and skeleton plan of each of the pages in this website on both desktop and mobile views.
-
CSS Beautifier (https://www.cleancss.com/css-beautify/)
A free online tool providing helps clean up messy style sheet code and helps with the formatting.
The following Web Development tools were used for this project for testing, debugging and optimising different variation of HTML, CSS and JavaScript. The Web Developer tools were also used to view the layout and structure of the website through different devices and to test the behaviour of the website on standard screen sizes to cover all media devices.
- Chrome Developer Tools
- DevTools (Firefox)
- CSS Validator (Jigsaw)
- HTML Validator (NU)
- Javascript Validator (Beautify Tools)
This website has been tested on the following devices:
- Moto G4
- Galaxy S5
- Pixel 2
- iPhone 5/SE
- iPhone 6/7/8
- iPhone 6/7/8 Plus
- iPhone X
- iPad
- iPad Pro
In this section, we will go over all of the user stories from the UX section and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.
-
To obtain information about the sofas available:
i. Click on the link to the burger icon at the top right of the landing page to activate the nav links drop down.
ii. Click on the link to the "Our Sofas" page which is located in the navigation links drop down.
iii. Scroll down the page to view each of the six available sofas.
iv. Learn the names of all six sofas offered by Sonnenaufgang.
v. Read the information below each image to obtain the further information about the sofa of interest.
vi. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page. Which is the same as the full screen version.
-
To learn about the Sofa designers Sonnenaufgang:
i. Scroll down the page to view the section in the footer labelled “about us”.
ii. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page. Which is the same as the full screen version.
-
To read the reviews given by existing customers:
i. Click on the link to the "reviews" page which is one of the links in the navigation bar. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.
ii. Read each of the reviews given along with the name of the customer by viewing the automatic slider.
iii. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.
-
To purchase a sofa:
i. Click on the shopping cart icon to view the items currently in the shopping cart.
ii. Add items to the shopping cart by clicking on the button “add to shopping cart” at the bottom of each image on the “Our sofas” page.
iii. Remove an item from the shopping cart by clicking on the button named “Remove” when inside the shopping cart
iv. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.
-
Request further information which has not been provided on the site:
i. Click on the link to the "Contact Us" page which is one of the links in the navigation bar. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.
ii. Enter your name and email address in the box labelled “Name” and the box labelled “Email address”.
iii. Please enter your message or query in the text box labelled “Message”.
iv. Try to submit the message by clicking the button labelled “Send Message” and a message will appear saying “Message Sent” so the user knows the process is complete.
v. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.
Interesting bugs or problems
No major bugs or problems were encountered during the making of this project. Any issues that were encountered were only minor ones such as the mistyping of code and white spaces between elements.
All the minor issues which did occur could have been avoid but due to my lack of experience and this being my second individual project I was unsure on the best practices. This led me to adopt more of a trial and error approach to creating the website.
The project was developed with the use of Gitpod’s Intergraded Development Environment. All developments and changes made to the project were saved and pushed to an external repository stated below using GitHub. This eliminates the risk of deleting a key component of the project by accident as all steps can be reversed thus undoing any unwanted changes made.
Deploying the project to the hosting platform GitHub:
-
Go to the repository created from my GitHub account called below: https://github.com/ElJefe111944/MS2.
-
Click on the settings tab located in the menu at the top of the page.
-
Scroll down the page to the GitHub Pages section.
-
Change the source to Master branch which will refresh the page.
-
Further down in the GitHub pages section a green box will appear confirming the website has been deployed.
-
Click on the link in the green box (also displayed below) to go to the live website. https://ElJefe111944.github.io/MS2.
Code from external sources:
Please note, I have differentiated between code that was directly used from an external source and an idea from an external source where the code has been altered and not directly copied for the purpose of this project.
-
The idea for the navigation links using a CSS animation from a CSS clip-path maker was taken from
(https://www.youtube.com/watch?v=Cg1c6sy8Btk&list=RDCMUCm0q786c9bW9FiQvesV126A&index=1).
-
The idea for the Wavy banner at the bottom of each page came from
-
The code for the animated nav links was based on
(https://www.youtube.com/watch?v=Cg1c6sy8Btk&list=RDCMUCm0q786c9bW9FiQvesV126A&index=1).
-
The idea & Code for the full image modal and image CSS transition on each of the images was based on
-
The idea for a preloader was taken from
-
The Code for the Shopping cart was based on
https://www.youtube.com/watch?v=GIoA-1IAiUM https://www.youtube.com/watch?v=j-uMTt2WINk https://www.youtube.com/watch?v=VKOysUIIF8E&t=3014s
-
The idea & code for the automatic Slider on the reviews page was based on
-
The idea & code for the Contact form was based on
-
The code for the each of the sofas displayed on the page “Our Sofas” as six card came from
-
Unsplash
This project has used the images available from the website Unsplash.com as all images can be downloaded to pdf and jpeg form. All pictures provide a visual representation for the user.
-
Pixabay
This project has also used images from the website Pixabay which is a free-to-use website for sharing and downloading photos. (https://pixabay.com/es/)
-
Font Awesome
The vast library of icons available from font awesome are used throughout this project to compliment texts and links make the design clearer, more concise and user friendly.
-
Google Fonts
The online library of licensed fonts was used in this project. The Google fonts used for this project were Orbitron and Play. https://fonts.google.com/
-
CSSgradient
The free online CSS gradient generator tool was used in this project. https://cssgradient.io/
-
Allen Thomas Varghese (Code Institute mentor) Thank you for your advice and guidance throughout this project helping improve the design and over function of the website.
-
Code Institute Slack Community Thank you for your guidance with any queries or problems I have encountered during the making of this website.