WSMorrison / BricksThenMadeNow

1 stars 1 forks source link

Bricks Then Made Now

Bricks Then Made Now is an e-commerce site that sells fan made Lego designs to other Lego fans. The site will appeal to adult followers of Lego (AFOL), by reimagining vintage Lego from the 1970s, '80s, and '90s with modern elements and contemporary design techniques.

Front page of Bricks Then Made Now as input to AmIResponsive.

AmIResponsive

The site, deployed to Heroku, can be found here: Bricks Then Made Now

The repository in GitHub can be found here: WSMorrison/bricksthenmadenow



Contents




User Experience


Portfolio Project 5 is the culmination of the Code Institute "Diploma in Software Development (E-commerce Applications)" course. It is meant to showcase the student's ability to use all the major languages and frameworks covered in the course. By building an operational e-commerce platform, the student can show their proficiency in HTML, CSS, Javascript, Python, Django, Bootstrap, and others.

User Stories


Design



Color Scheme

Bricks Then Made now uses a simple, direct color scheme. The text is dark grays, nearly black, on a grouping of background colors that ar similar light gray, nearly white. The title is composed of colors similar to the ones Lego uses on their website, promotional materials and packaging. These colors are carried through the site, also being used on buttons, overlays, and image placeholders.

Background colors
The background colors are simple, and light gray. They are just intended to help organize the page into sections, so the customer can see clearly what they are looking at.

Text colors
The text colors are nearly black. The main color is essentially black, while muted is a dark gray different enough to indicated a difference in content.

Accent colors
The accent colors are similar to those used by Lego. They are used in the title, for design reasons. The info bar between the header and body of the site, where the customer can see their current navigation and where the sort dropdown is on the items page, is the yellow accent color. The yellow color is also used in selected buttons, like the buttons that add items to cart or process payment, to indicated urgency and call the user to action. It is also used in the payment handling overlay. The blue color is used on image place holders, and also used to replace the native blue color used by links. The red is only used around the Item and Sku deletion buttons on the item detail page, when staff is logged in. When these colors are used for anything other than text, the are used at a level of transparancy to limit their intensity, except on the info bar below the header and above the body, where maximum contrast ws desired.

The Color scheme was developed with help from Color Contrast Checker and Color Shades Online Generator, and Coolers was used to prepare the swatches for the Readme.

Typography

Font example

The typography was chosen primarily for clarity. Mina is the basic font used for the majority of the text on the page. It is a clear but distinct font. Vina and Staatliches are used for the title. Vina, with the strange formatting and mixing of upper and lower case characters seems more vintage, to evoke the old sets; while Staatliches is slick and modern, evoking the smooth computer renders and contemporary styling of the modern sets.

Vina, Google Fonts
Mina, Google Fonts
Staatliches, Google Fonts

Imagery

The imagery on the website was intentionally kept simple. This is to highlight the products available. It was decided that the overall look of the site should keep with the computer generated renders of the Lego sets. This meant the colors and the graphics were kept simple and flat, with few highlights but highlights where necessary. There was consideration about using the splash image that mixes a real image of an old set with a rendered image of a modern equivalent, but ultimately this was decided to go well with the item detail pages that display an image of the old sets next to renders the modern equivalents for sale. This maintains a visual throughline that also appeals to a customer's nostalgia.

Bricks Then Made Now index
The index page showing the mix of photos of vintage Lego, and renders of modern Lego.

The photograph is from Brickset, and the renders were made in Stud.io


Planning



A project of even such a small scope as this requires careful planning before any development can begin. Care was taken to plan the models for future implementations, without harming existing databases as the site's needs may grow. For example, there is an imagefield in the item model that is currently unused on the site, but gives space for future implementations.


Models



Custom models had to be developed to hold the appropriate information the website's database. Care had to be taken to plan the way the models would interact, since there are two instances of having one model extended by another. This was necessary to have a few different purchasable Skus related to a single Item, and to have a unique siteuser model that uses the Django authorization functionality as its base.

Three models are custom and new for the project, the Item model, the Sku model, and the NewsletterUser model. The other models are modified, but are still essentially boilerplate e-commerce object models.

Theme model

This proto-model is barely big enough to be considered a model; much like Pluto which is a planet despite what the scientists say. This model holds only one field, the Theme name, and is related to the Item model and is used to sort and organize the Items on the web site.

This model is custom.

Key Field Form
Name CharField Text

Item model

This model contains information about the Items listed for sale on the site. The Item model will only include information that is common to all three Skus related to a particular Item, including the Item number, Item name, related Themes, the description, images, and the partcount. It will be extended with the Sku model which will hold information about each individual Sku that are part of the Item.

