Userfirst — /** Design the Experience **/

/** Design the Experience **/

Android App Concept Design

Featured project

Concept Design for an android mobile app


Featured project

Bminimal Magento Theme


Featured project

Lieferheld mobile apps

The anatomy of a Magento eCommerce site: a case-study

From the home page to the checkout page, a step by step analysis in designing a Magento eCommerce site

27 May 2015 0
7 designer lessons I have learned
From inspiration to collaboration

7 design lessons I have learned

From showcasing a digital portfolio to re-defining a e-commerce mobile app, I have been challenged with different design projects. Here is a concise list I what I have learned as designer.

18 May 2015 0
Or the art of digital simulation

The user experience and the organic design

How to reproduce in a digital format the elements found on a natural environment…

23 December 2011 0
Users become main characters of a story

Narrative web: it’s a Web Site Story

Web users are demanding a narrative experience: a story with as the main characters the website itself and its audience.

26 October 2011 0
Searching for a balance between form and content

Aesthetics vs usability

Is it better to have a well-designed layout or a well-structured organisation of its contents?

26 October 2011 0
Design and methodology

Designing the user experience

The user experience designers try to deliver the most appropriate interface for a particular user in order to provide the most suitable experience.

18 October 2011 0
Identifying your primary user

Which persona are you? Building ux user archetypes

Personas are hypothetical archetypes, or ‘stand-ins’ for actual users that drive the decision-making for interface design projects

18 October 2011 0

Concept Design for an android mobile app


Made in Green is an android mobile app for designers, manufacturers and aficionados of sustainable interior design. Here they can showcase their creations from recycled materials, share and illustrate their techniques and receive regular updates from the community of eco-designers.

Design & Development tools

Adobe Creative Suite 5 / Sketch

Bminimal Magento Theme

Interface design for an ecommerce custom app


Bminimal is a functional and adaptive magento theme. Fully customizible, 100% responsive, built with Bootstrap framework and optimized for faster navigation and intuitive user experience. As the name suggests, the GUI relies on a clean and simple visual communication, where the use of full-screen images is balanced by monochromatic backgrounds and the typographic style and iconographic go well with minimalist UI elements in order to focus attention to the content.

Design & Development tools

Adobe Creative Suite 5 / (HTML5, CSS3, jquery) / Framework Bootstrap v3.3.2 / Magento Community 1.9

See more

Lieferheld mobile apps

Interface design for Lieferheld mobile apps


The project brief required a consistent Interface design for the native windows phone mobile app as based on product wireframes and following brand guidelines.


  • Icons and screenshots for all required device densities
  • Detailed styleguides as a blueprint for development
  • Design reviews and feedback before final deployment

Design tools

Adobe Creative Suite 5

The anatomy of a Magento eCommerce site: a case-study

Designing an e-commerce site is a complex challenge because of the cognitive and emotional variables related to buying habits, whose identification requires in many cases a careful analysis of the user profile. The end user’s web experience expectations must be aligned with the business requirements: e.g., to increase the conversion rate, to broaden customer’s base, to promote the product.
There are several issues to which an interface designer must provide a valid answer: How to organize the information on the home page? Where to place the filters in the category or search pages? Which authentication to use for the checkout page? In this article I will try to illustrate the solutions I have proposed to answer these and other questions.

Bminimal eCommerce Theme

A responsive and functional theme for Magento eCommerce

One of my recent and most challenging projects was the design of a custom theme for the Magento eCommerce platform. I lived this project both like a training experience – i.e., to learn how to use one of the most popular open source applications on the market – and like the chance to test my knowledge as front-end developer with the invaluable support of Magento and Stack Overflow developers community.

An undoubtedly positive experience in terms of learning: I am now an experienced user of this full-bodied and somewhat feared e-commerce application and I have deepened my mastery of languages such as ​​PHP, XML, Javascript. Not so “nice” was to solve the many technical problems that regularly occurred: the modules compatibility, the cache management, etc.

Designing for Magento eCommerce

With so the many available e-commerce applications, the choice went to Magento for its diffusion on the market and for being the one with the largest developers community. I knew in advance I could find on the Internet the solution to many – if not all – my technical issues and to outsource the most critical ones to freelance programmers and certified agencies, if necessary. Once you understand the logic behind its architecture, Magento becomes a very valuable tool, with the benefit of being open source and, in my opinion, the most advanced e-commerce application. However, it is imperative for the developer to bear in mind certain considerations:

