Planning a new ‘brochure’ Shopify website

It was important to use a platform that made regular updates an easy and user-friendly process, and the website had to be simplified to support this ‘ease of maintenance’ brief. We decided to use Shopify as the new platform as it exemplifies these values. 
 
We thought it may be useful to explain our process, so that others can take a similar approach: 

The key stages were: 

• Discovery and Planning 
• Content Strategy 
• SEO 
• Roadmap Documentation and QA 
• The Design Process 
• Build and Population 
• UAT 

Let’s dive into each stage and discover more about our process, challenges and successes. 

Discovery and Planning 

This phase focused on the ‘why’ we were redesigning and replatforming our website. We knew we had to place the user at the centre of the decision-making process so we could create a website that we could all be proud of and that the user would find to be a delightful experience. We explored several journeys throughout the site that a user would typically take and mapped them out, noting any areas of frustration to enable us to prioritise resolving these issues during the design process. We also sent out market research surveys to our clients so we could better understand what was important to them to see on our website and undertook competitor research to give us a better idea of how well other sites presented key information and what the current trends were. 

Content Strategy 

Starting the project with a content strategy was helpful as it meant there were no surprises, we could control the quality of our content and ensure there was content compliance. The process was undertaken via Google docs, allowing us to fully collaborate as a team and meaning approvals could be trackable.  

SEO 

An important aspect of the redesign was to ensure that page ranking was maintained, and SEO considerations had been factored into the decision making process, so we could be informed as to our site structure, hierarchy, page ranking and reach. We asked Ignition Search (link) for input, an SEO agency we’ve known for many years to help ensure SEO best practice principles were being considered throughout the process.  

Roadmap Documentation and QA 

We had to track over 55 pages and 15 different designs over the design, build, population and testing stages, and manage expectations of both internal and external stakeholders, so we decided to create a roadmap document that would serve to track the approvals and notify all team members when designs (or copy docs) were ready to review. This was really helpful as we worked with an external copywriter alongside Ignition, as we could see how they were getting on and could be on hand to work through any challenges that surfaced. 

The Design Process 

Now the foundations had been laid down it was time to kick off the design process. We collaborated throughout the design stage in InVision. In the first phase we uploaded all the key pages as wireframes. Essentially these wireframes served as low fidelity mockups mapping out all the key areas of the page, and at this stage it could be quick and simple to rearrange the content to better serve our users' needs. We held regular meetings with key internal team members to ensure that we all had a voice and a say in how we wanted our site to feel and behave and what information we wanted it to include. Once the wireframes had been agreed (which we noted in our roadmap document to track approvals) we moved onto high fidelity designs which were completed in Figma. Using this app allowed us to create responsive designs and include transitions and hover effects, giving us better confidence in the approval stage for how the site would eventually feel and behave. Once all the key pages were designed, iterated, and approved, it was time to commence the build and population stage. 

Build and Population 

Working on the Shopify platform was an enjoyable experience for us. We had regular meetings collaborating with the development team and could see good progress was being made. We were able to discuss the experience we wanted to take our users on and all the technical aspects we’d need to support that, notably including micro-transitions and animations to lift the site and bring it to life. The population plan was again a collaborative process, ensuring team members were trained in the Shopify platform and able to undertake the population with a SEO mindset, checking urls, page source, keywords, title and descriptions. A copy template was created to support this and ensure we had consistency in approach as we had both internal and external stakeholders working through it.  

UAT 

User acceptance testing was the final step before go live. It’s often a stage that gets squeezed due to constraints however we were mindful of this and how important a step it is, and so allowed time for a spreadsheet to be created that served to note down all observations by various team members, including who the observation was made by, when it was made, any comments from the development team and whether it had been adjusted. This open and comprehensive approach was helpful in putting the team at ease and giving us a new site we could all be proud of. 

Having now launched our new site, we’re really excited to see what you make of it. Please feel free to drop us a comment or if you have a website project you’d like to know more about then we’d love to chat.