La Colmena Cimarrona
A non-profit organization based in Puerto Rico that works to promote food sovereignty and agroecology
Objective
Redesign a section of the La Colmena Cimarrona website to improve usability, aesthetics, and support its mission of promoting food sovereignty and agroecology in Puerto Rico
My Role
Duration
Tools
UX Designer
1 Day
Adobe Xd
Problem 🤔
The section lacked usability, visual coherence, and failed to engage users
The original website section lacked visual coherence and usability, hindering user engagement. The client sought a redesign to improve layout, readability, and integrate elements like social media links
Main Issues
-
Needed improvement in layout and readability
-
Poor usability, failing to engage users
-
Missing social media links
-
Lacked visual coherence
* Image provided by client
The Solution 💡
The redesign featured a vertical layout, social media links, and improved usability
The redesign featured a vertical layout to highlight key information, clickable social media links for engagement, and clean typography for better readability. It was based on competitor research and client feedback to enhance usability.
Research 📖
I reviewed competitor websites and other sections of the client’s website to gather insights for the redesign
For this project, I reviewed other non-profit websites and various pages on the client's site. Due to time constraints, the research process was brief, but I discovered the client’s preference for a vertical design, which helped inspire design ideas.
Kanopi Studios
Care
Climate Reality Project
Nature Conservancy
-
Consistent Branding
-
Client Testimonials
-
Engaging Visuals
-
Responsive Design
-
Consistent Branding
-
Clear Visual Hierarchy
-
User-Centered Design
-
Minimalist Design
-
Responsive Design
-
Consistent Branding
-
Clear Visual Hierarchy
-
Engaging Visuals
-
Responsive Design
-
Consistent Branding
-
Clear Visual Hierarchy
-
User Testimonials
-
Responsive Design
Design ✏️
I created low-fidelity wireframes to define the structure, focusing on navigation and layout to guide user flow.
Low-Fidelity Wireframe
Next I designed the final layout using Adobe XD, ensuring it aligned with the client’s branding and design requests
Final Design
Design Approach
-
Applied the Golden Ratio for visual balance, with the logo as the focal point.
-
The partial visibility of the Areas of Work section encourages users to scroll for more content.
-
Prioritized clean, readable text and added a relatable image from the company’s social media to foster a personal connection.
-
Used large text for emphasis and clear labels on clickable social media icons, improving accessibility and interaction using Fitt’s Law.
-
Integrated effective call-to-action phrasing like "Want to Support Us?" to drive user participation.
Outcome and Reflection
The client was very satisfied with the final design and did not request any changes
After completing the design, I handed it over to the client for feedback. The client was pleased with the design, gave it a 5-star rating, and left a positive review with no requested changes.
Reflection
This project taught me the importance of research and competitive analysis, as well as the foundational role of the idea phase in design. I realized I could have paid more attention to page hotspots and how they integrate into the design.
I also learned that design is just one part of the broader User Experience Design process. However, the timezone difference between me and the client created some delays, and I’ll need to account for this in future projects to ensure smoother communication and faster turnaround times.
Overall, I enjoyed working on the project, and the client was clear about their needs, making the process smooth.