The css framework: Bootstrap

The first strategic choice to make when you design the GUI of a web application is whether to use a CSS framework: a pre-defined front-end code. For complex projects like an e-commerce site, the question is not even IF rather WHICH one to use. In my case, Magento already offers its own framework and the best practice requires that you customize – by overwriting it – the default theme. In doing so, I have incorporated the theme within the Bootstrap framework, with a careful cleaning and re-adaptation of the code.

Among the benefits of using a css framework, there is the flexible grid that you can freely adapt to your pages by editing the style sheets and the additional javascript libraries that you can include, if necessary. There are many css frameworks, all equally valid and for different purposes: I will not argument here on which one is the best. My choice went to Bootstrap since it offered me the best compromise in terms of flexibility and functionality. For the e-commerce theme design, I needed a web layout that was easy to edit and with ready-to-use javascript components. Not least, I was convinced by the fact that Bootstrap is among the most used frameworks and the one with the largest developers community. Just like Magento :)

The navigation menu: a hassle-free user’s guide

When designing Bminimal eCommerce Theme, I tried to follow a mix of good practices and web standards in Information Architecture and User Experience, learning from previous projects and re-using the solutions adopted by popular e-commerce sites: since a template is supposed to be versatile, my goal was to find a balanced synthesis rather than to address single requirements. In detail:

  • The header is reduced to give more space to the content and it sticks to the viewport to facilitate the navigation.
  • Links have conventional names and are positioned in a hierarchical order: first the structural ones (login, cart, contact, etc.) then the catalog links. The icons appear only when necessary and with an alternate text.
  • The site administrator can choose between a drop-down multicolumn menu – in case a many categories and rich content – or the simplest drop-down menu.
  • The mobile version is identified by the “hamburger” icon and is simplified: the shopping cart and search links are fixed while the catalog links appear in a vertical list.
Bminimal eCommerce Theme: the home page

Bminimal eCommerce Theme: the home page

The home page: your store’s showcase

Unless the visitor is coming form sponsored links, in most cases the home page is the natural landing page after an organic search. Like a passerby in front of the shop, the user expects to find an assortment of goods and a selection of current deals. It is therefore crucial to determine which products to highlight, by keeping in mind that the web experience does not follows the paths of traditional channels. Additionally, the user will try to interpret the content according to his mental model: what presumably he expects to find by following that path.

As mentioned before, in designing and developing the theme, I followed a principle of flexibility by combining different solutions to solve most of the business requirements and respecting the standards of the User Centered Design. Thus, the home page becomes a showcase where to exhibit the items in a customized and hierarchical way:

  • Above the fold are placed the featured products and the site administrator can decide which banners to display thus changing the page layout.
  • There is a large and diverified use of images: they have to emphasize the products and when in full-screen view, the whole area becomes a Call to Action without the need of separate links or buttons.
  • Carousels are static to avoid an information overload: the user is free to choose what to see. Their position and size will vary depending on the content while captions, fading effects, and preview images help to focus on the product or to “anticipate” the next one.
  • The footer hosts the”structural” links, again following a hierarchical order: About Us, Customer Care, Terms and conditions and Customer Retention (Newsletter and Social Sharing).
Bminimal eCommerce Theme: the category page

Bminimal eCommerce Theme: the category page

The Category Page: a products selection

In this page the user can select, filter and sort the products: it is one of the most interactive pages for an e-commerce site. The Bminimal eCommerce Theme contains customizable layouts for the Main Category and Sub categories pages with both static content and products carousels. The user experience is also enhanced with some functionalities:

  • Ajax scripts which simplify the navigation and reduce the loading time: filters, sorting, product previews, whishing list, add to cart and compare.
  • Ability to add a sidebar category navigation.
  • Alternate products thumbnails on roll-over to show product details.
  • Modal windows for the product preview, wishlist and comparative table.
  • Visual labels to highlight new arrivals or deals.




Bminimal eCommerce Theme: the product page

Bminimal eCommerce Theme: the product page

