Our approach is to focus on the goals that our users have. We measure our success based on their experience of the website.
UI & Web Design
Paper Prototype
A mock-up is sketched on paper and tested using volunteers, checking how they would perform tasks using this design.
Develop Visuals
Using the data gained from paper prototypes we create visuals for all devices, designing for mobile first.
UX Testing
Regular testing during development enables us to identify issues as early as possible.
Code
Visuals and testing complete, we can now develop the code. Implementation of the design is peer reviewed and evaluated against our guidelines.
Browser Testing
The design is checked and tested on browsers using Browserstack and evaluated against our browser support policy.
Responsive Design
Adapting the design to different screen sizes.
Responsive Web Design is a technique that allows web page content to be presented using the most appropriate layout for each screen size.
Depending on the screen dimensions, each page responds to the viewable area and delivers a custom layout optimized for that screen size. This means images are at a suitable size, text is legible on small screens and targets like buttons are large enough to tap.
Mobile layout. When working with smaller touch devices content takes up all the width available and form controls are large enough to work easily with touch.
Tablet layout. Much of the layout remains the same as mobile, but some content widths have to adapt.
Desktop layout. Affords generous space for larger images and text.
User Experience Testing
Providing customers with a great buying experience
Start with a list of tasks which we expect the user to be able to accomplish using the site. For each volunteer we observe their efforts in attempting the achieve each goal and record our observations. The data from this research is used to refine the design.
Mobile First
Mobile First is a design methodology that has proven to be an effective way of creating flexible layouts for multiple devices with the same content.
This approach encourages designers to solve problems with layout and presentation on mobile devices first before re–purposing the same content for larger screen sizes.
Mobile & Tablet Usage 2010–2023
Google recognises the importance of responsive design and includes this as a ranking signal when returning search results. This was confirmed by Google in when an update was released to favour mobile friendly sites.
| Desktop | Tablet | Mobile | |
|---|---|---|---|
| 2010 | 98% | 0% | 2% |
| 2012 | 85% | 7% | 8% |
| 2014 | 64% | 20% | 16% |
| 2016 | 57% | 23% | 20% |
| 2018 | 44% | 17% | 39% |
| 2020 | 43% | 12% | 45% |
| 2023 | 46% | 2% | 51% |
Desktop vs. mobile usage trends between 2010–2023.
Design Principles
When designing any type of web page for mobile devices it is important to remember the following:
The most important content appears at the top of the page.
Text is clear and a legible size throughout the site to eliminate the need for zooming.
Forms are well spaced out for ease of completion with clear labels.
Buttons are large enough to tap and have enough space around them to prevent unintentional clicks.
Usability Testing
Effective Testing
Effective usability testing is about creating the correct environment and asking the right questions.
Here are some tips to help you:
Test representative users.
Use common tasks for the website.
Allow users to fail. Failure is excellent feedback.
Never interrupt a test. Your input will tarnish the results.
Testing Paper Prototypes
Paper prototypes enable you to quickly test the website before any development has taken place. A wireframe drawing of the website is created on paper with navigation elements to emulate its functionality.
Testers are invited to follow a predefined set of tasks that will be common to the site's intended usage. As a user undertakes each task we observe their movements and write notes that can be used in the next stage of the design process. This way we can quickly see if the layout we have chosen will work when fully developed.
Carrying out user tests at regular intervals during the project will give you enough feedback to know if the design you currently have need to be changed. Paper prototyping is a fast and cheap method of identifying potential bugs before the development stages.
Designing for E‑Commerce
With E‑Commerce, it is essential that your customers are able to find the goods you are offering because if they are unable to find your product, they are unable to buy it. When developing a new site, it is considered best practice to set aside around 10% of the design budget for usability to gain the most comprehensive results.
E‑Commerce customers are visiting your site to buy. They need to be able to find products quickly and related information such as technical specifications should be clear and at hand. The key to ensuring this is carried out effectively is providing your customer with a comprehensive search that they can fall back on, should the main navigation fail them.
Online Content
Valuable content is an important ranking signal used by search engines for ranking search results and becoming a trustworthy source will draw in high quality traffic. Bearing this in mind, it is essential to write your content with your intended audience in mind, understanding that their reading patterns will be varied.
Writing content for online users differs to print. Web users scan a page, looking for the information they require before moving onto their next stop. Very rarely will they read every word. To improve usability you need to ensure that you design the page with these habits in mind, trying to steer clear of walls of text.
To help users, it is best practice to use the following:
Subheadings.
Important information is highlighted.
Bullet points and lists whenever possible.
Desktop Testing
We design a set of common tasks and ask users to attempt to complete these during testing. We observe and record how the users interact with the design and make refinements after reviewing how easily each task is completed.
It is important to recognise the problems that users encounter but not necessarily pay attention to the solutions they may offer. Our UX professionals will be much better placed to evaluate different possible solutions, understanding competing requirements and taking technical constraints into account.
As a result of feedback from testing, we will re-test the improved design until we are happy with the quality of the user experience.
Browser Testing
Before allowing an ecommerce development project to go live, it is vital to test the that all the features and functionality that customers expect is working correctly.
Testing comes in a number of forms. Does the site load on all popular devices? Is the content clear and error free? Are all the permutations of user input functioning correctly? Our goal is to check comprehensively and remove any errors before releasing the site.
We use BrowserStack for testing browser compatibility and our team of developers code review every single line of code that is committed to the master branch.
Our next goal is to improve the automation of testing as part of our development and release cycle.
Content Management Systems
A content management system (CMS) gives you a platform to simply manage your websites content as it grows.
In order to manage products as they move through their life cycle you need to be able to control content for:
Introducing new products.
Updating product information and prices.
Marking a product as a end–of–line or a clearance item.
Finally discontinuing products but continuing to make available technical information and manuals and where customers can access replacement parts and alternative products.
These are just a selection of reasons people give for abandoning their order. Regular testing of the customer experience and responding to customer feedback can help to minimise checkout issues and basket abandoners.
Control Your Content
With bespoke content management software you will have a system in place that allows you to make changes rapidly and publish them with ease.
We design systems to make it easy for your team to change body text or prices as easily as editing a text document. Uploading and optimising images, embedding videos and sound in order to present your products as well as possible.
We develop software that is tailored to your needs and putting the management of your site’s content directly in your hands.
By identifying areas that you are going to update regularly we supply tools that streamline frequently updated content.
You have the ability to import large amounts of data, like pricing information, from spreadsheets or via direct access to other systems via their API. As new products are added to your range you can update pages with the relevant technical information and guides on help or FAQ pages.
Checkout & Basket
Avoid Frustration
The most common issues that users experience are:
Being presented with unexpected costs.
Not knowing how to proceed with their payment.
Excessive payment security checks.
Navigation that is too complicated.
Password requirements that are unnecessarily complicated without improving security.
These are just a selection of reasons people give for abandoning their order. Regular testing of the customer experience and responding to customer feedback can help to minimise checkout issues and basket abandoners.
Payment Security
We ensure all systems are PCI DSS (Payment Card Industry Data Security Standard) compliant which means that we adhere to strict guidelines about holding sensitive data. We offer multiple payment options, such as PayPal, and BACS so the customer can select the most convenient option for them.
Basket Area
The basket area of an ecommerce site needs to be treated as much more than an area where your customers product choices are stored. The basket is the area where your customer can gain valuable information and make required changes before heading to checkout.
At the end of the checkout process we invite the customer to provide feedback on products they could not find and improvements that they would like to see.
Even though the purchase is completed it is a good idea to ask if they have any further questions that can help make their experience better. This level of customer engagement can give you an extra advantage against your competitors.
A well designed basket area will allow customers to:
-
Add and remove items.
-
Increase and decrease quantities.
-
Receive an estimate of carriage costs.
-
Specify a preferred delivery method or choose a collection point.
-
Ship to BFPO addresses.
-
Manage discount and voucher codes.
-
Summarise savings for trade prices compared to standard prices.
-
View prices including and excluding VAT.
A well designed checkout will allow your customer to:
Enter their details with ease with generously spaced forms that work on desktop and mobile devices.
Choose to collect goods from a local store.
Choose to have goods delivered to an address that is different to their billing address.
Leave instructions for the delivery driver.
Provide an option to save card their details for future purchases.
Indicate progress through the checkout and show clearly how many steps are remaining.
Have a logical order to the steps involved.
Offer payment options that suit the customer eg. Card, Paypal, bank transfer.
Reassure the customer about security and explain what steps have been taken to protect their data.
Want to build great products with us?
We are a group of engineers and developers who can transform your ideas into successful products.
Let us know what you need.