Click on the images above to view them in fullscreen.
Overview
Reternal is an online store selling climate friendly products, which was designed and developed in a group of four, as a part of an intense responsive web design and development course. It's a responsive website with a calm color palette associated with the theme.
The project spans from the initial design choices, wireframes and prototypes, to a high-fidelity website made in HTML5, CSS, PHP and MySQL.
The website has functionality such as admin login, uploading products, edit existing products, deleting products, image uploading and image deleting.
See the code at: https://github.com/MatildaOden/Reternal
My Role: Project leader, UX/UI designer & Web developer (mainly PHP & database implementation)
Tools: Figma , GitHub, CodeAnywhere, Atom
Programming languages: HTML5, CSS, Bootstrap, PHP & MySQL
Duration: 2 months (Dec 2010 - Jan 2021)
The Brief
"Andrea has decided to create an online store where climate-smart goods will be offered. The online store must work on different devices and need to be responsive. Andrea want you to use climate-smart goods in the demo in order to get a good overall experience of the online store. Furthermore, Andrea must be able to upload products in the demo store herself."
Project Planning
Before we started the project for real, a project plan was made with project description, boundaries as well as some extensive analysis.
Initial analysis
Before we started with the design process itself, extensive analyses were made of stakeholders and the product. As a project leader, I did some risk analysis of the project to make sure the project would flow as it should and what to do if something would happen. A SWOT analysis was done to identify strengths, weaknesses, opportunities and threats within the project. Lastly, a stakeholder analysis was done to identify core stakeholders, primary stakeholders and secondary stakeholders.
WBS structure & GANTT Scheme
To be able to plan the project more in detail, what needed to be done and by who, a WBS structure was made. Since the project had a short timespan, a GANTT scheme was done as well to plan when things needed to be done.
Design Process
To make sure everyone had the same design vision, we made some lo-fi wireframes together. The wireframes shows the desktop version and the mobile version of the website.
Wireframes - Desktop version
Wireframes - Mobile version
Final Design
The final design doesn't just focus on look and feel. All the important demo functionalities and interactions is implemented through HTML5, CSS and PHP code as well as with a SQL database.
Add, edit and delete products as admin
To be able to add, edit or remove products in the store, you need to login to the admin account. Since this is just a demo, the design for this functionality is very frugal and simple.
Login as admin
Add product name etc
Add product image
Crop product image
Find products to buy
Scroll through all the products, use filters or choose specific categories to find what you need. In the product page, you will be able to read more about the product and place it in the cart to buy.
Learn more about the company
Since the company and webshop has a unique and important vision, you will be able to read more about the vision already on the home page. There's also a separate page with more information.