This model is custom.

Key Field Form
item_number Integerfield Integer
item_name Charfield Text
item_theme Foreignkey Foreignkey
item_description Textfield Text
item_old Imagefield Image
item_old_url URLfield URL
item_render Imagefield Image
item_render_url URLfield URL
item_modern Imagefield Image
item_modern_url URLfield URL
item_detail Imagefield Image
item_detail_url URLfield URL
item_intructions_url URLfield URL
item_partcount Integerfield Integer
item_user_owned ManyToMany Many to many

Sku model

The Sku model contains the rest of the information about what the customer can buy. It extends the Item model, which describes the Bricks Then Made Now set, and adds the price, an inventory field, and fields that indicate whether it is a Sku for a physical, shippable Item or a Sku for a digital instructions download that will not need to be shipped and will not have shipping fees included. The Sku model will also include an instructions URL field that will contain the URL for the digital instructions that will be included with a digital purchase, so that they will be unlocked for the customer with all purchases.

This model is custom.

Key Field Form
sku_item Foreignkey One to many with item
sku_number Integerfield Integer
sku_type Charfield Text, choices
sku_price Decimalfield Decimal to two places
sku_physical Boolean Checkbox
sku_inventory Integerfield Integer

Order model

The order model contains all the information about the order, including a python generated order number, an order date set to the date the order was created, and links the order to a site user. It will also hold the payment information from Stripe.

This model is not custom. It is essentially a modified version of the CI equivalent.

Key Field Form
order_number Charfield Generated
siteuser Foreignkey One to many
date Datefield Generated, current date
full_name Charfield Text
phone_number Charfield Text
street_address_1 Charfield Text
street_address_2 Charfield Text
town_or_city Charfield Text
state Charfield Text
zipcode Charfield Text
country Charfield Text
order_total Decimalfield Generated, decimal to two places
shipping_cost Decimalfield Generated, decimal to two places
grand-total Decimalfield Generated, decimal to two places
original_Cart Textfield Text
order_stripe_pid Charfield Taken from Stripe

Line item model

This small model is used to control the information about individual items in an order.

This model is not custom. It is essentially a modified version of the CI equivalent.

Key Field Form
order Foreignkey Order
item Foreignkey Item
sku Foreignkey Sku
quantity Integerfield Integer
lineitem_total Decimalfield Decimal to two places

SiteUser model

The SiteUser model extends the Django AllAuth user model, holding information that can auto populate the shipping and billing forms during checkout, as well as give the user the correct permissions as a site user or site administrator and hold information about what items a user owns so they can access their digital downloads.

This model is not custom. It is essentially a modified version of the CI equivalent.

Key Field Form
user Foreignkey One to one
siteuser_phone_number Charfield Text
siteuser_street_address1 Charfield Text
siteuser_street_address2 Charfield Text
siteuser_town_or_city Charfield Text
siteuser_state Charfield Text
siteuser_zipcode Charfield Text
siteuser_country Charfield Text

NewsletterUser model

The NewsletterUser is a separate model that stores information about customers who wish to receive newlsetters. It includes their name, email address, and what they are interested in receiving information about.

This model is custom.

Key Field Form
newsletter_name CharField Text
newsletter_email EmailField Email
newsletter_city BooleanField Checkbox
newsletter_space BooleanField Checkbox
newsletter_castle BooleanField Checkbox
newsletter_train BooleanField Checkbox



Wireframes



Wireframes were made to describe how the site would look on both large and mobile screens before work began on the actual code. Many changes were made between planning and implementation. Most notably, the index page and the items page are different, but the items page features many of the planned implementations that the index page was initially meant to have. Other changes include the orientation of images on the detail pages and some of the form formatting.

Large Screen Wireframes


Index page on large screens.

This wireframe of the index page shows the planned organization of the page. The site title, search bar and cart link will remain at the very top of the screen, with a nav bar just below it. Below that is the splash image, with a planned carousel for specials or site news. The center of the page is dominated with a list of all Items that the user can sort by price, or using the nav bar, can filter by theme. The bottom of the page has a footer that is visually distinct like the header. It will hold a form for users to sign up for the mailing list, feature related social media, and links to supporting documents like an FAQ and the T&Cs for the site. Many of the header and footer aspects will carry through the rest of the site, but the splash image and carousel will be only visible on the index page.

Some changes were ultimately made to the index page, most notably, the index page has a block of graphic links to each theme, instead of a list of items. The list of items shows up on the item page, which is more similar to the index page's initial plan.