The product page: let’s get into details

Here the rule of hierarchy and simplification is of vital importance. A product or service has many details and features to highlight. But if not presented in a logical and selective way, they are likely to distract or even confuse the user. It’s important to choose the content, by starting with the description which is supposed to be synthetic, narrative and non-redundant. To this end, it makes sense to rely on a good content editor or to hire some SEO experts to optimize texts and to choose appropriate keywords.
The product page of Bminimal eCommerce Theme was designed to emphasize the content and to provide the user with multiple levels of interaction:

  • A wide area for the media gallery: the product is showed with lightbox images and a promotional videoclip.
  • Clear indication of product availability: the user can request to be notified when the product is sold out.
  • Each product can have its own brand and the user can filter the search for similar products.
  • The user is encouraged to interact via discreet but well positioned links (comparative table, see and add reviews, share and recommend).
  • Additional details are wrapped inside an accordion menu to reduce space and to not distract from the Call to Action.
  • The site administrator can add a featured products carousel, by choosing the typology (related, cross-sell or up-sell products) and the look and feel (grid style or full-screen image).
Bminimal eCommerce Theme: the checkout page

Bminimal eCommerce Theme: the checkout page

The shopping cart and the checkout page: a benchmark for the conversion rate

For many, these are the crucial pages of an e-commerce site: it is where the user decides whether to continue the shopping experience. Beyond any user’s buying habit which requires proper analysis, the interface designer must pay a special attention to these pages in order to reduce the chance to make mistakes then compromising the conversion rate.

When designing Bminimal eCommerce Theme, I tried to learn from the restyling of a previous checkout page with thousands of orders per day. In Magento, the checkout page features an accordion functionality that many site owners find uneasy because apparently it requires too many steps. Based on this assumption and aimed to improve the conversion rate, they rely on third party modules to simplify the checkout page with a single layout: address, shipping and payment details. After having unsuccessfully tested several of these modules, I preferred to optimize the existing layout and to eliminate what in my opinion was redundant:

  • In the shopping cart, the Call to Action is clearly separated from the secondary links (Update and Empty the Cart). Additional informations which are not essential and might distract the user were removed: shipping costs calculation, cross-sell products, coupon code.
  • Configurable products can be modified (amount and options) without reloading the page, through the ajax functionality; the same applies to the featured products quickview when the cart is empty.
  • In the checkout page, the user is guided through the authentication with a simple tabbed navigation: he can use his social profile or the site credentials to login/register and the two options are clearly separated unmistakably.
  • The list of locations is updated dynamically after selecting the country.
  • The coupon code shows up in the bottom of the order summary, prior to payment.


In conclusion, in designing Bminimal eCommerce Theme I summarized most of the knowledge gained so far as interface designer and front-end developer: definitely, an intense and compelling learning experience.

Did you work on e-commerce projects and would like to comment some of issues addressed? Let me know your opinion. Or if you find the article interesting, share it on your social network. Grazie 1000 :)

From inspiration to collaboration

7 design lessons I have learned

From showcasing a digital portfolio to re-defining a e-commerce mobile app, I have been challenged with different design projects. Some more complex than others but all precious lessons. Here is a concise list of what I have learned as designer. (Images courtesy by Jeff Sheldon)

7 lessons I have learned as designer: 1) Design is ... to solve a problem

1. Design is … to solve a problem

Even a genius like Leonardo did not design his work for a mere recognition or to please the ego of his rich and powerful patrons or to leave a legacy to posterity. Although we cannot exclude that this was part of his extraordinary career.

The real designer has a social and ethical vision of his work: his job is to come with solutions to problems of different nature in an innovative, intelligent and creative way. Whether it’s a site restyiling or the refurbishing of an interior space, the designer identifies critical issues, defines easier paths, find right materials and in doing so he follows his inspiration and sense of aesthetics: something unique that requires years of experience, application and hard work. From this point of view, a designer is a craftsman who combines art with utility.

2. A good designer knows how to listen and communicate

In my personal experience, there have been moments when I have witnessed the difficulties in dealing with colleagues and clients with different ideas and opinions – not so eager to be “convinced”. Since in design the emotional component is very strong – everyone has his own personal sense of aesthetics – misunderstandings or even conflicts are always at the corner. Most often due to the inability to listen and communicate.

