Deliverable: App to help designers create personas, part of my final university year project
Role: UX Researcher,UX designer, UI Designer and iOS developer
Software: Microsoft Visual Studio, Cloud 9 IDE,
Language: HTML, CSS, EJS and javascript
Tools/Libraries: Node.js ,Bootstrap, Mongo db, Mongoose, Express, Passport.js, Postman API
Year: 2018 -2019
As part of my E-Commerce elective module in Computer Science course at university, I was to create an online store, and I decided to create a website that allowed people to buy limited edition shoes.
The website is hosted via c9 also know as Cloud9. Cloud9 is an IDE which stands for an ‘online integrated development environment’. It allows me to develop my code and save my work in a virtual environment. As a student, I have found this IDE to be extremely helpful as I didn’t have to save my website directly on my laptop, thus saving space. Also, in the event that my laptop was to not work, I would have my work stored on the cloud and would have easy access to it.
My website is created by using HTML, CSS, EJS and javascript. Ejs allows you to embedded javascript direct into pages.
My website uses MongoDB as it’s a database, which is a dynamic and scalable NoSQL database tool. I personally found it easier to use and the syntax wasn’t hard to learn either and i think it is great for E-commerce websites.
As it is hosted locally, I will have to set up a meeting to do a live demo.
Features
Now for the fun part.
For this website I wanted it to have a clean and professional looking website. My main colour scheme was White, grey and occasionally a light pink. I wanted the images of the products to stand out as they are the main focus of the website.
The main hex colours I chose were: #F4E6EC #C585A2
Landing Page
When a user first enters the website they are met with a landing page that will allow them to enter. This landing page has an image animation that displays different images as time goes by. Each image has a fading sequence of about 10 seconds and there are 5 images in total.
General
All my pages are dynamic, as the size reduce so does each of the elements. Also, there is a navbar containing the home page link which is on the far left-hand corner and links to different pages. This home page link stated the name of the website, being ‘Limited Shoes’ and a Glyphicon of a map icon, as I wanted it to represent that this website is where you can find the latest limited shoes.
The navbar is dynamic as when you are not logged in you see the following links at the top: Look book, Contact us, Login, Register & Cart.
When you are logged in you only see: Look book, Contact us, Logout & Cart.
The cart icon is a cart Glyphicon from bootstrap
Admin
My website has an admin login feature where a user can sign up and if they enter the right admin code, I set the admin code on the back end and if entered correctly they become an admin when registering and later on even when they log out and log in again, they will still be admins to the website and they can access certain features.
For example, they can add new shoes, they can edit and delete shoes, they can also edit and delete comments and review that are on each shoe.
Edit function
Each shoe has a min price of £100 and has a button that can let you increase it when editing.
Registration
When registering, you can add you first name, last name, an image URL for an avatar, username you would like when using the website, a password section with encryption so that no one sees what you are typing. It also has an email section and a submit button. Users can’t register with a username that is already taken in the database
You can add an avatar picture when signing up to be added to your user area.
Flash messages
When a user is logged in or maybe has an error, I implement flash images with the colours relevant to the issue. For example, if a user logs in there is a green flash notification saying they logged in.
Reviews
Only logged in users can leave comments with stars of a rating up to 5. Then the overall average star rating of each product is shown and their review is also shown.
Comments
Only logged in users can comment, this way people can talk about each shoe even if they haven’t tried it. The review and comments show the details of who made them, including name, date and time.
User profile
To allow people to see more about who adds the shoe, on each shoe page, the added by name of the user, links to a user profile, with their username and avatar
Lookbook
General gallery of looks with shoes
Cart
The cart shows each product that the user would like to buy.
Contact us page
To show where they can find the company and get basic information