Universidad Pontificia Bolivariana
Case Study

Intranet for students, teachers and administrators

The challenge

UPB is a university that had lost interest in its private information because the intranet was too outdated, so they decided to take a step into modernity

The mission in this project was to update the intranet in all its aspects, technological, visual design, user experience and brand. All of these topics focused on projecting a solid entity and avant-garde at the same time.

Our challenges:

  1. Increase intranet usage
  2. Provide segmented and relevant content
  3. Improve navigation
  4. Establish the intranet government
  5. Standardize file storage

My role

My job in this project was to provide adoption strategies to new technologies through trainings to the different stakeholders, lead the user experience, visual design and front-end team and coordinate the feedback cycles between development, business and users based on collaborative work cells.

Design Process

Audience segmented solution

The objective of the project was to perform rapid production cycles without emphasizing on the deliverables. For this reason, the plan executed was based on Lean UX through multifunctional collaboration and frequently user testing. Keeping in mind the multiplicity of the target audience, we made the decision to segment them into three final targets, administratives, students and teachers. By differentiating them, each of them could carry out the design process independently without abandoning their shared characteristics.

Research

By dividing the target audience, we began conducting surveys focused on finding the core services of the intranet and whether these should be aligned with the needs of each target. Subsequently and with the help of the university, through workshops, we defined the actual services and the augmented services with the purpose of aligning all the concepts and consolidating an action plan for the rest of the process.

During this time simultaneously, we conducted a competitive analysis with the best university intranets around the world, we conclued that they were increasingly versatile, clean, data-centric and scalable through plugins or add-ons.

Deliverables: Brainstorming photos, competitive analysis, survey reports, workshop results, the core service analysis, the actual service analysis, the augmented service analysis.

upb - user personas

Definition

After collecting the information and organizing it optimally, we defined the user persona for each public and performed user tests to define the labeling, the sitemaps and the screenflows to improve navigation within the intranet. In parallel, we organized the optimal way to name the UPB's files and the structure of the folders so that they could easily locate and search through the search engine of the tool.

Deliverables: Screen flows, sitemaps, user personas, journey maps, storage file structure, government manual.
axa - wireframe

Prototype

Freehand sketches were made during focus groups divided by stakeholders according to the services required for each audience. Subsequently, they were consolidated into digital interactive prototypes and these were validated in user tests through tasks flows assigned to teachers, students and administrators on the final devices required for the platform.

Deliverables: Sketches, brainstorming photos, wireframes, focus groups results, low-fidelity design, interactive prototypes.

Design

Starting with the principle of integration with the UPB public site and focused on updating and cleaning, we are inspired by UI Fabric to generate visual impact accompanied by spaces, cards that make the content independent, typographical gearchy and elevations. First creating a scalable design system, which was later scaled to desktop, mobile and tablet devices.

Deliverables: High-fidelity design, interactive prototypes, design system.

Front-End

The coding was divided into two main sections, the top menu accompanied by the aside menu were stylized using Oracle ADF, the rest of the site using conventional CSS3, this mixture was made intentionally so that the intranet's content could interact with the public portal and allowed to call news or articles of interest segmented.

All coding was done remotely on the servers of the Universidad Pontificia Bolivariana because of the strict security required by this type of entity.

Deliverables: Style guide, Sass, Jade, HTML, JS, Jquery, images

Test & Measure

With the purpose of finding fast results, all the design stages were validated in a minimum of two iterations for each target audience. Each proposal of labeling, visual design, interactions, screen flows, accessibility was tested on students, teachers and administrators.

Finally, on the publication of the intranet, we performed some A / B testings that by adding heatmaps and scrollmaps tests, optimized the navigation and distribution of content cards.

Deliverables: Task flows results, accessibility results, heatmaps, scrollmaps, clickmaps, A/B tests results, heuristics, accessibility results.

Results

61

Surveys

74

Usability Tests

37

Iterations

48

Artboards

Learnings

Changing an intranet is quite wide due to the multiple technological limitations that it is in itself. Additionally, wanting to make such an aesthetic of a public portal with a private portal reinforces the need for effort in the experience, interaction and visual design in order not to break the basic guidelines of a brand.

By consolidating this new product, the use of this platform increased by 75% because students, teachers and administrators found all the content they needed for their tasks in one place, avoiding the need to remember many passwords and urls.

The fact of standardizing a structure for naming documents and folders is not enough. It is always necessary to empower a sector of the audience to take on the task of verify and validate the order of the platform, for this, the selected audience must be trained or qualified for the best governance.

By joining the development, content, administration and design teams, any kind of project can progress so much faster than the average way because the work cells are involved in an interdependent and multifunctional way by executing features that can be tested by end users in less time avoiding the need to have a final product to be validated.

www.000webhost.com