search

DietkeSt / GraphicDesignShop

0 stars 1 forks source link

readme

ArtisticEdge - Graphic Design E-Commerce Website

Deployed website: Link to website

Repository: GitHub Repo

The app was developed by: Dietke Steindel

Main image

Card number for payment testing: 4242424242424242

About

ArtisticEdge is more than just a graphic design service; it's a dynamic digital platform crafted specifically for creativity and client interaction. At ArtisticEdge, we merge imagination with precision to deliver custom design solutions that not only meet but exceed our clients' expectations. Whether you're browsing for inspiration or ready to commit to a project, our website is designed to support your journey from concept to completion.

Mission

We are dedicated to transforming your ideas into visual realities. With a focus on customer satisfaction and efficient service, ArtisticEdge aims to provide an unmatched user experience. Our platform caters to a diverse range of design needs—from individual projects to comprehensive branding strategies. We ensure that every interaction is seamless, from the initial sign-up to the final delivery of your bespoke design.

UX

ArtisticEdge is designed to be both eye-catching and user-friendly. Our platform offers an intuitive navigation system, allowing users to easily explore a variety of design services tailored to their needs. We emphasize simplicity and clarity in design, making the website straightforward to use and understand. By integrating a wishlist function, we also encourage them to return and engage further at a later stage. Behind the scenes, the website supports admin functionality, enabling staff members to efficiently manage the orders. This approach ensures that ArtisticEdge is scalable and adaptable, ready to meet real-world business demands effectively.

Target Audience

The website caters to a diverse audience ranging from casual browsers seeking design inspiration to serious clients looking for bespoke graphic design services. Ideal for individuals or businesses contemplating unique, tailor-made designs for branding, web presence, or visual projects, the platform ensures an enriching experience for:

User Stories

Persona 1: Casual Website Visitor

Issue ID User Story
#1 As a visitor I want to easily navigate the website, view the designer's portfolio, and get a feel for their style without signing up, allowing me to enjoy the content effortlessly.
#2 As a visitor I wish to have the option to subscribe to a newsletter or follow the designer on social media to stay updated on new designs and trends without committing to creating an account.
#3 I want to browse and search for graphic designs based on categories (icon, logo, poster).
#4 I want the option to easily inquire about a design service without committing to a purchase, allowing me to seek more information or discuss customization options with the designer.
#5 I want the option to easily save my preferred design services to a 'cart', allowing me to quickly proceed with the purchase when I decide to sign up.
#6 I want the option to easily remove items from my cart or undo accidental additions, ensuring a stress-free experience even if I don't intend to make a purchase.
#7 I'd appreciate a clear indication that my cart is empty and a seamless way to exit the checkout process without being prompted to create an account.

Persona 2: Customer and Potential Customers Persona

Issue ID User Story
#8 I expect a clear and user-friendly interface that guides me through the available services, enabling me to easily find and purchase the design service that matches my requirements.
#9 I want to view details of a graphic design, including its price and description.
#10 I want to order a graphic design by filling out a form with my requirements.
#11 I want to see a preview of the quote before making a payment.
#12 I want a smooth and secure checkout process, allowing me to review the details of the selected service, customize options if available, and complete the purchase with various payment options. Future development: to pay with various payment methods
#13 I want to track the status of my orders (pending, completed).
#14 I want to leave a testimonial and rating for the completed designs.
#15 I expect to receive a confirmation email with detailed information about the purchased service, including estimated delivery times and any additional steps required from my end.
#16 I want a transparent and easy-to-follow checkout process, providing a summary of the selected service, allowing me to review and confirm my purchase before completing the transaction.
#17 I want to easily find the 'Sign Up' option, where I can create an account with minimal information, allowing me to save favourite designs and preferences for future reference.
#18 I'd appreciate a feature that allows me to bookmark or save specific designs or services, so I can seamlessly transition to purchasing when I'm ready.
#19 I'd appreciate a clear pathway to add a service to a 'wishlist' for future reference, even if I'm not immediately ready to make a purchase.
#20 I'd appreciate personalized recommendations based on my saved designs and preferences, enhancing my overall shopping experience and making it more tailored to my interests. Future Development
#21 I want a straightforward option to create an account during the checkout process, with the ability to save my information securely for future purchases, minimizing the need for redundant data entry.
#22 I'd appreciate a clear distinction between the steps required for checkout and optional account creation, ensuring a smooth experience for both one-time and returning customers. Future Development: Guest Checkout