Other large screen wireframes can be seen below:

Expand to view large screen wireframes.
Large screen product items page.
![Product detail page, large screen](/assets/readme-images/wireframes/large-1-index.jpg) The items page ended up almost exactly as the index page was planned, so it is included here. The site title, search bar and cart link will remain at the very top of the screen, with a nav bar just below it. Below that is the splash image, with a planned carousel for specials or site news. The center of the page is dominated with a list of all items that the user can sort by price, or using the nav bar, can filter by theme. The bottom of the page has a footer that is visually distinct like the header. It will hold a form for users to sign up for the mailing list, feature related social media, and links to supporting documents like an FAQ and the T&Cs for the site. Many of the header and footer aspects will carry through the rest of the site, but the splash image and carousel will be only visible on the index page.
Large screen product detail page.
![Product detail page, large screen](/assets/readme-images/wireframes/large-2-detail.jpg) The detail page will feature a large image displayed, with smaller images that can be selected below. The item description and other details will be featured to the right of the image, with space for buttons for the three different packages available related to each item.
Large screen shopping cart page.
![Shopping cart page, large screen](/assets/readme-images/wireframes/large-3-cart.jpg) The shopping cart page will list the Items the customer has added, with a small image. It will also show selected details, including the price. There will be a quantity selector for physical Items, and an extended price. Note, the quantity is set to one and is not selectable for the instructions only digital download. The page will also show the subtotal, shipping cost, and grand total. These will be lined up with the extended totals for consistency, and the checkout button will be directly below to encourage the customer to buy with a clear call to action.
Large screen create item page.
![Create item page, large screen](/assets/readme-images/wireframes/large-4-create-item.jpg) The form to add an Item will have its own page, with a simple form for staff to fill with each field in the item model.
Large screen create SKU page.
![Create SKU page, large screen](/assets/readme-images/wireframes/large-5-create-sku.jpg) The form to add an Item's indivdual Skus will have another page, which will allow the user to add an individual Sku suffix to the Item number. The related Item number will be chosen from a dropdown menue, as will the Sku suffix. The staff will be able to add information specific to each Sku including price, whether the Sku represents a phyical Item, how many are inventory for sale, and what digital instructions would be included with the physical Items.
Large checkout success page.
![Checkout success page, large screen](/assets/readme-images/wireframes/large-6-success.jpg) The success page is a simple page indicating that the purchase was successful, with a button to return the user to the index page.
Large screen information item pages
![Information pages, large screen](/assets/readme-images/wireframes/large-7-infopages.jpg) The pages for the FAQ, shipping information, Terms and Conditions, Terms of Service (if applicable) will all be very similar; just extending the base, index template.
Large screen error 404 item page
![Error 404 page, large screen](/assets/readme-images/wireframes/large-8-404.jpg) The site will also have a custom 404 page, which is also quite simple and will feature a button to return the user to the index page.

Mobile Wireframes


Index page on mobile screens.

The mobile index page will be similar in structure to the large screen page, except the list of Items will be stacked instead of in rows. It will contain the same information, as well as the the sort and filter functionalities as the large screen page.

Similarly to the larger screen pages, this function became an items page, while the index page holds a block of themed links.

Other large screen wireframes can be seen below:

Expand to view mobile wireframes.
Mobile product items page.
![Product detail page, mobile](/assets/readme-images/wireframes/mobile-1-index.jpg) Just as before with larger screens, the items page became what the index page was initially intended to be. The mobile index page will be similar in structure to the large screen page, except the list of items will be stacked instead of in rows. It will contain the same information, as well as the the sort and filter functionalities as the large screen page.
Mobile product detail page.
![Product detail page, mobile](/assets/readme-images/wireframes/mobile-2-detail.jpg) Continuing with the similar structure and equal functionality, the detail page will be slightly differently organzied, with the three small images below both the larger image and the description. The purchase options will be below the entirety of the description and images, to allow as much room as possible for the add to cart buttons to make it easy for customers to add items to the cart. Note that again, the splash image and news carousel will be omitted, but the navbar and shopping cart will remain at the top of the page.
Mobile shopping cart page.
![Shopping cart page, mobile](/assets/readme-images/wireframes/mobile-3-cart.jpg) The shopping cart page will maintain the structure of keeping the totals to the right, in line, and lined up with the checkout button.
Mobile create item page.
![Create item page, mobile](/assets/readme-images/wireframes/mobile-4-create-item.jpg) Though it's unlikely the site staff will be adding items from a mobile device, there will be a mobile friendly version of the form.
Mobile create SKU page.
![Create SKU page, mobile](/assets/readme-images/wireframes/mobile-5-create-sku.jpg) Though it's unlikely the site staff will be adding items from a mobile device, there will be a mobile friendly version of the form.
Mobile checkout success page.
![Checkout success page, mobile](/assets/readme-images/wireframes/mobile-6-success.jpg) The success page is a simple page indicating that the purchase was successful, with a button to return the user to the index page.
Mobile information item pages.
![Information pages, mobile](/assets/readme-images/wireframes/mobile-7-infopages.jpg) The pages for the FAQ, shipping information, Terms and Conditions, Terms of Service (if applicable) will all be very similar; just extending the base, index template.
Mobile error 404 item page.
![Error 404 page, mobile](/assets/readme-images/wireframes/mobile-8-404.jpg) The site will also have a custom 404 page, which is also quite simple and will feature a button to return the user to the index page.


