Mindful Drinking Movement - Club Soda MVP 2.0
The Club Soda Guide has been created to help make a world where nobody has to feel out of place if they're not drinking.
The guide is for anyone who wishes not to drink, whether that's a little or all of the time. We call this mindful drinking. This group of people we have broadly called consumers, however there are many subsets of consumers that we will delve into in more detail in the future.
To help provide mindful drinkers with information on low / non alcoholic drinks and places where they can enjoy them we are also focussing on drink brand representatives and venue managers. Not forgetting, the team at CS HQ who will run and maintain the site.
Here are the user personas for these groups:
The site acts as a place of discovery for consumers to find low / non alcoholic drinks and venues that serve them. It will also provide brands and venues with the opportunity to connect and understand their consumers better. We hope this will drive a community that owns the mindful drinking movement.
The site is live at https://www.clubsodaguide.com
The staging site, for testing of new features is at https://club-soda-guide-staging.herokuapp.com
In the following guide, all URLs should be appended to whichever site you are
using from above, either the live or staging site.
This means that when you see /search/drinks in the user guide for example,
you can use either
https://www.clubsodaguide.com/search/drinks or https://club-soda-guide-staging.herokuapp.com/search/drinks .
In the current iteration of the app, venue managers can sign up and add their venue.
To sign up, visit /users/new, or click on the 'List a Venue' button on the top left of any page.
From there, you will see a sign up form, enabling venue managers to sign up with an email address and add their venue and its details (email address, post code and venue type are mandatory fields).
After you sign up, you'll be taken to the venue's listing page where you can add more details to your venue.
Clicking add description will take you to the edit view of the venue where you
can add new details or edit existing ones.
If you wish to add paragraph breaks to the description of a venue use <br> to
create line breaks. One <br> starts a new line, two <br> creates one line gap:
http:// or
https:// to be valid.
If you own the venue listing, you can also add/edit the drinks a venue stocks. You can do this by scrolling to the bottom of the venue page and choosing the 'Add/Remove Drinks Stocked' card. You can then select the drinks you stock which are listed under each brand.
If you serve alcohol free cocktails you can also let visitors to the site know how many kinds you serve by adding a number to the box at the bottom of the stocklist form. Hint: these count towards you Club Soda Score!
The drinks on the venue page are grouped and displayed with the following order:
Beer, Cider, Wine, Spirits & Premixed, Soft Drink, Tonics & Mixers
Venues can be searched for by venue name, location or post code (see below).
The search is run case insensitive on the name and address of the venues. The venues matching the search term are displayed first by Club Soda Score (highest first) and then sorted alphabetically alphabetically.
Example of a search on venues with "London"
Searching for a partial post code works in the same way as the standard search
and will display any venues and drinks found with this combination of letters and numbers
in the name or address
Searching for a full post code calculates the latitude and longitude of that
post code and returns search results for venues near this post code, within a
30km radius.
Example of a search on drinks with "beer"
The search is run case insensitive on the name and on the description of the drinks.
When a drop-down is selected, a pill is displayed above the drop-down which allows the user to see which filters have been applied at a glance and also to quickly unselect them
The list of brands is split into two sections:
- The first section display the brands as cards for member brands.
- The second section diplay only the brands' name and is for non-member brands.
The contact form allows users to send an email to the Club Soda team. The form is composed with name (optional), email and message fields.
The Club Soda team has the ability to add, edit and delete various details to do with drinks, brands, venues, retalers/wholesalers and users on the site. The team also has access to create and edit static pages as well as update the 'Sponsors' block on the homepage.
These are password protected and can be accessed by admins only. Club Soda (CS) team admins can create new admin users so please speak to a member of the CS team if you need an admin account.
These are the elements of the site that can be amended in this way and their corresponding URLs:
- Users
/admin/users - Brands
/admin/brands - Drinks
/admin/drinks- Drink types
/admin/drink_types - Drink style
/admin/drink_styles
- Drink types
- Venues
/admin/venues- Venue type
/admin/venue_types
- Venue type
- Retailers
/admin/retailers- Discount Codes
/admin/discount_codes
- Discount Codes
- Wholesalers
/admin/wholesalers - Static Pages
/admin/static_pages - Sponsors
/admin/sponsor - Searches log
/admin/searchlog
All of these links are also available by visiting /admin.
The brand, drinks and venues pages by and large have the same basic mechanics:
- You will be shown a list of all instances of that item that exist (brands, drinks or venues)
- Click
Showto visit the instance's page- Note: If you are logged in as an admin or a venue manager, you will see more than standard site visitors as you have the power to edit certain portions of the page
- Click
Editto edit its details; or - Click
Deleteto delete the instance
Here is an example of the 'All venues' page where you can pick any of the options discussed above (though the full venue list here is only one venue):
All websites for venues, retailers or brands must begin with http:// or
https:// to be valid.
A venue type such a 'Pub' or 'Cafe' is a mandatory field when a venue manager
is creating a new venue. You can see a list of all venue types at /admin/venue_types
where you can show, edit and delete them as with the venues.
CS Admins can edit the venue types at /admin/venue_types/new.
retailer and wholesaler types. If you wish to change
these two types then it's best to consult with the development team first.
When you add/edit a type its fields will be updated in the main category to which it belongs. E.g. If you add a new venue type it will become a new option under venue types in the new venue form. So you could add 'family friendly' as a new type and then when you create a new venue you would now have the ability to select 'family friendly' as the venue type.
Drink types operate in much the same way as venue types and
can be found at /admin/drink_types. They can be created, edited and deleted in
the same way as well.
A drink styles are essentially sub-categories of drink types, such as 'Sparkling', 'Botanical' or 'Kombucha'. When you create or edit a drink style, you also determine which drink type it belongs to.
A drink style can be linked to multiple drink types:
The relations between types and styles will then be automatically displayed in the filter dropdown on the drinks search page that users see:
To upload a drink image, go to admin/drinks, then select show on the drink you want to upload an image for.
There you will see an Upload Image button. Click this and it will take you to the upload image page.
Select the image you want to upload and click submit. Drinks images should ideally be 6:9 or 600px x 900px. Images can be uploaded in jpg or png format.
If successful, you'll be taken back to the drink page and your image will display.
To upload an image for a brand or a venue, follow the same steps, but using the admin/brands and admin/venues urls respectively.
Also, for Brands, you can select the Use as cover photo box when uploading an image.
This will use this as the 'banner' image at the top of the brand page.
If you don't select it, the image will be set as the standard image further down the page.
Venue images and brand images should be close to a 12:4 ratio or 1280 x 426px for best quality, but other sizes will be stretched or cropped to fit.
The brand page contains brand information and lists all the drinks belonging to a brand. It also includes the venues, wholesalers and retailers that stock or sell those drinks.
The brand page also displays the "Related Products" section which contains drinks matching the most common style of the brand. The drinks are sorted by weight and the first four ones are displayed.
There are two templates for brand pages, one for members and the other for non members. Membership status is a checkbox on the brand form. Members have the ability to add two brand images (a cover image and one in the body of text). Member pages also display social media links.
To add a stockist, simply add a drink from this brand to the venue as you normally would.
Retailers can be added in two ways:
Major supermarkets, amazon, DryDrinker and WiseBartender can be added as retailers of a brand when the brand is created by checking the checkboxes for those retailers on the 'New brand' form. Once you have ticked one of these boxes, a link with the name of the retailer will then appear under the 'where to buy' title and clicking that link will take you to the appropriate site with a search made for the brand of that drink on that site.
To add a retailer not included in the 'New brand' form list go to
/admin/retailers/new. There you can fill in the details of your new retailer.
Ensure that for the website you include the http:// or https:// at the
beginning of the website url, otherwise the link will not work properly when
clicked on. Then from /admin/retailers you can click the link to add drinks to
a retailer. Once you have selected the appropriate drinks, the retailer will be
listed in the 'where to buy' section. Note: DryDrinker and WiseBartender do appear
in the admin/retailers list and should not be deleted. However, they do not have
a 'Add drinks' button because the way you determine which brand pages they display
on is via the 'Sold on WiseBartender' checkboxes on the new/edit brand pages.
Admins have the ability to add a
discount code that displays underneath links for DryDrinker and WiseBartender
using the options available at /admin/discount_codes. Each discount code can
only apply to one retailer so if you wanted to give DryDrinker and WiseBartender
the same code you would need to create the code twice (once for DD and once for
WB).
To add a wholesaler fill in the details at /admin/wholesalers/new. Then follow
the same procedure as for retailers to add drinks that the wholesaler stocks using
the links at admin/wholesalers.
In the main admin dashboard (/admin) the "download" links allow CS Admins
to download the current data to a CSV file:
On the landing page there is a section before the footer where an admin can add
a sponsor. To do this they go to admin/sponsor and select 'New Sponsor'. The
name field is just for the admin's reference and doesn't display anywhere on the
site in the public view so it doesn't matter what name you give. The body is
where the admin puts in html that they wish to display above the footer. The
html is flexible to be whatever you wish so you can style it or put in an image
for example. An image must be hosted however so you don't upload it in the admin
area, you just put in the url like this:
<div class="db tc">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZd4vv6b9hAcNuzR2rurs5aiKQtVVy6iAp4WrF30LrVrQrI615DA" class="w-50 w-20-ns" />
</div>
This is how it would look (above and below the CS image are the other parts of the landing page and footer):
Only one sponsor will be displayed on the landing page at a time, the sponsor which displays is that the one that has the 'Display on the landing page' box ticked. When you tick this box on one sponsor it will reset all other sponsors so they no longer display on the landing page.
CS admins have the ability to add additional pages of content to the website.
These pages do not have interactive elements and are mostly informative (such as
legal pages and 'About Us' style pages).
When you create a static page, you only have to fill in two mandatory fields: page title and page body.
You have the ability to write HTML or markdown in the body field.
The following elements are supported:
<h1> Top level h1 headers </h1>
<h2> h2 headers </h2>
<h3> h3 headers </h3>
<p> paragraph text </p>
<strong> strong/bold text </strong>
<i> italic text </i>
<ul>
<li>Unordered lists</li>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<br>
<ol>
<li>Ordered lists</li>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
# Markdown options are also available - this is an h1 level header
## h2 markdown
### h3 markdown
This is what you will see on the page:
As you can see, some of these elements already have default styling for sizing. However if you wish to style an element in an alternative way to what you see here you can use inline styling.
If you'd like to know a little more markdown, this 'cheat sheet' is very useful.
You can also choose to add this page to the Club Soda Guide main menu (across the top of the website) or to the footer. Furthermore, you can choose to give the page a 'Browser title' - this is what will appear in the browser tab when visitors navigate to this page.
In order for the Club Soda team to better understand how they can improve their site functionality and content, we have begun to anonymously keep track of the search terms used in the search bar on the homepage to see what kind of information is useful to visitors.
The log of anonimised search queries can be found at /admin/searchlog.
Any member of the CS team can create new admin users.
This can be done through the admin dashboard or /admin/users/new-site-admin.
GOTO: dev-guide.md