Persona 3: Service Provider (Graphic Designer and Shop Owner)

Issue ID User Story
#23 As a Designer, I want to add new graphic designs to the platform.
#24 I want to view and manage all orders.
#25 I want to upload completed work for customers to download.
#26 I want to view and manage user accounts and roles.
#27 I want to easily keep track of order, and user communication.
#28 I wish to have the option to access billing information through user sign-ups for my bookkeeping and invoice creation. Future Development: Invoice Creation
#29 I want to receive timely notifications and details when a customer purchases one of my design services, allowing me to prepare for the project and meet the client's expectations.
#30 I wish to have a user-friendly dashboard that provides insights into sales performance, helping me understand which services are popular and allowing me to optimize my offerings. Future Development: Analytics Dashboard
#31 I want to provide customer support through accessible channels during the checkout process, such as a contact form, ensuring that customers can get assistance if they encounter any issues.
#32 I wish to receive real-time notifications for successful transactions and, if applicable, be notified of abandoned carts to follow up with potential customers and address any concerns they might have. Future Development: Abandoned Carts Notification

Business Model

Overview

ArtisticEdge operates on a Business-to-Consumer (B2C) and Business-to-Business (B2B) model, specifically tailored for individuals and companies seeking professional graphic design services. Our platform enables customers to explore and purchase customized design solutions directly from a graphic designer.

Target Audience

Persona 1: Casual Website Visitor

Persona 2: Customer Persona

Persona 3: Potential Customer

Persona 4: Service Provider (Graphic Designer and Shop Owner)

Marketing Strategies

Digital Presence and SEO

User Experience Design

Sales and Customer Retention

Transaction Model

Sign-Up Process

Checkout Experience

Performance Metrics

Conclusion

ArtisticEdge is committed to delivering exceptional graphic design services that meet the dynamic needs of a diverse client base. Through strategic SEO, user-centric design, and personalized customer interaction, we aim to build long-lasting relationships and a reputable brand in the graphic design industry.

Web Marketing

1. Newsletter

The newsletter was implemented by using Mailchimp. The admin can create a newsletter via the Mailchimp account and send it to all subscribed users.

The newsletter subscription for the account was implemented in the newsletter app which checks the user's current subscription status.

2. Facebook - Link to Page

Facebook is essential to be able to reach customers. According to the statistics, the store has a good reach among people who prefer to use Facebook. Facebook has excellent coverage worldwide among people who can purchase products online.

"ArtisticEdge" Facebook page is for marketing purposes to post adverts and exciting content and engage users.

ArtisticEdge Facebook Page

3. LinkedIn - Link to Page

"ArtisticEdge" LinkedIn page is useful to reach businesses in need of Web and Graphic Design Services. It is used for marketing purposes, pro-active outreach and afvert post, exciting content and to start discussions in the Design industry.

ArtisticEdge LinkedIn Page

Note: rel="noopener noreferrer" was used for all social links opening in a new tab.

SEO implementations in HTML

Other SEO implementations

  1. Implemented a sitemap.xml into the root directory for the project.

  2. Implemented a robots.txt into the root directory for the project.

    • The robots.txt file can be tested directly on Google here.

Note: As this is not a requirement for this project, the sitemap was not registered and robots.txt was not tested.

Future Development

Support Chat

Chat support is planned to be implemented to provide the customers with the best possible service.

Payment system

I want to implement PayPal payment system in the future as many customers prefer it. I am also considering adding more payment functionality into the Stripe payment system already implemented, so the user can choose their preferred method.

Order cancellation

