Contact Us

Prototyping and Wireframes

Who isn’t impressed by a sneak peek at a beautiful website?

A nice glossy preview has its place, but getting to grips with a (far less polished) prototype web experience early on in the process is key. This advanced point of the initial Helastel project scoping exercise is based on the principle that design finesses come last, and fundamental building blocks come first. What you get is a wireframe.

What is a wireframe?

Rendered in HTML, wireframes are a lightweight method of demonstrating the potential layout and functionality of a website before committing to any design.

Stripped down, before all the gloss has been added, even the greatest web development properties look a bit ugly while they’re still on the drawing board. And that’s the way it should be. A wireframe is typically far more beneficial than creating the equivalent ‘flat’ PDFs or image files. It means:

  • You get an actual experience rather than a series of static views
  • The whole team can focus on functionality and user journey, and provide input interactively
  • You experience the project inside the web browser (the medium it’s being created for)
  • There’s no waste. It’s fast to create, and changes can be made straight onto the platform that the final product will become
  • No one gets distracted by icons, colours, transitions or other cosmetic design aspects

The Prototyping Process

  1. Wireframes are an essential part of a very involved and interactive prototyping process:
  2. Getting to the prototype stage requires research into user personas and each of their requirements.
  3. These requirements map against functional specifications, which feed in to production of the first wireframe.
  4. The wireframe becomes the testbed for a series of defined scenarios, starring each of the various user personas.
  5. We examine user cognition, and refine the best way of constructing user journeys throughout the web experience.
  6. Changes can be made quickly and accurately, based on input from the various stakeholders.
  7. It’s a fast and cost-efficient way of finalising requirements before development begins.
  8. It ensures that real users will be inspired and satisfied by the finished website.

Converting Website Traffic

Completing a contact form, downloading free content, making a purchase – these are all ‘conversions’. Whether or not it’s driven by eCommerce, everyone wants their website to gain the highest possible conversion rate of visitors into eventual sales all whilst adhering to GDPR. The only way to achieve this is to truly understand customers.

An inefficient conversion process can infuriate users and make them bail out. But guess what? So can an overly aggressive conversion process that railroads users to the checkout when they’d rather by browsing the aisles.

Face it – finding the shortest possible path to checkout conversion isn’t necessarily a number one objective for customers. Just as big a priority could be having confidence that they’ve found the right product, or satisfied a range of needs wider than just buying one thing. This places an intrinsic conflict at the heart of the web development project: the provider of the website and its visitors want different things.

Grounding ourselves in an understanding of your specific customer groups, we can resolve those differences and deliver solutions that maximise customer conversion:

Conversion funnelling:

  • Tactics for capturing data so you can recognise users from previous visits, without complicating the sale
  • Focusing on where users have come from and what they want, to develop the optimum next steps in the journey (which might not always mean ‘buy now’ is best in the long run)
  • Enabling remarketing via third party web properties

Basket conversion:

  • Enhanced one-click checkout capabilities
  • Assuring PCI (Payment Card Industry) compliant credit card capture and storage
  • Strategies to ensure you don’t miss out on upselling/cross-selling opportunities

After sales care:

  • The optimum way of presenting clear delivery options and expectations for given customer groups
  • Utilising geo-location/IP address to estimate delivery
  • Methodology for scheduling optimum follow up communications

Marketing automation:

  • Back-end integration with CRM, marketing databases
  • Front-end integration with other web properties (single sign-on, consistent recognition) including mobile apps

Optimised User Experience (UX)

We pride ourselves on creating professional websites with a user-experience you can be proud of. During the web development process we will be getting inside the minds of your customers to design the right interface for them. That means that they will find exactly what they are looking for and enjoy your site every time.

Designing the user experience is different for every development project, though the foundations are always the same; collecting evidence about the needs and preferences of priority customer groups as part of a project scoping exercise, and – in the case of web development projects – applying our deep understanding of web strategy.

Some really important areas for UX development are:


Consistently excellent, more like. What we’re talking about is not just the same experience across multiple devices and browsers that users employ. At least as crucial are the different channels of communications. Users notice when it ‘feels the same’ whether they go online, use the app, phone in, watch an ad, or visit a store. ‘Feel’ and ‘same’ are highly subjective concepts. We’ll figure that out.


If you can’t measure it, you can’t manage it. You don’t want to risk the time and effort creating a wonderful user experience, without understanding the business value it’s creating. And because a good UX needs to be adaptable, how will you know what happens when you tweak it in future? Will you be able to tell a good change from a bad change, before you’ve done it?


A good experience is a good dunking, rather than a light shower. This puts pressure on the functional bits and pieces of the underlying web framework as well as the creative design of the interface itself. We’ll use the tools and approaches that we know really work. And we’ll help you try things; things that could make all the difference to your users and promote a really immersive experience.

We perfect user experiences to balance the needs of users with your commercial objectives, while accomplishing:

  • Alignment with the values and appearance of your brand
  • Strict compliance with applicable standards (e.g. PCI)
  • Optimum pathways from Adwords/PPC, and refinement of calls to action (CTAs) texts to elicit maximum response
  • Maximum customer conversion rates
  • Integration with marketing and communications strategy
  • Adherence to responsive interface design practices
  • Successful, complete customers journeys including after-care

Great UX is a key component of Helastel software development projects, as well as our website work. Explore our project archive of examples or read more about our software development approach.

It’s not only a great UX, but it has helped, that has allowed the MapMyDiabetes application to be endorsed by the National Centre for Clinical Excellence (NICE) as the UK’s first Software as a Drug product available on prescription.

Responsive Interface Design

Our systems are fast and reliable with elegant UI’s that our users love. Websites should always accommodate the browser or platform preferences of their visitors, to deliver the optimum experience. For us, it’s more fundamental than just frame sizes and font types. We know that people don’t use mobile devices in the same way they use a PC or laptop.

At Helastel, when we talk about Responsive Interface Design, we mean strategies that make your web project flourish in an increasingly mobile world.

This means:

  • Optimising the experience for users of mobile devices and browsers
  • Driving conversion from the mobile website to the mobile app, enabling you to occupy ‘digital real estate’ on the screens of your customers’ smartphones and tablets
  • Exploiting the geo-location capabilities of mobile devices to enhance the user experience (being mindful of precisely what personas identified during the project scoping process actually want)

"The vision for the website was to provide a comprehensive knowledge base for potential and existing IAM members, accessible globally in many different languages, and deliver a platform for future development."

David McKeown, CEO of The Institute of Asset Management

View case study