It’s up to the designer’s intelligence and expertise to understand the issue, by bringing valid reasons to support the proposed solution, by incorporating and shaping the other’s point of view. In defending his position, he does not confine himself in a sterile academicism or a cryptic technical language. Nor will try to assert his superior sense of aesthetics. Rather he will support with data, examples and clear evidence the proposed solution.

7 lessons I have learned as designer: 3) The design has its own rules

3. The design has its own rules

Perhaps only our Leonardo could dare to improvise, relying on his immense talent. In fact, he never did. In all of his work it is not difficult to find the principles which are the core of visual language: unity, balance, hierarchy, proportion, emphasis, similarity and contrast. When one or more of these principles are missing, the result is never satisfactory because our eyes and our mind cannot find the visual references which they are used to.

Unless we know how to justify this choice. Cubist painters like Picasso have deliberately distorted the rule of unity (using multiple perspectives or inserting external elements) in order to represent the object from different views. In Conceptual Art by contrast, the content or idea is more important and precedes the aesthetic form and its perception.

4. It’s all a matter of practice and experience

I must confess one thing: I am not trained as a designer…but I am relieved by the fact of being not only the only one to become a designer by passion. Although I must say that my humanistic background in sociology proved to be of great help in understanding a visual project and – above all – communicating solutions.

I believe that to succeed as a designer you don’t need academic letters of reference. The crucial lesson for a designer is to be able to implement what he learned – in the classroom as well as on the computer or on the drawing board. A potential client or employer will be more impressed by our portfolio work rather than the name of the attended school. In addition, Internet provides a huge archive of knowledge free and accessible to all, it’s up to designers to use it and to express their talent: I am always impressed by the quality of works published on Behance and the fact that many of these come from “non educated” designers like me :)

7 lessons I have learned as designer 5) Inspiration follows random and unexpected paths

5. Inspiration follows random and unexpected paths

One the biggest challenges for a designer – perhaps the biggest one – is to find inspiration for his work. A journey, a synthesis in this various and chaotic kaleidoscope of images and visual stimulations where we are immersed. Ideas are endless, directions are contradictory.

While frantically searching for the solution, the designer dive into specialized magazines to find a starting point, a suggestion. He spends hours by visiting sites and portfolios. He follows tutorials and mingle with peers during design events. Although all of these activities are vital to stay up to date, they are not strictly useful for the inspiration.

It happened to me more often that I start a project by getting inspired by a design seen somewhere and then completely diverging from it. Or to be “contaminated” by other ideas. Or more simply to distort it with the external contribution. Other times the inspiration came when I was not working on the project although I was thinking about it: a swimming in the pool, a visit to an exhibition, an advertising billboard on the street.
Sometimes – if not often – moving away from the computer gives unexpected results.

6. The mediocre designers imitate, the good ones reinvent

The designer wants to leave its sign in order to be distinguished. Often you cannot do anything but following the footsteps of those great predecessors. Or those contemporary designers who have achieved success. But there is a thin line between pure emulation and reinterpretation. And it is what distinguishes a conventional – albeit technically valid -work from a truly original and innovative work.
In the making of the famous painting Guernica, the aforementioned Picasso made no secret to be “inspired” by old photos of the Alinari archive in Florence, during his Italian trip of 1917, featuring a late Middle Age fresco, The Triumph of Death. But the result that followed was unique and very personal.

Sometimes, sadly, the desire to emulate encroaches openly in plagiarism: the chinese company Xiaomi was indirectly stigmatized by the chief designer Jonathan Ive of Apple for reproducing its industrial design (see the brushed aluminum chassis with engraved logo, the smooth flowing lines) even the similarity of products names (iPad / MiPad, AppleTV / MiTV) and the site layout (see the color combination, the menu navigation, the extensive cropped images) clearly “inspired” by Apple’s. From this point of view, we are not facing a good design nor an original design.

7 lessons I have learned as designer: 7) The design is a collaborative work

7. The design is a collaborative work

Any design requires the right maturity and it is always the result of revisions, corrections, stops and gos involving different actors: stakeholders, product managers, users and clients, designers, developers. The contribution of each one of them must be taken into consideration in order to achieve the best results, especially when it comes to digital services and products – where many variables are playing due to the complexity of human-machine interaction.

