During my web development internship with the marketing agency Atomic Honey, I had the awesome opportunity to redesign one of their clients’ websites, Green Door Distillery. At first I was only expected to add a new menu or a job posting. While inspecting the site further, my supervisors and I discussed other drawbacks we wanted to improve. The most significant change implemented was switching from SquareSpace to Shopify. The final product can be found here.
The first part of this project was learning how to use Shopify. I did my research and found a lot of helpful articles online and used tutorials on YouTube to learn the specifics of Shopify to build and design a website. After building a general understanding of Shopify, I dove right into adding pages and transferring the content over. While switching back and forth between the SquareSpace and Shopify sites, I took notes about what needs work.
Several pages were experiencing sizing and alignment issues
After creating each page and filling in all the content in Shopify, I went through to fix all the design issues. So I made sure each similar elements were the same size and aligned with each other.
Feels like scrolling through a green void
Try to change up the background for each section to break up content. This will make the content easier to digest.
Lacking the personality of what Green Door Distillery is like
I made sure to add several pictures to each page. This way costumers can get a preview of what the bar looks like if they decide to visit and can figure out what they should wear.
The phone version of the website didn't follow a logical structure like the computer version
I was able to figure out how to edit the css files on Shopify to add a way for elements to only be present for computers or phone versions. This way I could control the logical order of elements when they shrink together.
While creating all the pages in Shopify, I wanted a visual for me to understand how each page is connected. I decided to create a flowchart to show how all the links, pages, and content are related based off the original website. With a base of the flowchart figured out, I realized where some content was buried to deep. So by reworking the flowchart to have a better flow, I made sure to add these changes to the new website on Shopify. The flowchart above is the final version.
One of the biggest learning moments during this project for me was making sure I save an extra version of my code before making edits. Two of the reasons I like Shopify was that it felt easier for me to make edits in the code and they have good costumer support. So, during the project I wanted to make some edits in the CSS files to help with the design. When trying to delete a smaller file, I accidentally deleted one of the CSS files and there were no back buttons to undo. I messed up and panicked for a bit, until I remembered Shopify had good costumer service. I reached out to them and explained the incident, and they got back to me the next day. The problem was solved and I informed my supervisor about what had happened. He had reminded me that he always makes a copy of his code before making any changes just incase of situations like mine happen. I'm definitely not making that mistake again.