Doodle Brain

Introduction

This is a collaborative project, where I am the project manager. I collaborated with Lily Howell and Charlie O'Rourke, but Lily is also my client. I aimed in my proposal to design and develop a Hi-Fi prototype of an e-commerce website for Lily's personal business. The target audience is students, or young people in general. To achieve my aim, I needed to reach certain milestones or objectives;

Draw out wireframes, starting with mobile,
Receive work from Lily - this includes the brand guidelines, icons and product images,
Write HTML and CSS code - including media queries to ensure the website is responsive,
Receive work from Charlie - this was the animations for the website

Design Research

Lily's Original Designs

To help me understand what Lily wants from the website, she gave me her work from her undergraduate degree to show me her designs and wireframes for the website. From there, I critically evaluated her work and reflected on what the strengths and weaknesses are and how I would improve the design. You can see my progress on my blog in Week 7.

Sketchbook 1 Sketchbook 2 Sketchbook 3

I then drew a quick sketch of what the navigation bar could look like.

Navigation Sketch

New Look, BooHoo, BooTea and Pitch

To help design the website, I researched into different e-commerce sites and look at what similarities and differences they have.

New Look Sketch BooHoo.com Sketch BooTea Sketch Pitch Sketch

(New Look, 2017; BooHoo, 2017; BooTea, 2018; Pitch, 2018)

There were a few things that I really liked about these different e-commerce sites. Firstly, I liked the multiple levels of the navigation bar to split it up to include more content on the desktop site. I then like how it collapses to a menu icon from the tablet screen. This is the kind of responsive design that I would like to implement into this project.

Apart from Pitch, I noticed that they all had a "basket", "home", "search", "profile" and "favourite" icon. When I looked back at the original designs, most of this was missing. I kept this in mind when I went on to design the wireframes

Development of Ideas

Wireframes

Because I wanted to follow a mobile-first approach and look at responsive design, I started with the mobile wireframes. I had almost completed these wireframes, but I realised this was a very large project and I was not going to have the time to do all of it. I therefore stuck to 4 different sections: the homepages and the pages for the three types of products and each product page. You can view my progress on my blog in Week 9 and Week 10.

Mobile Wireframe Overview

You can view the mobile wireframes here.

I then moved on to the Desktop Wireframes, focusing on the main pages of the website.

Main Section Check Out 1 Check Out 2 Actual View

You can view the desktop wireframes here.

Throughout the duration of completing the wireframes, I showed them to Lily to get her approval of my work. Once it was all approved, I moved on to coding the website

HTML and CSS - Developing the Website

I started with the navigation bar, but quickly came across a problem. I couldn't get a line to go underneath the words and through the center of the logo using CSS.

First Homepage

I left it for a while until I could figure out a solution to the problem. I moved on to adding content on the page, including a footer.

Homepage footer

I researched into a product view page and adding the "add to basket" functionality to the website. I looked at many different examples, from jQuery product galleries (Kingsley, 2017), to an even simpler PHP design by php pot (2017). Both of these I tried adding to my code, but both of which went wrong and because of my basic understanding of code, I could not figure it out. I also considered cartJS (2017), but it was too complicated for me to follow at all. I then found a block of code for the basket, which I ended up using for the product list pages (Dronca, 2016). I particularly liked the heart animation, so I inputted that without the plus and minus button and removed the heart from the basket page.

Heart Button

I then figured out how to do the navigation bar after adding in Donut Dad to the background of the homepage. I decided to edit the image of the Doodle Brain logo to include a black line going through the center. I then set it as the background image of the navigation bar and adjusted the CSS of the text around it, including media queries to adjust it to fit the image. I needed to then add a homepage button because I couldn't link the logo to the homepage with it being a background image.

New Navigation

I moved on to complete the product pages and the basket, and set the products to enlarge when you hover over them.

Bags Cases Shirts Basket

On the product page, I used w3schools to insert a drop-down selection box for the phone model/t-shirt size (w3schools, 2017a). You can see this below:

Product View

I then looked at making the website responsive, focussing on the navigation bar to the wireframes that I drew. This involved using the CSS "display:none" code to hide content under and over specific screen sizes. This was how I got around not using JavaScript in my code.

Display: none

I found a block of code on codepen that I could use as the drop down menu for when the website is in tablet or mobile view (Tondo, N/A). This was then a particularly useful block of code for my other module.

Drop Down Menu

I would have liked to start on the "Got an Idea" section, but I run out of time. I had already found some code that I thought would work well for this part of the website, which was also on codepen by Stephanie (N/A). It reminded me of the pinterest board, which was something that Lily had mentioned about the style of this section.

Collaboration

I collaborated with two people; firstly Lily Howell, who is also my client. She gave me branding guidelines and all of the icons for the website. She also gave me all the images for every product, the characters as vectors and the logo.

Logo Colours Buttons

I also collaborated with Charlie O'Rourke, who did a simple animation for me. I sent him a brief, which he followed very well and provided a good animation for the homepage considering the timeframe he had to do it.

The brief can be downloaded here.

Donut Dad Animation

Outcome

The final outcome of this project was a partially completed e-commerce website, with the most important areas finished from a design perspective. Throughout Semester 1, I realised this was a very large project and I split it down to focus on the three products and the homepage. I plan to take this project further for my final project of my MA.

Desktop Homepage
Tablet Homepage Tablet Menu
Mobile Homepage

To view the website, Click Here

References

BooHoo (2017) Homepage. [Online] Available at: http://www.boohoo.com/ (Accessed 02/01/2018)

BooTea (2018) Homepage. [Online] Available at: https://www.bootea.com/ (Accessed 02/01/2018)

CartJS (2017) Homepage. [Online] Available at: https://cartjs.org/ (Accessed 02/01/2018)

Dronca, R. (2016) ‘How to Create a Shopping Cart UI using CSS & JavaScript’, designmodo, 15 August. [Online] Available at: https://designmodo.com/shopping-cart-ui/ (Accessed 02/01/2018)

Kingsley, A. (2017) ’20 FREE HTML CSS3, JQUERY ADD TO CART & PRODUCT GALLERIES’, DesignsCrazed. [Online] Available at: https://dcrazed.com/css-jquery-add-to-cart-product-galleries/ (Accessed 02/01/2018)

New Look (2017) Homepage. [Online] Available at: http://www.newlook.com/uk/womens (Accessed 02/01/2018)

Php Pot (2017) Simple PHP Shopping Cart [Online] Available at: http://phppot.com/php/simple-php-shopping-cart/ (Accessed 02/01/2018)

Pitch (2018) Homepage. [Online] Available at: http://pitch-tents.co.uk/ (Accessed 02/01/2018)

Stephanie. (N/A) CSS Grid Responsive Image Gallery. [Online] Available at: https://codepen.io/ramenhog/pen/MpORPa (Accessed 02/01/2018)

Tondo, A. (N/A) Pure CSS Click DropDown Menu. [Online] Available at: https://codepen.io/Tont/pen/hdsev (Accessed 02/01/2018)

w3schools (2017a) Select Menu. [Online] Available at: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select (Accessed 02/01/2018)

W3Schools (2017b) Image Gallery. [Online] Available at: https://www.w3schools.com/css/css_image_gallery.asp (Accessed 01/01/2018)