Sensical.ie is a full stack, E-commerce, web application offering affordable, multi-sensory products and solutions to a growing and diverse target audience.
When it comes to creating multi-sensory environments, a custom-built, dedicated multi sensory space is always the optimal solution.
Where this is not possible, Sensical Multi-Sensory Solutions can provide a pop-up style multi-sensory experience at an affordable price.
Originally called Sensical 'Mobile Sensory Environments', the business was established in 2018, operating as a business-to-client sole-trader. Like most small enterprises the project was severely impacted by the global COVID-19 pandemic.
In an attempt to protect the venture from future existential threats, the business owner developed a new growth-through-diversification strategy for the enterprise.
Offering affordable, high-quality, sensory products that enhance the experience of sensory therapy service users, the Sensical.ie, e-Commerce Webstore will create a vital second revenue stream, for the business owners, as part of a more robust, synergetic business strategy.
Utilising the Django Full Stack Web Framework, Bootstrap, Stripe API for secure payments, and underwritten by the principles of User Experience design and Search Engine Optimisation, the Sensical.ie Webstore offers its customers an effortless, logical, and rewarding user experience.
Please use the link below to view the deployed project. If you wish to make a mock purchase, you can use the following details:
- Card Number: 4242424242424242
- Exp Date: Any (future) date using the format MM/YY
- CVN = any 3 digit number
- Postcode = any 5 numerals
Any payments made using an actual payment card will fail and the card will not be charged. No orders made will be fulfilled.
I established Sensical 'Mobile-Sensory Environments' in 2018 and operated the business as a sole trader. Throughout the rest of this project's documentation including the README, AGILE and TESTING.md files, I will refer to "The Business Owner" or "Site Owner" in an attempt to make the distinction between myself as a software developer and as the owner-operator of the Sensical enterprise.
'Sensical MSE' was borne out of the real-world need for low-cost multi-sensory rooms/experiences in the ever-changing landscape of disability care provision in Ireland.
Senso~1 Portable Lighting System in 2018
Having witnessed first-hand the scale and impact of sweeping deinstitutionalisation reforms within Irish state-run healthcare facilities, the business owner noticed an opportunity to provide patients and service users with affordable, sensory experiences.
Whilst wholeheartedly agreeing that the rights and dignity of residential service users should always be paramount, there are many issues that arise when deinstitutionalisation occurs.
There are two key negative consequences that affect the provision of Multi-Sensory Services as a result of this process.
-
The decentralisation of resources leading to limited access/availability.
-
Lack of funding for therapeutic activites due to increased cost of living
As mentioned above, there is no substitute for a purpose-built, well-maintained, fully stocked Multi-Sensory Room. Many residential care centers(institutions) would offer residents scheduled access to such a facility on a regular basis. Situated on campus grounds, the MSR would be wheelchair accessable and just a short distance from a place of residence. Moving service users into community housing severely removes or obstructs this access due to remote housing locations and transportation issues.
There are also issues with finding the funds, physical space, and expertise to build and maintain a high-quality, sensory room within community housing.
This is where Sensical Mobile-Sensory Environments can help. For a nominal fee, the pop-up sensory service can transform almost any room into a viable sensory space.
This is achieved by the following.
-
Bringing the Sensory Equipment to the service user at their point of need.
-
Setting up the space by safely blacking-out natural light and implimenting a custom-built, industry standard, sensory lighting system.
-
Applying relaxing sensory sounds and fragrances to suit the clients needs.
-
Supplying supplementary tactile items to enhance the service users enjoyment.
Benefits of the service include:
-
Continuity of service. Users can enjoy the familiarity of having a recognisible service even if they move house or use the service in different areas like day care or school.
-
No maintenance costs or storage issues. Sensical maintains its own equipment to the highest standard and removes it when you are finished.
-
No travel or dedicated space required. Sensical systems are set up within minutes.
-
No huge outlay or lengthy contract. Just pay as you go.
The original business was also aimed at customers who needed sensory services in their own private residences. The service proved popular with parents and children with autistic spectrum disorder and learning disabilities. Another way customers utilised the service was block-booking sensory equipment for private residential birthday parties, where one or more of the attendees could avail of a relaxing space should they become overstimulated.
Prior business model.
There are of course drawbacks to any business plan and Sensical is no different.
Firstly, the business model is, in essence, part of what many call 'the gig economy'. This means that the business will not produce revenue unless it is consistently finding new customers and providing the service on a regular basis.
Initially, this was not an immediate problem, as the business owner was highly motivated, technically minded, and had a huge wealth of knowledge and transferable skills from many years working as a successful touring musician.
Unfortunately, like every other small enterprise, Sensical MSE was badly affected by the COVID-19 pandemic. Due to restrictions on movement, entering residences, social distancing guidelines, and the closure of schools and day centers, the project ground to a halt in 2020.
As with many other startup owners during Covid, the year 2020 proved to be a time of reflection and creative restructuring for the owner operator of Sensical Mobile Sensory Environments.
I have outlined in the sections below the owner's new vision for the re-imagined company, and the role they hope this e-commerce website will have in making the new business commercially successful.
New business model.
Updated Business Strategy
Adopting the principles of concentric diversification, the business owner decided to expand the scope of the Sensical enterprise to include an online Webstore offering a range of affordable multi-sensory products that would appeal to it's established customer base as well as a more general target audience.
Growing the business in this way will provide the newly rebranded 'Sensical Multi-Sensory Solutions' with a crucial, additional revenue stream that will help the business stay profitable should any losses occur on the "Mobile Sensory Environments Hire" side of the business.
Such loss can occur when:
-
There are 'lock-down' situations in private residential/residential care settings such as localised outbreaks, epidemics or pandemics.
-
The Mobile Sensory Environment Hire service is fully booked.
-
The Mobile Sensory Hire Equipment is under repair.
The purpose of selling good quality, carefully selected, supplementary, products is to provide hygenic, affordable enhancements to a customer's multi-sensory experience, without the risk of making our 'Mobile Sensory Environments' equipment hire service redundant.
e-Commerce Strategy
As referenced above, the business owner does not want the 'Equipment Hire' side of the business to suffer as a result of sales from the e-Commerce store.
In order to mitigate against this, the Sensical.ie Webstore will only stock supplementary products that can enhance a customers enjoyment during a sensory session, but can in no way recreate the unique sensory experience of a custom Mobile Sensory Environment, when used in isolation.
As this article from January 2023 demonstrates, many parents and care providers are still wary of COVID (and other respiratory illnesses) community spread.
The Sensical.ie Webstore will allow customers to purchase their own sensory items, musical instruments, accessories and more, ensuring peace of mind that all items are sanitary. This also significantly reduces the hire services maintenance and cleaning budget.
The site should make it as simple as possible for the user to identify products they wish to purchase, identify their availability, suitablity, and aspect and also seemlessly complete payment of products they have added to their shopping basket via a checkout feature.
The Webstore should encourage users to create and account in order to make return visits even easier, by storing delivery information and a wishlist of possible future purchases to their user profile.
The Webstore should be easy to navigate and offer the user the ability to see products from specific categories, subcategories and availability.
The Website (outwith the Webstore) should also include information about the Equipment Hire side of the business, and provide links to the already established Facebook Business Page to encourage purchasing customers to also make a booking. This would increase the sites rating on popular search engines like Google and Bing by underlining the legitimacy of the site, its content and subject-matter. See below for how the business owner hopes the Webstore will synergise with the hire business and help maximise profitability.
Synergetic Approach
Whilst diversification for its own sake may prove enough of a reason for the introduction of the e-Commerce Webstore, there are other benefits that may also be advantageous. To demonstrate how this might work I have created the following persona:
Persona Name:
- Emma Kearns.
Age:
- 14
Job/Role:
- School Pupil
Status:
- Minor.
Other Information:
- Highly Functioning Autistic School Pupil.
- Loves water, marine life and the seaside.
- Struggles with concentration due to anxiety.
- Both parents are separated.
- Lives with Mum and sometimes stays with Dad.
Goals:
- To alleviate anxiety/stress
- To relax enough to think and perform tasks
- To enjoy my spare time.
Pain Point/Concerns:
- I love my Mum, She understands me more than anyone, but she never has time to take me to the beach or swimming anymore.
- I love my Dad, but I feel like there's no relaxing space for me when Mum is on nights and I stay over at his house.
- I wish I could take my water basin with me when I visit the sensory room at the solas centre, but I'm not allowed.
- I love listening to the sea in seashells I find at the beach, but mum says they're too dirty to bring home.
Likes/Dislikes
-
I love water, the sea and the ocean. It helps me relax just thinking about it.
-
I dislike loud noises and have a phobia of spiders.
Sensical Multi-Sensory Solutions could, hypothetically, provide Emma with a relaxing, yet stimulating underwater-themed sensory experience whether she stays with her Mum or Dad. When liaising with hiring customers, the business owner will conduct a thorough interview and determine which elements of their technical inventory would be best suited to create the perfect sensory environment.
It is at this stage however, that this particular customer and her parents could be directed towards the Sensical.ie Webstore. Emma likes to listen to the sound of the ocean, but Mum is worried about hygiene? Well the Webstore currently have an 'Ocean Drum' in stock. An 'Ocean Drum' is a traditional percussion instrument that replicates the sound of the ocean in the palm of your hand... and it has a wipe-clean hygienic surface.
Should the Kearns family purchase such an item, plus say perhaps a bubble-tube lighting fixture and a heavy-duty blackout blind, then not only will the Webstore generate revenue in the short term, but the Hire service will no longer have to load those items the next visit during setup, saving the customer time and providing better value for money. (Less time filling and emptying bubble tubes means more time enjoying the Sensory Environment)
When developing real-world business relationships like this, it will inform the business owners decisions when purchasing future products to sell in the Webstore. A business plan with its own in-built market research strategy.
I developed the following problem statement to refer to during development.
"To help facilitate the provision of sensory services and products via the most synergetic approach possible, for the mutual benefit of both the customer and business".
I'm aware that problem statements like this shouldn't really incorporate the well-being of the business, but I have decided to include it here due to the simple fact that it is the only business of its kind in Ireland and the experiences and benefits it can offer to its service users and customers depends entirely on its commercial success.
Sensical.ie is aimed at providing existing service-users of Sensical Multi-Sensory Solutions and new customers with the ability to purchase supplementary sensory items to enhance the customer's enjoyment of any sensory environment. The website is specifically aimed at users who have recently moved from residential care homes to community houses where there is a deficit of therapy provision due to the lack of centralised resources.
-
Users who with disabilities who live in community housing and have no access to holistic therapies.
-
Users who are relatives of people with disabilities who live in community housing and have no access to holistic therapies.
-
Users who are parents of children with autistic spectrum disorder or intellectual disabilities.
-
Private residential users who wish to use Sensical Multi-Sensory Solutions equipment hire services for a special event or party.
-
Users who are existing customers of Sensical Multi-Sensory Solutions equipment hire service.
-
Users who wish to purchase products anonymously.
-
Users who wish to learn more about Sensical Multi-Sensory Solutions.
-
As a General User, I want to navigate through the site easily and intuitively, regardless of the screen size of my device, in order to access the sites features and information.
-
As a General User, I want to access a simple, logical, overview of the site helping me to understand its purpose and features without the need for registration.
-
As a General User, I want the site to be easy to read, consistent in design, and pleasing to the eye, so I can enjoy a positive user experience.
-
As a General User I would like to be given visual feedback to help me navigate through the site.
-
As a Purchasing Customer User, I want to see a selection of products I might want to purchase.
-
As a Purchasing Customer User, I want detailed information about individual products that will inform my purchase.
-
As a Purchasing Customer User, I want to easily search through lists and categorise products in order to find product I might like to purchase.
-
As a Purchasing Customer User, I want the ability to filter search results that display only those items that are available to purchase immediately.
-
As a Purchasing Customer, I want to view products and make purchases using mobile, tablet or desktop devices.
-
As a Purchasing Customer, I want to view my shopping basket items on the checkout page prior to payment, and add or remove items from the checkout page.
-
As a Purchasing Customer User, I want to create a user account, so I can make and manage my purchases and view a list of previous purchases.
-
As a Purchasing Customer User, I want to verify my user account via social media, so I can log register my account more easily.
-
As a Purchasing Customer User, I want to verify my account by email in order to improve the security of my account and receive feedback that the registration process was successful.
-
As a Purchasing Customer user, I want my payment to be handled safely and securely in order to protect my personal information.
-
As a Purchasing Customer User, I want to access a virtual shopping basket, so I review items before I purchase them.
-
As a Purchasing Customer User, I want to add items to a virtual shopping basket.
-
As a Purchasing Customer User, I want the ability to remove items from my virtual shopping basket.
-
As a Hiring Customer User, I want to easily access the hiring section of the site.
-
As a Hiring Customer User, I want to access an external booking page, so I can inquire about a booking.
-
As a Hiring Customer User, I want to access information about the 'Mobile Sensory Environments Service.
-
As a Hiring Customer user, I want to request custom hiring packages to match my specific needs.
-
As a Site Owner, I want to provide the user with the ability to access the Facebook business page to inquire about hiring our Mobile Sensory Equipment.
-
As a Site Owner, I want to upload items for sale via the site’s online store.
-
As a Site owner I want to upload testimonials that relay positive customer experiences that will encourage future customers.
-
As a Site owner I want to promote my site via social media and Search engine optimisation.
-
As a Site Owner, I want to view and remove custom package requests in order to provide a quote for hiring customers and organise them.
-
To make Sensical.ie a viable solution to an existing problem.
-
To make the purpose of the app obvious to the user.
-
To provide users with an enjoyable, intuitive and easy to use interface.
-
To provide users with a positive user experience, underwritten by feelings of familiarity, confidence and security.
-
To provide a positive user experience whilst protecting user data.
-
A Secure, Full Stack, e-Commerce web application will be created.
-
The Webstore will be intuitively designed and use standard e-Commerce business practices to promote uninhibited purchases and multiple return visits. (Three-click rule, wishlist, user profiles etc.)
-
The Webstore will only sell products that are supplementary to the 'Multi Sensory Environments'(equipment hire) business within the umbrella of Sensical Multi-Sensory Services.
-
The Site will also include links, information and media about the 'equipment hire' business.
-
Any products and information featured will be displayed to the user logically and informed by planning and research.
-
The app will be created following the principles of user experience design.
-
The app will be simple to use and provide visual feedback for all users.
-
The app will contain links to relevant external websites and contain metadata keywords to improve Search Engine Optimisation.
Sensical.ie Database Schema.
The above image shows the Data Schema for the Sensical.ie project and the relationships between the models.
The e-Commerce store has 4 main models, 2 product related and 2 purchase related.
A unique feature of the product model is the for_sensory_needs data point, where the site owner can add prescriptive phrases that will result in the displaying of informative text icons in the DOM. (Rainbow for Autism etc)
The Product Wishlist Data is also stored in this model. I stored this data point here as it seemed the simplest and less verbose way of coding the wishlist functionality.
The Client Testimonial, Packages are for administrative users(site owners) only and facilitate the creation and maintenance of Testimonials and Packages within the site.
The Package Request model allows users to submit a request for a custom sensory hire package through a simple contact form.
Sensical.ie Data Flow.
The above example is a simplistic overview of how the website works. The ability for visiting/unregistered users to make purchases is important, so the flow is unrestricted in that respect. The storage of delivery information and purchase history to a registered user's profile however should encourage future visits and make the checkout process even simpler. The wishlist functionality will also encourage future transactions, affording users the chance to save desired out-of-stock items for a later date. The site owners will benefit from the ability to promote the Equipment Hire side of the business by adding and editing heartfelt testimonials and tempting package deals.
Sensical.ie was developed using the Agile Development Methodology. A detailed overview of the Agile process is available here.
I designed wireframes for reference as I began to develop the application. They are instructive as to how I wanted the app to display across multiple device widths. I deviated slightly from the original designs as the overall style became more refined. For example, to give the site a more dynamic look on some of the information pages I staggered the order of the elements using Bootstraps order classes.
Staggered Elements
Here are the wireframes:
Home Page Wireframe
Products Page Wireframe
Product Detail Page Wireframe
Basket Page Wireframe
Checkout Page Wireframe
About Page Wireframe
Packages Wireframe
Testimonials Wireframe
Wishlist Wireframe
Hire Wireframe
Due to the scope of this application and how similar many of the pages are, I thought it was unnecessary to include every single page here. Like the auth pages for example.
Sensical.ie Color Scheme
The color scheme of the site was derived from marketing material submitted by the business owner. The Mobile Sensory Environments side of the business still had an excess of flyers, posters and leaflets remaining so it seemed prudent to continue with the original color scheme used throughout most of the business's promotional media.
Sensical.ie Color Scheme
After some consideration for users who may have light sensitivity issues, I used a dark blue background almost as a default "dark mode" for most of the site. The general tone of the color scheme is almost medical, and this is reflected in the pastel green and pink shades used to indicate stock status by framing the borders of product cards. I feel the color scheme works well. It reflects the purpose of the business and looks professional enough without taking itself too seriously.
-
There are two fonts used throughout the application.
-
Assistant: A strong, elegant font for heading elements adopted from the business's promotional media.
-
Helvetica: A clear, familiar and accessible font is used in paragraph text.
The fonts were imported to the project head element.
-
The navbar is present across all pages of the app and sticks to the top of the page as a user scrolls downwards, providing an optimal navigational experience.
Sensical.ie Nav Bar
The navbar contains the business logo which links back to the homepage when clicked. There is also a Search bar that allows users to query the 'products' database. There are three icon links in the upper right of the navbar that link to the user wishlist, user profile/ account management, and shopping basket features.
Sensical.ie Nav Logo
Sensical.ie Nav Search Bar
Sensical.ie Nav Links
The Menu Links icons have different behaviors that offer user feedback.
The My Wishlist Icon becomes animated when a user adds an item in their wishlist and stays animated as long as the wishlist has at least one item contained within it.
Sensical.ie Wishlist icon
The Basket icon has similar functionality and displays a red number when a user adds and item or items to their shopping basket.
Sensical.ie BAsket icon
The totaliser beneath the icon also informs the user of the total cost of their basket items.
The lower nav
Sensical.ie Main Nav Menu
The Menu Contains links to the Home, About, Hire, Packages, and Testimonials pages as well as the Products page and product Categorisation.
At smaller screen widths, the nav bar collapses into a burger-style dropdown menu to enhance user experience on mobile and tablet devices.
Sensical.ie Collapsible Menu
Although the delivery banner is not technically available across every page of the site, I've included it here as it felt like it belonged to the nav section of the project.
The Delivery Banner provides dynamic visual feedback to purchasing customers regarding a free delivery offer when users spend more than €50.
Delivery Banner
If a user adds a product to their basket the Delivery Banner Updates.
Delivery Banner
When the delivery threshold has been met by the user the banner changes to the following.
Delivery Banner
I included the Delivery Banner only on pages related to the e-Commerce side of the site as I felt it could free up a usable section of screen real estate for the information pages.
Sensical.ie Footer
The fully responsive footer is present across all pages of the site and contains two main sections.
The Upper Footer section contains the following features:
Located in the upper left section of the footer and centered on medium and small-sized screens. The footer contact area contains the business contact information, responsive links, and social media links. Each link opens in a new tab.
Sensical.ie Footer Contacts
Located in the upper-middle section of the footer and wrapping beneath the contact information links on smaller devices, the Footer Subscription Form and Useful Links section contains a Mailchimp subscription form and useful links that may be of some benefit to the user. External links enhance the Search Engine Optimisation of Sensical.ie and each link opens in a new tab.
Sensical.ie Footer Subscription Form and Useful Links
The Footer nav is located on the right side of the upper footer, centering on medium and small sized screens. The Footer nav contains links to the most prominent areas of the site as well as downloadable links to the privacy and terms & conditions policy documents of the company.
Sensical.ie Footer Nav
The lower Footer section hugs the bottom of each page of the site and contains a disclaimer and subtle color gradient that is evocative of LED strip lighting effect. Beneath the disclaimer is the Copyright and Developer information including social links that open in a new tab.
Sensical.ie Lower Footer
Sensical.ie Home Page
Home Page
- The Home page contains a high-quality hero video with clever heading text that is relevant to the business and informative to the user. The heading text has a shadow quality that allows it to maintain readability despite the dynamic background. I thought about using a nice blur filter here to make the text really legible, however, the business owner wanted the background to be clearly recognisable as a classroom, so potential customers would recognise the transformative power of the sensory equipment hire business. The hero video is strategically placed to allow some content to show from the base of the page, encouraging users to scroll further.
Sensical.ie Hero Video & CTA Buttons
- The call-to-action buttons provides the user with instant access to the two main data streams of the site. The first button, SHOP leads to the e-Commerce side of the application where the second button leads to the Hiring/Information side.
Sensical.ie Hero Video & CTA Buttons
- There are three 'Home Cards' That provide the user with information regarding the purpose and functionality of both the site and the business. The home cards are elegantly designed and contain images and links to the three main site areas.
Sensical.ie Home Cards
The Home Page is fully responsive across multiple device widths.
Sensical.ie Home Mobile
Sensical.ie Products Page
Products Page
- The Products Page features a sort selector at the top left of the page with a toggle switch that hides/displays unavailable products for the convenience of the user. Users can sort products by alphabetical order or by price.
Sensical.ie Products Page Sort Selector
- The Products page contains product cards that have a border color depending on the stock status of the item. If the product is in stock, the border color is a pastel green, and this changes to a pastel pink if the product is unavailable.
Sensical.ie Products Page Cards
- Each card contains an image inside an anchor element, that links to the product detail view of the item. There is a generous heading with the product name. They also contain the price of the item and the stock status to further inform the user. A stylised link with heart shaped fontawesome icon is available for users to add or remove items from their wishlist. The wish list link redirects to the login page for anonymous users. There are also two button elements on each card, one for adding an item directly to the user's shopping basket and another for accessing the product detail page. Each button has a style consistent with other clickable elements of the site and has an informative fontawesome basket or info icon.
Sensical.ie Products Lower Card
- The lower part of each card contains links for Site Admin users to edit or delete the product, either side of the product rating, which provides feedback to the user about the overall customer satisfaction rating of the product.
Sensical.ie Product Add
- At the base of the products page, there is a button that links to the product management page, which allows Admin Users to add new products. This button is not available to non-admin users.
Sensical.ie Product Management Form
- Admin users can add a product to sell via the store. The form will return errors if filled incorrectly and a placeholder image will be used for the product if an image is not uploaded.
Sensical.ie Product Detail Page
Product Detail Page
- The Product Detail Page contains more information about the product. In addition to its price and stock status, a larger image is available plus a sensory-needs indicator feature.
Sensical.ie Sensory Needs Indicator
-
This row of icons contains visual feedback to the user regarding the suitability of each item. The key for the feature is as follows:
-
The RAINBOW icon denotes this item may help people living with an autistic spectrum disorder.
-
The HANDS icon denotes this item may help people living with Tactile sensory needs.
-
The EYE icon denotes this item may help people living with ADHD.
-
The HEADPHONES icon denotes this item may help people with Auditory Sensory Needs.
-
The MOON icon denotes this item may help people living with Anxiety.
-
The LIGHTBULB icon denotes this item may not be suitable for people with photo-sensitive epilepsy.
The Site Administrator can attach each Icon to a product using the following keywords in the For Sensory Needs Form Field.
-
ADHD for ADHD
-
ASD for ASD
-
TOUCH for Tactile sensory issues.
-
AUDIO for Auditory sensory issues
-
RELAX for anxiety issues.
-
LIGHT for Photosensitivity issues.
-
The next noteworthy feature is the product quantity selector. This will allow users to add up to 10 of any given items at a time to their shopping basket.
Sensical.ie Quantity Selector
- As the business carries a very small inventory at affordable prices, it was important to the business owners to limit bulk purchases in this way, in order to properly expand, the company wished to reach as many different customers as possible rather than wholesale to just a few bulk buyers. This feature will be adapted in future iterations of the site, where the selector will feature only the amount of products available in stock at any given time providing feedback for the user and managing stock level issues at the point of sale.
At the base of the page the consistently styled Product Detail Buttons allow users to continue shopping or add the current product to their basket or wishlist.
Sensical.ie Product Detail Buttons
The Product Detail Page is fully responsive across multiple screen widths.
Sensical.ie Product Detail Responsiveness
Sensical.ie Wishlist Page
Wishlist Page
Sensical.ie Wishlist Success
- Whenever a registered user adds a product to their wishlist, they are informed by a success message. If the wishlist contains many items the wishlist messages container allow the user to scroll through the items on the message container itself. Users can also directly access the wishlist from the message container. A users wishlist, and the items within it are saved for the users convenience even if they log out or refresh their browser.
Sensical.ie Wishlist Items
The Wishlist Page itself is elegant in its simplicity and maintains many of the design features consistent with the rest of the site. Including the pleasing contrast between the vibrant foreground images and the background and the familiar looking 'Find More Products' 'Add to Basket' and 'Remove Form Wishlist buttons. The Move to Basket feature is designed to maximise convenience for user. Adding a product to the basket from the wishlist does not remove it from the wishlist. This is entirely intentional, as the business owners insist that many users will be clients or the carers or parents of clients that will often have to re-order products because of damage or wear from overuse, so having all your favorite products in the one place will be of maximum benefit to users in these situations.
Sensical.ie Wishlist Responsiveness
The Wishlist Page has been tested across many screen widths and is fully responsive.
Shopping Basket Page
Sensical.ie Shopping Basket Page
Shopping Basket Page
Sensical.ie Shopping Basket Items
- The basket items section contains horizontal product cards each displaying a thumbnail image, name, price and quantity of each basket item. Every card has its own sort selector and update button allowing users to modify their basket without having to return to the products page. There is also a feature that allows the user to remove the entire quantity of an item from the basket if they desire. I think this page justifies the intentional design choice to have a darker background, as the colorful products really pop out in contrast to the neutral backdrop.
Sensical.ie Shopping Basket Summary
- The shopping basket summary section contains an efficient overview of the cost of the user's basket items. The summary section allows users to return to the products page or continue to the checkout to complete their purchases.
Sensical.ie Shopping Basket Responsiveness
The Shopping Basket Page is fully responsive across multiple screen widths.
Sensical.ie Checkout Page
Checkout Page
Sensical.ie Checkout Page Summary
- The Checkout Page has a heading summary that carries the total cost information over from the basket page.
Sensical.ie Checkout Page Items
- The Checkout page also has a similar items list to the basket page, but with truncated features. This was purposely designed to not only differentiate the Checkout Page from the Shopping Basket Page but to also discourage users from changing their minds and removing items from their basket at the last minute.
Sensical.ie Checkout Delivery Accordion
The Checkout Delivery Accordion contains a user's delivery information in a handy dropdown accordion.
The delivery information is prepopulated in the form if a user has it saved to their profile. There is also the option for registered users to save their information to their profile if they have not already done so.
Sensical.ie Checkout Payment Details Section
At the base of the checkout page, there is a form input for a user to enter their credit/debit card. The area contains a field for the users card number, a 'submit order' button for users to complete the order and a back to basket button for users to return to the shopping basket without submitting the order. There us some warning text that provides feedback for the user regarding how much their card will be charged. I have included some out size fontawsome card icons here. I think the globally recognised financial institutions would inspire customer confidence in the site and promote multiple visits and purchases.
Also included in this section is a link to the terms and conditions of the site, to protect the business against contingent liabilities.
Sensical.ie Checkout Loading Modal
When a payment is submitted a spinning logo and feedback message fills the page as the request is being processed by the Stripe API. The modal is important as it prevents the user from interacting with the site during the payment process whilst keeping them informed that the payment is being processed.
Sensical.ie Checkout Success Page
If an order is successfully completed, the user is notified, and returned to the checkout success page. This page provides the user details of their purchase and is backed u to their user profile if they have one. There is a link to return to the users profile page if they are registered users and a link back to the home page if they are not.
Sensical.ie Checkout Responsiveness
Like the rest of the site, the checkout page is fully responsive across many device widths.
Sensical.ie hire Page
Hire Page
-
The Hire page is a static page within the site that links to information and resources users require to make a booking. The hire side of the business, known as "Mobile Sensory Environments" is managed via the business owners Facebook business page.
-
There are links to the Facebook page from the Hire Page that open in a separate tab. There is also a link that redirects the user to the packages page, where they can learn more about the hire packages on offer.
Sensical.ie Hire Page
- The Hire Page of Sensical.ie is fully responsive across all devices and is consistent in its design.
Sensical.ie Packages Page
Packages Page
Sensical.ie Package Manegment Options
- Package Management Options At the top of the Packages Page there are links to the 'Add Packages Page' and the 'Package Requests Page'. These options are only available to Admin users.
Sensical.ie Package Card
- Beneath the Package Management Options Buttons the current packages offered by the Equipment Hire Business are displayed. Any packages added by Admin Users will be displayed here. Each Package has a bordered image and a Package Detail Card that contains information regarding the equipment and items provided, as well as the session duration and price. There is a discount banner that displays a percentage discount available to first time package customers above the package card buttons. If the user has Admin level authoristation, the buttons will allow the Admin to either update, or delete the package. If the user is a non-admin registered user or an unauthenticated user, the card will display a button that externally links to the Sensical Facebook Business Page. There is also a button to 'Request a Custom Package'. Each Package Card and image are staggered using the Bootstrap 'order' class to make the page appear more interesting and dynamic.
Sensical.ie Package Back Button
- Beaneath the stylish Hire Packages is a button that allows the user to link 'Back to About Page'
Sensical.ie Add Package Form
- Admin users can add a new Hiring Package via the aforementioned 'Package Management' section at the top of the page. The Admin can submit the form and will be returned to the packages page if the form is valid. If an image is not provided within the upload, a placeholder image will be used instead. The placeholder can be replaced with an image at a later time or date.
Sensical.ie Package Request Form
- Non admin users can request a quote from the business via a Package Request Form. The form has instructive placeholder text providing feedback for the user on how to use the form. The user submits the form with by adding their Name, Email Address and Package Requirements. They are then informed that the business will be in touch with a quote in due course.
Sensical.ie Package Request Success
- Site administrator users can view a list of any package requests via the Package Management 'view package requests' button at the top of the Package Requests Page.
Sensical.ie Packages Responsiveness
The Packages pages are fully responsive across most device widths.
Sensical.ie About Page
About Page
Sensical.ie About Video
- The upper about page features a demonstration video that informs the user about the equipment hire side of the business. The video is framed inside a white border and plays automatically when the page loads.(Autoplays on desktop only) Accompanying the video is a text box featuring more information about the history and direction of the business.
Sensical.ie About Webstore
- Underneath the about video, is an image and info card providing information to the user about the business's new e-Commerce webstore.
Sensical.ie About Hire
- Further on down the page there is an image and more information about the equipment hire side of the business.
Sensical.ie About Contact Banner
Below the about video, images and information cards, there is a page-width banner element that contains extra large fontawesome social media, email and phone logos. Each logo contains a link for users to contact the business, with all external resources opening in a new tab.
Sensical.ie About Testimonials Carousel
-
The last feature of the about page is an attractive carousel, that contains three testimonial text elements which cycle automatically. A user can control the carousel using the intuitively placed left and right arrow buttons provided. A position indicator strip is also available to provide visual user feedback.
-
Below the Carousel is a button that allows the user to view all the testimonials of the site, not just the first three.
Sensical.ie About Responsiveness
The about page is fully responsive across most device widths.
Sensical.ie Testimonials Page
Testimonials Page
Sensical.ie Testimonials Page
- The Testimonials page displays a sylised list of testimonials for to inform the users hiring decisions. The top of the page contains a button available to Admin users only to add a testimonial to the list. Each testimonial consists of information in the form of quoted text, that provides a positive appraisal of the business and a supporting image. The testimonial text and images are staggered in a similar way to the about and packages pages, maintaining a consistent site-wide design. Each text card contains links for Admin users to Update or Delete a testimonial. If the user is not an Admin user, a 'Make Enquiry' button is displayed that relays the user to the external Facebook business page, which opens in a new tab.
Sensical.ie Testimonials Page
- Beneath the last card in the list is a button to returns users 'Back To (the) About Page' when clicked.
Sensical.ie User Profile Page
- The user profile page contains the saved delivery information and order history of a logged-in user or admin. The Information is neatly arranged in a classy Bootstrap accordion element that closes one section when the other is opened. Users can open delivery data form and edit their stored data. The page also contains a button that allows users to return to the products page.
Sensical.ie Toast Messages
- Toast messages are used to inform the user as they interact with the site. Toast messages appear on the top right of the screen and are customised to show information relevant to each action or submission by the user.
Sensical.ie Toast Messages
Sensical.ie Authentication
- Sensical.ie's user authorisation features allow users to sign up for an account if they can provide a valid, verifiable, email address.
Sensical.ie Authentication
Once they have registered, users can log in and out of the site to enjoy extra benefits, such as user wishlist access and the ability to store delivery information to their user profile.
Sensical.ie Authentication
The Sensical application has been designed with one eye on the next several iterations of the site.
The future-proof design of the site will allow the future development of Stock Level Quantity Selectors. This feature will become more useful as the business grows and was unnecessary for the first MVP version of Sensical.ie, especially as the Webstore has such a small inventory, but in the future the current Quantity selectors present in the product detail and shopping basket pages can be adapted to only display the qty of each item available to the user at any given moment. An example of this functionality can be seen at the checkout page of this website.
Another cool feature to mirror the Package Request option of the current site would be to include a number of custom product packages where users can take a short survey of their needs and be directed to a suitable package within their budget that includes a choice of products included in the promotion. The resulting product packages would provide better monetary and emotional value for the user.
To manage the hiring side of the business in the same place as the Webstore would result in much more efficient business practices further synergising the e-Commerce and Equipment Hire ends of the business. Creating a fully synergetic approach here, where the company can sell products and hire equipment from the same place to the same, captured audience at the same time would be truly optimal for the growth and expansion of the enterprise.
The app was conscientiously tested during and post development. The testing results for Sensical.ie are available here.
Sensical.ie was deployed to Heroku during the early stages of development. I wanted to make sure the database and static files were all accessible from the beginning of the project, so I wouldn't have to worry about deployment issues closer to releasing the app.
The live site can be viewed here:
Early Deployment Screenshot
To create a managed Postgres database go to ElephantSQL and Signup/Signin to your account.
- Click on 'Create New Instance'.
ElephantSQL
-
Name your database, choose the 'Tiny Turtle' payment plan and click 'Select Region'.
-
Choose your region and then create the database.
-
In the instances page, click the name of your chosen database.
-
In the 'details' section of the following page copy the Postgres url.
ElephantSQL
You can now use this URL when linking the database to the project's GitHub repository.
-
Signup/Signin to Heroku.
-
Create a new app from the Heroku dashboard.
Heroku Deployment
-
Give the app a unique name and enter the region of operation then click 'create app'.
-
From your newly created app choose the settings tab and navigate to 'Reveal Config Vars'.
-
Paste the ElephantSQL Database URL into the DATABASE_URL environment variable.
-
Create an env.py file in the root directory of your Django project. (At the same directory level as requirements.txt and manage.py)
The file should look like the image below, with the os library imported at the top of the file.
env.py
-
Paste the ElephantSQL url for the DATABASE_URL value.
-
Add the following libraries to the settings.py file: Import Path from pathlib, dj_database_url and os.
-
Create a secret key to replace the insecure SECRET_KEY variable in the settings.py file. Link the secure key in env.py to the settings.py SECRET_KEY variable with the following code: SECRET_KEY = os.environ.get('SECRET_KEY')
-
Add your secret key to HEROKU Config Vars.
-
Link the DATABASES value to the env.py file with the following code: DATABASES = { 'default': dj_database_url.parse(os.environ.get('DATABASE_URL')) }
-
You can now migrate the app models to the new database using the command: "python3 manage.py makemigrations" then Python3 manage.py migrate.
The final part of setting up the env.py file concerns static files. To manage the static files for the project execute the following steps:
-
Signup/Signin to Cloudinary
-
Copy the 'cloudinary url' from your account dashboard and paste it as the CLOUDINARY_URL value in env.py.
-
Add the CLOUDINARY_URL to the Config Vars in Heroku.
-
Also Add the DISABLE_COLLECTSTATIC Key with the value of 1
-
Change the static file settings in Django by altering the following.
-
The STATIC_URL
-
STATICFILES_STORAGE
-
STATICFILES_DIRS
-
STATIC_ROOT
-
MEDIA URL
-
DEFAULT_FILE_STORAGE
The STATIC section of settings.py should resemble the following image:
_STATIC settings.
- Change the TEMPLATES 'DIRS' Setting in Settings.py to [TEMPLATES_DIR] TEMPLATES configuration for the project should resemble the following image:
_TEMPLATES Setting in settings.py
-
Create 3 new folders for static files, media files and HTML templates. (At the same directory level as requirements.txt and manage.py.)
-
Create a Procfile(capital P) and add the following: web: gunicorn NAME_OF_THE_APP_GOES_HERE.wsgi
-
Add the app name and herokuapp.com to the list of ALLOWED_HOSTS.
-
Add and commit the changes to GitHub.
-
Remove DISABLE_COLLECTSTATIC from Heroku Config Vars
-
Deploy via the 'Deploy Main Branch' button in the Deployment page of HEROKU.
-
If you receive an success message, you can click the link provided to view the app in the web browser.
-
Create a google email account with a name relevant to you project. After you login, navigate to accounts settings, then click on Other Google Account Settings
-
Navigate to accounts then import and click on other account settings
-
In the signing into Google section, activate 2-step verification.
-
Once verified click on app passwords, select Other as the app and give the password a name, for example Django
-
Click create and a 16 digit password will be generated, copy this 16 digit password
-
Add the following Email settings to the settings.py file
-
Email Settings -
Add EMAIL_HOST_PASS and EMAIL_HOST_USER variable, password and email address to your Heroku Config Vars
-
Open a Stripe Account
-
Log in and click on 'Developers
-
_Stripe _ -
Navigate to API keys
-
Copy the the publishable and secret keys
-
_Stripe _ -
Add the following in Settings.py
-
_Stripe _
Back in the Developers section on Stripe stripe navigate to webhooks and click create endpoint.
Create a webhook for all events in Stripe and save the key
_Stripe _
- Add the webhook key to your environment variables and test using the Stripe events log.
If you want to make an independent copy of the Sensical.ie GitHub repository please follow these steps:
-
Signup/Signin to GitHub.
-
Follow this link to the Sensical.ie repository: https://github.com/davidcalikes/sensical.ie
-
Click on the 'Fork' button at the top-right of the page.
Forking the repo
- A copy of the Sensical.ie repository should now be available in your list of GitHub repositories.
Forking the GitHub repo will not affect the original codebase.
If you want to contribute to the Sensical.ie project, You can clone the Sensical.ie repo. A clone creates a linked copy of the repository that will run on a local machine which can then be synchronized with the original repo. To clone Sensical.ie please follow these steps:
-
Signup/Signin to GitHub.
-
Follow this link to the Sensical.ie repository: https://github.com/davidcalikes/sensical.ie
-
Click on the <> Code button near the top-right of the page.
-
Access the 'Code' menu from above the main directory window and choose a preferred cloning option by selecting either HTTPS or GitHub CLI. An SSH key is required should you prefer that option.
-
Press the overlapping squares icon to copy the link to the repository.
Cloning the repo
-
Open the code editor of your choice.
-
Create a new working directory for the cloned repo.
-
Use the 'git clone command and paste in the copied link.
-
Press enter and the repo will be cloned locally to your machine.
-
Setup and activate your local development environment.
-
Install the project requirements using the command -- pip3 install -r requirements.txt
-
Create a Heroku app for your Clone and add the appropriate Config Vars using the aforementioned instructions.
-
Create an env.py file that includes the appropriate DATABSE_URL, SECRET_KEY and CLOUDINARY_URL settings. You will also need to include the STRIPE_PUBLIC_KEY, STRIPE_SECRET_KEY, STRIPE_WH_SECRET, EMAIL_HOST_USER and EMAIL_HOST_PASS variables.
-
Add 'localhost' to ALLOWED_HOSTS in settings.py
-
Use the command -- python3 manage.py makemigrations followed by -- python3 manage.py migrate to setup a local copy of the project database.
-
Use the command python3 manage.py runserver to run the app on a development server.
Sensical.ie was developed using the following languages, frameworks and dependencies.
-
Python (Version 3.8.11) The requirements.txt file contains all the projects Python packages.
-
Django was the main python framework used while developing Sensical.ie.
-
Django AllAuth was used for user account management/authentication.
-
Bootstrap (Version 4.6.2) was used to rapidly develop the layout, responsiveness and core frontend elements of Sensical.ie.
-
ElephantSQL was implemented as the Postgres, database management system for Sensical.ie
-
HTML was used in developing the templates for Senscial.ie.
-
CSS was used to add custom styling to the site, overriding many of Bootstrap's core style rules.
-
JavaScript was used to implement interactivity and manipulatethe DOM from the front end.
-
Font Awesome Instructive icons were used to provide visual feedback in many areas.
-
Heroku. Sensical.ie was deployed to the cloud-based hosting service Heroku.
-
Stripe API. Sensical.ie utilised Stripe to manage secure payments
Gitpod was used as the primary development environment for this application. As the scope of this project was considerable from the beginning of development, I thought it would be wise to have a system in place that supporting devs could access remotely.
The version control and storage system used for Sensical.ie is Git and GitHub respectively.
I created a flowchart during the planning of Sensical.ie using Lucidchart.
I used DrawSQL to create the database schema during the planning stages of the project.
I am moderately skilled at using Photoshop and created many of the graphics, page-heading images and logo's on display throughout the site.
Forking the repo
For resizing larger image files
For converting images to nextgen web formats.
For batch converting product images. https://redketchup.io/bulk-image-resizer
I used Balsamiq to create wireframes for the project.
I used Favicon generator to make the Sensical.ie favicon
-
Diffchecker -- To compare code in a web browser when searching for bugs and subtle changes.
-
Grammarly -- To check the spelling and grammar of the text content of Sensical.ie and its documentation.
-
Policymaker.io -- To create policy documents for the site.
The following are images, to which I personally hold the copyright.
Sensical.ie Image
Sensical.ie Image
Sensical.ie Image
Sensical.ie Image
The error page image was downloaded from Adobe: Credit: teerapon - stock.adobe.com: Copyright: ©teerapon - stock.adobe.com
All product images are from Amazon.com: This site will never be developed into a site for commercial use, and is only for assessment purposes.
The warning logo used was downloaded from: https://www.subpng.com/png-v5sg3x/download.html
All other images used throughout the development of this site were downloaded from Pexels.com and are free to use.
Many elements of the the e-commerce part of this project have been adapted from the Code Institute's "Boutique Ado" Code-through Project.
The principles of design for the Shopping Basket Item Counter is loosely base was from this Youtube video.
I was inspired by both this Article on Stack Overflow and this Youtube video when designing the Availability Toggle Feature.
This page helped me move the submit button outside the form element. https://davidwalsh.name/submit-button-outside-form
When converting the Hero Gif image to video I referenced this article from Codepen
To Maintain a consistent style, I referenced this article when learning how to use fontawesome icons in form submit buttons.
I followed this excellent wishlist tutorial when adding the wishlist feature to the e-Commerce webstore.
The referenced the following articles when using cloudinary's backend uploader feature.
-
https://cloudinary.com/documentation/django_image_and_video_upload#server_side_upload
-
https://alphacoder.xyz/image-upload-with-django-and-cloudinary/
Sensical.ie Cloudinary Documentation
Sensical.ie Cloudinary Documentation
I am hugely thankful for the time my wife has afforded me to work on this project and the course overall. Thank you, Michelle! (It's Done... YAAAS!)
Having a Dad who is studying cannot be fun. I am fully aware we have a whole year of Monkey Islanding and Football and walks to catch up on.
I'd like to thank Irene for facilitating the Code Institute Cohort during this project.
Thank you, Kasia, for all of your guidance and wisdom throughout my time studying with CI.
There's a point in the Joseph Campbell Monomyth "The Hero's Journey" called 'Meeting with the mentor', where the hero of a given quest, (Harry Potter, Frodo, Luke Skywalker etc.) meets a mentor figure (Dumbledore, Gandalf, Obi Wan) and receives sage wisdom and 'supernatural aid' that helps them set about their adventures. 'Supernatural aid' really is the only true way I can think of describing the staggering amount of support and mentorship Richard has afforded me throughout the duration of this course. You really went above and beyond mate. Thanks for everything.