Ux design for an educational website about the history of Mexico.

Introduction

I participated in this project as the only designer of the team, I was responsible for directing the visual style of the project while supporting the rest of the team in the development of the product.

I collaborated with the product manager and the development team to ensure a balance between what the company requested and what the user required.

Project requirements

These were the main requirements that El Colegio de México solicited for the development of the website:

• Educational content about the history of Mexico from its settlers to the present (10,000 pages) approximately.
• Aimed at students taking the subject of History of Mexico (students between 11 and 16 years old).
• The website must have an interactive map of Mexico, this map will allow users to access and can get information on every state of Mexico.
• A timeline navigation, which would allow the the users to navigate on the website.
• The website has to be managed and often updated by the research team from El Colegio de México.
• Adapt the information from the printed collection Historias Breves (published by El Colegio de México) to the website.

User research

Who will use the website?

As an initial proposal, the product was designed for students who were taking the subject of History of Mexico in primary or secondary school and university, and also for teachers who were teaching this subject in the study plan of the SEP (Ministry of Public Education).
The main users of the website would be:

• Students in 5th and 6th grade of primary school.
• Students in 3th and 5th grade of high school.
• Estudiantes de 5º de preparatoria
• Professors who teach the subject History of Mexico.

User personas

Based on the goals of the project I designed 3 users so that the team had an idea for whom we are designing the platform, and could to try to discover the needs that each user has regarding the website.

Info and statistics of the users

With the support and research of the INEE (National Institute of Educational Evaluation) we found out that not all schools have an internet connection in their classrooms.

“In Mexico the 62.3% of elementary and high schools does not have access to an internet connection and does not have computers to guarantee an average of eight students per team for educational use.”

Educative panoram de México 2011- INEE

As a result of these investigations, we discarded the section on educational support for teachers, since most schools do not have the technological resources for teachers to take advantage of the platform in the classroom.

We decided to change the target audience of the websit

We realized that the information for the website content delivered by the authors and researchers was not very related to the study plan of the SEP, and that the content was hard to understand for students in elementary schools.

As a result of these investigations, we changed the target audience of the project, now the website would be aimed at high school students and the general public who want to know more about the History of Mexico.

Collecting ideas as a team

User stories

We organized a meeting with the members of the project from different areas (authors, historians, content managers, designers and programmers) and invited some students so that everyone could share their points of view, ideas and requirements for the development of the website.

With this exercise we got many ideas and aligned our goals as a team. In this image I share some of the most relevant user stories of the students, authors, users and content managers.

Challenges in choosing the right navigation for the website

Although we already had many ideas on how to organize the information of the website, we still had two big challenges that were requirements for the project. The challenges were:

1. Creating an interactive map of Mexico that would allow users to access each state to read its content..
2. Designing a timeline navigation that would allow users to find the topics in a chronological way.

These requirements established by El Colegio de México had the goal of creating a more attractive and interactive website, but although they were good ideas, after trying card sorting exercises and usability tests with 10 students, we noticed some drawbacks that I explain below.

Testing the usability of the website navigation

Card sorting exercise for map navigation and usability testing
I wrote on some cards some of the main topics of the history of Mexico and the name of the states of Mexico where those events happened, then I asked the students to try to categorize the cards in whatever order they considered correct.

Result:
The students were unable to categorize the cards successfully, the main cause was because most of the students did not know in which states those events had happened.

Card sorting exercise for timeline navigation
I wrote important dates and events of Mexican history on the cards. I included some of the most popular topics in the history of Mexico, and several titles of educational capsules that would be within those topics. Then I asked the students to try to categorize the cards in the correct order.

Result:
Just half of the users could categorize the cards correctly, the reason was that users did not exactly remember the dates of historical events.

Both navigations were confusing for the users, because users need to know the dates of the historical events or the state where the events occurred.

Testing the usability of the website navigation

I made a prototype of this navigation proposal, and asked 7 people to try to find some of the most popular topics about the history of Mexico.

These were the results:

