This project had been designed to be a B2C e-commerce store. The products offered are video games and toys related to them mostly. It also has a section for news about video games, events and movies related to them, in general useful information for those who enjoy video games. This had been included in thinking of expanding the experience of the user in the app, seeing us not just as an e-commerce but also a site to visit to find extras about their interests and so we can engage loyalty in the clients. These news should be constantly updating and so inform our clients of new things up through the marketing strategy.
The project had been based in Business to Consumer (B2C) style. Being an e-commerce where wares can be found for all the ages and interests. The slogan is not a typo but a word play, since the "toys/wares" would come from the store.
Several SEO techniques were undertaken in order to ensure the site ranks highly in search engine results. Also the files robots.txt and sitemap.xml had been included. The sitemap.xml file had been created using
Keywords:
Starting with a brain storm of keywords that are relevant to the e-commerce itself. And reduced by making use of a word search so as to target the more relevant, the site I had used is
External Links:
In the news section, each card/new contains a source link that would direct the user/client to the source from where was taken the information so that they can find more about it.
Content marketing:
The information and description of the wares in the site and other sections had been kept the more relevant to the site purpose. Also the keywords had been taken into account when creating things like categories and such, so insure they are present without getting to be considere as spam.
Each page has its own title, and finally meta tag description had been included in the base so that every page contains them.
Social Media Marketing: Facebook
The e-commerce has its own facebook, the one that will keep posting a minimun of three times a week, and releasing alerts of monthly offers and benefits, which are sent by e-mail to the subscribers. This is for to motivate the subscription to our newsletter and increase the clients database.
Email Marketing This will be based in our newsletter service and also to the users that had purchased with us previously. The starting strategy is to produce a monthly mail with new arrivals and deals, also will contain some news about the gaming world, etc. Subscribed users will recieve a welcome mail informing benefits will that be coming in future mails. This refering to the monthly mail with deals, so the user does not feel overwhelmed or spammed. For now there is a basic mail, but in future a better design will be implemented. Also had been set for the staff to recieve a daily report from mailchimp so to keep track of the traffic on it.
Also when the user registers for an account in the app will recieve a welcome email with some information about benefits and promoting our newsletter on it.
Screenshot of subscribed temp mail inbox
Mail to the subscribers
Mailchimp daily report
As target users, we are aiming for individuals that like video games and the world related to them, and also on people that are looking for a gift. We have a section with the news that is relevant to the wares offered.
As User I want to be able to visualize and navigate through the sections of the app
- Navbar
- Footer
As User I want to browse through the wares
- Wares list view/Store
As User I want to been able to add and remove products from my cart
- From list view/Store: QBuy button
- From ware's details: Add to Cart button
- Remove: From shopping cart remove link
As User I want to been able to put my order through the site.
- Checkout App
As User I want to recieve feedback that my order was proccessed succesfully.
- Checkout App: Success message
- Checkout App: Order detail page
- Mail Order Confirmation
As User I want to see the news section
- Link in Navbar
As User I want to subscribe to the store newletters
- Form in Footer
As User I want to contact the staff if I require help or clarification of a process
- Contact Form link in Footer
As User I want to see the reviews of the wares
- Ware's details: Rendered in
As Unregistered User I want to see the purpose of the site when landing in it
- Landing page with clear reference to objective of the app
As Unregistered User I want to get a benefit if I register
- Information recieved in the registration mail
As Unregistered User, I want to be able to register so that I can create my account and access to the registered user features
- Link for Sign Up in Navbar
As a Unregistered User I want to see the detail information of the wares
- Ware's details page
As Registered User I want to keep my information saved so that in a next purchase I don't have to fill the form again
- Profile page
As Registered User I want to be able to update my information if needed
- Update Profile Form
As Registered User I want to keep and access to my bookmarked wares
- Bookmark functionality with button in ware details page
- Display of bookmarks in My Profile page
As Registered User I want to be able to leave a ware review if desire
- Review Form
As Registered User I want to keep a history of my orders
- Orders Section that display last 5 of them in My Profile
As Staff/Admin User I want to access to a staff panel where I can manage the store's database from - Staff Panel page
As Staff/Admin User I want to be able to reply the reviews if necessary
- Reply to review form's link
As Staff/Admin User I want to be able to manage the DB from the front-end
-
Staff Panel page:
- Add a Ware Form
- Add an Image Form
- News Entry / Add a new
- Orders (render them)
- Contacted Us (render the inquiries)
-
Ware detail page:
- Edit a ware
- Delete a ware
- Delete an image
As Staff/Admin User I want to be able to manage the news section from the front-end
- News details page:
- Edit news
- Delete news
The list and screenshot about them can be found
As the time frame was affected by external factors out of my control, some of the 'could have' features had been left for future implementation. Howsoever fields and some of the need elements for them had been set in place since the beginning, and are there for when can be done. Some of them are:
-
New arrivals: There is a field in wares model to mark them and with a filter displaying, it is planned to use a blue ribbon in the front end as distintive feature.
-
Clearance: As previous one, there is a field in wares model to mark them and with a filter displaying, it is planned to use a ribbon in the front end as distintive feature with a different colour than the New Arrivals, at the moment the idea is yellow.
-
Bookmarks: There is a charfield left in place, this is to implement a 'note' for the bookmark. As user find that bookmarks are very valuable but sometimes you just cant remember what or why did you keep it, so if user/client can from their profile/bookmarks write a note so can remember if was for some ocassion or person, I think that will add value to their user experience.
-
Bookmarks to Store List: Bring the bookmark feature to the list view, to show to the user if the ware is already bookmarked by them or not.
-
Pages: Q&A, and Terms and Conditions had been provide for the moment with a under construction message.
-
Profiles: The idea of increasing the fields, with a profile section where the user can choose some of their prefered video games so that store can include these wares in the stock. And also create a promotion section where can be displayed user's interest related items using the preference inputs.
For the data base had been used ElephantSQL, and the diagram is as below.
For keep track of the Agile method I had used Project Board on GitHub.
The details to the bugs can be found here
The wireframes can be found here
The details to the design can be found here
- ElephantSQL
Documentation for set a database here.
The validation reports can be found here
The testing results can be found here
The site had been deployed through Heroku. The site had been developed on GitPod, committed and pushed to GitHub. And Heroku once the site is deployed would update automatically. The step for this can be found here
For this project I had take all the wares from Amazon App.
The news has been taken from the following blogs:
For this project, as for previous ones, I have seen and read many tutorials from where I had tried to get some understading of the logic more than copy the code itself, but still could not avoid in certain cases taken code and adapt it to the project and its necessities.
The shopping cart and checkout apps had been taken from Boutique Ado with some twists to fit better the project.
Stack Overflow is one of the mains for finding answers to specific questions https://stackoverflow.com
The newsletter functionality had been set with mailchimp, and had made use of the following blog for set it. https://www.geeksforgeeks.org/create-newsletter-app-using-mailchimp-and-django/
The functionality for reply the reviews had been taken from, being the simplest one found https://stackoverflow.com/questions/71396075/i-want-to-make-reply-to-comments-feature-in-django
On CSS, there had been couple of animations used in the project, with minor changes, as follows
ANIMATED slogan taken from tutorial in Youtube smashtheshell: https://www.youtube.com/watch?v=2NxUssDAxoY
ACCORDION taken from tutorial in Youtube wpshopmart: https://www.youtube.com/watch?v=9tPFFZ9D4MY
Some other places I had refered through the development of this project are:
https://docs.djangoproject.com/en/4.2/ref/templates/builtins/
https://www.pythontutorial.net/django-tutorial/
And finally to my mentor Brian Macharia, thanks so much for all your guidance and support through not just this project but all the course.