Design of the main Colsubsidio's website
UX Designer
Overview
Description
Colsubsidio is one of the most significant Family Compensation Funds in Colombia. During the pandemic, this company shifted toward improving its interaction with customers through digital channels. They had a big challenge: to design and develop a digital product for each of the 7 businesses they had, including the main website, Colsubsidio.com, which was crucial to centralize the access to those products in one single place.
I designed the entire experience and my teammate designed the UI System that was used for the rest of the products. My work included designing the information architecture, the design templates for each level of navigation, setting limitations for content upload, and reaching agreements with the software development team to maintain high fidelity between the product we designed and the live site.​
​
Role
Sr. UX/UI Designer
Project parameters
9 months length
%208_28_16%20p_m_.png)
Information architecture
Colsubsidio has two target customers: people and businesses, this means that the website must have an Information Architecture for each. I was in charge of designing the information architecture for the Businesses Site.
I started understanding how the business was introducing itself to the customers. This was essential because the way the customer understands the business configuration is the way they navigate through the website. So I took the business services portfolio and designed the first sketch of the information architecture. I tested it with users using tree testing and card sorting and delivered the results to the team.​
​
I designed multiple workshops between the design and the business team to get to an agreement on the final architecture and the naming of each category. At the end of this negotiation process, we had the final architecture for the Businesses Site.
%208_48_11%20p_m_.png)
Website design
Colsubsidio hired an external service to develop the CRM for the website. The amount of content was huge, approximately 150 pages per site: People and Businesses. The challenge was big because the design system was too atomic and didn't have the appropriate components for all the content.
I designed multiple components to support content diversity, designed page templates for each navigation level and set content loading guidelines such as image sizes and character limits for each component.
​
I had to put out fires 🧑🚒 several times because some of the content was written based on some draft page templates that weren't the final ones. This lack of communication between teams involved the design of customized page templates based on the content. The final number of page templates was higher than expected, but it solved a larger issue that would have taken a significant amount of time from the team.
​
I learned to adapt to changes and problems on the fly and come up with solutions that work for all teams with the least impact over the project time.
​
The image shows the Figma file with all the page templates for each level.
​
%209_29_04%20p_m_.png)
QA
The next challenge was to ensure the quality of the website developed by the CRM provider.
It wasn't easy for developers to meet the visual standards we set, and the number of issues encountered in the process was enormous. Writing the issues found in a document was not enough for the team to understand our expectations, so we had to schedule meetings to share screens and explain our requirements to the developers. They resolved the issues during the meeting and that was the best solution for both teams to better communicate and negotiate taking into account the limitations and design requirements.
-
In addition to mental models, it is important to understand how people understand a business because they will navigate the website the same way.
​​
-
Have a clear map of the steps that should follow a project to design the CRM for the website:
-
Information Architecture
-
Templates for web pages (2 templates maximum per level of navigation)
-
Delivery of the templates to the developers
-
Content creation (texts, images, and icons)
-
QA of the templates developed
-
Content upload to the CRM
-
QA of the website with the content uploaded
-
Negotiation with the developer's team to get midpoints in issues
-
Launch the website 🚀
-
Those steps were useful for the next project I worked on at Colsubsidio, the design of the e-commerce platform for the Piscilago waterpark: Piscilago.co​
​
-
Being flexible when projects are not planned as they should be and being brave enough to propose solutions that may solve the problem with the least impact on the estimated time and the expected quality of the website.