It is therefore important that clients and stakeholders clearly define the goals to be achieved. That potential users test design prototypes to identify critical points. That developers provide data and information to skip technical obstacles. With regard to digital products, more and more project teams are adopting innovative, shared working  approaches like the Lean UX design.

Are you too a designer or you use to work side by side with designers? Use the form below to tell me your experience or if you liked the article, share it on your social profile: Grazie 1000 :)

Or the art of digital simulation

The user experience and the organic design

From interior furniture to packaging and from electronic devices to publishing, there is a trend in design where visual elements are shaped and inspired by the context and materials of a real natural environment. The so-called organic design has its roots in architecture and specifically the work of Frank L. Wright, who argued that form and function were one.

“[The organic approach] promotes harmony between human habitation and the natural world through design approaches so sympathetic and well integrated with its site that buildings, furnishings, and surroundings become part of a unified, interrelated composition”.1

At the core of the organic design there is not only a pervasive influence of natural surroundings but also a specific concern for the final user: if form follows function then objects are designed to be seen as truly respecful of the use they are suppose to satisfy. Also, a pure organic design promotes innovation: design forms should improve what was made in the past without rejecting its inspiration. This brings to the last principle: “the finished product as a unified whole, where every aspect of the design contributes to the final outcome”.2

The organic approach in web design

With specific reference to web design, the organic approach consists in reproducing in a digital format the elements found on a natural environment, their shapes, colors and sometimes behaviours.

We can try to distinguish an organic website by looking at some design elements:

  • The re-adaptation of paper, wood and other organic textures to give a natural “flavour”
  • The use of abstract colors and shapes as found in nature to imitate its continuous flow
  • Single parts of an image (like brushes and graphics) used to create a more complex, extended visual 
  • Common objects placed in a different living context
  • A minimalist style to catch the essence of each design element (few colour and typographic combinations, large empty spaces, etc.)

If on one hand the organic approach has become a trend in web design, it can also add value in terms of functionality and innovation: the organic design can be used to improve the usability and the user experience with the website.
This is particularly true when the goal is to promote a brand or sell a product.

Changing the user experience

As an example, e-commerce websites have the urgency to make products and services more appealing to the would-be buyer. Without surprise a popular selling strategy  is to combine a beautiful, original layout with a relaxing, more intimate touch – a strategy adapted from the packaging industry. But there is a more hidden reason to explain why organic design matches very well with brand promotion.

Duchy Originals - natural, organic, sustainable food from HRH The Prince of Wales

Duchy Originals – natural, organic, sustainable food from HRH The Prince of Wales –

By including portions of real life in a digital environment, products appear more natural and closer to the visitor since this reduces the gap between what it is familiar and what it is reproduced online. Either it is a vivid color on the background which resembles or imitate the nature or a real object used as a navigation icon, this can help making the user experience more personal. It also reminds us that websites are made by humans, though with the use of software.

“An increasing number of non-web media entertainment companies are using the web less as a place for frequently asked questions, and more as yet another way to brand their projects. In a sense, these branding web sites become like CD covers or movie trailers, just more interactive and thus more engaging.3

There are some design lessons that we can learn from the organic approach in order to make the online experience more familiar and engaging for the user.

  1. Choose suggestive images
    If it’s true that a picture is worth a thousand words then we must choose images which are evocative and able to transmit a feeling of what we are communicating. They must be used sparingly and selectively and not just to fill a space or make the interface look more fancy. For the same reason, conventional imagery and stock photos should be avoided – unless they can be re-adapted appropriately.
  2. Give life to your brand
    This becomes mandatory if the website is about a web application or digital goods: we must show the product. The thing is, just because these are intangible goods, we must give the user the chance to see them in action – e.g., a software try-out, a multimedia gallery or an in-depth review. When featuring our brand, we should give the user a taste of the products and/or services rather than just trying to sell and promote them. This makes the experience less impersonal and more engaging.
  3. Use few, high-contrast color combination
    Colors should be used with parsimony: I personally limit my palette to two basic colors in combination with a neutral black/gray/white. Vibrant colors must be used for “call to action” buttons or to highlight some specific elements of the site and to drive the user’s attention. Patterns and 3d objects can be used for icons and backgrounds to make the interface more “realistic”.
  4. Be creative and rational at the same time
    Nature has illimitate shapes but each one follows a logic. Similarly, as web designers we can (and have to) experiment to make our design unique and distinctive but without forgetting the balance of each element. A balanced design gives the users a sense of order. The look and feel of the interface is not just a decoration: rather, it contributes to instruct and give direction to the user. So for example, we can play with the objects (images, icons, texts) by changing tone, shape or size and make the interface more dynamic. But we can mantain a balance with empty spaces and a linear positioning of the objects. This way the user can find a balance inside an “irregular” but original design. White space in particular, help the user to separate and interpret the content into small pieces of information.