At the moment, the customer would need to manually reach out to cancel an order. As this would require a payment refund, this feature requires more research time to implement, which is why it is not implemented at this stage.

Improved Email Design

The notification emails sent out at the moment are plain text and in some cases not formatted. This is due to time constraints during this project and as a developer I made the decision to improve on the emails at a later stage as it is not a crucial feature for the website functionality.

Personalized Recommendations

The personalized recommendations should be based on items on the wishlist and previous purchases. This needs some more research time to implement.

Guest Checkout

This was not implemented yet due to time constraints, but is planned for future development.

Invoice Creation

At the moment, the store owner is able to see the billing details in the account, so would be able to manually create invoice. An automatic invoice creation option would require more research time.

Analytics Dashboard

It would be great to see a detailed analytics dashboard that provides insights in sales performance. This should help in understanding which services are popular and see when customers abandoned a cart.

Abandoned Cart Notifications

In addition to the dashboard a simple abandoned cart notification is planned for future development, allowing the store owner to follow up with the customer or potential customer.

Technologies used

Features

Please refer to the FEATURES.md file for all test-related documentation.

Design

The design of the website embraces the robust and intentional aesthetic of Material Design principles. In aligning with these guidelines, a minimalistic color palette has been selected that enhances usability while adhering to Material Design standards. The design approach is minimalistic, prioritizing clarity and utility, ensuring that every element serves a purpose without distracting from the user's core objectives.

This multifunctional application is designed to enrich the customer experience and streamline business management processes. It incorporates numerous components, each crafted to operate cohesively within a larger system. The strategic use of white space throughout the application's interface plays a pivotal role in this design, fostering a calming and pleasant user environment. This thoughtful spacing allows users, whether they are customers or staff members, to focus more effectively on the essential content and tasks at hand.

By emphasizing simplicity and functionality, the application not only meets the demands of modern business operations but also delivers a delightful and intuitive user experience.

Color Scheme

The application's color scheme is based on the combination of bold and neutral colors. The bold colors are used to create a more vibrant and attractive user experience and get the attention of the user. The neutral colors are used to create a more calm and relaxed user experience that goes along with the highlight color.

Color Scheme

The color scheme for the text is quite simple to create a more readable user experience. It is using the bootsrap attributes to either use dark or light text.

Accent colors are implemented with the pink primary color #E83D95 to help users navigate the application. The accent colors are used to create a more vibrant and attractive user experience.

Accent Scheme

Typography

ArtisticEdge employs system fonts for its typography, providing a familiar and efficient user experience. This approach ensures optimal readability and quick loading times, as it uses the default fonts already installed on users' devices. The use of system fonts not only enhances performance but also maintains a consistent look across various platforms, aligning seamlessly with the intuitive and user-friendly design of the website.

Imagery

Wireframes

ArtisticEdge Wireframes

Agile Methodology

GitHub Project Management

GitHub Project Management was used to manage the project. If it hadn't been for the GitHub project management, I wouldn't have been able to manage the development of the application. It helped me to prioritize the tasks and to keep track of my progress.

GitHub Project Management

GitHub Project Management

Information Architecture

Database

Entity-Relationship Diagram

ERD

Data Modeling

Product Model

Name Database Key Field Type Validation
category category ForeignKey Category, related_name='product', on_delete=models.CASCADE
created_by created_by ForeignKey settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='product_creator'
title title CharField max_length=255
description description TextField blank=True
image image ImageField upload_to='images/product/', default='images/default.png'
image_alt_text image_alt_text CharField max_length=255, blank=True, help_text='Product Image Alternate Text'
slug slug SlugField max_length=255
price price DecimalField max_digits=10, decimal_places=2
in_stock in_stock BooleanField default=True
is_active is_active BooleanField default=True
created created DateTimeField auto_now_add=True
updated updated DateTimeField auto_now=True

Category Model

Name Database Key Field Type Validation
name name CharField max_length=50, db_index=True
slug slug SlugField max_length=50, unique=True
description description TextField max_length=255, blank=True

