Color & Design Shop
Ecommerce Web Application for Professional Art Supplies & Materials
Role: Developer Timeline: 4 Months
Process: 8 Phases of the Web Design Process, as defined by Dave Holston’s HOW Design University
Problem Statement
Artists and creative groups alike are looking for a reliable market place to buy high quality products
Color & Design Shop is an up & coming online art store for people to expand their creative horizons.
Understand
Research & Identifying
I conducted user research about people in the art community. I studied consumer insight about the art supplies market.
Key Insights…
“The Global Art Supplies market is anticipated to rise at a considerable rate during the forecast period, between 2023 and 2030.”
- Art Supplies Market Insights 2023-2030 (Precision Reports)
“Keep it in perspective.”
- 5 Things Ecommerce Customers Actually Want From Your Store (Entrepreneur )
“The market's growth will be driven by several factors such as size, segmentations, upcoming trends, sales volume, demand and supply.”
- Global Art Materials Market 2023 (NewMediaWire)
User Interviews
I conducted user interviews (via Zoom) to:
better understand user needs and behaviors
identify pain points, obstacles, and areas for improvement.
The people interviewed were of:
different demographics
different motives for their artistic and creative passions.
Probing Questions:
Their occupation?
Issues they have as an artist/creative?
Why art is important to them?
How much time they spend looking for art resources?
How involved they are in the artist community?
In what ways would they use this interface?
How likely/unlikely are they to use this interface?
Does this remind them of other interfaces on the market?
How satisfied they are with the interface?
Define and Ideate
Project Summary:
Develop and style a functional and intuitive browser dependent web application to sell professional art supplies and materials. Provide a resource where people can get products to support their artistic endeavors and serve as tools for personal growth .
Goals/Outcomes:
1. The business will be able to sell physical goods, services, and digital products over the internet rather than at a brick-and-mortar location.
2. The business can process orders, accept payments, manage shipping and logistics, and provide customer service.
3. People will enjoy an intuitive and easy to navigate application to buy products and feel included in the art community.
Target Audiences:
Artists who are passionate about art and want to express themselves through color. Creatives that need the proper tools to design their vision. Educators who need supplies to teach students the way of art. Hobbyist that love a world of color!
Messages:
Discover your rainbow today. See what other artists are creating. Get a free consulation, design custom packages, connect with artists, get amazing deals, and showcase your artwork. Whatever it is, come create with us and improve your design skills now!
Competition:
S&S Worldwide (www.ssww.com) very busy and cluttered landing page, hard for people to navigate. A Cherry On Top (www.acherryontop.com) I will differentiate my web app by designing a visual brand that is elegant to the eye and easy to adapt.
Project Scope
3
Every 3 weeks a new portion of the app will be built.
4
The application will take me 4 months to complete.
5
The application will be broken down into 5 sections
This is a iterative process, continuously improving my concept, design, and product each week!
Prototype
I defined the site architecture by designing UX sitemaps and wireframes of pages, which will be used as the skeleton for prototypes.
UX Site Map
I put myself in the user’s perspective. I imagined how a person will flow through the app and what content they would expect to view.
Wireframes
Bringing the sketch to a digital platform allowed to me further elaborate on:
the on space allocation
prioritization of content
functionalities available
intended behaviors
I designed the interface prototype using HTML5, CSS, and JavaScript.
Key Moments
Brand-Awareness Landing Page
A strong brand presence cuts through the clutter and establishes credibility and authenticity.
Concise Inventory Page
Mobile friendliness creates a pleasant user experience for customers wanting to search and browse company products.
Informational About Page
Sharing information about your company's mission, values, and business practices, demonstrates transparency.
Visual Design:
This is always the fun part!
Given that this was an ecommerce is for professional art supplies and materials, I came up with the perfect style in 3 words:
Colorful, Creative, & Studious.
Visual System Elements
Colors
Typography
Test
I can always guarantee there will be some issues that need to be addressed before the site goes live.
To prevent my brand from erosion, I made sure the application:
was functioning properly
had no misspellings or broken design elements.
was reviewed on multiple browsers
was tested on multiple devices
Testing On Multiple Devices
I noticed design elements that were broken and noted them for repair. This why is attention to detail and repetitive checks are worth the time and effort!
I saw how the responsive web design altered between the different screen sizes while testing the application, and where errors could be corrected. For example, I noticed that banners and footers weren’t stretching across the entire screen, textboxes weren’t aligned with there images, and the navigation bar appeared differently on some pages.
IPhone 12 Pro
IPad Air
Samsung Galaxy S8+
Dell Inspiron Desktop
User Feedback
User satisfaction is important. Incorporating user feedback allows me to:
evaluate the interface based on real human experiences
ensure that the interface was user-centered
meet the needs and expectations of the people!
**Gathering user feedback sooner than later helped me as the developer to identify and address any issues or problems before they become significant, which saves time and resources.
The people giving feedback from different demographics, with different reasons for using this interface.
“The organization of the products made it easy for me to find what I was looking for.”
Ben: Creative Hobbyist
“I saw that I could showcase my work in a gallery, but didn’t feel properly guided on how to follow up with the opportunity.”
Darlene: 3D Designer
Delan: Biology Illustrator
“After selecting all the items I want to put in my cart, I had trouble understanding the total cost of my purchase.”
“When exploring the about page, I instantly felt relieved that I found an app that would allow me to feel more included in the art community.”
Adam: Freelance Artist
“I appreciate how I could get customized package deals, making it easier to provide all the necessities for my students.”
Malik: School Teacher
“I want to connect with other artist in my area. I would feel more comfortable if members to had profile pages, so I could know more about the person before reaching out.”
Rosie: Art Student
Launch
For a successful launch, a marketing plan must be put together. The web app must undergo a SEO process.
Search Engine Optimization.
SEO tactics I used for my web app include conducting competitor research, simplifying the site architecture, optimizing product pages, and using responsive design. To target people in the art and creative community, I used key words like art, paint, print, artist, acrylic paint, watercolor, art supplies, etc.
Site Maintenance
As an ecommerce, I will:
Backup my store regularly.
Make sure products are in stock.
Keep an eye on analytics.
Know if my site ever goes down.
Check for broken links.
Monitor and optimize site speed.
Test your checkout regularly.
How did I build this web app?
I assembled the project in Visual Studio IDE (2022) to build a cross platform web application for Windows, Mac, Linux, iOS, and Android. I defined the structure, content, and style of web pages with HTML5, CSS, and Bootstrap. It was essential to use Bootstrap, so I could have a responsive web design. On some pages, I programmed XML and/or JSON to represent web page content. With this, I applied Document Object Model (DOM) for both documents and browsers.
The client side functionality (how users will interact with the web app) was implemented using the JavaScript language and JQuery library. I used ASP.NET to build web-based client-server applications. Lastly, I incorporated associated Application Programming Interfaces (APIs) to build a distributed web application.
Key Learnings
Fostering Artistic Community Engagement:
Our user testing has unveiled the significant value that users place on the art supplies community page as a source of inspiration, motivation, and support. Some users have even expressed a desire for more interactive features and opportunities for social sharing. This valuable insight will guide our future efforts to enhance the community page, thereby fostering greater engagement and promoting stronger social connections within our artistic community.
Enhancing Search Functionality:
Customers have expressed difficulties in locating specific art supplies while using our e-commerce platform. This highlights the need for improving the search functionality and optimizing the categorization of our art supplies. These enhancements will make it easier for users to find the products they need efficiently.
Prioritizing Clarity and Simplicity:
User feedback has underscored the paramount importance of clarity and simplicity in our user interface. Users reported feelings of confusion and frustration when features were challenging to locate or understand. In response, we will focus on refining the user interface, prioritizing clear and intuitive navigation, and streamlining user flows to ensure a seamless and user-friendly experience for our customers.