Suggested readings and notes

Users become main characters of a story

Narrative web: it’s a Web Site Story

Corporate websites stress their company’s leadership in their particular business field. E-commerce sites focus mainly on the quality/price binomial, as well as the product range. While web portfolios are collections of images with some graphic effects designed to attract attention.

It’s not an easy task finding pure, user-oriented websites; most of the time they are marketing-oriented. And, when the user does really matter, they seem to guide and instruct them on what’s supposed to be a good and effective web experience for them.

Studies suggest that web users are asking more than this. They are demanding a narrative experience; a story with – as the main characters –  the website itself (goals, mission, background) and its audience (users, clients, buyers or vendors).

In other words, an e-commerce website should abandon the logic of ‘see, add to the cart, buy, and have it delivered’ but instead adopt a narrative approach. That is, with the customer describing their experience with a particular product., for example, devotes a great deal of space to products reviews: registered users can add a description based on their personal experience and knowledge, or they can comment on images.

So if we are a professional and we want to distinguish ourself from the competitors, it’s misleading to create a splash page, replete with elaborate and time-consuming animations, just to lead the user to an ordinary static page. Rather, we should tell our personal story i.e., where we come from, our achievements and our struggles to become a professional in the field. Maybe using a minimalist blog-style layout as the well-known graphic designer David Carson has done.

Instead of boring visitors with mission statements, a corporate page could, for example, show the historical commitment of the company to global sustainability and the ethical code of conduct: the ‘About us’ section on Walmart is so extensive and detailed, it looks like a microsite within the site.

Another common mistake is pretending to maintain a close relationship to users through site customisation, surveys and newsletters. Unfortunately, in many cases this ends up being no more than a new browser skin or unsolicited commercial information. Put more simply: the user sometimes prefers to listen to someone’s else story instead of being told their story.

If surfing the web sometimes looks like a fast, erratic and unordered sequence of clicks from one page to another, this is because the user cannot find what they need. Or, to be more precise, they don’t view that particular content as interesting, new or involving. When selling a product, the web experience shouldn’t end with a monetary transaction or a contact form. Rather, it should deepen the interaction or, better still, the story. ‘The story of a product doesn’t end with the sale; the sale is merely the beginning of the big story. Take Mary, who has just purchased new software; now she needs to install it, learn to use it, and create new things with it.’1
This particular example suggests that a good user-oriented e-commerce website should use this as a case-study to solve future problems, to improve customer satisfaction, to adopt new products or to learn new ideas. (Cover image credits)

1Beyond Usability and Design: The Narrative Web

Searching for a balance between form and content

Aesthetics vs usability

Can visually beautiful websites also be easy to use?

It’s a typical dilemma when dealing with web communication: is it better to have a well-designed layout or a well-structured organisation of its contents? A usability expert would say: “Your website must be user-friendly, fast-loading and text-oriented, with little or no space left for graphic ‘experiments’.” While a web designer would assert: “Your website must be unique, eye-catching, with extensive use of iconography and other visual elements.” Put in philosophical terms: what comes first – form or content?
This dualism is more theoretical than real, however: case studies and research show that the experience of web users is influenced both by the way content is presented and organised. A nice, original layout is indeed able to coexist with practical navigation functionality. In fact, what makes a website offer a successful (or, indeed, unsuccessful) user experience is ultimately a combination of both.
This final assumption relies on the conclusions of early 20th-century Gestalt psychologists who studied how the brain processes images – and responds to what it sees. Though complex, a brain’s response to images is nearly immediate: we barely need less than one second to decide if a web page (or any visual artifact) deserves a thumbs up or down. This is done in pretty much the same way we decide whether a meal is delicious or not: it is an emotional/affective reaction to external stimuli which are governed in an automatic, unconscious way by the lower centres of the brain. Conversely, concepts like site functionality, structure and content organisation require a cognitive response; a brain’s slower, top-down, more considered reaction.