Wireframes were built in Balsamiq's online application.


Flowchart



A flowchart was developed to track a user or staff member's movement through the site. Their actions ultimately effect the database that stores not only information about the Items available, but information about what a customer has purchased. This is important, because some of the purchases are of digital goods which remain available for download on the site when the customer is logged in.

Bricks Then Made Now Flowchart

Flowchart was built with LucidChart.


User Stories and Agile Technologies



Progress on this project was tracked using agile technologies. GitHub's built in issues and Kanban board were used for their accessibility and their integration with GitPod, as well as integration with the repository.

During the planning stages, User Stories were developed and written as individual issues. Afterward, these stories were translated into individual tasks. This gave the project necessary redundancy making sure that everything that needed to get done got done.

Epic stories were developed to further organize the tasks. Each task was assigned at least one label, as well. The labels were developed to indicate which language each task was most associated with, if tasks were related to Stripe integration or deployment, if tasks were MVP, bugs, or enhancement, or if they were part of further project planning. There was also a quickwin label for tasks that should be relatively small fixes so that tasks could be selected based on time and focus available.

Agile techniques and technologies were used during the initial planning stages and then throughout the entire development process.

There are several Enhancement labels still on the board in an enhancement column, most of which are artifacts of the initial planning stages. These were made into future implementations after consultation with mentors and instructors when project scope was discussed. There are also some wontfix bugs in the enhancement column, bugs that did not effect the major functionalities of the website but would need to be addressed after the MVP deadline of the site.

The Bricks Then Made Now repository hosted in GitHub can be found here. The Issues in the Bricks Then Made Now repository can be found here.. The Bricks Then Made Now project and Kanban board can be found here.


Features


General Features on All Pages

The page has several main pages and some supporting confirmation and information pages. Because of the page construction, a base with a header and footer with some navigation elements included on each, there are a few features that are common to almost all pages.

General page features, using the index as an example.
![General features](/assets/readme-images/features/large-1-index.png) - At the top of the page, there is a title bar. - The title is clickable and will always bring the user to the index page. - The search bar will search all Item numbers, names, and descriptions. - The shopping cart icon will change when Items are added to the cart, and a running total will indicate to the customer what their cart consists of. - The nav bar with the themes and the login links remains on all pages for quick navigation. - The footer foots all pages. - On the left is a button that will take the customer to a form where they can sign up for promotional emails. - In the center are a series of links to find Bricks Then Made Now's social media presence, or contact information. - On the right are a series of links to informative pages, including a privacy policy, an about page, and a Terms of Service.


Features of Individual Large Screen Pages

Each page necessarily has its own set of features.

