Django Raceway

Django Raceway is a fictional motor-circuit in the UK with an extensive pedigree in racing and caters to those who love high-speed thrills and the smell of petrol and burnt rubber first thing in the morning!

Django Raceway, as a B2C business, aims to deliver personalised trackdays to motorsports enthusiasts at a state-of-the-art track with many challenging configurations. Users can register for an account, book track days, hire cars and book tuition to improve their car control and lap times. They can also request bespoke trackdays on behalf of a company or group, contact the business directly or sign up to a motorsports newsletter.

This is the right place for you if you are: - Looking to take your own car on a highly technical track - Looking to try out different driving experiences to command different kinds of sports cars - Looking to hire a car or reserve a bespoke track day for an event or group.

This is my fifth and final portfolio project for my Diploma in Software Development through Code Institute, where I am specialising in E-Commerce applications.

Link to live site: https://django-raceway.herokuapp.com/

Wireframes and Planning

Balsamiq wireframes/mockups

I used Balsamiq Wireframes to make mockups for the website and design how I initially imagined the site would look.

Desktop Wireframes

Desktop

Note! It should be mentioned at this point that during development, I decided to include the 'Middle Nav' seen in the home page here, at the top of every other page, as the user experience of having to click on the Django-Raceway Logo to navigate to other pages was proving quite frustrating and slowed the ability to navigate the site efficiently. It was a poor early design choice on my part, but a fairly straightforward solution to resolve it. I have not changed the original wireframes as I wanted to maintain my early/original design thinking, and explain instead why I made a certain change from a development standpoint.

Also missing here is the Newsletter Page. I originally intended this to be solely included in the footer right up until the end of development. However, after rendering the mailchimp form in the footer, I really didn't like the design and opted to keep the sign up link in the footer instead, which takes the user to the newsletter sign up page. This is shown in the features section further down.

The Checkout Page was also very different in practice, where I went a completely different route with Stripe in the end vs how I had originally planned to design the checkout, with hard coded forms. The practicality of my idea was not suitable for my project, and I opted instead to go with a Stripe solution for a more seamless checkout experience.

Home Page

Cars to Hire

About

Experiences

Note! I moved the 'Explore' buttons on to the bottom right corner of the images to keep the site looking neater

Experiences Detail

Tuition

Note! The 'Explore' buttons were missing here and added in later in development as I decided I wanted to give the user the ability to explore more information about it. The icons and captions at the bottom of the page were dropped as I didn't feel they added anything of substance to the page since I was giving detail through the Explore buttons.

Tuition Detail

Trackdays

Trackday Detail

Note! I ended up adding the image of the specific trackday here as I felt it gave the user a chance to get a closer look at the layout of the trackday, matched with the specific trackday they had chosen. I removed the direct checkout button at the bottom of the page as well.

Request a Trackday

Basket

Note! This is how I originally designed the basket to look. In production, I changed this quite a lot. I didn't got with a SKU/Unique order number in the end here and I also shifted the edit/delete buttons around to be incorporated into the table of each order. I also added a VAT calulated price into summary for users to get a better idea of the real cost to them.

Checkout

Note! I ended up going with a Stripe Checkout page provided by them and so as a result the layout of the checkout page is vastly different. I didn't know about this from Stripe at the time of designing it, and so I actually intended for these forms to be somewhat hard coded in an html file as per below.

Checkout Success Page

Note! The order table was moved entirely into its own page, and as a result, I dropped the order review from the page in the final project. I also felt that having a return home and a view basket button were a bit redundant as the user's basket. will be empty at this point and the user can just click the site logo in the nav to return home. Alternatively, they can navigate to another page from the middle nav bar.

Profile

Note! I removed the ability to store card info from the scope of the project as this is not good practice. Furthermore, I had security concerns regarding how I would implement this and did not think it was a risk worth taking. Another change I made was to put the Order History into its own nav tab separate from the profile page. I did this to make the pages nicer to look at and less cluttered. The Order history table is then free to expand in size as more and more orders get made by each user.

Edit Profile

As per above, credit card section removed from the scope. Also, the delete profile button was removed from the scope of this project. It is something I may add back in for a future update/feature.

Management Page

FAQs Page

Policies Page

Mobile and Tablet Wireframes