This second judgement is influenced by our cultural views, learning, experiences and personal preferences.
As with a progressive line, we first get our irrational/emotive perception (visceral reaction). This can persist and also affect our thoughts and opinions on a deeper,  rational level – “an effect that lasts long after the slower, conscious behavioural and reflective processes come into action, making you aware of how you feel about what you see.”1
These two basic reactions elicit different aesthetic models. The expressive model emphasises the originality, creativity and visual richness of a site’s design. While “the classical model stresses orderliness and clarity in design, by using familiar web and print conventions.”2
The prevalence of one model over the other depends mainly on the intrinsic nature of the website: an e-commerce website will be judged more by its content organisation (classical model), while a gallery portfolio is more likely to be viewed and evaluated according to its visual content presentation (expressive model).
Usability experts always adopt the classical model to evaluate a website: their decision is the culmination of accurate and thorough analysis. It’s all about guidelines, tests and standards. By contrast, web designers always return to the expressive model when judging a graphic layout: they look for the right synthesis of all the visual elements – typefaces and icons, colours and pictures. However, this does not mean that we can’t attain a harmonious relationship between these two approaches. As long as the most precise usability analysis isn’t the guarantee of a successful website, a sophisticated graphic design cannot prevent a bad user experience. We simply have to find the right balance.For more information on this topic see:
Visual Decision Making
by Patrick Lynch.1,2Lynch, Patrick. Visual Decision Making

Design and methodology

Designing the user experience

A website, a software application or even a ticketing machine are all examples of design interfaces where the user is engaged in a human-computer interaction (HCI). From a user point of view, whether this experience is positive or negative strongly depends on how the interface is designed and developed – the architecture behind it, basically. Known as User eXperience Design (UXD), it’s a “holistic, multidisciplinary approach to the design of user interfaces for digital products, defining their form, behavior, and content”.1 A complex yet fascinating process that I shall explore from start to finish.
(Cover image credits)

The user comes first

One important consideration is that there is no one single user experience. Instead there are multiple, diversified user experiences, depending on the characteristics of the final users.2
Creating a toolbar palette for a software application is different to designing a website interface. Similarly, an e-commerce website requires a different interface than a university website.

User experiences on the web

The user-centered approach is even more evident when talking about web interfaces. The innate nature of the internet is the absolute and unconditional power given to the end user: they can decide with one simple click whether or not a website deserves a visit, returning to, or a deeper experience. Not only  is updated, useful and relevant information a prerequisite but, above all, a combination of friendly, intuitive navigation; an attractive design; and a logical organisation of elements are among the key elements of a successful website.

UX designers at work