Index page features
![Index page](/assets/readme-images/features/large-1-index.png) - The index page has all the general page features. - The splash image is prominantly positioned near the top. - Below the splash image is a carousel that promotes the page. - Prominently in the middle of the page is a grid of the themes, plus a square to take the user to their account information.
Items page features
![Items page](/assets/readme-images/features/large-2-items.png) - The items page has all the general page features. - The splash image and carousel do not appear on this, or any further pages. - Below the nav bar is an info bar in yellow. - Text indicates which Theme the customer is currently navigated to. - On the right, a sort-by dropdown allows the customer to sort by part count. The part count is directly related to price, so it essentially does both functions. - The items page shows a grid of the Items related to the selected theme. It will show all Items if the current Theme selected is none, which is displayed as "all." - Each Item is represented by an image, the Item name, the Item number, the part count, and there is a button to access the item detail page.
Item detail page features
![Item detail page](/assets/readme-images/features/large-3-item-detail.png) - The item detail page has all the general page features. - The yellow bar displays text showing the theme and Item name that the user is navigated to. - There are more images of the Item where applicable, including a picture of the original Lego set, and a detail image showing a different, significant view. If there are not three images, the first image is replaced with a placeholder image indicating that the image is not available, and the subsequent images are replaced with an HTML placeholder that fills the space. - In addition to the Item name, number, and part count, an Item description is displayed. - Below the Item details, the three Skus are displayed, where applicable. - The Instructions Sku displays with the number, and price. - The ModernSet Sku displays with the number, what is included, the inventory, and the price, with a quantity selector. The quantity selector will not allow a user to order more than are in inventory. - The FullSet Sku dispalys with the number, what is included, the inventory and the price, with a quantity selector. The quantity selector will not allow the user to order more than are in inventory. - If there is no Instructions or ModernSet Sku, a coming soon notice is displayed. - If there is not FullSet Sku, nothing is displayed. - There is a back button that takes the user back to the items list. ![Instructions in cart detail](/assets/readme-images/features/large-4-item-detail-in-cart.png) If a customer adds any available Sku to their cart, the instructions are shown as in-cart because the instructions download is available with any purchase. ![Item detail sold out detail](/assets/readme-images/features/large-12-sold-out.png) Items are sold out item detail detail. Also shown here is the download button, where a customer can download the instructions of the items they have purchased. This is actually the crux of the entire website, and is very important. ![Item detail coming soon detail](/assets/readme-images/features/large-13-coming-soon.png) Items coming soon Item detail detail. ![Staff user item and sku control bars detail](/assets/readme-images/features/large-11-staff-item-controls.png) Logged in staff users can delete and edit Items and Skus directly from the Item detail page. (Not shown) If there are any Items in the cart, the Item and Sku edit and delete buttons are removed to prevent session errors.
Cart page features
![Cart page](/assets/readme-images/features/large-5-cart.png) - The cart page has all the general page features. - The yellow bar indicates that the user is navigated to the shopping cart. - The cart shows all the Items in the cart. - The customer can change the quantity or remove the Item from ther cart. - The extended price is shown for each Item, adjusted by its quantity. - The page shows the total number of Items to ship. For example, three Instructions and five ModernSets will show five Items to ship, even though eight Items are in the cart. - There are buttons to return to shopping and going to checkout.
Checkout page features
![Checkout page](/assets/readme-images/features/large-6-checkout.png) - The checkout page has all the general page features. - The yellow bar indicates that the user is navigated to checkout. - There is a small cart displaying to the left, to remind the customer what the heck they're spending all this money on. Toys. Oh boy, toys. Great. Maybe we should grow up. - To the right, there is a checkout form showing the shipping information information and payment form. - There is a checkbox that will add the shipping information to the SiteUser account. - There are buttons to return to shopping and process the payment.
Checkout overlay
![Checkout is happening page](/assets/readme-images/features/large-7-dont-touch.png) - There are no features.
Success page features
![Success page](/assets/readme-images/features/large-8-success.png) - The success page has all the general page features. - The yellow bar indicates that the user is navigated to the checkout success page. - There is a message thanking the customer and telling them that their order was successful. - The return to shopping button was intentionally left off. If the customer is going to make another order, perhaps as a gift, they know how to do it. If they're all done, it's pretty condescending to have the page suggest they continue shopping, isn't it?
Order history page features
![Order history page](/assets/readme-images/features/large-9-order-history.png) - The order history page has all the general page features. - The yellow bar indicates that the user is navigated to the order history page. - The order history shows a list of orders made by the logged in account. - There is only one order here, but be assured, if this customer had made more orders, they would be there.
Error404 page features
![Error404 page](/assets/readme-images/features/large-10-error404.png) - The error 404 page has all the general page features. - The yellow bar indicates that the user is navigated to a dangerous place! - The Lego version of the iconic Dennis Nedry mocking .gif mocks the user and tells them what a bad thing they did. - There is a button to return the customer to the items page.


Features of Individual Small Screen Pages

Mobile screens are identical in function, but are organized slightly differently. A limited selection of mobile screens are shown below.

