Amine's Design
Overview
Climora is a browser-based platform designed to provide users with comprehensive, AI-curated environmental news and resources. It offers an interactive dashboard that not only aggregates trusted information but also facilitates community discussions, project collaborations, and personalized user experiences.
My Role
I led UX/UI design, user research, and branding to shape a platform that supports expert-community collaboration.
Goal Summary
Design a browser-based platform that delivers AI-curated environmental news and resources, fostering an informed and engaged user base. Facilitate community interaction through integrated discussion forums and collaborative tools.
Four Weeks.
One Project.
One Designer.
CLIMORA
02 The Challenge & Users
Problem Statement
Individuals passionate about environmental issues often face challenges in accessing consolidated, trustworthy information and lack platforms for meaningful community engagement.
​
Solution
​Climora addresses this by offering a web-based platform that curates reliable environmental news and fosters interactive community discussions, empowering users to stay informed and actively participate in sustainability initiatives.
User Research: Objective
To understand how environmentally conscious users interact with digital platforms, identify their information-seeking behaviors, and assess their interest in community engagement features.
​
Personas
​These personas are structured to guide design decisions and ensure the platform meets the needs of its diverse audience.
AMINA
Age: 26
Occupation: College
Student
Location: Nairobi
Bio
I am deeply committed to environmental issues and am always seeking real-time, actionable information on climate change and eco-action. Being a part of a community that shares a passion for sustainability and eco-friendly advocacy is very important to me. I'm concerned for the rhinos in particular.
Goals:
-
Educate local communities about sustainable farming practices.
-
Share success stories and challenges with a broader audience.
-
Access resources in both English and Swahili.
Frustrations
-
Limited access to localized environmental content.
-
Language barriers in accessing global resources.
-
Need for mobile-friendly platforms due to on-the-go nature of work.
Needs:
-
Multilingual support, especially Swahili.
-
Mobile-optimized interface for field access.
-
Community forums to share and learn from similar initiatives.
Preferred Platforms
-
Mobile devices for fieldwork.
-
Occasional desktop use for detailed reporting.
DAVID
Age: 42
Occupation: Environment-al Policy Analyst
Location San Diego
Goals:
-
Stay updated with the latest environmental policies and research.
-
Engage with a community of professionals to discuss sustainability strategies.
-
Access curated content relevant to environmental policy and advocacy.
Frustrations
-
Overwhelmed by the volume of environmental information online.
-
Difficulty finding a centralized platform for policy discussions.
-
Limited time to sift through non-relevant content.
Bio
As someone who is deeply concerned about climate change, I'm eager to access trustworthy, up-to-date news on environmental matters. Connecting with others through a community focused on sustainability is crucial to my advocacy work.
Needs:
-
AI-curated news tailored to environmental policy.
-
Forums for professional discourse and networking.
-
Tools to bookmark and organize relevant articles.
Preferred Platforms
-
Desktop for in-depth research.
-
Mobile for quick updates during commutes.
03 Strategy & Structure
Information Architecture
The Information Architecture (IA) is designed to directly address the UX findings, user goals, and the platform objectives. It's structured to:
-
Support AI-curated content delivery
-
Encourage community interaction
-
Offer personalized and intuitive experiences
-
Align with user research and usability findings
​
User Flow
A practical and streamlined user flow, optimized around core user goals and backed by UX research findings. It focuses on three key actions users are most likely to take:
-
Consume trusted environmental news
-
Engage in community discussions
-
Join or start meaningful sustainability projects​
Sign up
Search
Click a trending article
News Detail
News
Community
Home
Onboarding
Projects
Click a trending project
Project Detail
Click a niche discussion
Discussion
04 Sketches & Wireframes
Design Thinking - LoFi Prototype
-
Consistent Top Navigation (All Pages): Users can quickly switch between main sections without cognitive strain, supporting information and tasks handled in one sitting.
-
​Home (Daily Digest + Recent Discussions): Prioritizes a curated summary and active threads to immediately engage returning users with relevance.
-
News Feed + Detail View: List format allows for fast scanning, and detail view offers options like AI Summary View and Bookmarks to align with personalization and content control needs.​
-
Community Hub: "New Discussion" is top-level to invite contribution, and threaded layout maintains clarity during topic exploration.
-
New Discussion Post: Simple fields and a clear "Post" streamline content contribution.
-
Project Page: Filters (All, My Projects, Joined) align with collaborative workflows. "+ Start Project" button encourages user-generated content and initiative.
LoFi Web Wireframes
Launch Discussion
Suggest or start a topic
Fixed top navigation
Designed with a response,
modular grid.
User Goals
Stay informed, relevant and meaningful info
Richer engagement
Multitask, via custom deck
Stay informed
Trending discussions
Launch or join
Focused projects
LoFi Mobile Wireframes
Layout Logic: Each screen is structured around a clean, vertical flow that supports clarity and ease of navigation. Key content and actions are prioritized near thumb zones to enhance usability on small screens.​
​
User Goals:
-
Quickly access curated environmental news
-
Join and contribute to community discussions
-
Explore and collaborate on sustainability projects
​​
Design Adaptation: The mobile version preserves the structure of the web-first design through simplified layouts and collapsible menus. High-priority actions such as "Start Project" or "Post" remain visible and easily accessible for seamless task execution.
05 Branding & UI Design
Moodboard​​​
Designed to evoke emotion that connects a community through nature, agriculture, holistic healing, international projects, animals, and so on.
Style Guide
The Information Architecture (IA) is designed to directly address the UX findings, user goals, and the platform objectives. It's structured to:​​​​
Style Guide: Overview​
Iconography
-
Used simple, line-based icons for quick recognition and intuitive navigation
-
Maintains consistency across interface, reinforcing visual clarity and user confidence
-
Universally understandable, supporting accessibility for a diverse audience
​
Color Style
-
Applied an earthy, muted palette to evoke calmness, trust, and environmental awareness
-
Strategically used color to create visual heirarchy, guiding the user's focus effortlessly
-
Chosen for emotional resonance with the brand's mission and to reduce cognitive load
​
Effects & Motion
-
Incorporated soft shadows and smooth transitions to add depth and responsiveness
-
Avoided heavy animations to keep the interface lightweight, fast, and distraction-free
-
Reinforces a modern, polished feel while supporting an intuitive user flow
​
Typography
-
Selected a clean, bold font for maximum readability across all screen sizes​
-
Used consistent sizing and font weights to create clear heirarchy and improve scannability
-
Balances a modern aesthetic with strong usability, enhancing both form and function
​
HiFi Web / Mobile Wireframes
Layout Logic: Designed with a responsive, modular grid, the web interface balances content density with clarity. A fixed top navigation ensures quick access to core areas, while dashboards, cards, and expandable panels allow users to scan, engage, and explore efficiently. ​
​
User Goals:
-
Stay informed with curated environmental news
-
Participate in meaningful community discussions
-
Launch or join sustainability-focused projects
​
Design Adaptation: The web layout takes advantage of horizontal space to show multiple content types side by side - like news and discussions- enabling multitasking and deeper exploration without losing context. Components such as AI summaries, filters, and interactive cards are introduced for richer, desktop-optimized engagement.
​​
The mobile wireframes adapt a vertical arrangement maintaining the same goal.
WEB HIFI WIREFRAMES
MOBILE HIFI WIREFRAMES
​Base structure, and aesthetic is meant to evoke a cozy, minimal display and color palette. The creamy, almost pastel earth tones are balancing a holistic, and professional atmosphere. We are now approaching final edits.
06 Prototype & Testing
* KEY CHANGES MADE FROM USER TESTING
BEFORE:
-
Interactive Prototype
-
Usability Testing & Iterations
Include a Figma embed + key changes you made from user testing (before/after is great here).
AFTER:
07 Reflection & Next Steps
-
Lessons Learned
-
Future Features
-
Optional Impact Metrics
🎯 Why it works: Ends strong. Reflective thinking shows maturity and product thinking.