Moodscape
Moodscape is an e-commerce platform designed to offer a curated collection of unique watercolor art, Irish abstract landscapes, floral art, macro photography, digital art, and pen plotter art. This project serves as my final submission for the Full Stack Developer Diploma at Code Institute, showcasing my skills in developing a comprehensive, user-friendly online store.
The platform caters to art enthusiasts who wish to beautify their spaces with exquisite artwork. Moodscape aims to provide a seamless shopping experience, allowing users to explore and purchase art pieces easily. The website not only features a variety of art styles but also focuses on ensuring that each piece is of high quality and uniquely crafted.
Project Scope and Objectives
Project Scope
The scope of Moodscape is to develop a fully functional e-commerce platform that offers a diverse range of art forms. The project aims to showcase a variety of unique artworks and provide a seamless, user-friendly experience for art enthusiasts. The platform will support secure transactions and highlight the talents of the contributing artists.
Website Objectives
- Curated Collection: Offer a wide range of carefully selected artworks, ensuring high quality and uniqueness.
- User-Friendly Interface: Provide an intuitive and smooth user experience for browsing and purchasing art.
- Responsive Design: Ensure the website is fully functional and visually appealing on all devices.
- Secure Transactions: Implement secure payment gateways using systems like Stripe, protecting user information and transactions.
- Artist Promotion: Highlight the unique qualities of the curated art collection.
- Feedback System: Implement a feedback system to report successful and unsuccessful purchases to users.
Key Components of the Website
- Homepage: Featuring highlighted collections, promotions, and selected artworks.
- Product Pages: Detailed pages for each art piece with high-quality images, descriptions, and pricing information.
- Admin Management: A single main user (admin) to add, edit, and manage products and content.
- User Account Management: Allow users to create and manage their accounts, track orders, and manage preferences.
- Shopping Cart and Checkout: Streamlined process for adding items to the cart and completing purchases.
- Search and Filter Options: Advanced search and filtering capabilities to help users find specific types of art.
- E-commerce Functionality: Integrate payment processing using Stripe for secure transactions.
- Feedback System: Inform users about the status of their purchases with clear messages.
- Forms with Validation: Implement forms that allow users to create and edit models in the backend with proper validation.
- Navigation and Layout: Incorporate a main navigation menu and structured layout for ease of use.
- SEO Techniques: Include meta description tags, a site title, a sitemap, and a robots.txt file to improve search engine reach.
- Authentication and Authorization: Implement secure login and registration pages, role-based access control, and restrict access to certain content.
By focusing on these objectives, Moodscape aims to provide a comprehensive and enjoyable online shopping experience for art lovers, while ensuring easy management and high-quality offerings from a single admin user.
User Experience
Audience Personas
Persona 1: Emily - Art Enthusiast
Demographics
- Location: Dublin, Ireland
- Age: 34
- Education: Bachelor's Degree in Art History
- Occupation: Marketing Manager
- Income Level: Upper-middle level
Psychographics
Emily values aesthetics and is passionate about art and interior design. She enjoys discovering new artists and unique art pieces. Emily is driven by a desire to create a beautiful and personalized home environment. She values quality and originality in the art she purchases.
Behavioral Traits
Emily frequently visits art galleries and art fairs. She prefers online shopping for its convenience and the broader range of options. She regularly follows artists and art influencers on social media and reads art magazines.
Online Habits
Emily spends a lot of time on Instagram and Pinterest for art inspiration. She visits online art marketplaces and artist websites to browse and buy art. She subscribes to newsletters from art galleries and online stores.
How Moodscape Meets Emily's Needs
Moodscape provides Emily with a curated collection of unique and high-quality artworks. The user-friendly interface and detailed product pages make it easy for her to find and purchase art pieces that match her taste. The platform's focus on promoting talented artists aligns with her interest in discovering new art.
Persona 2: Michael - Gift Shopper
Demographics
- Location: Cork, Ireland
- Age: 29
- Education: Bachelor's Degree in Computer Science
- Occupation: Software Developer
- Income Level: Mid-level, salaried
Psychographics
Michael values thoughtful and meaningful gifts. He enjoys finding unique items that make special presents for his friends and family. Michael appreciates high-quality craftsmanship and likes to support independent creators.
Behavioral Traits
Michael shops online for most of his gifts due to the convenience and variety. He tends to look for products that come with good reviews and detailed descriptions. He appreciates sites that offer gift recommendations and easy return policies.
Online Habits
Michael frequently visits e-commerce sites and gift recommendation blogs. He uses social media platforms like Facebook and Twitter to look for gift ideas. He reads product reviews and relies on customer feedback before making purchases.
How Moodscape Meets Michael's Needs
Moodscape offers a wide range of unique and high-quality art pieces that make perfect gifts. The platform's advanced search and filter options help Michael find the right gift quickly. Detailed product descriptions and images ensure he knows exactly what he is buying, and the secure transaction process gives him peace of mind.
User Goals
Emily - Art Enthusiast
- Discover New Art: Easily find new and unique artworks from various artists and styles.
- Purchase High-Quality Art: Buy high-quality, original art pieces that fit her aesthetic preferences.
- Support Artists: Learn about the artists and support them through her purchases.
- Seamless Shopping Experience: Enjoy a smooth and intuitive online shopping experience.
- Stay Updated: Receive updates on new collections, promotions, and featured artists.
Michael - Gift Shopper
- Find Unique Gifts: Locate unique and high-quality art pieces suitable for gifts.
- Quick Purchase Process: Complete purchases quickly and efficiently without hassle.
- Detailed Product Information: Access detailed descriptions and high-quality images of art pieces.
- Secure Transactions: Ensure safe and secure payment processing for peace of mind.
- Gift Recommendations: Get personalized gift recommendations to simplify the selection process.
Five Planes of UX
1. Strategy Plane
- User Needs: Understand the primary needs of our target personas, Emily and Michael. Emily seeks unique, high-quality art to enhance her home, while Michael looks for unique gifts that stand out.
- Business Goals: Establish Moodscape as a reputable online marketplace for unique and high-quality artworks. Promote talented artists and provide a seamless, enjoyable shopping experience for art lovers.
2. Scope Plane
- Features:
- Curated collection of artworks
- Detailed product pages with high-quality images and descriptions
- Secure online payment processing (Stripe)
- User account management
- Admin management for adding and updating products
- Advanced search and filter options
- Feedback system for purchase status
- Responsive design for various devices
- SEO techniques for improved search engine reach
- Authentication and authorization for secure access
3. Structure Plane
- Interaction Design:
- Users navigate through a well-structured homepage featuring collections and promotions.
- Product pages provide comprehensive details and images.
- The shopping cart and checkout process are streamlined and user-friendly.
- Account management pages allow users to track orders and manage preferences.
- The admin panel enables easy product management.
- Information Architecture:
- Clear and logical categorization of artworks.
- Intuitive navigation menu and structured layout.
- Consistent URLs and breadcrumb navigation for ease of use.
4. Skeleton Plane
- Interface Design:
- Clean, modern design with a focus on high-quality images.
- Easy-to-use navigation menu and search bar.
- Prominent call-to-action buttons for adding items to the cart and completing purchases.
- Responsive layout adapting to various devices and screen sizes.
- Navigation Design:
- Main navigation menu with categories like Home, Shop, About, and Contact.
- Footer with quick links to essential pages like About, Privacy Policy, Terms and Conditions and FAQ.
- Information Design:
- Clear presentation of product details, prices, and availability.
- Highlighted promotions and featured collections on the homepage.
- Informative artist profiles with background and style descriptions.
5. Surface Plane
- Visual Design:
- Aesthetic and cohesive color scheme reflecting the art-focused nature of the site.
- Use of high-quality images for artworks.
- Professional and elegant typography for readability and style.
- Consistent visual elements across all pages, including buttons, icons, and navigation.
- Visual feedback for user interactions, such as adding items to the cart or completing a purchase.
Mockups and Wireframes
Creating mockups and wireframes was a crucial step in the design process for Moodscape. Utilizing Figma, I was able to streamline my workflow by keeping both wireframes and mockups in a single, convenient platform.
Wireframes
I started with wireframes to provide a clear and basic structure of the website's layout and navigation. This helped in planning the overall design and functionality without getting distracted by colors or images. Each page's wireframe laid out the essential elements, such as headers, footers, navigation menus, and content sections, ensuring a user-friendly interface.
Home
About
Contact
Shop
Product
Admin Account
Admin Orders
Admin Order Update
Admin Products
Admin Product Update
Mockups
Once the wireframes were finalized, I moved on to creating high-fidelity mockups in Figma. These mockups brought the wireframes to life by incorporating the visual elements, including the logo, brand colors, typography, and images. The mockups allowed me to visualize the final look and feel of the website, ensuring that the design aligns with our brand identity and user experience goals.
Home
About
Contact
Shop
Product
Account Pages
Account
Account Orders
Account Reviews
Account Profile
Admin Pages
Account
Database Design
For designing the database, I used dbdiagram.io to create an Entity-Relationship Diagram (ERD) for Moodscape. This tool allowed me to visualize the relationships between different entities, ensuring a well-structured and efficient database schema. The database is built using PostgreSQL and includes tables for users, accounts, addresses, products, images, categories, orders, order lines, payments, and reviews. Below is the ERD that illustrates the database design.
Color Scheme
The color scheme for Moodscape has been carefully chosen to create a clean, modern, and visually appealing design. The primary colors used are white, various shades of gray, and an accent color blue that aligns with our brand identity.
Primary Colors
- White: Used as the main background color to ensure a clean and uncluttered look.
- Grays: Utilized for text, borders, and other UI elements to maintain a neutral and balanced appearance.
Accent Color
- Brand Blue: This accent color is used in the logo, certain buttons, and other accent elements to provide a cohesive and vibrant touch. The specific shades of blue are defined as follows in Tailwind CSS settings:
'brand': {
'50': '#f1f8fa',
'100': '#dbecf2',
'200': '#bcd9e5',
'300': '#8dbed3',
'400': '#6ca6c1',
'500': '#3c7e9e',
'600': '#356785',
'700': '#30566e',
'800': '#2e485c',
'900': '#2a3e4f',
'950': '#182734',
}Fonts
For this project, I have selected the Poppins font. Its clean and modern appearance enhances readability and complements the overall aesthetic of Moodscape.
Logo Design
The logo for Moodscape is a simple yet elegant icon presenting a landscape within a hexagon shape. This design captures the essence of Moodscape brand, symbolizing the diverse and unique art forms. The logo incorporates brand color, blue, which conveys trust, tranquility, and creativity.
Images
Icons
Pages and Features
Front End Pages
User and Content Management Pages
Profile Management for Talent and Employers
Account Management
Django Administration
Technology used
Languages and Libraries
Version Control and Collaboration
Tooling
Design Tools
Testing and Validation
Other
Development and Deployment
Cloning the project
Environment Settings
Development
Staging and Production
Environment Variables Template
Local Development
Deployment on Heroku
Load Example Content
Load Fixtures Locally
Load Example Content for Staging Site
Manual testing
Website Header and Navigation
Responsive Design Tests
Google PageSpeed Insights Tests
HTML Validation and Accessibility Testing
Testing User Pages
CSS Validation
JavaScript Validation
Automated testing with Pytest
Running Pytest
To ensure the reliability and correctness of the backend code, we use pytest for automated testing. Follow these instructions to run the tests:
- Ensure pytest is Installed:
Make sure pytest is installed in your project environment. If it's not installed, you can install it using pip:
pip install pytest- Run the tests
pytest -rP -vRunning Cypress Tests
To open Cypress in interactive mode:
npm run cy:openTo run Cypress tests headlessly:
npm run cy:run