Modern eCommerce for the next generation of music sales
This project is the outcome of iWeb's client briefing during an assessment within the second year of my Computer Science degree.
Process
At the start of this task, the team and myself decided on how to approach the different stages in the lifecycle of a project and its development - along with the client and our project supervisor, we agreed so that we would follow the steps outlined below:
- Initial Wireframe Designs
- Design Prototype Mock-Up
- Backend / Feature Development
Surrounding each of these stages we maintained communication both within our team, as well as with our project supervisor and the client.
We implemented an iterative approach to the process which allowed us to all to air our opinions and move forwards with the project whilst allowing for ideas and designs to change freely and quickly.
Initial Designs
These wireframe designs were received very well by the client and were praised for them looking and feeling like something that could be implemented into a real and professional looking product that the client would actually make.
Ultimately, we collectively decided that we would take a hybrid between the two wireframe designs and create a product that implemented the 'best' parts from each design into the UI/UX prototype.
View Media
UI/UX Prototype
View Media
After the meeting with the client, we implemented the initial version of our UI/UX Prototype.
We tried to play to the strengths of the team, and as Sam was the member with the most experience in UI Design, he was tasked with implementing the prototype of the core layout for the web app as well as designing some cards for displaying information such as:
- Album listings
- Event listings
- Merch listings
Feature Development
Once we had designs that were approved by both the client and the project supervisor, we started to take these designs which up until now were static pages and start to build a data framework around it. For this, I took the lead as I have the most experience in backend development.
I started by taking the design and breaking the elements into distinct components, such as buttons, navigation items, footers (etc) and converting them, so they are reusable and extensible throughout the application. Once this had been completed I could move onto creating a data structure for the application.
As this web application is primary used for creating a cart and ordering music from the store, the data for the music had to be organised carefully to allow for a few key pieces of functionality: each release can have different release types (CD, Vinyl, Digital), each of which can have many groupings within them, such as a CD release may have multiple discs. Similarly, within each of these discs (if they exist), there can be many tracks, which may be different to a track on another release type. This problem is compounded by the functionality that links merch to album listings and their tracks.
Throughout this process we kept in contact with the client to ensure that they were happy with the progress being made and so that we could receive relevant feedback and make changes with the 8 weeks that we had to complete this project from conception to final delivery.
Final Product
Ultimately, this project received a grade of 96% (1st), which is accredited in no small part to the great team that we had - our attitudes to succeed and the love and passion that we all had for the project was noted by the client who congratulated us on creating a project that functions the way that it does so quickly and professionally.
The team for this project was:
- Sam Palmer - @samp
- Nashiekha Willock - @NashiekhaWillock
- Ryan Jelf - @RyanJelf