• Users had difficulties in finding the topics they wanted to consult, because they did not know which state to choose to find the topic they were looking for.
• Most of the users did not know the location of the states of the Mexican republic, sometimes it took them too much time to find the states that we asked them to consult.
• Although users commented that they found the map attractive, the navigation proposal was not useful. People often search for the history of Mexico by themes, topics or characters, but very rarely geographically.

Card sorting exercise for timeline navigation

I prototyped the timeline navigation and asked the students to look for some capsules or themes to see if they could find them easily and also to be able to observe how the user experienced the navigation.

These were the results:

• A timeline is not a common way to navigate web pages, so it took some time for users to find out that the timeline worked as a navigation menu.
• Most of the users did not know when the historical events occurred that we asked them to find.
• The content of the site is very large (approx. 10,000 educational capsules), which means that it would not be possible to place all the capsules on the timeline navigation unless they are hidden, however, this would make it difficult for the user to know what topics are available to consult.

We decided to cancel the map and timeline navigation

Keeping both navigations at the same time created confusion to users, although it seems that the general history of Mexico and the history of each state are the same information, they are actually two completely different contents and structures.

The objective of the map was to preserve the essence of the book collection Historias Breves, El Colegio de México wanted all this information be freely accessible to the public, so they decided to create another project that was exclusively for the digital version of the book collection Historias Breves..

We discarded the map navigation and we focused on a chronological navigation.

Navigation solution

Divide the history of Mexico into 6 periods

The simplest way to organize the site was to divide the history of Mexico into 6 periods. This way users can have a better idea about where to find the topics they are looking for without having knowledge of the exact dates or locations of the historical events.

User flows

User navigation flow to choose an educational capsule

After doing the tests with the students, we discovered that organizing the history of Mexico into periods made it easier for the users to find the topics that were of interest to them. Users could find a capsule theme in just three steps.

Authors navigation flow to create, edit and publish capsules

Information Architecture

Web design structure

The website was organized chronologically into 6 historical periods, each of which can contain different topics, and inside each topic it can contain subtopics and in some cases sub-subtopics.

A search bar would allow users to find any topic even if they do not know in which period the historical event occurred.

Sitemap

Sitemap of the CMS to publish the content to the website.

Wireframes

Low fidelity

I drew my first ideas for the site first on paper, and later I drew the wireframes on my Wacom tablet. It is very useful for me to combine the speed of sketching by hand with the possibility of duplicating and reusing the components in some design programs, the combination of both techniques allows me to create more visually consistent wireframes that work great for early usability testing.

These were some proposals that I designed for the navigation, of educational capsules and for the website's appearance.

High fidelity wireframes

I chose the most efficient layouts to later prototype them and do usability tests to see which one was more efficient for users.

Website prototype and user testings

Interview process

I designed the prototype with the software Invision and I asked 5 people to test the website. I asked them to find some topics or find information about a specific historical event.

Results

• Users preferred to use the search bar instead of navigating through the website.
• Some users tried to move to another period from the inside of a capsule, but they could not do it because that option was not available.
• The biography section was hard to find for users because the button was not in a findable place.
• Some users wanted to navigate to the next or previous capsule.

Iterations

We found out these user behaviors after the first user testing:

• Users prefer to use the search bar than navigating through the website
• It was necessary to add an option to navigate between periods inside every period.
• It was better to use list menus than image menus, because with many content users have to scroll to find a topic.
• Change the position of the biography menu.
• Add the option for “next and previous” capsules.

Users prefer to use the search ba

I changed the place and color of the search bar, I made it more visible for the user, in the placeholder I changed the text “find” for some search ideas like “Topics, biographies, dates.”

Conclusion

From this project I learned that having a good UX in your product will not only make products more useful and valuable to people, UX also helps to reduce costs and delivery times for the company who is developing the product.

The lessons I learned from this project:

• I would have preferred to take advantage of the space on the main page with capsule or theme content, instead of having included the covers with the parallax effect that was a trend at the time.
• Prototyping and usability testing early in the project helps to reduce time, costs and errors in the future.
• It is important to prioritize the delivery of the minimum viable product (MVP) before to integrate more features that are not essential for the user.
• With tests and evidence the client can be convinced to make better decisions for the project.
• It is important to make a balance between what the company needs and what the user requires.

hbreves.org.mx.