Designing a high performance Website
Front-End Developers
Full stack marketer
Sales team
UX Designer: Conceptualized information architecture through sitemaps, user flows, and wireframing.
User Researcher: Conducted Interviews, Tree, and Usability Testing.
UI Designer: Designed User Interface and Prototyping.
Context of the project
Irix is a field team management software that helps companies increase the efficiency and productivity of personnel working outside the office, such as commercial agents, drivers, couriers, and more.
Our key challenges
Where did we start?
User research
The first thing that was done was to identify the users of the product and investigate why they would buy this type of products and what variables influence the decision to use the software in order to devise the solution. We also investigated what type of content they were interested in to attract prospects and generate more traffic.
This was the result of the investigation
4 types of users and 6 segments were identified in which the product solves the problem, of course, having different pain points and objectives depending on the segment.
But, we found common patterns by which the user would buy or use the product in B2B businesses and topics of interest to create valuable content.
To maintain confidentiality, I have chosen not to include the statistics of the key insights. I’d be happy to walk you through it in person.
Information architecture
To understand the magnitude of the project and the content, a sitemap was created to later create the user flows.
We also wanted to be sure that the user was directed to the right page of the site as planned. Therefore, we did a tree test to validate the sitemap and the labeling of each section.
Tree testing
5 tasks were created, the study was applied to 6 users and the result was this:
In summary, the labeling of each section of the site was validated.
However, given the results of tasks 4 and 5, which did not have very good results, it was decided to design a solution per segment that would show certain features, success stories, and even the categories of the blog specifically to generate greater empathy with the user. User and greater possibilities of making more lead conversions, as seen in the image of the iterated sitemap.
We also made user flows of the most important processes of the website
User flow 1: Attract prospects for greater traffic to the website and convert visits into leads. “If you give me valuable content in exchange, I will fill out the form.” We both win.
User flow 2: Attract, inspire, and convert leads through success stories and customer testimonials.
User flow 3: Contact the sales and technical support team in a better way, (previously it was done using the same form).
The time has come to land the ideas
We initiated the wireframing phase to establish the foundational blueprint for the interface. Our primary aim was to validate the logical flow and systematically define the content prioritization and visual hierarchy for the user, ensuring the design aligns with the established Information Architecture.
We wanted to reflect the brand personality into a dinamicx interface
A website made to atract and convert potential clients
Blog productive trends
To increase traffic and drive top-of-funnel lead generation, we devised a segmented content strategy. This involved publishing blog articles focused on productive trends, with content strategically tailored to address the specific needs of each user segment. This content served as the entry point, featuring a clear call-to-action (CTA) promoting high-value assets, such as e-books. Users accessed these assets via a dedicated landing page, where form submission successfully converted visits into qualified leads.
Learn stories of companies like yours that achieved great results
Based on insights revealing the high value of peer validation, we deployed a content strategy focused on leveraging social proof. This involved creating segment-aligned success stories and testimonials to foster user empathy.
For B2B contexts, we specifically integrated client social validation—showcasing logos and strategic partnerships—to strengthen credibility and reduce perceived risk at the point of application.
Functionalities addressed understand the solution by segment
We also focused on improving product clarity and cognitive mapping. We achieved this by introducing contextual filters in the primary menu, enabling users to efficiently navigate and self-select solutions based on their needs. This was complemented by using expressive iconography and illustrations to visually communicate product functionality and benefits, significantly reducing the cognitive effort required to understand the offering.
Responsive version from the web
For the responsive implementation, we rigorously applied content prioritization to optimize for scannability. This ensured that only the most mission-critical information was immediately visible on smaller viewports, thereby minimizing cognitive load and maintaining a clean, effective visual hierarchy across all devices.
Typography and UI Components
To ensure cross-platform visual consistency and brand alignment, Lato was selected as the designated typeface for all elements, standardizing the product's typography within the design system.
I led the implementation of the Atomic Design framework to optimize development efficiency. In this phase, I focused on creating a reusable component library that streamlined the design process for future sections, iterations, and upcoming landing pages, thereby reducing the design-to-development time and ensuring clear, efficient communication with the engineering team.
