When you’re working with a highly creative and motivated team led by a CEO that’s even more so, you can’t simply rely on the ordinary to get a task done. So, when it came to MOON’s digital strategy and how to re-prioritize a site built primarily for establishing brand image to one that can generate sales, you can’t settle for the routes that most companies would take to get it done.
For example, most limited product stores (ex. From single item to under 10 products) would reconfigure a Shopify theme and pop up some extensions and call it a day. Not at MOON. Not when the current team’s efforts built up a site reminiscent of what you see on Apple.com and generated thousands of organic monthly page views. A simple Shopify build, or a rework of a template simply won’t do. Further, we at MOON were at the beginning stages of building out and re-working our entire digital strategy to more focus our growth-based mindset which meant that we have to consider the future roadmap even a year out to determine our best web tools and infrastructure. I did not want MOON to be in the position of having to re-work the entire site again because we didn’t plan well enough ahead with the tools and upgrades we wanted to use.
Therefore, I looked at the project through multiple lenses:
- How can we maintain the creative edge that the existing MOON team brings to every project they do?
- What site adjustments are necessary to further growth. i.e. What KPIs are the most important to determine if the site re-build was a success?
- What is our current and future digital strategy broken down by quarter and prioritized by time, effort, and cost?
- What web infrastructure will support our existing tools and initiatives and could work or be easily shifted to support those of the future?
That’s what led to this crazy digital strategy/marketing graphic, built in Miro, that you see me post from time to time…
It also led to the understanding that MOON’s “marketing pages” are distinct from our app or shopping and checkout experience. Not unlike most SaaS businesses who have site and marketing content on one end and then a user dashboard or app experience on the other. For e-commerce, the most optimized and conversely least-changed element is the checkout experience and then the distinct product pages that add-to-cart. This is why most stores using Shopify don’t need to upgrade to Shopify Plus until they need to start modifying their checkout experience.
The rest of the pages beyond product and checkout are there for consumer info, ethos building, and most importantly, content strategy and marketing. That’s what led to the route of using a CMS service, like Wordpress or Webflow in our case, separate from our shopping cart and checkout pages. MOON is a creative powerhouse and shouldn’t be constrained by web infrastructure to put that creativity into action and dazzle its customers. For that reason, I determined Webflow integrated with Shopify would provide the best of both worlds - if we could make the integration work. You see, Shopify doesn’t play all that nice with outside tools, and Webflow just recently started entering the e-commerce space albeit still in Beta with their offerings and doesn’t have the robust extension marketplace that Shopify already built out.
Now that we decided on the ideal infrastructure to support our short term initiatives and is flexible enough to build on in the long term, I started to engage in a competitor analysis to help support the UI/UX and wireframing process. The first step in this was to look at companies in and around our space worth emulating. I did a version of this utilizing tools like whatruns and wappalyzer to analyze the tech stacks of similar sites when we were going over the best base infrastructure as well. There are many routes to go about this process in the design stage. The route that I find best is to analyse what we currently have and like with our current build and then include full page screenshots of competitor sites to analyse what they include in the same tool. I’ve found using Miro or even a google drawing is best for this so that you can easily share the results with the team as opposed to using Sketch, Figma, or other more intense prototyping tools - in my opinion those should be utilized by your designer after the brainstorming phase that should exist primarily to provide design guidance (without restraining the designing process)
Above is an example of what the end result of the process looks like built out with Google Drawings. The whole team was involved early on and made changes to the drawing thanks to GSuite and you can clearly see the sections that comparable companies have chosen and prioritized on their landing page. It’s a great way to zoom in and zoom out on the e-commerce landscape as a team or even a single contributor is brainstorming site changes.
Speaking of site sections. The next step in my brainstorming process was to analyze the sections more directly and to organize them by type for our site as well as for our favorite comparable websites. The value in doing this to one, have a common terminology when talking about all of the site section possibilities, as well as being able to compare and contrast comparables to see trends.
At MOON, we took the brainstorming and section analysis to guide our hi-fi wireframes, which is where we introduced Sketch into the process. I can’t recommend this process enough. Our design, management, and development assets were all aligned on the sections we needed, the terminology to use, and the reasoning behind certain section additions and the ones that we left off. Further, this helped to facilitate more of an agile build process because we as a team knew we didn’t need to include all of the site sections at once, and we could sprint plan them out effectively to build on new sections in the future. For this project, I would say this shaved off at least a week of back and forth during the design phase alone. It would be hard to estimate the overall time saving at this stage post-build but from the conversations regarding our future sprints I’m sure it was even more significant.
Skipping forward to after our designs were approved. It was now time to set up the shopify and webflow integration. To summarize the integration process, in Shopify you tweak the Buy Button code to match your styling and then add the Shopify cart code to your custom code footer in Webflow. The Buy Button is essentially our Add to cart button on the live site and works as a custom code embed in the page. Easy peasy! I might write more about the Shopify + Webflow integration in future posts. In the meantime, check out moonultra.com!
