Laboratoria+
Redesigning an EdTech focused on female leadership
Edtech l Redesign l Latam 🌏
Laboratoria+ is a tech education company focused on opening doors in the industry for women in Latin America. They build on the legacy of their predecessor, Laboratoria, but whereas the latter is focused on entry level tech education, Laboratoria+ doubles down on this premise to help women reach leadership roles in the industry.
The Brief
After the creation of their brand identity, Laboratoria+ needed to implement and launch it from scratch across its digital ecosystem: website, digital handbooks, social media, etc.
My Role
UX Design
UI Design
Handoff to Development
Client
Laboratoria+
Industry
EdTech
Type of Project
Web Redesign
Year
2023
The Challenge
The challenge in this project was to analyse their current digital efforts, and expand their brand's guidelines for digital platforms such as: informative websites, digital handbooks and social media platforms.
Understanding the context
Laboratoria+ had collaborated with Sed Studio to design their brand identity and clarify their visual treatment in order to communicate their value proposition. The first milestone in this project was focused on analysing the brandbook and proposing the necessary changes to facilitate the expansion of the brand in digital media.
#01: A restrictive color palette
The initial colour palette that was handed to me was made up of only 4 colours to be used in the platform and the brand’s digital ecosystem. As memorable and striking as it was, it ended up being static for digital use.
They themselves were running into problems integrating the fuchsia colour in their digital content, as it is a very loud colour that draws too much attention.
This resulted in a lack of usage of fuchsia, creating a platform of even fewer colours than they started off with.
#02: Photography as a unique source
for visual content
One of the big successes of the brandbook was to be very specific about the kind of photography they were looking for: Empowered latin women in digital job contexts. This worked very well to explain what Laboratoria+ is. The problem with this description was that it was too macro and did not allow the users to differentiate between learning routes.
#03: Unexplored potential
In my opinion, one of Sed Studio’s biggest hits in this project was the container system they created for Labotaria+’s content, which was based on circles and squares.
Sadly, only the circle was being used in digital platforms, leaving an untapped range of variations.
Wireframing and
UX Design
I organised the wireframe stage in two big chunks: First, a homepage which could quickly explain the differential value of Laboratoria+ and which could present the learning areas proposed for each student. The second was the visual organisation of the courses. It was primarily the information of each course: what it’s about, what they will learn, work on, concepts to apply. These are quite imposing, lengthy texts, and I had to find a way to make them easier to digest for a potential applicant.
Once this route was double-checked and confirmed by the client for a first release, we moved onto the next step: applying UI guidelines and creating the high fidelity wireframe which would be used as source of truth by development.
Building a User Interface Kit
To support the proposed design, I had to create a guideline of standards and alignments to be used as a base for future digital products of the Laboratoria+ brand. Thus I created the L+ UI Library. This UI Library aims to standardise: fonts, hierarchies, colours, photographic style guides, iconography libraries and the main components of their site.
Thanks to this they will be able to maintain a coherent and clear brand identity throughout time and products, without the need of an external provider each step of the way.
Bringing everything together
Now that I had an updated structure and a visual path in hand, I combined these two streams of work and proposed a responsive website, that aimed to make large chunks of informational content easily digestible.
Expanding the brand
Truth be told, no digital project sustains itself entirely in one site. It is the different points of contact that a user finds along the way that create the experience. This is the reason why the expanded brand of Laboratoria+ had to be reflected in different pieces. After our first collaboration I had the opportunity to apply the visual system we created to informational pieces such as: syllabi, culture, day to day documents, and credentials for new students.
Main Shifts
Based on the initial analysis of the project, we made 3 main shifts.
#01: An expanded color palette
Laboratoria’s initial 4-colour palette expanded to a 12-colour palette, with a a range of tones and variations.
#02: Different sources for visual content
A library of icons was curated as a way to create a more comprehensive set of visual aids to portray the personality of the brand. Not only this, but the use of this resource would help the user to digest large sums of information, such as their syllabi.
#03 - Reaching the container’s full potential
Based on their container system, and after some playing around, I created a pattern to communicate one of Laboratoria+’s main values: the versatility and modularity of their service.
Final Metrics
After a process of around 6 months, Laboratoria+ was launched in 2023
8 🌏
LATAM countries and counting
+15
female-focused leadership courses
+150
active students
Luckily the collaboration with Laboratoria+ has been a lengthy one, and it did not take long before we worked together on their new milestone: the creation of their Laboratoria+ Digital Platform, which I will discuss in another case study.