In the domain of user experience design there are many tools, processes and artefacts. Most would agree though that the best starting point is with a quick paper sketch.
What is a prototype?
A prototype is a preliminary model of something, from which other forms are developed or copied.
The purpose of a prototype is to communicate an idea for a software product, often to inform improvements in its design. The prototype is a reference point for dialogue, whether it is my internal reflection as a designer, a debate within the team or an evaluation by an end user. Through a process of iteration, we explore the design space so that the best decisions for implementation can be made.
Fidelity, in the context of software design, refers to how closely a prototype corresponds with the desired condition of the end system. A prototype that has “high fidelity” is accurate, or realistic in how close it is to the system it is modelling. An interface design sketched on a napkin would be considered a low fidelity prototype. Fidelity increases as you add detail to a sketch, add colour in Photoshop, add interactions on a screen and eventually create a partially working system.
High fidelity is generally a good thing, but it usually makes sense to start with a simple, low fidelity prototype such as a paper sketch.
Reduce time and Effort with a paper prototype
It is cheaper and quicker to produce a lower fidelity prototype. Making something look and interact more realistically generally takes more effort.
With software development, where we continually encounter new risks and opportunities in the design space, you want to learn as much as you can, as soon as you can and with the least amount of effort. If you sketch out some ideas for a new system and run them past a colleague, you have an opportunity to get feedback and improve on your design at a very early stage and with minimal effort.
Avoid tunnel vision – Explore alternatives
A prototype is a great way to externalise the ideas we have for a system so that they can be communicated. But often more importantly, the process of generating a prototype also leads to new ideas that branch off and evolve. Because higher fidelity prototypes require more effort to create and change, they can sometimes discourage innovation. Scrunching up a paper sketch and starting over with a fundamentally different design is not such a big deal.
Perhaps more important than wasted effort are the psychological factors involved. I have noticed that people become less likely to come up with design alternatives as they see a prototype become more and more realistic. It might be easy to think of minor improvements and new additions, but it is incredibly difficult to abandon the core decisions that the design was based on. Our brains seem to be programmed to move forward with evolution of an idea. It takes concerted effort to step backwards and explore requirements from a different angle.
I find it a lot easier to abandon an idea within a rough sketch than a Photoshop mock-up or an HTML prototype that I have refined over time.
Another way to encourage alternative design options is to get multiple designers to compose sketches in parallel for the same set of requirements. They should do this independently from each other, so that a more diverse set of designs can be generated. It is also helpful to stress that the purpose of the sketching process is to explore ideas to be catalysts for conversation – not to focus on a specific solution to the problem.
Focus on the big picture
Another reason to start simple is to avoid distraction. Introducing interactions, colour and detailed imagery while you are exploring high level design ideas can lead to stakeholders getting lost in the details.
My approach to prototyping
Personally, I really enjoy designing interfaces from scratch in Photoshop. From experience though, I have learned that exploring a diverse set of designs up-front will usually lead to a better result. Photoshop can be a bit tedious when you are trying to quickly put many ideas down. I start with some simple sketches to sort my own ideas out and then use Balsamiq to produce a set of digital sketches that are easier to communicate and collaborate on with other stakeholders.
Once the design space has been explored and the sketches start evolving in a distinct direction, higher fidelity prototypes can aid in generating richer feedback since they create an experience that is more realistic for users. The approach here depends very much on the project.
Like most off the shelf software products, Ecommerce packages, whether proprietary or open source, can be very affordable and feature rich in comparison to entry-level custom developed solutions. The compromise with these packages however, is inflexibility in both design and process and usually an overwhelming management interface.
Are standard eCommerce package features appropriate for all types of eCommerce websites?
To their credit, these commercial or open source eCommerce packages do make powerful features very accessible to small businesses and are usually well built on the front-end; taking advantage of interface patterns we are all familiar with from sites like Amazon.com. Unfortunately, most businesses starting out on the web do not require the advanced administrative or customer capabilities offered, nor have the product range necessary to make an interface like Amazons at all useful.
Because packages have been created to try and cater for almost every kind of online business, they usually provide a surplus of unnecessary features and it becomes very difficult for an administrator (or shopper) to find their way around tasks which should be very basic. And if the management interface is not simple to use, then administrators will be unlikely to give their system the attention it will need to be successful.
Further to this, a well crafted internet strategy may often involve site structures, processes and interface elements that are not provided within package defaults. When provided with a rigid structure, it is inevitable that your strategy will be defined more by what is most feasible and less by what is most appropriate.
Is the saving in cost worth it?
This depends of course on how much you are paying. As a ballpark estimate, I would recommend a budget of about USD 10,000 to build a customised eCommerce website with standard components such as product catalogue, shopping cart, order management and credit card payment processing. It could certainly be done for a lot cheaper, but this budget would allow for a lot of creativity and design. This investment could go up 10 fold for more advanced custom systems, but for the average new online e-tailing venture, somewhere in the region of USD 10,000 is reasonable.
Let’s put our recommendation next to the alternatives and compare prices and flexibility. Note that flexibility is inversely related to the cost of growing the system if it moves out of the base structure provided – making custom changes to a complex system is expensive.
(These guidelines are estimates based on our current experience in the industry.)
| eCommerce Website Type |
Investment | Flexibility | |
| 1 | Custom Developed Solution | Highest >USD10k |
Very High (Easy to change) |
| 2 | Open source implemented by designers. | Medium >USD3k | Low (Expensive to change) |
| 3 | Commercial hosted/rented package. | < USD 200 per Month | Very low (Expensive to change if possible at all) |
| 4 | Open source implemented internally. | No cost (Time only) | Low (But no external cost) |
It is hard to compare these very different solutions but the above table does give some idea.
- Option 4 (Open source eCommerce package implemented internally.) does give low flexibility, but this is less significant where internal employees (or a one man band) can spend hours working on the system as the cost is far cheaper than outsourced development. This does however require a broad skill set in order to get strategy, copy, design and development implemented well.
- Option 3 (Commercial hosted/rented eCommerce package.) is one that seems the most affordable outsourced solution, but it is also the least flexible from our understanding.
- Option 2 (Open source eCommerce package implemented by designers.) seems to be very popular among small South African businesses who outsource the customisation of these systems. Many of these sites stagnate or require re-investing in new custom systems where the business’s strategy has been compromised by a rigid structure.
- Option 1 is our recommendation for most small businesses with a focused product range or for larger companies who need their online storefront to tie in closely with their existing business processes.
Concluding this eCommerce website comparison
Understandably, new online businesses usually have very little money to invest in their website design and setup and are looking to start off small. Unfortunately, ‘small’ has got to be ‘big enough’ in order to make an initial impact and win over your customers trust.
Although sometimes a business may find it’s ideal solution within the structure of a commercial or open source eCommerce package, and even when there is compromise the cost saving might outweigh the inflexibility, we have found that in our experience bundled eCommerce packages require more customisation and ‘breaking’ than it would require to build a focussed solution from the ground up.
Perhaps what is most significant is that new businesses deciding to implement a standard eCommerce package will not usually put sufficient thought into designing a customer experience suitable for their specific products and process. This is often because they adopt the standards provided with the package. The role of expert consultation and careful consideration of your customers’ online experience with your brand, is essential for companies that are serious about taking their business online.
Clyral recently launched a communication portal for the South African Association of Freight Forwarders in KwaZulu Natal. The goal of the website was to replace the current system where email newsletters were manually being composed and distributed to members. In approaching the brief, some innovative features were proposed and developed that resulted in an exciting and powerful system that is very easy to administer and utilise.
The landing page makes it very quick and easy to search for an article.
Some of the features of the site are listed below.
- Blog-like article submissions of industry news.
- Tagging of all articles for more powerful searching and navigation between similar articles.
- Automatic addition of images to support the article content. Images are inserted by the system by matching pre-defined image tags to the article tags.
- Dynamic creation of newsletters to include snippets of all of the latest website content.
The website has been extremely well received by SAAFF KZN members as well as the administrators responsible for managing content and communications. This project has demonstrated how some of the tools of the new generation web applications can be incorporated into traditional business and community websites in South Africa.
The website can be viewed at www.saaffkzn.co.za but the majority of content is restricted to SAAFF KZN members.