The user experience designers – or UX designers as they are commonly called – try to deliver the most appropriate interface for a particular user in order to provide the most suitable experience. To achieve this goal, the following stages of the User Interface Design have to be fulfilled.

  • The Information Architecture (IA)
    At this stage, the UX designer aggregates the main elements that need to be displayed in the interface into “a coherent structure, preferably one that most people can understand quickly, if not inherently.”3 The UX designer must then provide an answer to questions like:
    How do users get from place to place? What is the application’s search mechanism? How should elements be labelled?
    A site audit (i.e, a usability and accessibility study of the existing website),  plus flows and navigation maps are usually defined at this stage: this gives an overview of the content and sets the foundation for the other stages.
  • Interaction design (IxD)
    This is the core activity of the UX designer. At this stage, the designer is asked to provide solutions to create rich and engaging user experiences. Typical questions are:
    Which features and information are of higher importance, and how do I draw users’ attention to them?
    How should I incorporate the user feedback I am getting from user research, user surveys, and formative and summative usability testing?
    The UX designer can make use of different methods and techniques to get an insight into the user’s expectations when interacting with the proposed interface. The most common are research techniques (observations, interviews, questionnaires, and related activities); personas or user profiles that are reflective of their target user group; scenarios or storyboards, which imagine a future workflow the users will go through using the product or service.4
    At this stage, a website wireframe and/or prototypes are built to give an interface proposal or for the purpose of usability testing.
  • Usability testing
    In a simulated navigation, a selected sample of users “try to find information (or use functionality) on the website, while observers, including the development staff, watch, listen, and take notes.”5
    The results from a usability test identify critical points and give recommendations for improvements. In existing websites, a usability test may be conducted at an early stage in order to give valuable details about the site performance, in terms of user experience. When a website is not available, the UX designer can perform the test on a prototype and/or use the data collected through the research techniques at the IxD stage and the analysis of the IA stage.
  • Visual Design
    This is the purely creative stage of the User Interface Design process. The UX designer can work in combination with visual designers (depending on their own skills and the complexity of the project) to create the actual look and feel of the website.
    Questions like
    What’s the appropriate colour combination, typeface and iconography?
    have to be addressed. Graphic mock-ups and style guidelines are the typical deliverables of this stage. It should always follow the conclusions of the usability testing and the interface solutions indicated in the IxD stage through prototypes and wireframes. Though in rare cases, the graphics may drive the prototyping, depending on the importance of visual form versus function.


Identifying your primary user

Which persona are you? Building ux user archetypes

Building a user-oriented web site

Take your personal data: age, sex, job position, location. Then add something genuine that tells us more about your everyday life: stories, quotes, anecdotes, computer usage habits and goals. And there you have it: a persona. According to Alan Cooper, pioneer of user-centered design, “personas are hypothetical archetypes, or ‘stand-ins’ for actual users that drive the decision-making for interface design projects”. We are not talking about real people, of course. Rather, they result from personal information pertaining to web users (or any high-tech consumers), collected through interviews and other qualitative research methods.
Say, for example, that we want to build a website dedicated to sports-car drivers. We could start by displaying cutting-edge images of some of the best car brands on the market, along with editorial reviews, test drives and news from the car manufacturers. But without involving the would-be final users, we cannot be sure we are meeting their actual needs and preferences. We could end up delivering something they can already find on the shelves of the newsstand: the online version of a printed magazine.
Instead, what about asking a panel of sports-car drivers what they like most in a car? Its unique style, comfort, performance or maybe the options? They could also perhaps add details about their own driving experiences: places to go, a picture of themselves in their cars, meeting with other sports-car enthusiasts? This and other qualitative information, together with personal data, could be used to make the profile of a web user (aka a web persona).

In the attempt to define a profile for our website, the elements that are most pre-valent amongst the interviewees combine to form the primary persona, i.e. our most likely web user, and the one that all designers and developers should keep in mind when building websites. Less prevalent details might instead define the secondary personas – users with different needs and web habits – even though they are still part of our audience. There could even be negative personas; those whose characteristics do not match with our profile. What is relevant is the rigorous method used to collect all this information. Here are the key points identified by the guru of usability, Alan Cooper, in his best-selling book The Inmates Are Running the Asylum1:

  • Pull together a one- to two-page precise narrative description for each persona.
  • Identify workflow and daily behavioral patterns, using specific details, not generalities.
  • Detail two or three technical skills to give an idea of computer competency.
  • Include one or two fictional details about the persona’s life – an interest or a habit – that make each persona unique and memorable.
  • Don’t use someone you actually know as a persona; create a composite based on interviews and research data.
  • For a new project, don’t recycle a persona from a previous project; interview and create new personas for each project.
  • Keep the number of personas created for a project relatively small – usually between three and seven, depending on the interface project.
  • Develop a believable archetype so the design team will accept the persona.

For more information on this topic see:

Userfirst — /** Design the Experience **/

Contact me...

Hello, feel free to use this form to send me your project proposals: I will reply to you asap,
francesco :)

Lungotevere Testaccio, 9
00153 Roma

Contact details
Contact details
Your message
Userfirst — /** Design the Experience **/


Special thanks to the members of Codrops community for inspiring me and making freely available faboulous interactive code.

This theme is a re-adaptation of Garfunkel Wordpress Theme by Anders Norén.