Index page features
![Index page](/assets/readme-images/features/mobile-1-index.png) - The index page has all the general page features, similarly laid out. - The title bar is stacked. - The splash, title image is prominantly positioned near the top. - Below the splash image is a carousel that promotes the page. - Prominently in the middle of the page is a stack of the Themes, plus a square to take the user to their account information. - The footer is reorganized, so that the newsletter signup is above both the social media and the information pages sections of the footer.
Index page features
![Items page](/assets/readme-images/features/mobile-2-index.png) - The items page has all the general page features. - The splash image is not shown, and will not be shown for any other mobile pages. - The yellow bar indicates that the user is navigated to a particular theme. - On the right is the sort drop down, which works identically to the large screen version. - The Items in the theme are stacked in a single column. - Each Item has an image, Item name, Item number, part count and button to view.
Item detail page features
![Item detail page](/assets/readme-images/features/mobile-3-item-detail.png) - The item detail page has all the general page features. - The yellow bar displays text showing the theme and item name that the user is navigated to. - There are more images of the Item where applicable, including a picture of the original Lego set, and a detail image showing a different, significant view. If there are not three images, a placeholder image indicates that there is no render image, and for the other two, an HTML placeholder fills the space. - In addition to the Item name, number, and part count, an Item description is displayed. - Below the Item details, the three Skus are displayed, where applicable. - The Instructions Sku displays with the number, and price. - The ModernSet Sku displays with the number, what is included, the inventory, and the price, with a quantity selector. The quantity selector will not allow a user to order more than are in inventory. - The FullSet Sku dispalys with the number, what is included, the inventory and the price, with a quantity selector. The quantity selector will not allow the user to order more than are in inventory. - If there is no Instructions or ModernSet Sku, a coming soon notice is displayed. - If there is not FullSet Sku, nothing is displayed. - There is a back button that takes the user back to the items list. The additional features, such as the "In Cart" button, "Sold Out" buttons and staff edit and delete bars are similar in form to the large screen, but of course oriented slightly differently.
Cart page features
![Cart page](/assets/readme-images/features/mobile-5-cart.png) - The cart page has all the general page features. - The yellow bar indicates that the user is navigated to the shopping cart. - The cart shows all the Items in the cart. - The customer can change the quantity or remove the Item from ther cart. - The extended price is shown for each Item, adjusted by its quantity. - The page shows the total number of Items to ship. For example, three Instructions and five ModernSets will show five Items to ship, even though eight Items are in the cart. - There are buttons to return to shopping and going to checkout.
Checkout page features
![Checkout page](/assets/readme-images/features/mobile-6-checkout.png) - The checkout page has all the general page features. - The yellow bar indicates that the user is navigated to checkout. - There is a small cart displaying above the checkout forms. - Below, there is a checkout form showing the shipping information information and payment form. - There is a checkbox that will add the shipping information to the SiteUser account. - There are buttons to return to shopping and process the payment.
Cehckout overlay features
![Checkout is happening page](/assets/readme-images/features/mobile-7-dont-touch.png)
Success page features
![Success page](/assets/readme-images/features/mobile-8-success.png) - The success page has all the general page features. - The yellow bar indicates that the user is navigated to the checkout success page. - There is a message thanking the customer and telling them that their order was successful.

Defensive Design

As with any web application, defensive code is necessary to make sure the page can continue working even during real world usage. Customers and staff both can cause issues with the database by passing bad information. With an e-commerce platform, the issue could be worse than an error 404 or 500, and could cause issues that would charge customers for things they don't receive or ship them Items they didn't pay for. Because of this, it is particularly import to consider defensive design throughout the website to ensure that things work not only properly, but smoothly.

Many defensive features are native to Django forms, like stripping whitespace from CharFields and TextFields and making sure a URL or email address at least follows the standard formats.

When a customer signs up, they are challenged in a handful of ways.

Once logged in, the account details form does not offer challenges about being blank, but does strip leading and trailing whitespace. This is helpful in case a customer does not want to leave their information in the database.

However, the details on the checkout form do challenge the user.

Stripe integration has their own defensive code.

There is also a front end functionality for logged in staff to be able to create, edit and delete Items. In addition to the built in Django form field validation, a handful of logic implementations had to be made to prevent issues when using the add Item form.

The Add Sku form has some similar safeguards.

When editing Items, some additional safeguards are necessary.


Future Implementations

As with any website, or any project, there are always future implemenations to be considered.

Accessibility

Care was taken to make sure the page met accessibility guidelines. Accessibility is important so that everyone is welcome and included on Bricks Then Made Now. Bricks Then Made now does its best to not only not discriminate, but be anti-discriminatory in its design. There could always be improvements, as with anything, but Bricks Then Made Now is working within the current skill level and MVP deadline.

Google Lighthouse scores

The Accessibility score is not 100%, the reason being the footer background color did not provide enough contrast. After attempting many variations, none of which made any difference other than no background color at all, it was decided that it was more helpful to have a distinct footer than to get the score to 100%. Feedback on this is always welcome as Bricks Then Made Now wants to be as accessible as possible.

