Shopify Web Design Workflow and Schedule

This article shares my time schedule for building a Shopify e-commerce website, including requirements confirmation, website content planning, web visual design, Shopify template selection, and Shopify app configuration. It breaks down the tasks and details of each stage(Last updated: 2022-10-09)

“Practical experience sharing, not just online information compilation.” – Irving

I have been making adjustments based on several projects at hand to establish a smooth SOP and plan for executing Shopify website “design,” and effectively applying them in online collaborative documents or files. I have created several template documents and software used, as follows:

1. Shopify Website Timeline Sheet Template（Google Sheet）
2. Shopify Website Project Template (Notion): Currently undergoing step-by-step optimization, please stay tuned!

Shopify Timeline Sheet

I have been making adjustments based on several projects at hand to identify a smooth SOP and plan for executing the design of a Shopify website. The diagram below outlines the basic steps and processes, but some stages can be parallelized. For example, basic Shopify setup can begin after purchasing a template, and it is advisable to start confirming payment gateway settings as early as possible (usually takes around one to one and a half months from application to completion). The overall timeline for website completion and launch is flexible based on actual requirements. (Pro tip: To expedite the website development process, opting for a powerful and well-designed Shopify template can significantly improve efficiency. For instance, using the Minimog Shopify Theme, which I have used in at least five websites, is user-friendly and highly recommended for reference.)

Shopify Website Planning and Design

1. Brand Guideline: Includes basic elements such as logo, typography, color scheme, etc.
2. Resource (Materials): Includes all the materials and images that will be used on the website.
3. Requirement (List): Client’s requirements should be listed in a concise and powerful manner using a “list format”. Clear organization of requirements is crucial as it sets the foundation for smooth progress. Over-communication should never be a concern because of its paramount importance.
4. Wireframe: I divide this into two stages. In the first stage, I quickly layout the content based on the available data and update it during discussions with the client. The second stage involves finalizing all the discussed outcomes and ideally incorporating the “complete copy” into the wireframe.
5. Web Design: This is divided into the proposal stage and the final file stage.
6. Shopify Theme: The selected template should be tested to identify any functional limitations. All strengths and limitations should be transparently discussed. Based on these limitations and requirements, suitable Shopify apps can be identified.
7. Shopify App: Important Shopify apps used for critical testing and implementation steps should be documented. This not only helps with personal memory but also serves as an important file for team collaboration and handover. Recording the process using Figma is an efficient approach that saves time.
8. SEO meta: Basic SEO meta settings and content strategy are crucial. For example, webpage title, meta descriptions, and preview can be preliminarily set based on keyword analysis. This is one of the factors affecting various SEO rankings, such as click-through rates on SERPs for specific keywords and brand image during social media previews. Many people tend to overlook or underestimate the importance of this aspect, but it requires careful consideration.
9. Web Analytics: Website analytics tools should be set up. Essential installations include Google Analytics and Google Search Console. Additional tools such as Google Tag Manager can be considered based on specific needs. Paid options like Hotjar, CrazyEgg, and Mixpanel can also be used depending on the requirements and investment possibilities. A/B testing for webpages is also worth considering, and related functionalities are available for subscription on the Shopify App Store.
10. Feedback (Testing): After the website is completed, testing and feedback are necessary. It’s important to gather feedback both before and after the official launch to ensure a good browsing and shopping experience for consumers.

Website Project Execution

After several years of creating dozens of websites for clients across various industries, we have developed and refined a website project execution workflow through collaboration, learning from past mistakes, and continuous improvement. This workflow enables individuals who are new to website design, including designers, developers, and clients, to gain a preliminary understanding of each executable step, reduce communication costs, and improve work efficiency.

Regardless of the platform used, the planning of website design process follows a similar structure, with the only difference being the platform-specific implementation. The diagram below illustrates the time schedule for designing a Shopify e-commerce website. Each stage is planned and adjusted flexibly based on actual requirements and circumstances, and the duration of each phase can be taken as a reference. By having a concept of “time required for execution” and “tasks,” it provides clarity for the team, clients, or project managers during the initial planning stage.

---

During the project execution process, there will be various challenges related to implementation, communication, and more. I will gradually share my experiences and commonly used digital tools to enhance the efficiency of discussions and collaboration between both parties. By utilizing different tool combinations for different scenarios, we can maximize the effectiveness of the project and this becomes particularly crucial during remote meetings. Remember to revisit this page regularly and bookmark it for future reference!

專案執行小訣竅

How to export all pages of a PDF file for easy reading, quick note-taking, sharing, and even collaboration?

Solution

1. PDF imported directly into Miro (as an image file)
2. PDF imported directly into FigJam (with editable text)
3. PDF imported into Figma through the PDF to Figma plugin (as an image file)

Utilize tools (using the free plan is sufficient, as it comes with limitations; for details on the limitations, please refer to the official website)

1. Miro: Online collaborative whiteboard tools
2. Figjam: Online collaborative whiteboard tools
3. Figma: Online collaborative UI design tools, paired with Figma plugins – PDF to Figma

Use cases or scenarios

Sometimes clients or stakeholders provide me with their self-made PDF files for reference, which may include website page descriptions, detailed wireframe requirements, and so on. Especially when there are numerous pages and a significant amount of text, it becomes cumbersome to switch between design software and PDF files for viewing. It is more efficient to directly import the entire PDF into the design software for reading and editing.

However, in the past, I used to export PDF files as image files through Acrobat. Even when adjusting the resolution parameter to the highest level, the result was not as good as expected (it was still somewhat compressed?!). Alternatively, I would import the PDF into Photoshop or Illustrator and adjust the parameters before exporting, but this process was cumbersome and time-consuming.

Later on, using these three methods, I eliminated the long-standing pain I had been experiencing. It removed the small steps and provided a direct solution! Miro, FigJam, and Figma all allow quick login with a Google account, streamlining each step of the process to the maximum. Moreover, they allow note-taking while conducting online meetings and sharing screens, providing a seamless and enjoyable experience.

Note: If the other party provides a PowerPoint file, you can first use the built-in export function to export it as a PDF file.

---

---