overview

research process

Initial Discussions

My friend contacted me about his stepfather's art and how they wanted a website to sell it on. I had already known of his art, but my friend also warned me that they really don't know a lot about computers. So going into this I didn't want to make anything super complicated and knew I would have to use some sort of easy-to-use content management system. I had two idea in mind, Squarespace and Webflow. I ended up choosing Webflow because I was more familiar with it, and it's more customizable as it's much more similar to HTML and CSS.

Meeting with the Parents

We set up some time late September to meet and get more in-depth view of what they wanted. I did as some preliminary questions regarding what type of things they wanted to sell, did you want to go through me to add listings or do it yourself, and other things of that nature. They ended up wanted to add and edit the listings themselves, since they didn't want to budge into my schedule too much.

Notes from the meeting

I also had figured once we settled on the details it would be more of a window shopping sort of meeting, where I would go through different e-commerce templates Webflow offered and they would essentially pick the one they wanted. It did end up becoming that, but not before some hills to climb. He and his wife were concerned on why I was showing them other sites and I helped them to understand that I would essentially be taking the site they chose and changing any of the things they didn't like. It didn't take long for them to catch on, so I took that as a small victory. We ended up choosing a site they wanted and fit their needs, they let me know what they didn't like about it, and then we set up another meeting.

View the site they chose here

design

Styling

So with the site that they wanted I went about making the styling changes they wanted. I matched the font they had on their buisness card for the main logo, changed the main font used on the site, and added the categories that they had wanted. Overall it was a general refresher on my HTML and CSS skills, but that last task of creating the categories they wanted would cause me a few issues later on.

Content Management

So, since they had very low knowledge of Webflow's CMS  I wanted to make sure that when they add listings it would be very easy and effortless. This took some research. Before this the only knowledge I had of Webflow was creating this portfolio which was entirely "custom." So I went online to figure out how his parents could do it. Thankfully Webflow has insanely great tutorials online and figuring out their CMS was a breeze.

First on the list was redoing the categories. Before when I did the styling I made them custom pages, but with the CMS system in place it would auto generate the pages based off the products categories. The auto-generation of the pages was such a cool feature to use. I've had some experience with another CMS, Sitecore, but that was more enterprise wide and working this on a small scale was much more rewarding. Next to do was creating the form for them to use to add and edit listings. This was also a breeze as all I really had to do was rename a few things and add a filter checkbox if they wanted things to appear on the front page.

Some examples of Webflow's Ecommerce and CMS

Validation

Final Meeting

Payment Issues

The day before the final meeting I let them know that they needed to make an account with Stripe in order to have the checkout process actually feed into their account. They let me know they made it, but found some issues with it. So when I got there I got to troubleshooting their issues and it looked like there wasn't an account made. So we just ran through that process, which helped a ton since that tutorial session prepared them for the walkthrough of the site.

Review

After finishing up the checkout process, I did a general walkthrough of the site and made sure things were to their liking and none of the styling bothers them. They loved it and we got right into the CMS section.

When we got here things went a bit slower. We made sure to take notes at every step and even smaller steps like when things might need to be scrolled just to make sure. I completely went through the form, first just showing them how to access the site from the CMS view. Then going through the product list, adding a product, showing them where it pops up on the site, editing, and finally removing.

Once we finished everything up, I double checked to make sure they didn't have any questions, they didn't have any. They did mention it might take a while for them to get pictures of their products (looks like they haven't added anything quite yet). I let them know when that time comes that I'm just a text away if they run into any issues. Then me and my friend went out for wings!

Splash of Colour Site

take aways

Patience

This project helped to open my eyes to how to much of the world modern tech can be frustrating. It's kinda like a new language and if you weren't born into it or learned it through experience, catching up is really hard to do. So going slow and making sure even the small things I overlook everyday need to be pointed out to new inexperienced users.

CMS's is Insanely Powerful

Using Webflow's CMS and Ecommerce system opened my eyes to the possibilities of how easy it can be to create websites in the modern world. With some general knowledge and youtube videos any random person can create a very professional looking site that can be easy to use not only from a customer perspective, but a seller perspective as well.