Accessibility, Best Practices and SEO scores calculated by Google Lighthouse.


Search Engine Optmization


Search Engine Optimization was planned for and implemented when the site was deployed.

During planning, several short-tail keywords and long-tail phrases were focused on for copy throughout the website. Some examples are below:

Keywords:

Short-tail keywords Long-tail phrases
Lego related General Lego related
Lego playset buy vintage lego sets
AFOL creative play vintage lego sets for sale
MOC playability Lego MOC
vintage play buy updated Lego sets
vintage Lego stable buy modern Lego sets
custom iconic buy vintage Lego sets
custom Lego kids buy Lego instructions
Lego MOC toys buy custom Lego instructions
genuine nostalgia where can I find custom Lego
genuine Lego nostalgic Where can I buy custom Lego
real memories custom Lego gifts
real Lego Lego for adults
bricks AFOL Lego sets
Lego bricks adult Lego sets
elements
Lego elements
printed elements
Lego [kit number]
classic city
Lego classic city
classic castle
Lego classic castle
minifig
Lego minifig
instructions
Lego instructions
clutch power



Marketing


As with any business, marketing is paramount for success. A business such as Bricks Then Made Now will be well served by old-fashioned marketing like trade shows, conventions, or other physical and in person forms of marketing. Word of mouth is powerful, as is seeing the products in the plastic. However, the reach of such marketing is limited and without a large, expensive staff will grow the business slowly.

Therefore web marketing will be an important way to grow a web-based business. Fortunately, online spaces have begun to serve the hobbyist community in ways similar to in-person trade shows and conventions. It's almost as easy to to create the relationships online as it is pressing the flesh, and that is a strong advantage for e-commerce. Social media is a particularly powerful tool, so Bricks Then Made Now will position itself to enter the online community that way.

Facebook

Facebook
![Facebook](/assets/readme-images/bricks-then-made-now-facebook-mockup.png) The Facebook page will be a great way for users, fans, and potential customers will to keep up with Bricks Then Made Now. It can be a great way for Bricks Then Made Now to show off not only newly available products, but keep customers informed about upcoming releases. This will help develop excitement. Lego is all about the experience building, and the ability to hide surprises and easter eggs in the build, which would be far too much detail to show on even a website without being confusing. By keeping customers involved with the development process, they would get to see what they can expect, knowing that these are just teasers to what will ultimately be available. The profile picture and the headline picture would mirror other social media and the main website, helping maintain a common theme through all the online presences. The feed would show upcoming or current products. It could also show products in-play by customers. Potential customers can also give feedback and engage with each other, hopefully appreciating each other's opinions and appreciating Bricks Then Made Now's offerings. The About section could show the Bricks Then Made Now contact information, and the website so that people can find the information they need to find. There can be many hosted pictures in the Photos section, where customers can peruse not just products in their official renders, but in progress images and detail images that will help them make decisions and help Bricks Then Made Now build excitement for the brand and products. It could also show potential customers how well liked the products are, and feature people who like, follow, and even contribute to the site in the liked-by section.


Instagram

Instagram
![Instagram](/assets/readme-images/bricks-then-made-now-instagram.png) Instagram will have a similar role in the marketing plan. The unique Instagram layout will make it excellent for showing the old set, the recreation, and them together. Each post could also have copy that discusses each. The profile picture would mimic Facebook's. The feed is an information packed section, discussing the old kit in significant detail. Why it's cool and why it's important, and why it was chosen to be redeveloped with modern elements and techniques. The second post in each row would be devoted to the modern set. It would explain why certain choices were made, and in which ways the design was updated. The third post in the row would compare the two models, comparing the part count and pricing and pointing out the differences and improvements. Of course, the about blurb would indicate the website the customer could go to. The real benefit of Instagram are the hashtags, where it can relate the products and models to others builds, and other communities. This would allow people to discover the models and the website just by being curious about the vintage sets that are being redeveloped, and also help spread the word of mouth in a digital analog to the trade shows and conventions. By following and being followed by other influentual accounts, and by collaborating with other accounts, Bricks Then Made Now can help not only build a following but build the Lego AFOL and MOC community. The Instagram presence is real and live now, [here.](https://www.instagram.com/bricksthenmadenow/)

