Bookdrops

My Idea was to come up with an App/Business concept, and build an App Landing Page showcasing the app, its features and how to download it.

Click here to view the live project 🌐

Product Development

To help me create something that looked real, I went through the process of developing the idea behind this product, some of the details can be seen below.

Concept

Bookdrops tackles one of the emerging issues born with the coronavirus quarantine - people with spare time in their hands.
We see this is a unique opportunity to take on a new hobby, learn something new or dive deeper into something. Good books are key to that.

We offer a subscription program that delivers books to the user’s address every month. The selection is based on the user’s interests – be it fictional such as romances or non-fictional such as history or self-help books.
Recommendations take into consideration best-sellers, community reviews and even books read and liked by the user.
There is also an important social aspect to Bookdrops – each user has their own bookshelf – public or private, users can post and read reviews, join discussion groups, follow other users, earn badges and become a specialist in each topic.

Why, How and What

• Why – What is our cause, purpose or belief:

  • We want to expand your horizon, teach you new things, and inspire you into inspiring others. Help you access your untapped potential.

• How – The steps to make the Why a reality:

  • By bringing the library to the palm of your hand. Reading is the gateway to future better self.

• What – What we do, what is our product:

  • We connect our customers to the best books on any given topic. We give them the ultimate incentive to read them, by sending these very books to their address and creating interest and engagement through social interactions.

User Experience

Goals

Website goals:

• App downloads and subscriptions
• Brand awareness
• Lead Generation through a newsletter
• Social network followers and engagement

Users Goals

• Knowing more about the App
• FAQ
• How to Subscribe or Download

Website features:

• Download links to Android and iOS
• App features
• Screenshots of various app screens
• FAQ
• Subscription form
• Contact form
• Fully responsive

User stories

First Time Visitor Goals

It is my first time here, I want to know more about this company and what they're all about.

I read about them somewhere, but I still have some questions about how it all works.

I'm interested in their product, want to join, and came here to subscribe and download the App.

Returning Visitor Goals

Last time I came here to know more about them, but now I am ready to Download and Subscribe.

I had an issue with this service and came here to check the FAQ and contact for help.

Design

Colour Scheme

• For this project, the color palette was created with the help of Coolors.
• I specifically aimed for shades of Purple as the main colors due it being frequently associated with knowledge, imagination and wisdom, which are desired attributes for this brand.
• White, whitesmoke and Eerie black were used to improve the readability of the page - these are also very common colors among tech projects.
  
  

Typography

• To make the logo, instead of using an Image as usual, I opted for an actual font - this would make resizing and working with the logo in general much easier.
• Logo font is Nunito, from Google Fonts. This is an easy to read font and while the conventional choice would be a "serif" type font for the logo, I opted for a modern and joyous-looking one to make people aware that this is an innovative project.
• All remaining content is presented using Poppins - Also from Google, that as described by justinmind.com, is an "attractive, geometric sans-serif font for use in text or display contexts"

Images

• To create the App images I used the free iPhone and iPad frames available on invisionapp.com.

• The App Mockups were created by myself using Adobe Photoshop.

• Bookdrops App UI was heavily inspired on Netflix's Android UI as the main goal was to make it look real, something that brought familiarity to the users.

• The icons used in the App UI, as well as the ones used in the Features section of the website were created by Flaticon - these were used as in a way of complementing the message.

• As written by Nijolaj Mertz :

  "Icons can be a great way to bring essential content to the point. They are a great attention grabber and they help your website visitors to find and scan content."

Wireframes

• The website wireframe was created using Balsamiq.
• Its can be seen by clicking here.

Languages Used

• HTML5
• CSS3

Frameworks, Libraries and Other Programs Used

• Bootstrap
• Hover.css
• Google Fonts
• Font Awesome
• GitHub
• Balsamiq
• Photoshop
• DirtyMarkup Code Beautifier
• Favicon.io
• Autoprefixer
• Coolors
• Flaticon
• Canva

Testing

• Testing was mainly made using Google Chrome Developer Tools, including the mobile and responsive views.
• This website was also tested on Firefox, and Microsoft Edge.
• Actual Android and iOS devices were used to test the mobile version of the website.
• Forms were tested by posting data to Code Institute's formdump.

The W3C Markup Validator and W3C CSS Validator Services were used to validate the project to ensure there were no syntax errors in the project.

• W3C Markup Validator
• W3C CSS Validator

Deployment

This website was deployed using GitHub Pages. Click here to view the live project 🌐.

GitHub Pages is a free hosting service provided by GitHub by following the steps below:

• Go to the repository page > Click Settings > go to the "GitHub Pages" section > Select the Source > Click Save.

Cloning

To clone this project follow the instructions below, adapted from GitHub's Documentation:

• On GitHub, navigate to the main page of the repository or Click Here

• Above the list of files, click on "Code".

  • To clone the repository using HTTPS, under "Clone with HTTPS", click the copy icon.
  • To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click Use SSH, then click the copy icon.
  • To clone a repository using GitHub CLI, click Use GitHub CLI, then click the copy icon.

• Open Git Bash.

• Change the current working directory to the location where you want the cloned directory.

• Type git clone, and then paste the URL you copied earlier.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

• Press Enter to create your local clone.

Acknowledgements

• My Mentor, Ignatius, for pointing me to the right direction.

• CI Slack members for reviewing this and giving feedback.

• Some parts of the code were imported from public sources such as Bootstrap Documentation page, w3Schools or StackOverflow. These can be identified by looking at the comments in the code.

• Book covers extracted from Amazon's website.

• Terms of Service Template from Terms of Service Generator

• Purple Blob background - Canva

• App mockup icons and Feature section Icons by Flaticon