PortfolioItem Model

Name Database Key Field Type Validation
title title CharField max_length=200
description description TextField None
category category ForeignKey Category, on_delete=models.CASCADE, related_name='portfolio_items'
image image ImageField upload_to='portfolio_images/'
image_alt_text image_alt_text CharField max_length=255, blank=True, help_text='Product Image Alternate Text'
date_added date_added DateTimeField auto_now_add=True

Order Model

Name Database Key Field Type Validation
user user ForeignKey settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='order_user'
full_name full_name CharField max_length=150, default='No name provided'
phone phone CharField max_length=50, default=''
address_line address_line CharField max_length=255, default='No address provided'
address_line2 address_line2 CharField max_length=255, default=''
town_city town_city CharField max_length=150, default='No city provided'
country country CharField max_length=200, null=True, blank=True, choices=[('', 'Select Country')] + list(CountryField().choices)
postcode postcode CharField max_length=50, default='No post code provided'
created created DateTimeField auto_now_add=True
updated updated DateTimeField auto_now=True
total_paid total_paid DecimalField max_digits=5, decimal_places=2
order_key order_key CharField max_length=200
buyer_note buyer_note TextField blank=True, null=True, max_length=500
billing_status billing_status BooleanField default=False
order_status order_status CharField max_length=20, choices=[('received', 'Received'), ('in_progress', 'In Progress'), ('finalized', 'Finalized')], default='received'

OrderItem Model

Name Database Key Field Type Validation
order order ForeignKey Order, on_delete=models.CASCADE, related_name='items'
product product ForeignKey Product, on_delete=models.CASCADE, related_name='order_items'
price price DecimalField max_digits=5, decimal_places=2
quantity quantity PositiveIntegerField default=1

Review Model

Name Database Key Field Type Validation
product product ForeignKey Product, on_delete=models.CASCADE, related_name='reviews'
user user ForeignKey settings.AUTH_USER_MODEL, on_delete=models.CASCADE
rating rating IntegerField default=1, choices=[(i, str(i)) for i in range(1, 6)]
comment comment TextField blank=True, null=True
created_at created_at DateTimeField auto_now_add=True

User Account Model

Name Database Key Field Type Validation
email email EmailField unique=True, _('email address')
name name CharField max_length=150
mobile mobile CharField max_length=20, blank=True
profile_image profile_image ImageField upload_to='profile_images/', null=True, blank=True
is_active is_active BooleanField default=False
is_staff is_staff BooleanField default=False
created created DateTimeField auto_now_add=True
updated updated DateTimeField auto_now=True

Address Model

Name Database Key Field Type Validation
customer customer ForeignKey Customer, on_delete=models.CASCADE, verbose_name=_("Customer")
full_name full_name CharField _("Full Name"), max_length=150
phone phone CharField _("Phone Number"), max_length=50
address_line address_line CharField _("Address Line 1"), max_length=255
address_line2 address_line2 CharField _("Address Line 2"), max_length=255
town_city town_city CharField _("City, State"), max_length=150
country country CharField _("Country"), max_length=200, null=True, blank=True, choices=[('', 'Select Country')] + list(CountryField().choices)
postcode postcode CharField _("Postcode"), max_length=50
created_at created_at DateTimeField _("Created at"), auto_now_add=True
updated_at updated_at DateTimeField _("Updated at"), auto_now=True
default default BooleanField _("Default"), default=False

Portfolio Model

Name Database Key Field Type Validation
title title CharField max_length=200
description description TextField None
category category ForeignKey Category, on_delete=models.CASCADE, related_name='portfolio_items'
image image ImageField upload_to='portfolio_images/'
image_alt_text image_alt_text CharField max_length=255, blank=True, help_text='Product Image Alternate Text'
date_added date_added DateTimeField auto_now_add=True

Testing

Please refer to the TESTING.md file for all test-related documentation.

Deployment and Payment setup

Please refer to the DEPLOYMENT.md file for all deployment and payment-related documentation.

Credits

Content and Images

Acknowledgments