Creating informative and transactional interfaces for a single product

A checklist for designing in the context while still maintaining unity.

Recently, I had the opportunity to work on a project with 3 different environments: informative (the website), transactional (the sign up and payment), and the product itself . And in each of those areas, I wanted to make users feel welcome and comfortable in a different and specific way, while still maintaining the same identity.

Here is a checklist of attention points I used to guide me through that:

☑ General mood

  • Informative: it’s an environment of exploration and curiosity. I tried to achieve that by adding images or illustrations that entertain and contribute to the understanding of the product.
  • Transactional: an environment of security and detailed processes. The users should know where they are, and where we are taking them next. They also need to feel the system is safe and that they can find help anytime during the process.

☑ Navigation

  • Informative: make sure the user can get anywhere in the website and find any information they may need to understand the product.
  • Transactional: instead of regular menu, the navigation was very specific to particular fluxes, in the form of steps.

☑ Footer

  • Informative: Works as a hub to all parts of the website, even to the most obscure pages.
  • Transactional: Avoid links that could distract the user, but take advantage of the space as a place to increase trust, offering contact options in case of questions and reassuring the security and safety of transactions with any trust seals.

☑ Feedback

  • Informative: short and simple, so the user can continue exploring the website if they want to.
  • Transactional: detailed, for the user to understand what will come next and how long it will take.
Feedback for a contact form and a for a new mediation request.

Besides all those considerations, I prepared a (very) quick diagram to help others working in the project decide what type of interface they needed. I think this could be specially useful for teams in which a group of designers work on any products a company may have, not being responsible for a single product:

Are there any other attention points you take into consideration when designing transactional and informative areas? Please, leave in the comments! :)