View live project here on GitHub
SCOOPS Ice-Cream Parlour is a family-run, local business in Mullingar, Co.Westmeath. Providing home-baked warm goods, memorable ice-cream desserts, and delicious hot drinks in a cosy environment. The site was designed to invoke a nostalgic, homely feeling that centered around the product; traditionally-made fresh ice cream. The site intended to be a clear, dependable reference for every visit.
- UXD (User Experience Design)
- Creation process (Strategy -> Surface)
- Design
- Page Features
- Tablet & Mobile View
- Future Features
- Technologies Used
- Deployment
- Testing
- Credits
SCOOPS Ice Cream Parlour is a friendly, local ice cream parlour. It needed a clear and striking website design that reflected the parlour's traditional flavours and aesthetic.
SCOOPS customers vary in age and it was a requirement that the website is straight to the point and easy to use for those seeking information about the menu, location, and opening times. The site was designed to be responsive to allow visitors to view it from a range of devices and the menu was to have decipherable font from either portrait or landscape orientation. It was important for the opening times and location of the shop to be accessible from every page via the footer. In addition, an interactive Google Map would be needed to direct those not familiar with the town.
- A user can access each page of the site with one click via the navigation bar.
- A user can access the menu and prices via the button located at the center of the landing page.
- A user can view the opening times and location via the footer.
- A user can find a map to the parlour via the navigation bar and footer.
- A user can quickly access the menu via the landing page to check menu options and prices.
- A user can learn about the business ethos by scrolling down the landing page.
- A user can find social media links in the footer to learn more about SCOOPS.
- A user can use the contact form to connect with the business.
- A user can see opening hours quickly by scrolling down the landing page.
- A user can view the social media links to check for menu updates.
- I required an easy-to-read, dependable website that delivers clear information about menu options and opening times.
- Location of the shop must be visible and social media links available.
- The retro aesthetic of SCOOPS is to be carried on throughout the website with the use of consistent, clean design and use of graphics and colour to evoke an emotional and familiar connection for the user.
- Pricing within the menu page is to be transparent and simple.
- Mobile responsiveness is an essential feature required for this website.
The SCOOPS site must be available on a wide range of devices due to the varied range of customer ages. A large portion of their client base is the retired, over-60 age group, comprising mostly of grandparents bringing their grandchildren out for a weekly treat. SCOOPS provides a comfortable, no-fuss, homely environment for its dine-in patrons and they wished for this to be reflected in the website.
- The site is to contain only essential information, presented in a similar fashion and layout.
- Text must be clear and legible on any sized device to allow the user instant access to the menu, location, and opening times.
- A brief history of the business is to be included on the landing page.
- For future development, an ordering system for party/catering requests will be included. Also, a large gallery page featuring images of the ice cream flavours, sundae specials, and candid shots of customers and staff.
Similar to the idea for the design and layout to be accessible and functional, simple navigation and interactivity were essential. The site needed to provide information swiftly no matter the age of the user.
- Easy to identify, clickable links with a consistent layout. The design was to be predictable for each page with the information clearly identifiable.
- Any buttons or links had to provide feedback to the user to identify their purpose in the form of a design change that followed the flow of the overall aesthetic.
- A large, clear button to bring the user directly to the menu would be placed front and center of their eye-line.
- In addition, a navigation bar and footer would be visible on every page, at every device size, displaying the same information. This would provide the returning customer with a faster route to their information destination, strengthening the site's familiar and trusting feeling.
The site was developed to be simple, clear, and familiar.
-
For the landing page, the logo, SCOOPS, was to be top-left of every page, no matter the orientation or screen size.
-
The simple, three-item navigation bar of 'Home', 'Menu', and 'Contact', is situated always to the right of the logo. An underline feature identifying the current page and whether a cursor or touch was accurate.
-
A large, clear image dominates the landing page with a close-up view of the available ice cream flavours, their texture visible.
-
Centered in the image is a tagline with a large, clickable button situated immediately below it. First-time visitors have access to the menu with one easy click.
-
For returning or curious visitors, scrolling down the page introduces them to a brief, three-piece of information section about the SCOOPS business. Images are visible on one side of the headed paragraphs.
-
The page ends with the footer, again offering three pieces of important information to the user, opening times, location, and social media.
-
For the menu page, the navigation bar and footer remain as before. Between these lies the menu items laid out in identifiable, headed sections. An image of the most requested dessert features at the end of the menu, to assist the visitors' decision.
-
For the contact us page, the navigation and footer remain as before. Two sections are presented with explanatory headings. An optional form for visitors who wish to connect with the business with an interactive Google Map with the business location pinned. There is an option to enlarge the map in a new window and find directions.
-
Below the map again are the location details for the shop with a phone number to contact them.
Wireframe - Homepage Desktop & Mobile
Wireframe - Menu page Desktop
Wireframe - Menu page Mobile
Wireframe - Contact page Desktop
Wireframe - Contact page Mobile
A design was created that allowed a consistent flow throughout the three-page site.
- A background was designed to reflect the cone wrapper used by the SCOOPS parlour. The striped, two-tone panel adorns each page, clearly identifying the SCOOPS brand.
- A palette of blues and reds was created, similar to the interior of the parlour.
- A clean, sans-serif font, 'Josefin sans' was used in a medium weight to provide legible text at any size.
- Corners on all elements were rounded to maintain a retro feel.
Overall, the design was intended and created to foster the emotional and familiar connection customers have with the parlour.
This website used a fresh, bold palette of blues and reds to capture the aesthetic of a traditional ice cream parlour. The colours reminded me of ice cream wrappers and packaging. I combined these with an off-white shade that felt paperlike and clean.
I experienced an issue with the contrast ratio for my buttons. The ratio of the (#78D5F7) blue and (#F53636) red fell short of the acceptable WCAG contrast ratio. To fix this and increase the accessibility of my site I used different shades of these colours to conform.
Adobe Color provided this fantastic resource for checking how accessible your colours are. I submitted my palette to the Color Blind Safe check to find they passed this test also.
Google Fonts was used to import the fonts 'Josefin Sans' and 'Lato'. I felt the clear, soft lettering suited the intended aesthetic of the website. I had intentions to use Lato for my smaller bodies of text, however, I chose to stick with Josefin to keep the font consistent.
The images that I have chosen for my site reflect the bright, retro aesthetic I am looking for. Close-ups of large displays of ice cream create a positive feeling for the user, prompting them to delve further into the menu section. A large image sits below the menu options, it shows the most popular dessert of a warm brownie with a scoop of delicious ice cream. The sites pexels.com, unsplash.com and pixabay.com provided the royalty-free stock images used throughout the website, with attributions to each photographer placed in the Credits section of this README doc.
To ensure responsivity I used Flexbox in my CSS styling. Main elements in the body of the site i.e. the business ethos, menu sections, and contact sections were displayed in a row format for desktops but this switched to a column for smaller screen sizes. The header and footer remained the same, whilst images were resized to fit the display.
- For future development, I would like to include an ordering system on the website to allow customers to order menu items for takeaway and a form element for larger orders to cater for parties and events.
- An embedded video of the in-house ice cream production, showing customers how to make ice cream from beginning to end.
- A gallery page of dessert specials, events held at the parlour, and candid photos of customers and staff.
- HTML5
- CSS3
- Procreate - used to create wireframes and edit images
- GitHub - used to save and store all files for this website
- Git - used for version control
- Google Fonts - fonts were imported from here
- Font Awesome - icons and their associated kit were downloaded from here
- Adobe Color - for all color palettes and accessibility contrast ratios
- Favicon.io - for ice cream favicon
- Tiny PNG - to compress images
- Google Dev Tools - to debug and for testing responsiveness
- Google Lighthouse - for auditing the website
- W3C Validator - for validating the HTML and CSS code
GitHub was used to deploy the website. These were the steps taken to acheive this:
- Login to GitHub account
- Navigate to the project repository, scoops_pp1
- Click the Settings button near the top of the page
- In the left-hand menu, find and click on the Pages button
- In the Source section, choose 'main' from the drop-down, select branch menu
- Select 'root' from the drop-down folder menu
- Click 'Save' and after a few moments the project will have been made live and a link is visible at the top of the page
I had planned for this site to be accessible and legible on all screen sizes. The user is viewing the site primarily for the menu options and parlour location and they needed to access this information with one click. I used Chrome Dev Tools to test, tweak and debug in the early stages. I deployed my site halfway through to test on real-world devices. These devices included:
- Acer Aspire 3 Laptop (1920 X 1080)
- Huawei AD80HW 24" Monitor
- iPad Pro 2021
- iPhone SE(2016)
- Huawei p30 Lite
- iPhone 11/13
- Samsung Galaxy s10
Testing took place throughout the entire build using Dev Tools on Chrome and on the above real-world devices. The browsers used were:
- Chrome
- Firefox
- Edge
- Safari
The results of feature testing are as follows:
| Page | Test | Pass/Fail |
|---|---|---|
| All | SCOOPS logo links back to homepage | Pass |
| All | Underline appears under navigation items when the mouse hovers | Pass |
| All | Underline stays under active navigation item | Pass |
| All | Navigation links bring the user to relevant page | Pass |
| All | Footer social media icons bring the user to relevant sites via a new tab | Pass |
| All | 'Find Us' heading in footer links to contact page | Pass |
| All | Images and sections are responsive in different media sizes | Pass |
| Index | Hero image zooms in on loading | Pass |
| Index | Call to Action button links to menu page | Pass |
| Menu | Menu is scrollable | Pass |
| Menu | Menu items are clear and legible | Pass |
| Contact | Contact form required elements are responsive | Pass |
| Contact | Form submit button brings you to a validation page | Pass |
| Contact | Google Map is interactive and opens in a new tab for a larger map | Pass |
Further device testing took place in Dev Tools on:
- iPhone 4/5/6/7/8
- iPhone XR/ iPhone 12 Pro
- Pixel 5
- Samsung Galaxy s20
Index/landing page HTML validation
Menu page HTML validation
Contact page HTML validation
SCOOPS CSS validation
For Desktop
Lighthouse audit for Index page
Lighthouse audit for Menu page
Lighthouse audit for Contact page
For Mobile
Lighthouse audit for Index page - Mobile
Lighthouse audit for Menu page - Mobile
Lighthouse audit for Contact page - Mobile
| Bug | Section | Fix |
|---|---|---|
| Whitespace added to right-hand side of webpages | All pages | Using Dev Tools, I added a thin red border to every element in my website. From this, I discovered that I had mistyped a value in my footer padding section and made it too large. This was pushing the footer element outside of the webpage width. I adjusted the padding to the correct value and the issue was resolved. |
| Nesting button element & anchor element | Index/Home page | When running an early W3C validation test, I discovered that I had made an error by placing a button element inside an anchor element within my tagline section. Semantically, this was incorrect. I considered using a span element instead and upon consulting Stackoverflow and this post I confirmed my understanding. I re-checked my HTML code with W3C Validator and my live site to find the issue resolved. |
| Flexbox issues with positioning business ethos section - elements bunched together | Index/Home page | As I was learning flexbox whilst completing the project, I had not yet fully understood the div parent/child relationship. I consulted the Mozilla Developer Docs for Flexbox and discovered that I was not using enough divs for the elements to display correctly. I placed each of my headings, paragraphs, and images within divs and applied flexbox properties to their parent divs and themselves. Assigning flex-direction: row and justify-content: space-around/space-between solved my issue, with each of the elements positioning themselves with appropriate spacing between. I then applied this structure to the remaining two ethos items. |
| br element in li element | Menu Page | Semantically I made an error by using the br element to make space between my menu items. On performing the W3C validation test, I became aware of this error. I considered using margin-top to fix the issue. I Googled the issue to understand my error further and came across a Stackoverflow post, with a comment from Quentin detailing how to use margin-top avoiding the first child element of the parent div. I used this piece of code in my CSS file to control the spacing between the menu items after understanding the code fully. |
| Viewport meta tag | Head section/All pages | On first deploying my website to real devices, the mobile pages were appearing zoomed in upon loading. They appeared normally on Dev Tools mobile testing sizes. I checked my CSS code and my viewport meta tag for any obvious errors. Upon finding none I consulted Stackoverflow to find this post. I removed the initial-scale=1.0 from the viewport meta tag, leaving only width=device-width, I ran the code through the W3C Validator to find no errors. This fixed the issue on all real-world mobile and tablet devices |
| Index page styling disappeared | Index/Home page | Due to commenting out the wrong section of CSS code, I had caused styling on my home page to disappear. Checking the code, I spotted the error and rectified it. |
| Textarea misalignment | Contact page | Due to a developer mistype, I had altered my CSS code for my contact form textarea. I re-added display:block and margin:auto to center the element again. |
-
On viewing my deployed site on Safari browser, I found the Josefin Sans font to be displayed differently in the header elements. The website is still displayed adequately despite this issue. I will continue my learning to understand how to combat small, browser display differences to discover if I can overcome this.
-
On occasion, when viewing my website in Dev Tools, a small amount of whitespace appears to the right of the Home page. When I refresh the page or clear the cache, this issue resolves itself. I have not figured out yet why this happens on rare occasion.
-
Even though my site is responsive on Dev Tools and on real world devices, it does not work on multiple-media, screenshot generating websites like 'ui.dev/amiresponsive'. It appears zoomed in, similar to the viewport meta tag issue as documented above. I have yet to figure out why this is the case.
- All content written for the website is by myself, is purely fictional, and for educational purposes only.
- Code Institute for their HTML/CSS learning material and 'content zoom' module in the Love Running project.
- W3Schools for additional learning material.
- MDN Web Docs for flexbox tutorials and guidance.
- dev.to for the CSS diagonal stripes tutorial.
- Alan from Code Institute Tutor Support for helping me with an element width issue in my media queries.
- StackOverflow guidance on removing br element from menu li items to improve semantic HTML
- Browserstack for media queries and breakpoints guidance.
- Elaine Broche Design inspired by Elaine's striking juice website.
- Kera Cudmore - Creating your First README for README structure and Markdown guidance.
- Unsplash, Pexels, and Pixabay for all images used on this site. Credit to photographers Jonathan Cooper, Lukas, Katie Rainbow, Kyle Hinkson, and Dulce Silvagni.
- Font Awesome for the icons used in the footer of this site.
- Favicon for the favicon used for this site.
- Google Maps for the map used in this site.
- I would like to acknowledge my Code Institute mentor, Rahul Lakhanpal, for his guidance and encouragement on this project.
- My family for testing my work and offering positive thoughts and hot cups of tea throughout the project.