Small business like this can be well served by marketing across many platforms. Not only would the site have a presence on Facebook and Instagram, but it would also advertise on these platforms. This would allow ads to be targeted at appropriate users who are engaging with other Lego content, or who are within the age ranged Bricks Then Made Now intends to sell to. Google ads, and specifically YouTube ads targeting videos of Lego, related content, and even general hobby content would be helpful in engaging new customers.

Bricks Then Made Now would also be able to market by engaging with online content creators on social media. Having AFOL on Instagram, TikTok, YouTube, Facebook, Twitter, and Threads use or highlight BTMN models would help generate interest, viewers, clicks and sales. There could also be colaboration between BTMN and these creators. BTMN could also collaborate with existing business in the Lego space, for example collaborating with Brick Sticker Shop could be beneficial for both. Through selling custom sticker sets linked to BTMN instructions, pack-ins of customer stickers in ModernSets, or pack-ins of restoration sticker sets with FullSets, Brick Sticker Shop could build on BTMN success, and with custom or restoration stickers available on Bricks Then Made Now, a new product line could be added and the fidelity of existing produt lines could be improved.

Also, various unconventional marketing techniques could be used. While new, Bricks Then Made Now could have an eBay store, where they could sell defects, prototypes and incomplete models at a discount. Bricks Then Made Now could be a seller as well as a buyer on Bricklink, allowing excess brick to be sold off so that costs weren't being sunk into dead stock. Both of these would be revenue streams, but would have the added marketing effect of getting Bricks Then Made Now in front of customers who are already willing to spend money, and are doing so on other, established platforms. This is a common practice among small, boutique, hobby focused shops and would be very helpful for Bricks Then Made Now.



E-Commerce Business Model


Bricks Then Made Now is meant to appeal to broad base of Lego enthusiasts. From kids to adults, the appeal of the smartly colored, well designed and eminently playable sets is universal. The modernization of old sets will appeal to adults where nostagia is strong. They also focus on themes that are universal; helicopters, motorcycles, space exploration and more.

The pricing of sets being sold will be based primarily on the price per part as available, with the intention of keeping it near a target of between $0.12 and $0.15 per part. This is slightly higher than Lego's own price per part, but custom sets from a boutique seller can charge a premium, and this is much lower than other custom Lego set e-commerce platforms.

Shipping will be advertised as free, though shipping will just be calculated into the cost of all physical sets.

Customers

Bricks Then Made Now intend to sell to adult followers of Lego, but also to adults wishing to give their kids an experience similar to their own, but modernized.

The choice has been made intentionally to use only genuine, high quality used Lego bricks and elements. While Lego has lost court cases allowing other companies to manufacture very similar bricks and elements, leading to a great many low quality imitators, there is no substitute for the clutch power and quality materials Lego uses. Lego can be procured in many ways. Estate sales, local bulk resalers, eBay, BrickLink and Lego Pick a Brick are all ways to get Lego bricks and elements. However, all these methods require considerable time commitments, and unless a user of those services is buying a great deal of Lego, pricing can be prohibitive and make it very difficult to get just the right bricks for a specific build.

Pricing

Bricks Then Made Now offers three levels of product to tailor the experience to the user.

Pricing for each set would need to not only be profitable but consistent. Many users are knowledgeable enough to understand why some sets are more expensive than others. For example, the 230CSMP Cassic Space Plinth is 122 very common bricks and elements while 2206357 Stunt 'Copter N' Truck includes uncommon parts like printed doors, a boom, and technic skis. Consideration has been made to try and keep the sets within the $0.12 to $0.15 per part range. Of course, the pot can be sweetened by including minifigs, which can be a great added value for customrs without much added expense for Bricks Then Made Now.

Shipping

While Bricks Then Made Now is not competing with businesses like Amazon, the expectation has been set by the behemoth wholesaler that even small boutique shops offer free shipping. In line with that, Bricks Then Made Now calculated shipping into the cost of all physical items, and advertises as offering free shipping on all Items, even though everyone knows that it's just rolled into the cost of the Item anyway.



Technologies Used


Languages Used

This project uses four programming languages.

Frameworks & Libraries Used

Programs Used



Local Development and Deployment


Local Development

Information on local development can be found in the development and deployment ReadMe.

Deployment

Information on deployment can be found in the development and deployment ReadMe.

How to Fork or Clone

Information on how to fork or clone the repository can be found in the development and deployment ReadMe.



Testing


Code Validation

Information on code validation can be found in the testing ReadMe

Systematic Manual Testing

Information on systematic manual testing can be found in the testing ReadMe

Representative User Manual Testing

Information on representative user manual testing can be found in the testing ReadMe



Credits


Help and Support

Code Used

Media

Other Thanks