Picturesque

Developer: Anthony Guillermo

Picturesque is a website developed for the Full Stack Frameworks with Django Milestone Project. The purpose of Picturesque is to showcase original posters made by the artistic team at Picturesque and give potential customers the ability to purchase these limited quantity exclusive posters. The site was designed to give the customers an easy and intuitive shopping experience. This site is specifically for customers who wish to purchase one of a kind original exclusive posters which give an insight into the artists mind.

UX
Features - Navbar - Footer - Home Page - Poster Pages - Bag Page - Checkout Pages - FAQs - Our Story Page - Contact Us Page - Profile Page - Future Features
Technologies
Testing
Deployment
Acknowledgements

UX

Goals

External Users Goals

Picturesque target customers/users are:

People who collect posters.
People who want to purchase posters to display.
People who are fans of art.
People who want to purchase original one of a kind goods.
People who want to purchase posters from a specific artist.

Customer/User goals are:

Find a poster to display
Look at unique poster designs
Purchase a poster from a specific artist and or category.
Browse the site easily, view posters and checkout securely.
Purchase posters from a legitimate website.

How Picturesque meets these goals:

The website has been specifically designed to make site navigation easy and enjoyable.
The navigation of the site follows the convention of other online stores and is intuitive. Posters all clearly displayed and the information is easy to read and follow. Giving the site a professional feel.
Picturesque posters can he searched by category, name, text search and artist to allow customers/users to easy find what they're looking for.

Site Owners Goals

Picturesque business goals are:

Gain more exposure for the artists at the company and the Picturesque brand as well.
Provide customers/users with a professional site where they can browse and purchase posters securely and easily.
Increase social media exposure by pointing customers to the company's social media accounts.
Track and monitor sales data to help analyse and decide future decisions.
Quick and secure payment methods to increase sales volume.

User Stories

As a customer to the Picturesque website I expect/want/need:

As a user to the Picturesque website I expect/want/need: |No |I want to be able to....|So that I can...| |:------------:|:------------:|:------------:|:------------:| |1.|Quickly register for an account|Have my own profile| |2.|Quickly log in and out|Access my account| |3.|Simple password recovery if I forget my password|Regain access to my profile| |4.|Receive email after account registration|Verify account creation was successful| |5.|Have a personalised profile|View my order history, payment confirmations and save payment preferences|

Design

Fonts

The site was designed to have a professional clean look. To give users the impression that this is a well established company. Serious about their products and the processes they use to create their posters.

Icons

Very few icons were used again to give the site a clean and polished feel. Icons were only used to highlight certain links.

Colours

The colours were chosen to stand out yet at the time compliment each other, which is also one of the main beliefs of Picturesque.

Styling

The dark blue was used as the footer to help contrast with the light colours and make the items in the footer stand out.
Blue was used for the main titles and purple for the sub headings.
Purple was used for main buttons and pink for secondary to give more importance to the main buttons. Both buttons have a pink hover colour change
Curved buttons and pictures were mostly used to give a pleasing look to the eye.

Wireframe

Picturesque Wireframes

Mockup

Features

Navbar

The navbar bar appears on every page
There is a search by at the top where the customer can search by typing a search query and the name of the posters and the description will be searched for matching words.
The all posters contains link where price, artist, a-z name can be searched.
Categories contain filters for all eight categories of posters.
About us contains links about the company such as 'About Us', 'FAQs' and 'Contact Us'
The basket updated with an notification and the amount changes if there are items in the basket.
Customers who have registered can access their account from the link.

Footer

Footer has all the links for the user if they were to scroll to the bottom of the page.
Link to categories and for more information on the company. As well as links to social media.

Home Page

The home page was designed to clear and simple, yet striking.
Giving customers a more visual way to select categories as well as giving a sample of the best seller to encourage them to browse the site.

Poster Pages

The poster page loads in block of 4 on large screens, 2 on medium and 1 on mobile.
The categories have link on the top and the sorting is on the right
In the poster details page customers get an enhanced view of the poster and can select quantity and add to basket

Bag Page

All the poster details can be viewed in the bag and the quantity can be changed and the items removed.

Checkout Pages

Customers can fill out the information and payment details on the left and there is a summary of their order on the right.
Buttons to go back and purchase are at the bottom of the page. As well as save thier info if they've registered.
Once the payment is processed the customer can view a summary of their order. There is a button to shop again or new profile if user is logged in.

FAQs

Our Story Page

Contact Us Page

Customers can fill out the for if they have query about and order or if a question is not in the faqs.

Profile Page

Customers details are saved on the left if the save info box was ticked during checkout. The address can also be updated from the page.
Order history is shown in a list but the order can be clicked to go back to the checkout summary for that order.

Future Features

Add more payment methods like Paypal.
Have a link for the newsletter as this was unable to be completed.
Cancel an order straight from the Profile view.
Live chat as well for live feedback to customer queries.
Option for customer to add frames to their order.
Way for admin to add posters in browser
Package tracking

Technologies

HTML
CSS
Javascript
Python
SQLite3
JQuery
Django
Github
Heroku
AWS
Google Fonts
Balsamiq
PostgreSQL
Font Awesome
Bootstrap
Stripe

Testing

Picturesque testing: Testing.

Deployment

In Github create a requirements file by typing 'sudo pip3 freeze --local > requirements.txt'.
Create a Procfile by typing 'echo web: python app.py > Procfile'.
In Heroku create a new app and input a unique app name 'abg-ricebowl'. Choose 'Europe' as the region. Click "Create App".
In Github terminal type 'heroku login' and log into Heroku.
Type 'heroku apps' to check if the created app 'abg-ricebowl' appears.
Create a new repository by typing 'git init'
Type 'git add .' then 'git commit -m "(commit message)"' to add files to repository.
From deployment tab in Heroku copy 'heroku git:remote -a abg-ricebowl' and paste into Github to set the remote to Heroku.
Push code to Heroku by typing 'git push heroku master'
Tell Heroku to run the app by typing 'heroku ps:scale web=1'
In Heroku go to settings tab and under config vars set the type 'IP' in key and '0.0.0.0' in value to set the IP address. Then type 'PORT' in key and '5000' in value to set the port.
Click open app to check the app has been deployed.
Project link: Picturesque

The code for this project was pushed to Github.

Github link: Picturesque Github

Acknowledgements

Media

The photos used in this project were taken from:

Credits

Ideas for this project were taken from:

Previous Code Institute Projects were also an inspiration for this project (Love Running, Resume, Whiskey Drop, Thorin & Company, Task Manager Application and Boutique Ado).

nishant8bits / picturesque Goto Github PK

picturesque's Introduction