Hit
T
your keyboard for express version →
•
2022
Connecting the construction business with the national government Quality Program.
Connecting the construction business with the national government Quality Program.
MY ROLE
Lead UX Design
TIMELINE
6 Months
RESPONSIBILITIES
UX Research
UX Research, Stakeholder Presentations, Prototyping, User Testing, UI Design.
Stakeholder Presentations
Prototyping
User Testing
UI Design
A talent acquisition platform seeking a compelling UX approach and immersive experience.
BMW STEP is amongst the most extensive technician training schemes across North America. They are recognized for their practical methodology and thorough enhancement of technical skills. Yet, their official website seemed antiquated and overloaded with content, lacking a narrative to support its value proposition. As a result, the site faced increased bounce rates, diminished traffic, and reduced page duration.
PPBQP-H* is a Program oriented to ensure construction players use qualified materials and techniques to build houses and buildings in Brazil.
The Program is a reference public policy that aims to level up the quality of social housing in Brazil, mainly aiming at the Energy Efficiency of the buildings and the sustainability of its building processes.
There was an urgent need to redesign their portal, which was outdated, non-responsive, and could hardly address important contents, services, and documents to its users.
PPBQP-H* is a Program oriented to ensure construction players use qualified materials and techniques to build houses and buildings in Brazil.
The Program is a reference public policy that aims to level up the quality of social housing in Brazil, mainly aiming at the Energy Efficiency of the buildings and the sustainability of its building processes.
There was an urgent need to redesign their portal, which was outdated, non-responsive, and could hardly address important contents, services, and documents to its users.
MY ROLE
Lead UX Design
TIMELINE
5 Months
RESPONSIBILITIES
UX Research
Stakeholder Presentations
Prototyping
User Testing
PPBQP-H* is a Program oriented to ensure construction players use qualified materials and techniques to build houses and buildings in Brazil.
The Program is a reference public policy that aims to level up the quality of social housing in Brazil, mainly aiming at the Energy Efficiency of the buildings and the sustainability of its building processes.
There was an urgent need to redesign their portal, which was outdated, non-responsive, and could hardly address important contents, services, and documents to its users.
PPBQP-H* is a Program oriented to ensure construction players use qualified materials and techniques to build houses and buildings in Brazil.
The Program is a reference public policy that aims to level up the quality of social housing in Brazil, mainly aiming at the Energy Efficiency of the buildings and the sustainability of its building processes.
There was an urgent need to redesign their portal, which was outdated, non-responsive, and could hardly address important contents, services, and documents to its users.
Main Goals
Main Goals
Main Goals
Improve the time on page rates.
Help users find official documents and certification processes more efficiently, reducing unnecessary calls to management.
Facilitate all three personas to find their areas in the portal, which respective services and qualified information.
Streamline the access to the certification process info.
Improve the time on page rates.
Help users find official documents and certification processes more efficiently, reducing unnecessary calls to management.
Facilitate all three personas to find their areas in the portal, which respective services and qualified information.
Streamline the access to the certification process info.
Improve the time on page rates.
Help users find official documents and certification processes more efficiently, reducing unnecessary calls to management.
Facilitate all three personas to find their areas in the portal, which respective services and qualified information.
Streamline the access to the certification process info.
Initial Challenge
Initial Challenge
First, we mapped the three personas through user interviews to understand their goals, pain points, and needs. Then, we educated client-side public agents on the new portal's strategy and mechanics to enhance digital literacy. Finally, we utilized intuitive patterns for each portal area, balancing UX best practices with users' mental models.
First, we mapped the three personas through user interviews to understand their goals, pain points, and needs. Then, we educated client-side public agents on the new portal's strategy and mechanics to enhance digital literacy. Finally, we utilized intuitive patterns for each portal area, balancing UX best practices with users' mental models.
Research
Research
The UX Research involved interviewing and mapping all of the portal's user groups and cataloging their profiles, needs, and digital proficiency levels. We also audited the entire sitemap to relocate areas that would make more sense together, improving the information architecture. Finally, we analyzed initiatives that were either similar in nature or used the best UX patterns, looking to use those patterns according to user profiles and the Program's needs.
The UX Research involved interviewing and mapping all of the portal's user groups and cataloging their profiles, needs, and digital proficiency levels. We also audited the entire sitemap to relocate areas that would make more sense together, improving the information architecture.
Finally, we analyzed initiatives that were either similar in nature or used the best UX patterns, looking to use those patterns according to user profiles and the Program's needs.
UX Strategy
UX Strategy
Most of the strategy was oriented toward making the portal mirror the Program's structure so that the users felt the UX was as seamless as possible. For that, we leverage the info collected in UX research with the best patterns we found in our audit, always making check-ins with the client and relying on user testing to confirm the platform's clarity and ease of use.
Most of the strategy was oriented toward making the portal mirror the Program's structure so that the users felt the UX was as seamless as possible.
For that, we leverage the info collected in UX research with the best patterns we found in our audit, always making check-ins with the client and relying on user testing to confirm the platform's clarity and ease of use.
IMPACT
IMPACT
IMPACT
+ 105%
average time on key portal pages
+ 105%
average time on key portal pages
+ 105%
average time on key portal pages
+ 105%
average time on key portal pages
-50%
phone calls to the Program's staff.
-50%
phone calls to the Program's staff.
-50%
phone calls to the Program's staff.
-50%
phone calls to the Program's staff.
3x
events on page, like downloads or applications
3x
events on page, like downloads or applications
3x
events on page, like downloads or applications
3x
events on page, like downloads or applications
FINDINGS
FINDINGS
FINDINGS
Interviews with 22 users from all three groups
There were three personas with different use cases and flows to perform in the portal.
One of the main features were the library, where engineers needed to access official documents and regulations. So the library should be be as intuitive as possible.
It was paramount to serve qualifiend info to all three personas. Hence we opted to offer a specialized area for each of them, with its own flow and priority of contents.
Since the Program didn't have direct competitors, we looked for references in the field in Italy, Canada, US and UK.
The best references had powerful document libraries, with a solid catalographhy.
Megamenu and fat footer were go to options to facilitate navigation in such an informaiton dense environment.
Usage of steppers, clear iconografy and info cards served as a reference to facilitate users way finding.
Interviews with 22 users from all three groups
There were three personas with different use cases and flows to perform in the portal.
One of the main features were the library, where engineers needed to access official documents and regulations. So the library should be be as intuitive as possible.
It was paramount to serve qualifiend info to all three personas. Hence we opted to offer a specialized area for each of them, with its own flow and priority of contents.
Since the Program didn't have direct competitors, we looked for references in the field in Italy, Canada, US and UK.
The best references had powerful document libraries, with a solid catalographhy.
Megamenu and fat footer were go to options to facilitate navigation in such an informaiton dense environment.
Usage of steppers, clear iconografy and info cards served as a reference to facilitate users way finding.
Interviews with 22 users from all three groups
There were three personas with different use cases and flows to perform in the portal.
One of the main features were the library, where engineers needed to access official documents and regulations. So the library should be be as intuitive as possible.
It was paramount to serve qualifiend info to all three personas. Hence we opted to offer a specialized area for each of them, with its own flow and priority of contents.
Since the Program didn't have direct competitors, we looked for references in Italy, Canada, the US, and the UK.
The best references had powerful document libraries with a solid catalog.
Megamenu and fat footer were go-to options to facilitate navigation in such an information-dense environment.
The use of steppers, clear iconography, and info cards served as a reference to facilitate users' way of finding information.
HIGHLIGHTS
HIGHLIGHTS
HIGHLIGHTS
Storytelling in Program Pages
Program pages were design to engage students and also to serve to recruiters as a prospective tool
Program pages had a narrative, starting with a real student video testimonial
Navigation allowed the user to quickly navigate all topics in the page. Being each designed as a hero.
Apply button fixed in the screen. Users can immediately hit apply whenever they feel ready to start the application
Storytelling in Program Pages
Program pages were design to engage students and also to serve to recruiters as a prospective tool
Program pages had a narrative, starting with a real student video testimonial
Navigation allowed the user to quickly navigate all topics in the page. Being each designed as a hero.
Apply button fixed in the screen. Users can immediately hit apply whenever they feel ready to start the application
USER TESTING
USER TESTING
TESTS
18 tests with engineers, managers, public agents, market agents.
The library area was a bit challenging for the user. The older users tended to look directly for the name of the document (which required a search box specifically for documents), but younger users preferred to browse the sidebar.
The systems that constitute the program are a kind of "main" area for part of the personas.
Since they had difficulty looking for it on the menu, we designed dedicated areas for them on the homepage. That solved the problem, as we could confirm on further moderated tests.
18 tests with engineers, managers, public agents, market agents.
The library area was a bit challenging for the user. The older users tended to look directly for the name of the document (which required a search box specifically for documents), but younger users preferred to browse the sidebar.
The systems that constitute the program are a kind of "main" area for part of the personas.
Since they had difficulty looking for it on the menu, we designed dedicated areas for them on the homepage. That solved the problem, as we could confirm on further moderated tests.
18 tests with engineers, managers, public agents, market agents.
The library area was a bit challenging for the user. The older users tended to look directly for the name of the document (which required a search box specifically for documents), but younger users preferred to browse the sidebar.
The systems that constitute the program are a kind of "main" area for part of the personas.
Since they had difficulty looking for it on the menu, we designed dedicated areas for them on the homepage. That solved the problem, as we could confirm on further moderated tests.
18 tests with engineers, managers, public agents, market agents.
The library area was a bit challenging for the user. The older users tended to look directly for the name of the document (which required a search box specifically for documents), but younger users preferred to browse the sidebar.
The systems that constitute the program are a kind of "main" area for part of the personas.
Since they had difficulty looking for it on the menu, we designed dedicated areas for them on the homepage. That solved the problem, as we could confirm on further moderated tests.
LEARNINGS
LEARNINGS
LEARNINGS
Integrate Service Design
This program portal was part of the City Ministry's primary strategy to qualify construction companies. Understanding how it connected to the ministry's service design was paramount to providing relevance to each feature for users.
Integrate Service Design
This program portal was part of the City Ministry's primary strategy to qualify construction companies. Understanding how it connected to the ministry's service design was paramount to providing relevance to each feature for users.
Integrate Service Design
This program portal was part of the City Ministry's primary strategy to qualify construction companies. Understanding how it connected to the ministry's service design was paramount to providing relevance to each feature for users.
Integrate Service Design
This program portal was part of the City Ministry's primary strategy to qualify construction companies. Understanding how it connected to the ministry's service design was paramount to providing relevance to each feature for users.
Accommodating multiple user profiles
The three personas in this project differed in profiles, goals, and needs, so attention was paid to each profile to consolidate all the adequate use cases within the same visual language and general user experience.
Accommodating multiple user profiles
The three personas in this project differed in profiles, goals, and needs, so attention was paid to each profile to consolidate all the adequate use cases within the same visual language and general user experience.
Accommodating multiple user profiles
The three personas in this project differed in profiles, goals, and needs, so attention was paid to each profile to consolidate all the adequate use cases within the same visual language and general user experience.
Accommodating multiple user profiles
The three personas in this project differed in profiles, goals, and needs, so attention was paid to each profile to consolidate all the adequate use cases within the same visual language and general user experience.
Pacing on delivery and presentations
This was the first time the client team had to redesign a website this size. So we got better by presenting small chunks of the redesign, explaining the benefit behind the changes and getting feedback
Pacing on delivery and presentations
This was the first time the client team had to redesign a website this size. So we got better by presenting small chunks of the redesign, explaining the benefit behind the changes and getting feedback
Pacing on delivery and presentations
This was the first time the client team had to redesign a website this size. So we got better by presenting small chunks of the redesign, explaining the benefit behind the changes and getting feedback
Pacing on delivery and presentations
This was the first time the client team had to redesign a website this size. So we got better by presenting small chunks of the redesign, explaining the benefit behind the changes and getting feedback
Helping the client manage a digital project
It was the first time the client's team managed a digital project, so we embarked on agile methods and scrum routines to help them become assertive with pacing, feedback, and the necessary documents and information inputs to ship on time.
Helping the client manage a digital project
It was the first time the client's team managed a digital project, so we embarked on agile methods and scrum routines to help them become assertive with pacing, feedback, and the necessary documents and information inputs to ship on time.
Helping the client manage a digital project
It was the first time the client's team managed a digital project, so we embarked on agile methods and scrum routines to help them become assertive with pacing, feedback, and the necessary documents and information inputs to ship on time.
Helping the client manage a digital project
It was the first time the client's team managed a digital project, so we embarked on agile methods and scrum routines to help them become assertive with pacing, feedback, and the necessary documents and information inputs to ship on time.
