School network Redesign

Multiple sites: the value of respecting identities and working with development bases.

Client: Red educacional DSM
Date: 28/02/2017
Services: Ux design, Interface design, Wordpress

01. The Situation

Those development projects where starting from scratch is the main challenge offer excellent creative opportunities; however, they also require enormous planning and research efforts. This particular network of schools came to us looking to develop websites for its seven establishments scattered in different cities throughout Chile.

Because there were many different communities, sizes and goals to be met, the adventure of creating something that would satisfy and respect the individuality of each institution was the main challenge of this project. The school network’s financial backers sent us a request to come up with new websites that would reflect the identity of each school, to provide for their specific, as well as shared, needs.

Which was my rol in this project?

Information Architecture

I created wireframes prototypes with the functionalities which were included in each project; these were subsequently used in the design and interface development for each school.

Project direction

I coordinated my team’s work on the design, construction and integration of the more than 70 pages we created for this particular project

02. How was the process?

Benchmark, Mapping and the Initial Wireframes

The first step was to generate a benchmark of local and foreign competitors, so that we had a global vision of what other banks were doing with their websites. I analyzed more than 50 competitors in the Americas, Europe and Asia and organized those Best Practices I witnessed in a document that I then shared with the client. This served as a basis for the initial meetings where we worked to define the scope of the project.

I worked in parallel on inventorying each page of the previous site, so as to have a general idea of the site’s navigation. I then proposed a new, more ordered, more hierarchically clear structure.

Having gained approval for this new organizational tree, I organized the more than 450 pages that the new website would need into 22 templates which my team and I would have to design, lay out and integrate, using the IBM WebSphere Portal platform.

Information Architecture and Contents

After the project planning, I created wireframes for 22 pre-defined templates, documenting, in detail, all content elements that could be updated by the administrator (titles, paragraphs, lists, images, etc.). This documentation was vital in allowing the developers to start building the application’s back-end and so that, for its part, the content agency could also work on the necessary texts without having to wait for the site to be fully constructed. In this way we were able to continue trying out and improving the content at the same time as the back-end was being developed.

Detalle de los wireframes que creé para el proyecto

Interface Design

Once we had the first wireframes approved, we began the process of designing a new interface for the bank. This part of the development process proved slower and more difficult, since without intending to, we began drifting further from the expectations and demands of our client, in terms of design. The bank continued to reject our proposals and both team morale and our relationship with the client began to wane. In the face of this crisis, we decided to go in a new direction, adding a local agency, Ego, who had done a excellent job interpreting the wireframes we’d given to them.

With this fresh perspective and the models ready, we began the user-testing process to ensure our efforts, design and development were on track.

Algunas de las (sin exagerar) 50 versiones de diseño que hicimos del home del banco
Diseño final de la Agencia Ego para el proyecto de Santander Rio

Focus Groups and User-tests

In order to ensure our work had been satisfactory, once the main pages were designed we organized methods for collecting feedback from the bank’s clients.

The first was a series of focus groups designed to register clients’ and non-clients’ impressions and expectations about the bank’s website redesign. We also showed them new designs and collected feedback about that.

A second method used to investigate the effectiveness of our interfaces was to conduct user-testing sessions, evaluating usability and expectations on the part of the bank’s clients. To achieve this, we created a navigable prototype using the fluid-task principles we wanted to test, such as opening an account, searching for nearby branches, and simulating a line of credit, among others. We asked ten clients to attempt these tasks, observing whether they were able to and how natural the process was. Afterwards, we organized our findings and potential improvements in a document that we shared with our client and in which we updated graphics according to the tasks we had narrowed down for improvement.

With these corrections and visual improvements in hand, we were ready to build the model’s front-end.

Detalle de la presentación de resultados de los focus groups y test de usuarios que hicimos para Santander

Construction, Integration with WebSphere Portal and Content Filling

Once the design templates had been tested and corrected, the Deletec guys began building the front-end templates which would be integrated into the WebSphere Portal. Because the client we were designing for was a bank, this resulted in many months of intense work in which we found ourselves confronting diverse technological and data security challenges. It was a lengthy but educational experience.

While the templates were being integrated and in order to take advantage of the time we were taking bringing the site to production, we decided to use the administration panel to populate the site, using the contents the agency Soup Interactive had created. It was a very challenging, large-scale process, considering how complicated the platform we were working with was, not to mention the 400 pages still waiting to be populated.

Once the process of uploading content was completed, the project passed into the hands of the bank’s internal teams, who carried out all necessary tests before the new site launched.

The new Santander Río website has been, without a doubt, the largest project I’ve confronted in my career. What started as support for the agency’s team in Ux and Architecture Information, ended up with me living in Buenos Aires so I could put myself in charge of the direction of the entire project and to create a network of providers and freelancers who helped us carry out the redesign—a redesign which, in the end, was a great success

03. Tech Roster

During the almost two years that I was bound up in this project, I met incredible professionals who were fundamental in the project’s ultimate success. I could not end this case summary without thanking the following:

  • Gonzalo Vidal, Partner, Mundo Buenos Aires.
  • Santi Risco, Partner, Deletec; Lead Developer.
  • Iair Rozen, my tech counterpart in this challenge.
  • Agustín and Ricardo, Partners, Ego; within two weeks they had made and gotten approved designs which we as a team could not convince the bank to approve in six months.
  • Román and Marina Taliberto, from Soup.
  • Roberto Vaucourbeil, Head of user research, for setting me straight innumerable times with his experience and professionalism.
  • Marcelo, Meche and María for their patience while uploading the content, field by field, for the more than 400 pages which make up the site.

Alejandro Toso, who took up the baton for the project’s final sprint.

¿Tienes un proyecto similar? Contáctame!