Project

Institucional Website

Deliverables

UX / UI and Research

Client

Moderna Publishing

- CASE DESCRIPTION

The Story

With a student-centered approach, Moderna’s books bring forth contents that relate to children’s daily activities, including an interesting organization of topics. Another striking aspect of their books lies within their graphic design, developed to naturally appeal to students. Since 1962, when established, the company has made of quality a major concern, and currently it heads the market of textbooks in Brazil.

My challenge was to create a website that would neatly display a considerable volume of content in a user-friendly way. So I turned to Moderna’s employees, having them participate in information architecture workshops - and share their knowledge on the business. In the end, the site was quite comprehensive, and also easily navigable and adaptable for every device, including a portal for teachers with exclusive sections.

- METHODS USED IN THIS PROJECT

UX Design

- OBSERVING THE MARKET

Research

For a publishing house platform, it is important to focus on a number of features: a very well developed search engine, making it easy to find products; a consistent and standardised interface; an attractive layout; and a good navigation system.

I looked for websites of similar players, in Brazil, in the field of educational publishing houses: Editora do Brasil, FTD, Leya, Saraiva and SM were the most relevant for my research. What I noticed was that most platforms did not offer a clear menu, nor a search engine with efficient filters. Also, websites at the time were not yet responsive and interfaces did not feature consistency and standard. In general, platforms were confusing and demanding for their users, who had to peruse long catalogs for books.

- ORGANIZING INFORMATION

Architecture

In a closed card-sorting workshop, I gathered directors and employees of Moderna - these were in areas such as product development, marketing and social media networks -, as well as school teachers who were actually using Moderna’s books and other products, to raise and discuss ideas for the platform.

Firstly, they were divided in small groups to talk about their pains and expectations. Then, everyone shared their views, and it became clear that the platform primarily had to cater for their catalog and digital products. But also a section for teachers was important, containing extra material such as classroom activities and a database of questions and exams. Lastly, an area dedicated to the latest news and events was also brought forth.

- TRACING ROUTES

User Flow

Insights from the workshop led me to 5 major categories when designing the platform: “Institutional”, “Catalog”, “Digital”, Teachers’ Portal” and “Events”.

“Institutional” brought all the information on Moderna, with the publishing house’s history, staff, mission and goals. “Catalog” contained all titles in print version, divided in two subcategories, “Pedagogical”and “Literature”, with AJAX for the search engine. “Digital” provided access to digital products and offered a “look inside the book” area. Then, “Teachers’ Portal” offered different content for classroom use. Lastly, on “Events” Moderna would publish its latest news and a calendar of events, such as the launching of new books and other products.

- ILLUSTRATING STRUCTURE

Wireframes

The wireframe was designed in low fidelity mode, with real content provided by Moderna - photographs, book covers and pages, documents and texts - being applied. A desktop version was developed varying between 1 and 4 columns, and also a responsive structure for tablets and smartphones - very much used by teachers in schools.

Altogether, 11 pages were created: within “Institutional”, one about the publishing house, one more about corporate social responsibility, one about projects and partners, one about publications and one for job opportunities in Moderna; 3 pages and corresponding filters in “Catalog”- for either pedagogical, literary or language books; one page for “Digital”; another page for “Teachers’ Portal”; and one for the category of “Events”.

- ATOMIC DESIGN

UI Design

- 1180PX - 16 COLUMNS

Grid System

- FOR UI DESIGN

Color System

- PROXIMA NOVA FAMILY

Typography

- INTERACTION ELEMENTS

Components

- THAT’S WHERE MAGIC HAPPENS

Final Design