ComunidadFeliz website redesign
Redesign of the ComunidadFeliz website, developed as a project for the UX/UI Diploma at Coderhouse, with the complete process: research, information architecture, design system, prototype and usability testing.
Context
ComunidadFeliz is a platform for managing condominiums and residential communities. Its website had usability, flow and interface issues: information was hard to find and it was not clear what the service offered to each type of user. The project started as coursework for the UX/UI Diploma at Coderhouse, with the goal of redesigning the site by applying a complete UX process.
My role
I carried out the project from start to finish: research, analysis, information architecture, style guide, design system, functional prototype and usability testing.
Process
Desk research. I reviewed the current site with a heuristic evaluation, identified improvement opportunities, and reviewed the app’s rating and reviews on Google Play, industry news and design trends.
User research. I interviewed residents and property managers. With the findings I built an empathy map, a user persona, a user journey map, a needs matrix and a Lean UX Canvas to define the problem and the hypotheses.
Information architecture. I evaluated the current architecture with tree testing. In the task of finding the institutional information (“about us”), no participant reached it through the direct path and 70% did not complete the task. Based on these results I proposed a new navigation structure. I prioritized features with an FDV matrix (feasibility, desirability and viability) and defined the journeys with task flows and wireflows.
Identity and design system. I defined the brand’s purpose with the Golden Circle, a voice and tone guide, and a style guide. I then built a simplified design system, suited to the project’s scale, with colors, typography (Plus Jakarta Sans), spacing, grids and components: buttons, inputs, icons, alerts, cards, navigation bar and mega menu.
Prototype and testing. Using the design system, I built a functional prototype in Figma and validated it with moderated and unmoderated usability tests, with around 16 participants and two key tasks.
Key decisions
- Reorganize navigation based on the tree testing results, so each user reaches the information they need faster.
- Use a mega menu to organize the service offering without overloading the home page.
- Build a design system before the prototype, to keep all screens consistent.
- Write messages in a friendly, clear tone, as defined in the voice and tone guide.
Outcome
In the usability tests, both tasks evaluated were completed with a 100% success rate. The result is a clearer, more organized website proposal, with a documented design system and a new information architecture validated with users.