Redesigning an ecommerce website or launching your first ecommerce website can be daunting. There are few endeavors in the digital world that have as many moving pieces that need to fall into place then a successful ecommerce webs design project. Our goal is to provide as much guidance as possible to help you master the process. Think of this post as a culmination of tips, checklists and best practice from a couple hundred projects of experience. Hope you enjoy. If you’d like to discuss your project with us, click here…
Establish Your Project Success Metrics: Sounds simple, but you’d be surprised at the percentage of online retailers without a clear analytics framework to measure the success of their project and the growth of their business. Starting point metrics can be revenue, conversion rate, average order value and average customer lifetime value. To build more extensive anaytics models you can use a business intelligence tool like Tableau or Data Hero
Perform an Internal Discovery: Having an internal alignment of stakeholders and appointing a project point person from the client side is an often missed but vital step to the project. The goals for this step should be to identify project risks by stakeholder, create a master list of goals, agree on a target launch date and establish brand drivers.
Take Inventory of Your Staff: Every online retailer has gaps in their staffing, admitting to the gaps and understanding them early in the project is critical to the success of the project. It also helps to establish what skillsets you need your ecommerce web design agency to bring to the project.
List Out All Dependent Systems: It’s important to assess an ecommerce web design agency’s capability to work with the systems you have in place. The best agency in the world may not have experience with your ERP or CRM. You’re better off ensuring the technical team on the project has experience with your systems architecture to reduce systems integration risk. The top risks we see in projects are data migration, systems integration and clients providing content.
Establish a Launch Date: Ensuring a third party has the capacity to meet your timeframe is critical to the success of your project.
Plan Creative Assets: Copy and product photography often makes or breaks the performance of an online retail store. The sooner you research creative costs and the assets you will need for your project, the more likely you will deliver a project within your desired timeframe and budget.
Create a Criteria for Selecting a Platform: Not every retailer is fit for the most popular ecommerce platforms. Don’t pick a platform based on marketshare and brand popularity. It’s important to consider your technology needs (programming language), cost of operations, hosting environment and your ability to maintain the technology internally based on your talent. We see many retailers over buy platform eating into their marketing budgets and causing their business to plateau. We also see many retailers under-buy technology stunting their growth.
Set a Budget: Ecommerce web design isn’t one size fits all. When you create a budget you need to consider the copy, photography, web design, user experience, product data cleaning, custom coding for integration, SEO Mirgration, digital marketing for content strategy or social integration, software licensing, additional staffing needs, hosting, ongoing maintenance and post launch digital marketing. Once you establish all of these, we recommend adding 20% to the top line as a miscellaneous budget line item. This should ensure you can plan cashflow and growth accordingly.
Design Considerations
Design Mobile First: With over 55% of traffic across all verticals being from mobile and that number growing constantly, it’ work going through some user experience exercises on mobile as much as it is on desktop. Think context vs. content on mobile. What are your users doing within your buyer journey on mobile? What are they not? To ensure the development of your ecommerce website is flawless it’s worth designing as many screen sizes as possible and prototyping your designs to visualize them in context of the device. We recommend Invision App for this.
Involve Your Developers: Most projects wait too long to bring in the person who is actually writing the code for the site. Front end development is becoming more and more the design of a site and although a graphic designer will never be replaced, having a developer provide feedback in the design process will save time and money and improve the quality of the project.
User Test Ofter: You can user test long before a line of code is written. A collaborative, high feedback process is critical to save development time and drive quality. Using prototyping tools you can gain client feedback and signoffs quickly to ensure there is less in-project change and the end ecommerce website will perform better as well.
Establish Crystal Clear Brand Guidelines: Leave nothing to chance. Take the time to document the fonts and colors you want. Also provide tone and voice for copy and a persona analysis for who your target client (s) is. The better the input, the better the output. If you’re missing some of these components, we can guide you through some exercises pre-project to set the project up for success.
Create a Design Scope of Work: List as many of the pages as possible that you want designed with examples of inspiration as well. Decide if you want to shoot new photography and of what and also determine if you’d like to approach a brand refresh in the process. These decisions can drastically affect timeline and costs of a project.
Agree on an Approval Process: Having agreed upon milestones and signoffs is critical to good creative. Designers become unmotivated with no end in site and clients become frustrated when designers have an expectation to provide less than what is expected. It’s important to establish clear expectations prior to starting the project.
A Front End Development Checklist
This one can be a bit more technical, but it’s important to ensure all of the following are addressed. Good front end development effects conversion rate, SEO rankings and sales revenue.
Components are Gzipped: Gzip is a format for file compression that reduces the file size, improves speed and performance of the site and load times
CSS is linked first in <head>: This basically means CSS is loading before Javascript. Javascript is one of the top reasons websites load slow, loading it later than CSS and other design elements leads to a smooth site load and user experience.
No Broken Links: Broken links can be identified in Google Webmaster tools or other site crawling tools. It’s a small attention to detail, but can ruin the user experience for any new site.
Performance Testing: Start rendering time should be under 2 seconds and site load times for initial site load should be under 4 seconds.
This is part one of this post. Part two will be released later this week and will cover the rest of the front end considerations, functional considerations, hosting recommendations and pre-launch checklists. If you have a specific project that you’d like to discuss with Commerce Acceleration, please feel free to contact us.
The post Tips for Ecommerce Web Design Part 1 appeared first on Commerce Acceleration - Ecommerce Agency - Ecommerce Web Design.