Osservatori Digital Innovation

Designing the new web ecommerce, and the online and offline media identity.

The ODI of the School of Management of the Politecnico di Milano was born in 1999.
Today, they are recognized as the leading provider of Digital Innovation in Italy, which integrates Research, Communication, and Continuous Improvement.

Rebuild the digital core. The e-commerce platform for one-shot purchase or content subscriptions.

The platform’s goals are to communicate and produce knowledge about the opportunities and impacts of digital technologies on businesses, public administrations, and citizens, through interpretative models based on solid empirical evidence and independent, pre-competitive and long-lasting spaces for comparison, which aggregate the demand and supply of Digital Innovation in Italy.

Contribution

UI UX development
Front-end development [Blog]
Art Direction on/offline identity
Art Direction photo shooting

Technologies

Sketch
Invision
Html / css

Team Rawfish

Length

4 months

Numbers

200

Publications

200

Workshops and webinars

490

Partners and Sponsors

200k

Subscribed Users

Let's start with the data: to frame the context, we analyze the user journeys and pain points.

During the kick-off and the first subsequent meetings, the stakeholders were introduced to the analytical data developed to identify and circumscribe the paint points. The results allowed us to outline the “do’s and don’t’s” to be adopted and avoided in the content hierarchy restructuring, in addition to their potential optimal representation in the co-design phase.

We conducted a thorough analysis of conversion points: areas, pages, and call to actions with the function of generating an action from the user. The study is functional to the sharing, in the mockups made, of the strategic areas for the Customer.

The objectives underlying the site reconstruction project are:

Enhance conversion

Enhance user conversion

Increase purchases

Increase the purchase of subscription plans

Search Optimization

Improve the user experience when searching for content

Mobile first

Make the platform mobile first by optimizing the mobile experience

Improve user area

Take care of the private user section, presenting all the free and purchased content organically

Hierarchy of content and tone of voice

Highlight the strengths of the ODI in presenting training offers

The hierarchical structure of data and the definition of navigation flows

By highlighting the strategic sections rather than the second level sections, the hierarchical structure of the information has been revised at the root. A series of workshops with the team of ODI developed the definition of the navigation menus and the content on the page. The lean approach and fast iterations made it possible to quickly define the shared structure of the data and their representation in the co-design phase, producing wireframe templates.

Iterative process of development of the User Interface: Definition of the first atomic Design System

The construction of the first official Osservatori.net Design System allowed our Design team to build the final templates while maintaining stylistic coherence in the representation of the various elements.

The official color palette has been enriched with colors identified to expand visual communication with complementary colors to represent: categories, states, secondary elements, etc.

The added value translated into shorter production times for our team and better collaboration with the Development team who could count on clear and scalable matrix templates according to the shared rules.

Development of templates in a mobile first perspective

Templates were constructed based on the idea that they would be used on a mobile device first. Onboarding, payment, and usage of content experiences were reanalyzed based on the device, and no detail was simply adapted. We were able to receive qualitative feedback on the templates’ presentation of content hierarchy based on the website’s objectives through A/B testing.

MyHomeAggregator of purchased content, activities and user data.

Once logged in from the public area, the user accesses the private version of the portal where, in addition to the shared public functions (e.g. content search), he finds MyHome personal section containing purchased products, the management of newsletters and personal and payment data.

Responsive navigation menu

The mobile menu is based on the experience of native mobile apps. It presents the items with horizontal scrolling and preserves their font size and contrast with the background in order to enhance readability.

Product detailsDesktop and mobile content hierarchy

The mobile version of the site displays general information about a product (cost, type, observatory) as well as action buttons including saving to favorites and adding to calendar.

Onboarding flow and free trial activation

The free trial of the products for a limited period of time was the married formula to bring new users together with the aim of allowing them to appreciate the quality of the content and newsletters for 30 days. The goal is to convert the user into a premium profile. The onboarding flow, the result of an AB test, has been designed to allow you to access content in a few clicks.

Tone of voice. Visualize your message.

As a result of a decision made during the development of the project and not included in the initial concept, the ODI provided the artistic direction for the photo shoot to support its digital (web, newsletter) and social media communication.

Our team managed the entire project. Selection of photographer (Veronica Mariani Photo), models, stylists, location, mood, and post-production. In March 2020, two photographic services were conducted based on the proposal to create abstract and subject shots. Using abstract photography (combined with a supporting subject), to reflect the realities of everyday life in the contexts of use. It is a multimedia file. Shots featuring a female subject gave a first face to the communication of observers by developing interactions with desktop and mobile touchpoints and by showing the subject alone as a symbol of social communications and newsletters.

Blog. Application of the design system on the new platform

On the Osservatori.net website, we redesigned the Osservatori.net blog as part of the second phase of the project. As a result of the e-commerce project, the Rawfish team has been able to work quickly, utilizing the available elements and creating new ones as needed. Once the User interface of the various templates was agreed, the html and css front-end was developed and provided to the Osservatori development team for implementation on the Hubspot platform.

Blog: Rewriting of the html theme according to the guidelines produced by the site

The responsive blog templates have been written according to the guidelines of the Hubspot platform. This allowed for a frictionless implementation by the internal team of Observatories. We took care of the Quality Assurance phase, reviewing the mounted templates and indicating the optimization interventions.

Mailmarketing. Restyle of the communication channel

The new image built with ecommerce and applied to the blog also affected the mail marketing channel with which the ODI communicated news, events, promotions with users.

We have cataloged the existing templates and rationalized the number to meet the real needs of use, covering all the different cases with a dedicated custom template. The applied skins derive from the design system. For communications, one of the shots with subjects created ad hoc was used to strengthen the identity of institutional communications.

New coordinated graphic design for social channels

Communication on social media channels such as Linkedin, Facebook, and Instagram was also a part of the application of the new image. The idea was to identify the ideal formats for the respective channels, which would share common graphic elements. Posts, stories, covers, and event profiles maintain visual coherence adapted to the format.

New graphic treatment for archival photographs

A post-production treatment of the archived images was also included in the restyle intervention. By replacing the original color with a toning based on the brand’s own blue tones, distinctiveness and recognition are now restored within the social feeds.

Offline communication. Dissemination materials for face-to-face events and online declination.

To proceed with the restyle of the page templates and application of the coordinated image to the nodal graphic elements (graphics), it was necessary to catalog and code existing materials. The materials involved the entire production of online information support (PowerPoint presentations, reports and conference programs, brochures) and offline materials (paper delivered during events in attendance, badges, banners, stand setups, large format).

The Covid emergency forced the reworking of some paper supports into digital formats, re-adapting standard formats intended for printing into interactive files that can be used on PCs and tablets.