As a German UX designer and education expert, who has family in Argentina, I was asked to design the website of a school in the suburbs of Buenos Aires. Starting as volunteer work, this quickly became a passion project. Find out more about the process!
This was the baseline:
- School did not have any website previously
- Existing branding: logo and typeface
- Color palette with colors reserved for the different school levels while yellow is supposed to represent the whole school
- Main stakeholder and point of contact: director of the school
Main Challenges
To dive right in, I’d like to mention the three main challenges I encountered during the project right from the start.
1. User Personas
Usually, school websites address parents, students and teachers. These user groups have very different goals, needs and frustrations when looking at a website.
2. Information Architecture
The mentioned user groups are looking for very different content. Typically, school websites are loaded with content, trying to do all of them justice.
3. Vacation time
Unfortunately, the project was planned to be realized during the summer vacation time which restricted the possibility to do user research. Additionally, volunteering, my time to spend on the project was limited.
User Research and Personas
The director of the school was full of ideas and would’ve loved to exhibit many different aspects about the school. Among other things, he wants to run a blog, where students can also publish content. As a former teacher, I immediately loved his idea to use the website as a medium for media education. However, as UX Designer it was my job to apply the design thinking framework and create a user persona in order to define the main focus of the page.
Due to the project start during the two-months-long summer holidays it was hard to find interview partners, which resulted in a lot of desk research instead of actual user research. My previous experience as a primary school teacher came in handy as well. Luckily, the director of the school was very collaborative and very engaged throughout the whole process.
Together with the stakeholder, we defined external parents, who are researching the school to possibly enrol their child as the main user group. But of course, the page also needs to consider:
- parents of enrolled students
- students (of different age groups)
- teachers
Information Architecture
Like many other decisions in design, the categories should be based on the needs of the users. The discovery work already helped to identify parents as main users, with teachers, students and parents interested in enroling their kids being secondary but important groups. They all have different goals and needs when visiting the website.
Although it could make sense to categorize content and information by audience it is important to still put the mentioned goals and needs at the center to assure a fast navigation. In this case …
- administrative information (about the school, contact, …)
- content by levels: kindergarten, primary school and secondary school
- enrolment information
- news/blog
Style Tile
The color palette was already defined and is established within the school:
- yellow: the school overall
- orange: kindergarten
- green: primary school
- purple: secondary school
One one hand, the colors are very playful and it’s great that every level already identifies with them. However, the colors are a little dark and I had to be careful that the design is sociable, but not too childish. With yellow being the main color of the school, I was also aware from the beginning that I need to pay special attention to accessibility.
Wireframes
Next, it was important to make a few first sketches. I did the wireframes directly in figma. Together with the stakeholder, we also defined what type of copy is needed for the different sectors — that’s the notes you can see next to the wireframes. Since I’m not a native Spanish speaker and don’t know all the details of the school, I helped to organize the content but the stakeholder was responsible to write texts that are longer than a few lines.
I would’ve loved the hero section to have big fotos to transmit a feeling of the school immediately. Unfortunately, there were no pictures available with sufficiant quality for the hero section. So I kept iterating with different solutions.
As you can see below, for the final website, I went with a much more toned-down version, which is playful, yet professional and hopefully established trust when visited by external parents. The idea was to use the colors to make the users curious for more. Let me know in the comments if you think this goal was achieved.
Prototype
Prototyping is usually one of my favorite parts of the whole design process. Nothing beats seeing your design and work in action!
Learnings
- Working with someone outside the tech-sector has been a great experience, since I actually had to guide the stakeholder towards a user-centered approach. Initially, he had no idea what a UX designer does and on the website, he mainly wanted to exhibit is own ideas. It was great to see how this changed throughout the process and there were learnings on both ends.
- As a former teacher gone UX designer, I loved to get this different point of view into the public education sector.
- Importance of UX Writing: As a non-native speaker of Spanish, I could come up with easy copies but was very much dependent on the texts of the director of the school. Still, I was able to guide him towards a user-centric language on the website mainly by defining the user persona of the website and constantly reminding him of the persona. One day, he will probably publish a book about the history of education! Unfortunately, the website is not the space of all his knowledge.
Next steps
- Hi-fis of sub-pages as soon as I get the copy from the director, we already have the wireframes.
- Usability test: Check how the prototype performs with users: (external) parents
- Director wants to get professional pictures taken in order to fill the page with more images, represent the school better and to possibly circle back to the idea of big images in the hero section.
- Final implementation of the website. Yay!
