THRIVE Juices and Smoothies is a site that advertises a fictional refreshment business. The business primarily sells juices and smoothies and also a limited range of healthy snacks and hot beverages. The site is targeted toward people who want to buy healthy refreshments "on the go" - the business also has a seating area for anyone who wants to stay and socialise but its primary USP is the appeal, taste and quality of the products. The site will be useful for people who want to check out the range of products available, the location and opening hours of the business.
-
-
- As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
- As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
- As a First Time Visitor, I want to be able to easily navigate to and view a menu of drinks and snacks.
- As a First Time Visitor, I want to be able to easily find where the organisation is located.
-
- As a Returning Visitor, I want to be able to access and view the menu quickly and easily.
- As a Returning Visitor, I want to be able to check opening times quickly and easily.
- As a Returning Visitor, I want to be able to contact the organisation to give feedback or ask questions.
-
- As a Frequent User, I want to be able to sign-up easily for discounts.
-
-
F01 Navigation Bar
-
The navigation bar has a consistent look and placement on all three pages of the website supporting easy navigation. It includes a simple Logo, Home page, Menu and Contact links and is responsive on multiple screen sizes. On small screens (e.g. mobile devices) the Home, Menu and Contact links move to under the Logo.
-
-
F02 Landing Page image and call to action
-
The landing area includes a photograph and a text overlay that together clearly identify the purpose of the business and the type of product it sells. The citrus colours and 'welcome' message are intended to be appealing to the user and convey a sense of health, freshness and friendliness.
-
A large bright "See Our Menu" button is placed central to the screen as an eye-catching call to action which gives the user an obvious quick route to the menu page.
-
-
F03 Tagline
-
The "enjoy here or takeaway - the choice is yours" tagline appears on the main page and again on the menu page to let the user know that seating is available and to help re-inforce consistency in branding.
-
-
F04 Company Ideals section
-
The company ideals are presented using 4 flip cards below the tagline on the main page. These cards give the user more information about the organisation in relation to its strategy in the areas of quality, sourcing of ingredients, recycling and philanthropy.
-
-
F05 Footer
-
The footer is featured on all three pages and is identical on each page making it easy to use. It contains three sections :
-
Opening Times - having the opening times in the footer on each page allows the user to quickly and easily find this information, this is important for this type of business as it is information that the user needs in order to make use of the company (product is sold offline).
-
Address - similar to the opening times, the address of this type of business is important to the user in order for them to use the company and so has been repeated on each page in the footer to allow the user to quickly and easily find out where the company is located
-
Stay in Touch - this area has links to social media sites associated with the organisation encouraging the user to keep connected. The links will open in a new tab to allow easy navigation for the user. The organisation can use these sites to promote brand awareness and keep customers interested through updates, offers, chats and other marketing efforts. (As THRIVE is a ficticious company, the links currently just go to the social media main websites.)
-
-
-
F06 Menu Page - 'Carte' section
-
The menu page gives a list of the products that can be purchased at THRIVE. For ease of use and clarity for the user the products have been split into three panels, one for 'Fresh Juices', one for 'Smoothies', and the third for 'Healthy Snacks and Hot Drinks'. Pricing and ingredients are also shown.
-
For ease of use, a consistent look and feel is maintained through the use of the same background image as is used for the landing image on the main page, and in applying the same background colour to the menu panels as is used on the overlay text area on the main page. Text colour is kept simple for readability and to minimise distraction.
-
-
F07 Contact Page - 'Contact Us'
-
The 'Contact Us' panel of the Contact page allows the user to send a message/give feedback to the company and if they want, sign up to the company mailing list to get discount codes and offers. The user is asked to provide their name and email address when sending a message. By default, the option to join the mailing list is set to 'no' - to prevent them accidentally signing up for the mailing list and getting unwanted email. Sending the message will result in a new tab showing the results (at the moment the user is simply shown the formdump.codeinstitute.net page with the data they submitted displayed)
-
-
F08 Contact Page - 'How to Find Us'
-
The 'How to Find Us' panel of the Contact page gives the user an interactive google map showing the location of the company along with details on full address, phone number and administration email address in large font to make it easily readable. By clicking the 'View larger map' link the user can go to the google maps site for the address - this opens in a separate tab to allow ease of navigation.
-
-
How these features support the User Stories
- The User Stories in the User Experience (UX) part of this document are numbered and categorised into groups A (first time visitor), B (returning visitor) and C (frequent visitor). The existing features are listed above as F01 to F08. Below is a traceability matrix cross-referencing the user stories with the features, illustrating which features support which stories :
-
Company Timeline
- A 'Company Timeline' page could be added to provide more information on the evolution of the business for users who would like to know more about the origins of the company, its ethos and its involvement with the community.
-
Navigation bar improvements
- The functionality of the navigation bar could be extended to make it "sticky" so that it would be available to the user without scrolling.
- A hamburger menu could be implemented to save space on smaller screens.
-
- The hero and large background images have been chosen because they are eye-catching, fresh and bright. The citrus and light pastel colours in the images were chosen to help convey a sense of energy, health and freshness. The images depict fruit to align with the main business goal of selling juices and smoothies and were chosen for their "simplicity" (- e.g. a single type of fruit or repeating theme) to help keep the site clear and easy to use.
-
-
A citrus/pastel palette was chosen to convey a fresh, energetic mood. The colours picked were inspired by a palette from Lily Bug Design
-
-
- Google Fonts were used to import Lato and Oswald fonts into styles.css. These were chosen as they work well together and have a simple, unembellished, modern feel that is easy to read.
-
-
- Google Fonts: was used to import the 'Lato' and 'Oswald' fonts into the style.css file which are used on all pages of the project.
- Font Awesome: was used to add icons for aesthetic and UX purposes.
- Git: was used for version control by utilising the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub: is used as the respository for the projects code after being pushed from Git.
- Microsoft Paint 3D: was used for resizing images and editing photos for the website.
- Balsamiq: was used to create the wireframes during the design process.
-
-
result for index.html
-
result for menu.html
-
result for contact.html
-
Full validation results are available on github here :
-
-
-
result for styles.css
The warnings are due to 1) import of the Google fonts and 2) a webkit extension for Safari support of the flip-card effect used on the home page.
-
Full validation results are available on github here :
-
- Testing has been carried out on the following browsers :
- Chrome Version 90.0.4430.212 (Official Build) (64-bit)
- Firefox Version 88.0.1 (64-bit)
- Edge Version 90.0.818.62 (Official build) (64-bit)
- Safari on macOS Catalina (Safari Version 14.0.3)
-
The below table details the test cases that were used, the results and a cross-reference to the Feature ID that each test case exercised (click to open iamge):
-
My mentor reported an issue with the "Send Message" button when viewed on an iphone during a review meeting. Neither of us has since been able to re-create this using the browser dev tools but I am adding an image of the issue here for completeness :
-
In the GitHub repository, navigate to the Settings tab, then choose Pages from the left hand menu
-
From the source section drop-down menu, select the Master Branch
-
Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment
-
Any changes pushed to the master branch will take effect on the live project
The live link can be found here - THRIVE Juices and Smoothies
- Go to the https://github.com/elainebroche-dev/ms1-thrive repository on GitHub
- Click the "Code" button to the right of the screen, click HTTPs and copy the link there
- Open a GitBash terminal and navigate to the directory where you want to locate the clone
- On the command line, type "git clone" then paste in the copied url and press the Enter key to begin the clone process
- Content on the menu page was loosely based on menus on Jump Juice Bar
- All other content was written by the developer
- Code on how to do the fade-in of the hero image came from information on this page : CSS Image fade-in tutorial
- Code on how to do a rounded button as seen on the Home page was based on code on : W3Schools Rounded button tutorial
- Code on how to do the flip-card effect on the Home page was based on example code on : W3Schools Flip card tutorial
- Code on how to include google map with marker was based on code from this site : How to embed Google Map
- Code on how to implement flex boxes was based on instructions from YouTube Flexbox Tutorial
-
The colours used were based on a citrus/pastel palette from this website : Lily Bug Design - Colour Wall
-
The icons in the header, footer and on the back of the flip-cards were taken from Font Awesome
-
The fonts used were imported from Google Fonts
-
All images were downloaded from Unsplash :
-
Main (hero/landing) image and background image photo by Bruna Branco
-
Avocado photo by Thought Catalog
-
Watermelon photo by Amy Shamblen
-
Sliced oranges photo by Eunique Deeann
-
- Thank you to my mentor Brian Macharia who gave me very good advice and feedback on how to plan and execute this project and who provided me with lots of pointers on resources to help select colours and images and well as resources to help with coding and testing.